-
Notifications
You must be signed in to change notification settings - Fork 380
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(react-grid): Ability to show all rows on a page via page size se…
…lector (#150)
- Loading branch information
1 parent
fe60801
commit 8af3dde
Showing
21 changed files
with
443 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 17 additions & 5 deletions
22
packages/dx-react-grid-bootstrap3/src/plugins/paging-panel.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,25 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { PagingPanel as PagingPanelBase } from '@devexpress/dx-react-grid'; | ||
import { Pager } from '../templates/pager'; | ||
|
||
const pagerTemplate = props => <Pager {...props} />; | ||
|
||
export const PagingPanel = props => ( | ||
export const PagingPanel = ({ showAllText, ...restProps }) => ( | ||
<PagingPanelBase | ||
pagerTemplate={pagerTemplate} | ||
{...props} | ||
pagerTemplate={ | ||
props => ( | ||
<Pager | ||
showAllText={showAllText} | ||
{...props} | ||
/> | ||
) | ||
} | ||
{...restProps} | ||
/> | ||
); | ||
|
||
PagingPanel.propTypes = { | ||
showAllText: PropTypes.string, | ||
}; | ||
PagingPanel.defaultProps = { | ||
showAllText: undefined, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
packages/dx-react-grid-bootstrap3/src/templates/page-size-selector.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
import React from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { PageSizeSelector } from './page-size-selector'; | ||
|
||
describe('PageSizeSelector', () => { | ||
describe('#render', () => { | ||
const mountPageSizeSelector = ({ | ||
pageSize, | ||
allowedPageSizes, | ||
showAllText, | ||
onPageSizeChange = () => {}, | ||
}) => mount(<PageSizeSelector | ||
pageSize={pageSize} | ||
allowedPageSizes={allowedPageSizes} | ||
showAllText={showAllText} | ||
onPageSizeChange={onPageSizeChange} | ||
/>); | ||
|
||
it('can show info about page sizes', () => { | ||
const tree = mountPageSizeSelector({ | ||
pageSize: 10, | ||
allowedPageSizes: [5, 10], | ||
}); | ||
|
||
const mobileSelector = tree.find('select'); | ||
const desktopSelector = tree.find('ul.pagination'); | ||
const mobileSelectorItems = mobileSelector.find('option'); | ||
const desktopSelectorItems = desktopSelector.find('li'); | ||
|
||
expect(mobileSelector).toHaveLength(1); | ||
expect(mobileSelector.prop('value')).toBe(10); | ||
expect(mobileSelectorItems).toHaveLength(2); | ||
expect(mobileSelectorItems.at(0).prop('value')).toBe(5); | ||
expect(mobileSelectorItems.at(0).text()).toBe('5'); | ||
expect(mobileSelectorItems.at(1).prop('value')).toBe(10); | ||
expect(mobileSelectorItems.at(1).text()).toBe('10'); | ||
|
||
expect(desktopSelector).toHaveLength(1); | ||
expect(desktopSelectorItems).toHaveLength(2); | ||
expect(desktopSelectorItems.at(0).prop('className')).toBe(''); | ||
expect(desktopSelectorItems.at(0).text()).toBe('5'); | ||
expect(desktopSelectorItems.at(1).prop('className')).toBe('active'); | ||
expect(desktopSelectorItems.at(1).text()).toBe('10'); | ||
}); | ||
|
||
it('can render the \'All\' item', () => { | ||
const tree = mountPageSizeSelector({ | ||
pageSize: 10, | ||
allowedPageSizes: [5, 10, 0], | ||
}); | ||
|
||
const mobileSelector = tree.find('select'); | ||
const desktopSelector = tree.find('ul.pagination'); | ||
const mobileSelectorItems = mobileSelector.find('option'); | ||
const desktopSelectorItems = desktopSelector.find('li'); | ||
|
||
expect(mobileSelectorItems).toHaveLength(3); | ||
expect(mobileSelectorItems.at(2).prop('value')).toBe(0); | ||
expect(mobileSelectorItems.at(2).text()).toBe('All'); | ||
|
||
expect(desktopSelectorItems).toHaveLength(3); | ||
expect(desktopSelectorItems.at(2).text()).toBe('All'); | ||
}); | ||
|
||
it('can customize the \'All\' item text', () => { | ||
const tree = mountPageSizeSelector({ | ||
pageSize: 10, | ||
allowedPageSizes: [5, 10, 0], | ||
showAllText: 'Show all', | ||
}); | ||
|
||
const mobileSelector = tree.find('select'); | ||
const desktopSelector = tree.find('ul.pagination'); | ||
|
||
expect(mobileSelector.find('option').at(2).text()).toBe('Show all'); | ||
expect(desktopSelector.find('li').at(2).text()).toBe('Show all'); | ||
}); | ||
|
||
it('can handle the \'onPageSizeChange\' event', () => { | ||
const onPageSizeChange = jest.fn(); | ||
const tree = mountPageSizeSelector({ | ||
pageSize: 5, | ||
allowedPageSizes: [5, 10], | ||
onPageSizeChange, | ||
}); | ||
|
||
const mobileSelector = tree.find('select'); | ||
const desktopSelector = tree.find('ul.pagination'); | ||
|
||
mobileSelector.simulate('change', { target: { value: 10 } }); | ||
desktopSelector.find('li > a').at(0).simulate('click'); | ||
|
||
expect(onPageSizeChange.mock.calls[0][0]).toBe(10); | ||
expect(onPageSizeChange.mock.calls[1][0]).toBe(5); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.