diff --git a/src/components/Pagination/Pager.js b/src/components/Pagination/Pager.js new file mode 100644 index 00000000000..b0c452b4600 --- /dev/null +++ b/src/components/Pagination/Pager.js @@ -0,0 +1,86 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { Icon } from '../Icon'; +import { noop } from '../../common/helpers'; + +/** + * Pager component for Patternfly React + */ +const Pager = ({ + baseClassName, + className, + messages, + disableNext, + onNextPage, + disablePrevious, + onPreviousPage +}) => { + const classes = classNames('pager', className); + return ( + + ); +}; +Pager.propTypes = { + /** Base css class */ + baseClassName: PropTypes.string, + /** Additional css classes */ + className: PropTypes.string, + /** message text inputs for i18n */ + messages: PropTypes.shape({ + nextPage: PropTypes.string, + previousPage: PropTypes.string + }), + /** next button disabled */ + disableNext: PropTypes.bool, + /** next page callback */ + onNextPage: PropTypes.func, + /** previous button disabled */ + disablePrevious: PropTypes.bool, + /** previous page callback */ + onPreviousPage: PropTypes.func +}; +Pager.defaultProps = { + baseClassName: 'content-view-pf-pagination', + className: '', + messages: { + nextPage: 'Next', + previousPage: 'Previous' + }, + disableNext: false, + onNextPage: noop, + disablePrevious: false, + onPreviousPage: noop +}; +export default Pager; diff --git a/src/components/Pagination/Pager.test.js b/src/components/Pagination/Pager.test.js new file mode 100644 index 00000000000..c1e1903eb6e --- /dev/null +++ b/src/components/Pagination/Pager.test.js @@ -0,0 +1,71 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import { Pager } from './index'; + +const testPagerSnapshot = props => ; + +test('Pager default renders properly', () => { + const component = mount(testPagerSnapshot(Pager)); + + expect(component.render()).toMatchSnapshot(); +}); + +test('Pager mini size renders properly', () => { + const component = mount( + testPagerSnapshot({ + className: 'pager-sm', + messages: { + nextPage: 'The Next Page', + previousPage: 'The Previous Page' + }, + disableNext: true, + disablePrevious: true + }) + ); + + expect(component.render()).toMatchSnapshot(); +}); + +test('Pager buttons fire when enabled', () => { + let eventCount = 0; + const component = mount( + testPagerSnapshot({ + onPreviousPage: () => eventCount++, + onNextPage: () => eventCount++ + }) + ); + + component + .find('a') + .first() + .simulate('click'); + component + .find('a') + .last() + .simulate('click'); + + expect(eventCount).toBe(2); +}); + +test('Pager buttons do not fire when disabled', () => { + let eventCount = 0; + const component = mount( + testPagerSnapshot({ + onPreviousPage: () => eventCount++, + onNextPage: () => eventCount++, + disableNext: true, + disablePrevious: true + }) + ); + + component + .find('a') + .first() + .simulate('click'); + component + .find('a') + .last() + .simulate('click'); + + expect(eventCount).toBe(0); +}); diff --git a/src/components/Pagination/Pagination.stories.js b/src/components/Pagination/Pagination.stories.js index c86f2602983..710b9c65a8c 100644 --- a/src/components/Pagination/Pagination.stories.js +++ b/src/components/Pagination/Pagination.stories.js @@ -12,7 +12,12 @@ import { import { inlineTemplate } from '../../../storybook/decorators/storyTemplates'; import { DOCUMENTATION_URL } from '../../../storybook/constants'; -import { PaginationRow, Paginator, PAGINATION_VIEW_TYPES } from './index'; +import { + Pager, + PaginationRow, + Paginator, + PAGINATION_VIEW_TYPES +} from './index'; import { MockPaginationRow, mockPaginationSource @@ -21,6 +26,49 @@ import { const stories = storiesOf('Pagination', module); stories.addDecorator(withKnobs); +stories.add( + 'Pager', + withInfo()(() => { + const story = ( +
+

Default size

+ +
+

Mini size

+ +
+ ); + return inlineTemplate({ + title: 'Pager', + documentationLink: `${ + DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS + }#pagination`, + story, + description: ( +
+ Pager is a stateless functional component which previous and next + links. See Action Logger for details. +
+ ) + }); + }) +); + stories.add( 'Pagination row', withInfo({ diff --git a/src/components/Pagination/__snapshots__/Pager.test.js.snap b/src/components/Pagination/__snapshots__/Pager.test.js.snap new file mode 100644 index 00000000000..d8c3f0fb174 --- /dev/null +++ b/src/components/Pagination/__snapshots__/Pager.test.js.snap @@ -0,0 +1,71 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Pager default renders properly 1`] = ` + +`; + +exports[`Pager mini size renders properly 1`] = ` + +`; diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js index 59e78e1eb9a..20c1281822e 100644 --- a/src/components/Pagination/index.js +++ b/src/components/Pagination/index.js @@ -1,5 +1,6 @@ import paginate from './paginate'; import { PAGINATION_VIEW, PAGINATION_VIEW_TYPES } from './PaginationConstants'; +import Pager from './Pager'; import Paginator from './Paginator'; import PaginationRow from './PaginationRow'; import PaginationRowAmountOfPages from './PaginationRowAmountOfPages'; @@ -20,6 +21,7 @@ PaginationRow.PAGINATION_VIEW_TYPES = PAGINATION_VIEW_TYPES; export { paginate, + Pager, Paginator, PAGINATION_VIEW, PAGINATION_VIEW_TYPES,