Web: Added component ComboBox

web/ASC.Web.Components/src/components/combobox/index.js

@@ -0,0 +1,110 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components';
+import InputBlock from '../input-block'
+import DropDownItem from '../drop-down-item'
+import DropDown from '../drop-down'
+
+const StyledComboBox = styled.div`
+    & > div > input {
+        ${props => !props.isDisabled && `cursor: pointer !important;`}
+
+        &::placeholder {
+            font-family: Open Sans;
+            font-style: normal;
+            font-weight: 600;
+            font-size: 13px;
+            line-height: 20px;
+            ${props => !props.isDisabled && `color: #333333;`}
+            opacity: 1;
+        }
+    }
+`;
+
+class ComboBox extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.ref = React.createRef();
+    
+        this.state = {
+            isOpen: props.opened,
+            boxLabel: props.items[0].label,
+            items: props.items
+        };
+    }
+
+
+    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);
+        }
+    }
+
+    render () {
+        return (
+            <StyledComboBox ref={this.ref} {...this.props}
+                onClick={
+                    !this.props.isDisabled
+                    ? () => { 
+                        this.setState({ items: this.props.items});
+                        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}
+                >
+                    <DropDown direction={this.props.direction || 'left'} 
+                            manualWidth='100%'
+                            manualTop='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});
+                            }}
+                        />
+                    )}
+                    </DropDown>
+                </InputBlock>
+            </StyledComboBox>
+        );
+    }
+};
+
+ComboBox.propTypes = {
+    isDisabled: PropTypes.bool
+}
+
+ComboBox.defaultProps = {
+    isDisabled: false
+}
+  
+export default ComboBox;

web/ASC.Web.Components/src/index.js

@@ -29,4 +29,5 @@ export { default as SearchInput } from './components/search-input'
 export { default as Backdrop } from './components/backdrop'
 export { default as Scrollbar } from './components/scrollbar'
 export { default as Toast } from './components/toast'
-export { default as toastr } from './components/toast/toastr'
+export { default as toastr } from './components/toast/toastr'
+export { default as ComboBox } from './components/combobox'

web/ASC.Web.Storybook/stories/input/combobox/README.md

@@ -0,0 +1,20 @@
+# ComboBox
+
+#### Description
+
+Custom combo box input
+
+#### Usage
+
+```js
+import { ComboBox } from 'asc-web-components';
+
+<ComboBox items={items} isDisabled={false}/>
+```
+
+#### Properties
+
+| Props                  | Type              | Required | Values                       | Default | Description                                  |
+| ---------------------- | ----------------- | :------: | ---------------------------- | ------- | -------------------------------------------- |
+| `items`                | `array of object` |    ✅    | -                            | -       | Combo box items                              |
+| `isDisabled`           | `bool`            |    -     | -                            | `false` | Indicates that component is disabled         |

web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withKnobs, boolean} from '@storybook/addon-knobs/react';
+import withReadme from 'storybook-readme/with-readme';
+import Readme from './README.md';
+import Section from '../../../.storybook/decorators/section';
+import { ComboBox } from 'asc-web-components'
+
+let items = [
+    {
+        label: '25 per page',
+        onClick: () => console.log('set paging 25 action')
+    },
+    {
+        label: '50 per page',
+        onClick: () => console.log('set paging 50 action')
+    },
+    {
+        label: '100 per page',
+        onClick: () => console.log('set paging 100 action')
+    }
+];
+
+storiesOf('Components|Input', module)
+    .addDecorator(withKnobs)
+    .addDecorator(withReadme(Readme))
+    .add('combo box', () => (
+        <Section>
+            <ComboBox 
+                items={items}
+                isDisabled={boolean('isDisabled', false)}
+            />
+        </Section>
+    ));