IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: components: ComboBox optimization

Browse Source
This commit is contained in:
Alexey Safronov 2019-07-31 21:42:23 +03:00
parent 3c5630cf84
commit d51de34ab8
3 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/ASC.Web.Components/src/components/combobox/index.js
View File

@ -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) =>
<DropDownItem {...option}
disabled={option.label === this.state.boxLabel}
onClick={() => this.optionClick(option)}
onClick={this.optionClick.bind(this, option)}
/>
)}
</DropDown>

20
web/ASC.Web.Storybook/stories/input/combobox/README.md
View File

@ -9,7 +9,22 @@ Custom combo box input
```js
import { ComboBox } from 'asc-web-components';
<ComboBox options={options} isDisabled={false}/>
const options = [
{
key: '0',
label: '25 per page'
},
{
key: '1',
label: '50 per page',
},
{
key: '2',
label: '100 per page'
}
];
<ComboBox options={options} isDisabled={false} onSelect={option => 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 |
| `selectedIndex` | `number` | - | - | `0` | Index of option selected by default |
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |

4
web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js
View File

@ -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)
<Section>
<ComboBox
options={options}
onSelect={option => action("Selected option")(option)}
isDisabled={boolean('isDisabled', false)}
withBorder={boolean('withBorder', true)}
/>