Web: Components: Added onSelectPage and onSelectPerPage callbacks for Paging component. Added onSelect callback for ComboBox component.

This commit is contained in:
Ilya Oleshko 2019-07-30 14:37:25 +03:00
parent 800e899e2a
commit e3d98adee3
3 changed files with 19 additions and 21 deletions

View File

@ -98,10 +98,11 @@ class ComboBox extends React.PureComponent {
{this.state.options.map((option, index) =>
<DropDownItem {...option}
disabled={option.label === this.state.boxLabel}
onClick={(e) => {
option.onClick && option.onClick(e);
onClick={() => {
option.onClick && option.onClick();
this.toggle(!this.state.isOpen);
this.setState({ boxLabel: option.label });
this.props.onSelect && this.props.onSelect(option);
}}
/>
)}
@ -116,7 +117,8 @@ ComboBox.propTypes = {
isDisabled: PropTypes.bool,
withBorder: PropTypes.bool,
selectedIndex: PropTypes.number,
options: PropTypes.array
options: PropTypes.array,
onSelect: PropTypes.func
}
ComboBox.defaultProps = {

View File

@ -39,13 +39,13 @@ const Paging = props => {
<Button size='medium' label={previousLabel} onClick={previousAction} isDisabled={disablePrevious} />
{pageItems &&
<StyledPage>
<ComboBox directionY={openDirection} options={pageItems} />
<ComboBox directionY={openDirection} options={pageItems} onSelect={(a)=> props.onSelectPage(a)} />
</StyledPage>
}
<Button size='medium' label={nextLabel} onClick={nextAction} isDisabled={disableNext} />
{perPageItems &&
<StyledOnPage>
<ComboBox directionY={openDirection} options={perPageItems} />
<ComboBox directionY={openDirection} options={perPageItems} onSelect={(a) => props.onSelectPerPage(a)} />
</StyledOnPage>
}
</StyledPaging>
@ -59,6 +59,8 @@ Paging.propTypes = {
nextLabel: PropTypes.string,
disablePrevious: PropTypes.bool,
disableNext: PropTypes.bool,
onSelectPage: PropTypes.func,
onSelectPerPage: PropTypes.func
}
Paging.defaultProps = {

View File

@ -15,46 +15,38 @@ storiesOf('Components|Paging', module)
const pageItems = [
{
key: '1',
label: '1 of 5',
onClick: () => console.log('set paging 1 of 5')
label: '1 of 5'
},
{
key: '2',
label: '2 of 5',
onClick: () => console.log('set paging 2 of 5')
label: '2 of 5'
},
{
key: '3',
label: '3 of 5',
onClick: () => console.log('set paging 3 of 5')
label: '3 of 5'
},
{
key: '4',
label: '4 of 5',
onClick: () => console.log('set paging 4 of 5')
label: '4 of 5'
},
{
key: '5',
label: '5 of 5',
onClick: () => console.log('set paging 5 of 5')
label: '5 of 5'
}
];
const perPageItems = [
{
key: '1-1',
label: '25 per page',
onClick: () => console.log('set paging 25 action')
label: '25 per page'
},
{
key: '1-2',
label: '50 per page',
onClick: () => console.log('set paging 50 action')
label: '50 per page'
},
{
key: '1-3',
label: '100 per page',
onClick: () => console.log('set paging 100 action')
label: '100 per page'
}
];
@ -72,6 +64,8 @@ storiesOf('Components|Paging', module)
previousAction={ () => console.log('Prev')}
nextAction={ () => console.log('Next')}
openDirection='bottom'
onSelectPage={(a) => console.log(a)}
onSelectPerPage={(a) => console.log(a)}
/>
</Section>
)