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(); this.ref = React.createRef();
const selectedItem = this.props.options.find(x => x.key === this.props.selectedOption) || this.props.options[0]; 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 = { this.state = {
isOpen: props.opened, isOpen: props.opened,
@ -49,7 +48,7 @@ class ComboBox extends React.PureComponent {
this.comboBoxClick = this.comboBoxClick.bind(this); this.comboBoxClick = this.comboBoxClick.bind(this);
this.optionClick = this.optionClick.bind(this); this.optionClick = this.optionClick.bind(this);
if(props.opened) if (props.opened)
handleAnyClick(true, this.handleClick); handleAnyClick(true, this.handleClick);
} }
@ -61,15 +60,15 @@ class ComboBox extends React.PureComponent {
comboBoxClick = (e) => { comboBoxClick = (e) => {
if (!!e.target.closest('.input-group-prepend')) return; if (!!e.target.closest('.input-group-prepend')) return;
this.setState({ this.setState({
option: this.props.option, option: this.props.option,
isOpen: !this.state.isOpen isOpen: !this.state.isOpen
}); });
}; };
optionClick = (option) => { optionClick = (option) => {
this.setState({ this.setState({
boxLabel: option.label, boxLabel: option.label,
isOpen: !this.state.isOpen isOpen: !this.state.isOpen
}); });
@ -85,14 +84,13 @@ class ComboBox extends React.PureComponent {
this.toggle(this.props.opened); this.toggle(this.props.opened);
} }
if(this.state.isOpen !== prevState.isOpen) { if (this.state.isOpen !== prevState.isOpen) {
handleAnyClick(this.state.isOpen, this.handleClick); 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; 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 = { ComboBox.propTypes = {
isDisabled: PropTypes.bool, isDisabled: PropTypes.bool,
withBorder: PropTypes.bool, withBorder: PropTypes.bool,
selectedOption: PropTypes.any, selectedOption: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
options: PropTypes.array, options: PropTypes.array,
onSelect: PropTypes.func 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 = [ const options = [
{ {
key: '0', key: 25,
label: '25 per page' label: '25 per page'
}, },
{ {
key: '1', key: 50,
label: '50 per page', label: '50 per page',
}, },
{ {
key: '2', key: 100,
label: '100 per page' 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 #### Properties
@ -34,5 +34,5 @@ const options = [
| `options` | `array` | ✅ | - | - | Combo box options | | `options` | `array` | ✅ | - | - | Combo box options |
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled | | `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
| `withBorder` | `bool` | - | - | `true` | Indicates that component contain border | | `withBorder` | `bool` | - | - | `true` | Indicates that component contain border |
| `selectedIndex` | `number` | - | - | `0` | Index of option selected by default | | `selectedOption` | `string`,`number` | - | - | `0` | Index of option selected by default |
| `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option | | `onSelect` | `func` | - | - | - | Will be triggered whenever an ComboBox is selected option |