Web: Components: Added onSelectPage and onSelectPerPage callbacks for Paging component. Added onSelect callback for ComboBox component.
This commit is contained in:
parent
800e899e2a
commit
e3d98adee3
@ -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 = {
|
||||
|
@ -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 = {
|
||||
|
@ -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>
|
||||
)
|
||||
|
Loading…
Reference in New Issue
Block a user