From 4b0b76609feb7b224e895c9966471988af5a6a58 Mon Sep 17 00:00:00 2001
From: Ilya Oleshko <oleshko.ilya@gmail.com>
Date: Fri, 26 Jul 2019 12:02:08 +0300
Subject: [PATCH] Web: Components: Added withBorder, selectedIndex and renamed
 items to options property`s of ComboBox component. Fixed story and readme for
 this component.

---
 .../src/components/combobox/index.js          | 112 ++++++++++--------
 .../stories/input/combobox/README.md          |   8 +-
 .../input/combobox/combobox.stories.js        |  14 ++-
 3 files changed, 75 insertions(+), 59 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/combobox/index.js b/web/ASC.Web.Components/src/components/combobox/index.js
index 3e63caca21..1cf6e74fc7 100644
--- a/web/ASC.Web.Components/src/components/combobox/index.js
+++ b/web/ASC.Web.Components/src/components/combobox/index.js
@@ -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;
\ No newline at end of file
diff --git a/web/ASC.Web.Storybook/stories/input/combobox/README.md b/web/ASC.Web.Storybook/stories/input/combobox/README.md
index efed8e97f7..c5b1d9e625 100644
--- a/web/ASC.Web.Storybook/stories/input/combobox/README.md
+++ b/web/ASC.Web.Storybook/stories/input/combobox/README.md
@@ -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         |
\ No newline at end of file
+| `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          |
\ No newline at end of file
diff --git a/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js b/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js
index 3e952358ef..b91b90734c 100644
--- a/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js
+++ b/web/ASC.Web.Storybook/stories/input/combobox/combobox.stories.js
@@ -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>
     ));
\ No newline at end of file