diff --git a/web/ASC.Web.Components/src/components/combobox/index.js b/web/ASC.Web.Components/src/components/combobox/index.js index f68cc049db..1a09313a11 100644 --- a/web/ASC.Web.Components/src/components/combobox/index.js +++ b/web/ASC.Web.Components/src/components/combobox/index.js @@ -50,13 +50,16 @@ class ComboBox extends React.PureComponent { stopAction = (e) => e.preventDefault(); toggle = (isOpen) => this.setState({ isOpen: isOpen }); comboBoxClick = () => { - this.setState({ option: this.props.option }); - this.toggle(!this.state.isOpen); + this.setState({ + option: this.props.option, + isOpen: !this.state.isOpen + }); }; optionClick = (option) => { - option.onClick && option.onClick(); - this.toggle(!this.state.isOpen); - this.setState({ boxLabel: option.label }); + this.setState({ + boxLabel: option.label, + isOpen: !this.state.isOpen + }); this.props.onSelect && this.props.onSelect(option); }; @@ -100,7 +103,7 @@ class ComboBox extends React.PureComponent { {this.state.options.map((option) => this.optionClick(option)} + onClick={this.optionClick.bind(this, option)} /> )} diff --git a/web/ASC.Web.Storybook/stories/input/combobox/README.md b/web/ASC.Web.Storybook/stories/input/combobox/README.md index c5b1d9e625..163b3f54da 100644 --- a/web/ASC.Web.Storybook/stories/input/combobox/README.md +++ b/web/ASC.Web.Storybook/stories/input/combobox/README.md @@ -9,7 +9,22 @@ Custom combo box input ```js import { ComboBox } from 'asc-web-components'; - +const options = [ + { + key: '0', + label: '25 per page' + }, + { + key: '1', + label: '50 per page', + }, + { + key: '2', + label: '100 per page' + } +]; + + console.log('selected', option)}/> ``` #### Properties @@ -19,4 +34,5 @@ import { ComboBox } from 'asc-web-components'; | `options` | `array` | ✅ | - | - | Combo box options | | `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled | | `withBorder` | `bool` | - | - | `true` | Indicates that component contain border | -| `selectedIndex` | `number` | - | - | `0` | Index of option selected by default | \ No newline at end of file +| `selectedIndex` | `number` | - | - | `0` | Index of option selected by default | +| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option | \ No newline at end of file diff --git a/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js b/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js index 6f445aad9d..c6a58e95a3 100644 --- a/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js +++ b/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js @@ -5,8 +5,9 @@ import withReadme from 'storybook-readme/with-readme'; import Readme from './README.md'; import Section from '../../../.storybook/decorators/section'; import { ComboBox } from 'asc-web-components' +import { action } from '@storybook/addon-actions'; -let options = [ +const options = [ { key: '0', label: '25 per page' @@ -28,6 +29,7 @@ storiesOf('Components|Input', module)
action("Selected option")(option)} isDisabled={boolean('isDisabled', false)} withBorder={boolean('withBorder', true)} />