Skip to content

Commit

Permalink
Merge pull request #27 from lluiscab/lluiscab-dev
Browse files Browse the repository at this point in the history
Added activeLinkClass and hideNavigation props
  • Loading branch information
wagoid authored Aug 3, 2017
2 parents 2a3a4d9 + 62e0349 commit 584d08d
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 17 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,9 @@ Name | Type | Default | Description
`nextPageText` | String / ReactElement | `` | Text of next page navigation button
`innerClass` | String | `pagination` | Class name of `<ul>` tag
`activeClass` | String | `active` | Class name of active `<li>` tag
`activeLinkClass` | String | | Class name of active `<a>` tag
`itemClass` | String | | Default class of the `<li>` tag
`linkClass` | String | | Default class of the `<a>` tag
`disabledClass` | String | `disabled` | Class name of the first, previous, next and last `<li>` tags when disabled
`hideDisabled` | Boolean | `false` | Hide navigation buttons (prev page, next page) if they are disabled.
`hideNavigation` | Boolean | `false` | Hide navigation buttons (prev page, next page)
7 changes: 5 additions & 2 deletions dist/Page.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,14 +61,15 @@ var Page = function (_Component) {
activeClass = _props2.activeClass,
itemClass = _props2.itemClass,
linkClass = _props2.linkClass,
activeLinkClass = _props2.activeLinkClass,
disabledClass = _props2.disabledClass,
isActive = _props2.isActive,
isDisabled = _props2.isDisabled;


var css = (0, _classnames2.default)((_cx = {}, _defineProperty(_cx, activeClass, isActive), _defineProperty(_cx, disabledClass, isDisabled), _defineProperty(_cx, itemClass, itemClass !== undefined), _cx));
var css = (0, _classnames2.default)(itemClass, (_cx = {}, _defineProperty(_cx, activeClass, isActive), _defineProperty(_cx, disabledClass, isDisabled), _cx));

var linkCss = (0, _classnames2.default)(_defineProperty({}, linkClass, linkClass !== undefined));
var linkCss = (0, _classnames2.default)(linkClass, _defineProperty({}, activeLinkClass, isActive));

return _react2.default.createElement(
"li",
Expand All @@ -92,6 +93,7 @@ Page.propTypes = {
isActive: _propTypes2.default.bool.isRequired,
isDisabled: _propTypes2.default.bool,
activeClass: _propTypes2.default.string,
activeLinkClass: _propTypes2.default.string,
itemClass: _propTypes2.default.string,
linkClass: _propTypes2.default.string,
disabledClass: _propTypes2.default.string
Expand All @@ -101,6 +103,7 @@ Page.defaultProps = {
disabledClass: "disabled",
itemClass: undefined,
linkClass: undefined,
activeLinkCLass: undefined,
isActive: false,
isDisabled: false
};
Expand Down
22 changes: 14 additions & 8 deletions dist/Pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,10 @@ var Pagination = function (_React$Component) {
activeClass = _props.activeClass,
itemClass = _props.itemClass,
linkClass = _props.linkClass,
activeLinkClass = _props.activeLinkClass,
disabledClass = _props.disabledClass,
hideDisabled = _props.hideDisabled;
hideDisabled = _props.hideDisabled,
hideNavigation = _props.hideNavigation;


var paginationInfo = new _paginator2.default(itemsCountPerPage, pageRangeDisplayed).build(totalItemsCount, activePage);
Expand All @@ -72,12 +74,13 @@ var Pagination = function (_React$Component) {
onClick: onChange,
itemClass: itemClass,
linkClass: linkClass,
activeClass: activeClass
activeClass: activeClass,
activeLinkClass: activeLinkClass
}));
}
}

hideDisabled && !paginationInfo.has_previous_page || pages.unshift(_react2.default.createElement(_Page2.default, {
hideDisabled && !paginationInfo.has_previous_page || hideNavigation || pages.unshift(_react2.default.createElement(_Page2.default, {
key: "prev" + paginationInfo.previous_page,
pageNumber: paginationInfo.previous_page,
onClick: onChange,
Expand All @@ -88,7 +91,7 @@ var Pagination = function (_React$Component) {
disabledClass: disabledClass
}));

hideDisabled && !paginationInfo.has_previous_page || pages.unshift(_react2.default.createElement(_Page2.default, {
hideDisabled && !paginationInfo.has_previous_page || hideNavigation || pages.unshift(_react2.default.createElement(_Page2.default, {
key: "first",
pageNumber: 1,
onClick: onChange,
Expand All @@ -99,7 +102,7 @@ var Pagination = function (_React$Component) {
disabledClass: disabledClass
}));

hideDisabled && !paginationInfo.has_next_page || pages.push(_react2.default.createElement(_Page2.default, {
hideDisabled && !paginationInfo.has_next_page || hideNavigation || pages.push(_react2.default.createElement(_Page2.default, {
key: "next" + paginationInfo.next_page,
pageNumber: paginationInfo.next_page,
onClick: onChange,
Expand All @@ -110,7 +113,7 @@ var Pagination = function (_React$Component) {
disabledClass: disabledClass
}));

hideDisabled && !paginationInfo.has_next_page || pages.push(_react2.default.createElement(_Page2.default, {
hideDisabled && !paginationInfo.has_next_page || hideNavigation || pages.push(_react2.default.createElement(_Page2.default, {
key: "last",
pageNumber: paginationInfo.total_pages,
onClick: onChange,
Expand Down Expand Up @@ -152,8 +155,10 @@ Pagination.propTypes = {
itemClass: _propTypes2.default.string,
linkClass: _propTypes2.default.string,
activeClass: _propTypes2.default.string,
activeLinkClass: _propTypes2.default.string,
disabledClass: _propTypes2.default.string,
hideDisabled: _propTypes2.default.bool
hideDisabled: _propTypes2.default.bool,
hideNavigation: _propTypes2.default.bool
};
Pagination.defaultProps = {
itemsCountPerPage: 10,
Expand All @@ -165,7 +170,8 @@ Pagination.defaultProps = {
lastPageText: "»",
innerClass: "pagination",
itemClass: undefined,
linkClass: undefined
linkClass: undefined,
activeLinkClass: undefined
};
var _default = Pagination;
exports.default = _default;
Expand Down
7 changes: 6 additions & 1 deletion src/components/Page.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default class Page extends Component {
isActive: PropTypes.bool.isRequired,
isDisabled: PropTypes.bool,
activeClass: PropTypes.string,
activeLinkClass: PropTypes.string,
itemClass: PropTypes.string,
linkClass: PropTypes.string,
disabledClass: PropTypes.string
Expand All @@ -23,6 +24,7 @@ export default class Page extends Component {
disabledClass: "disabled",
itemClass: undefined,
linkClass: undefined,
activeLinkCLass: undefined,
isActive: false,
isDisabled: false
}
Expand All @@ -43,6 +45,7 @@ export default class Page extends Component {
activeClass,
itemClass,
linkClass,
activeLinkClass,
disabledClass,
isActive,
isDisabled,
Expand All @@ -53,7 +56,9 @@ export default class Page extends Component {
[disabledClass]: isDisabled,
});

const linkCss = cx(linkClass);
const linkCss = cx(linkClass, {
[activeLinkClass]: isActive
});

return (
<li className={css} onClick={::this.handleClick}>
Expand Down
18 changes: 12 additions & 6 deletions src/components/Pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,10 @@ export default class Pagination extends React.Component {
itemClass: PropTypes.string,
linkClass: PropTypes.string,
activeClass: PropTypes.string,
activeLinkClass: PropTypes.string,
disabledClass: PropTypes.string,
hideDisabled: PropTypes.bool
hideDisabled: PropTypes.bool,
hideNavigation: PropTypes.bool
}

static defaultProps = {
Expand All @@ -45,6 +47,7 @@ export default class Pagination extends React.Component {
innerClass: "pagination",
itemClass: undefined,
linkClass: undefined,
activeLinkClass: undefined
}

buildPages() {
Expand All @@ -62,8 +65,10 @@ export default class Pagination extends React.Component {
activeClass,
itemClass,
linkClass,
activeLinkClass,
disabledClass,
hideDisabled
hideDisabled,
hideNavigation
} = this.props;

const paginationInfo = new paginator(itemsCountPerPage, pageRangeDisplayed)
Expand All @@ -81,12 +86,13 @@ export default class Pagination extends React.Component {
itemClass={itemClass}
linkClass={linkClass}
activeClass={activeClass}
activeLinkClass={activeLinkClass}
/>
);
}
}

(hideDisabled && !paginationInfo.has_previous_page) || pages.unshift(
((hideDisabled && !paginationInfo.has_previous_page) || hideNavigation) || pages.unshift(
<Page
key={"prev" + paginationInfo.previous_page}
pageNumber={paginationInfo.previous_page}
Expand All @@ -99,7 +105,7 @@ export default class Pagination extends React.Component {
/>
);

(hideDisabled && !paginationInfo.has_previous_page) || pages.unshift(
((hideDisabled && !paginationInfo.has_previous_page) || hideNavigation) || pages.unshift(
<Page
key={"first"}
pageNumber={1}
Expand All @@ -112,7 +118,7 @@ export default class Pagination extends React.Component {
/>
);

(hideDisabled && !paginationInfo.has_next_page) || pages.push(
((hideDisabled && !paginationInfo.has_next_page) || hideNavigation) || pages.push(
<Page
key={"next" + paginationInfo.next_page}
pageNumber={paginationInfo.next_page}
Expand All @@ -125,7 +131,7 @@ export default class Pagination extends React.Component {
/>
);

(hideDisabled && !paginationInfo.has_next_page) || pages.push(
((hideDisabled && !paginationInfo.has_next_page) || hideNavigation) || pages.push(
<Page
key={"last"}
pageNumber={paginationInfo.total_pages}
Expand Down
57 changes: 57 additions & 0 deletions src/example/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,20 @@ export default class App extends Component {
/>
);
}`;

const hideNavigation = `render() {
return (
<Pagination
hideNavigation
pageRangeDisplayed={10}
activePage={this.state.activePage}
itemsCountPerPage={PER_PAGE}
totalItemsCount={TOTAL_COUNT}
onChange={this.handlePageChange}
/>
);
}`;

const overrideText = `render() {
return (
<Pagination
Expand Down Expand Up @@ -193,6 +207,49 @@ export default class App extends Component {
</div>
</div>
</div>

<div className="panel panel-default">
<div className="panel-heading">
<a href='#nav-arrows'>
<h4 id='nav-arrows'>Hide navigation arrows</h4>
</a>
</div>
<div className="panel-body">
<SyntaxHighlighter language='javascript' style={sunburst}>{hideNavigation}</SyntaxHighlighter>
<div className='text-center'>
<Pagination
hideNavigation
pageRangeDisplayed={10}
activePage={this.state.activePage}
itemsCountPerPage={PER_PAGE}
totalItemsCount={TOTAL_COUNT}
onChange={this.handlePageChange}
/>
</div>
</div>
</div>

<div className="panel panel-default">
<div className="panel-heading">
<a href='#nav-arrows'>
<h4 id='nav-arrows'>Hide navigation arrows</h4>
</a>
</div>
<div className="panel-body">
<SyntaxHighlighter language='javascript' style={sunburst}>{hideNavigation}</SyntaxHighlighter>
<div className='text-center'>
<Pagination
activeLinkClass={"is-selected"}
pageRangeDisplayed={10}
activePage={this.state.activePage}
itemsCountPerPage={PER_PAGE}
totalItemsCount={TOTAL_COUNT}
onChange={this.handlePageChange}
/>
</div>
</div>
</div>

</div>
);
}
Expand Down

0 comments on commit 584d08d

Please sign in to comment.