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

Web: Components: Fixed selectedOption propType for ComboBox component. Fixed ComboBox story.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-08-06 10:39:33 +03:00
parent 5eede5c600
commit 98b2448710
2 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,6 @@ class ComboBox extends React.PureComponent {
this.ref = React.createRef();
const selectedItem = this.props.options.find(x => x.key === this.props.selectedOption) || this.props.options[0];
console.log("combobox constructor label", selectedItem.label);
this.state = {
isOpen: props.opened,
@ -49,7 +48,7 @@ class ComboBox extends React.PureComponent {
this.comboBoxClick = this.comboBoxClick.bind(this);
this.optionClick = this.optionClick.bind(this);
if(props.opened)
if (props.opened)
handleAnyClick(true, this.handleClick);
}
@ -61,15 +60,15 @@ class ComboBox extends React.PureComponent {
comboBoxClick = (e) => {
if (!!e.target.closest('.input-group-prepend')) return;
this.setState({
this.setState({
option: this.props.option,
isOpen: !this.state.isOpen
});
};
optionClick = (option) => {
this.setState({
this.setState({
boxLabel: option.label,
isOpen: !this.state.isOpen
});
@ -85,14 +84,13 @@ class ComboBox extends React.PureComponent {
this.toggle(this.props.opened);
}
if(this.state.isOpen !== prevState.isOpen) {
if (this.state.isOpen !== prevState.isOpen) {
handleAnyClick(this.state.isOpen, this.handleClick);
}
if(this.props.selectedOption !== prevProps.selectedOption) {
if (this.props.selectedOption !== prevProps.selectedOption) {
const label = this.props.options.find(x => x.key === this.props.selectedOption).label;
console.log("combobox componentDidUpdate label", label, this.props.selectedOption);
this.setState({boxLabel: label } );
this.setState({ boxLabel: label });
}
}
@ -133,7 +131,10 @@ class ComboBox extends React.PureComponent {
ComboBox.propTypes = {
isDisabled: PropTypes.bool,
withBorder: PropTypes.bool,
selectedOption: PropTypes.any,
selectedOption: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
options: PropTypes.array,
onSelect: PropTypes.func
}

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

@ -11,20 +11,20 @@ import { ComboBox } from 'asc-web-components';
const options = [
{
key: '0',
key: 25,
label: '25 per page'
},
{
key: '1',
key: 50,
label: '50 per page',
},
{
key: '2',
key: 100,
label: '100 per page'
}
];
<ComboBox options={options} isDisabled={false} onSelect={option => console.log('selected', option)}/>
<ComboBox options={options} isDisabled={false} withBorder={true} selectedOption={25} onSelect={option => console.log('selected', option)}/>
```
#### Properties
@ -34,5 +34,5 @@ const options = [
| `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 |
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |
| `selectedOption` | `string`,`number` | - | - | `0` | Index of option selected by default |
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |