Web: Components: Added withBorder, selectedIndex and renamed items to options property`s of ComboBox component. Fixed story and readme for this component.
This commit is contained in:
Ilya Oleshko
parent
3a657e0c64
commit
4b0b76609f
@ -6,9 +6,14 @@ import DropDownItem from '../drop-down-item'
|
||||
import DropDown from '../drop-down'
|
||||
|
||||
const StyledComboBox = styled.div`
|
||||
& > div {
|
||||
${props => !props.withBorder && `border-color: transparent;`}
|
||||
}
|
||||
|
||||
& > div > input {
|
||||
${props => !props.isDisabled && `cursor: pointer !important;`}
|
||||
|
||||
${props => !props.withBorder && `border-color: transparent !important;`}
|
||||
|
||||
&::placeholder {
|
||||
font-family: Open Sans;
|
||||
font-style: normal;
|
||||
@ -16,22 +21,22 @@ const StyledComboBox = styled.div`
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
${props => !props.isDisabled && `color: #333333;`}
|
||||
${props => (!props.withBorder & !props.isDisabled) && `border-bottom: 1px dotted #333333;`}
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class ComboBox extends React.PureComponent {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.ref = React.createRef();
|
||||
|
||||
|
||||
this.state = {
|
||||
isOpen: props.opened,
|
||||
boxLabel: props.items[0].label,
|
||||
items: props.items
|
||||
boxLabel: props.options[props.selectedIndex].label,
|
||||
options: props.options
|
||||
};
|
||||
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
@ -39,67 +44,67 @@ class ComboBox extends React.PureComponent {
|
||||
this.toggle = this.toggle.bind(this);
|
||||
}
|
||||
|
||||
|
||||
handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false);
|
||||
stopAction = (e) => e.preventDefault();
|
||||
toggle = (isOpen) => this.setState({ isOpen: isOpen });
|
||||
|
||||
componentDidMount() {
|
||||
if (this.ref.current) {
|
||||
document.addEventListener("click", this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("click", this.handleClick)
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.opened !== prevProps.opened) {
|
||||
this.toggle(this.props.opened);
|
||||
document.addEventListener("click", this.handleClick);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener("click", this.handleClick)
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.opened !== prevProps.opened) {
|
||||
this.toggle(this.props.opened);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
//console.log("ComboBox render");
|
||||
return (
|
||||
<StyledComboBox ref={this.ref} {...this.props}
|
||||
<StyledComboBox ref={this.ref} {...this.props} data={this.state.boxLabel}
|
||||
onClick={
|
||||
!this.props.isDisabled
|
||||
? () => {
|
||||
this.setState({ items: this.props.items});
|
||||
this.toggle(!this.state.isOpen);
|
||||
}
|
||||
: this.stopAction
|
||||
? () => {
|
||||
this.setState({ option: this.props.option });
|
||||
this.toggle(!this.state.isOpen);
|
||||
}
|
||||
: this.stopAction
|
||||
}
|
||||
>
|
||||
<InputBlock placeholder={this.state.boxLabel}
|
||||
iconName='ExpanderDownIcon'
|
||||
iconSize={8}
|
||||
isIconFill={true}
|
||||
iconColor='#A3A9AE'
|
||||
scale={true}
|
||||
isDisabled={this.props.isDisabled}
|
||||
isReadOnly={true}
|
||||
onIconClick={() => false}
|
||||
<InputBlock placeholder={this.state.boxLabel}
|
||||
iconName='ExpanderDownIcon'
|
||||
iconSize={8}
|
||||
isIconFill={true}
|
||||
iconColor='#A3A9AE'
|
||||
scale={true}
|
||||
isDisabled={this.props.isDisabled}
|
||||
isReadOnly={true}
|
||||
onIconClick={() => false}
|
||||
>
|
||||
{this.props.children}
|
||||
<DropDown
|
||||
directionX={this.props.directionX}
|
||||
directionY={this.props.directionY}
|
||||
manualWidth='100%'
|
||||
manualY='102%'
|
||||
isOpen={this.state.isOpen}
|
||||
<DropDown
|
||||
directionX={this.props.directionX}
|
||||
directionY={this.props.directionY}
|
||||
manualWidth='100%'
|
||||
manualY='102%'
|
||||
isOpen={this.state.isOpen}
|
||||
>
|
||||
{this.state.items.map(item =>
|
||||
<DropDownItem {...item}
|
||||
onClick={() => {
|
||||
item.onClick && item.onClick();
|
||||
this.toggle(!this.state.isOpen);
|
||||
this.setState({boxLabel: item.label});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{this.state.options.map((option, index) =>
|
||||
<DropDownItem {...option}
|
||||
disabled={option.label === this.state.boxLabel}
|
||||
onClick={(e) => {
|
||||
option.onClick && option.onClick(e);
|
||||
this.toggle(!this.state.isOpen);
|
||||
this.setState({ boxLabel: option.label });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</DropDown>
|
||||
</InputBlock>
|
||||
</StyledComboBox>
|
||||
@ -108,11 +113,16 @@ class ComboBox extends React.PureComponent {
|
||||
};
|
||||
|
||||
ComboBox.propTypes = {
|
||||
isDisabled: PropTypes.bool
|
||||
isDisabled: PropTypes.bool,
|
||||
withBorder: PropTypes.bool,
|
||||
selectedIndex: PropTypes.number,
|
||||
options: PropTypes.array
|
||||
}
|
||||
|
||||
ComboBox.defaultProps = {
|
||||
isDisabled: false
|
||||
isDisabled: false,
|
||||
withBorder: true,
|
||||
selectedIndex: 0
|
||||
}
|
||||
|
||||
|
||||
export default ComboBox;
|
||||
@ -9,12 +9,14 @@ Custom combo box input
|
||||
```js
|
||||
import { ComboBox } from 'asc-web-components';
|
||||
|
||||
<ComboBox items={items} isDisabled={false}/>
|
||||
<ComboBox options={options} isDisabled={false}/>
|
||||
```
|
||||
|
||||
#### Properties
|
||||
|
||||
| Props | Type | Required | Values | Default | Description |
|
||||
| ---------------------- | ----------------- | :------: | ---------------------------- | ------- | -------------------------------------------- |
|
||||
| `items` | `array of object` | ✅ | - | - | Combo box items |
|
||||
| `isDisabled` | `bool` | - | - | `false` | Indicates that component is disabled |
|
||||
| `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 |
|
||||
@ -6,18 +6,21 @@ import Readme from './README.md';
|
||||
import Section from '../../../.storybook/decorators/section';
|
||||
import { ComboBox } from 'asc-web-components'
|
||||
|
||||
let items = [
|
||||
let options = [
|
||||
{
|
||||
key: '0',
|
||||
label: '25 per page',
|
||||
onClick: () => console.log('set paging 25 action')
|
||||
onClick: (e) => console.log(e.target)
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: '50 per page',
|
||||
onClick: () => console.log('set paging 50 action')
|
||||
onClick: (e) => console.log(e.target)
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '100 per page',
|
||||
onClick: () => console.log('set paging 100 action')
|
||||
onClick: (e) => console.log(e.target)
|
||||
}
|
||||
];
|
||||
|
||||
@ -27,8 +30,9 @@ storiesOf('Components|Input', module)
|
||||
.add('combo box', () => (
|
||||
<Section>
|
||||
<ComboBox
|
||||
items={items}
|
||||
options={options}
|
||||
isDisabled={boolean('isDisabled', false)}
|
||||
withBorder={boolean('withBorder', true)}
|
||||
/>
|
||||
</Section>
|
||||
));
|
||||
Loading…
Reference in New Issue
Block a user