web: components: Refactoring SelectedItem component

web/ASC.Web.Components/src/components/selected-item/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { Text } from '../text';
 import IconButton from '../icon-button';
 
@@ -23,7 +23,7 @@ const StyledSelectedTextBox = styled.div`
     cursor: default;
 `;
 
-const IconButtonBox = styled.div`
+const StyledCloseButton = styled.div`
     display: flex;
     align-items: center;
     padding: 0 8px;
@@ -40,48 +40,34 @@ const IconButtonBox = styled.div`
     }
 `;
 
-class SelectedItem extends React.PureComponent {
-    constructor(props) {
-      super(props);
-    }
-
-    stopAction = e => e.preventDefault();
-
-    onCloseButtonClick = (e) => {
-        if (!this.props.isDisabled) {
-            this.props.clickAction && this.props.clickAction();
-          } else {
-            this.stopAction(e);
-        }
-    };
-  
-    render() {
+const SelectedItem = (props) => {
+    const {isDisabled, text, onClose } = props;
+ 
       console.log("SelectedItem render");
       return (
-        <StyledSelectedItem {...this.props} >
+        <StyledSelectedItem>
             <StyledSelectedTextBox>
-                <Text.Body as='span' truncate color={this.props.isDisabled ? "#cecece" : "#333333"} >
-                    {this.props.text}
+                <Text.Body as='span' truncate color={isDisabled ? "#cecece" : "#333333"} >
+                    {text}
                 </Text.Body>
             </StyledSelectedTextBox>
-            <IconButtonBox {...this.props} onClick={this.onCloseButtonClick}>
+            <StyledCloseButton onClick={onClose}>
                 <IconButton
-                    color={"#D8D8D8"}
+                    color="#D8D8D8"
                     size={10}
-                    iconName={'CrossIcon'}
+                    iconName='CrossIcon'
                     isFill={true}
-                    isDisabled={this.props.isDisabled}
+                    isDisabled={isDisabled}
                 />
-            </IconButtonBox>
+            </StyledCloseButton>
         </StyledSelectedItem>
       );
-    }
   }
   
   SelectedItem.propTypes = {
     text: PropTypes.string,
     isInline: PropTypes.bool,
-    clickAction: PropTypes.func,
+    onClose: PropTypes.func.isRequired,
     isDisabled: PropTypes.bool
   };
   

web/ASC.Web.Storybook/stories/selected-item/all/index.stories.js

@@ -22,6 +22,8 @@ const StyledContainerInline = styled.div`
 `;
 
 storiesOf('Components|SelectedItem', module)
+  .addParameters({ viewport: { defaultViewport: 'responsive' } })
+  .addParameters({ options: { showAddonPanel: false } })
   .add('all', () => {
 
     return (

web/ASC.Web.Storybook/stories/selected-item/base/README.md

@@ -11,7 +11,7 @@ import { SelectedItem } from 'asc-web-components';
 
 ```js
 
-<SelectedItem text="Direction"></SelectedItem>
+<SelectedItem text="sample text" onClick={()=>console.log("onClose")}></SelectedItem>
 
 ```
 
@@ -22,7 +22,7 @@ import { SelectedItem } from 'asc-web-components';
 | `isDisabled`       | `bool`     |    -     | -                     | false     | Tells when the button should present a disabled state                   |
 | `text`             | `string`   |    -     | -                     | -         | Selected item text                                                      |
 | `isInline`         | `bool`     |    -     | -                     | true      | Sets the 'display: inline-block' property                               |
-| `clickAction`      | `function` |    -     | -                     | -         | What the selected item will trigger when clicked                        |
+| `onClose`      | `function` |    -     | -                     | -         | What the selected item will trigger when clicked                        |
 
 
 

web/ASC.Web.Storybook/stories/selected-item/base/index.stories.js

@@ -6,21 +6,21 @@ import Section from '../../../.storybook/decorators/section';
 import withReadme from 'storybook-readme/with-readme';
 import Readme from './README.md';
 
-function onCloseButtonClick() {
-  console.log("onCloseButtonClick");
+function onClose(e) {
+  console.log("onClose", e);
 }
 
 storiesOf('Components|SelectedItem', module)
   .addDecorator(withKnobs)
   .addDecorator(withReadme(Readme))
-  .add('selected item', () => {
+  .add('base', () => {
 
     return (
       <Section>
         <SelectedItem  
           text={text('text', 'Selected item')}
           isInline={boolean('isInline', true)}
-          clickAction={onCloseButtonClick}
+          onClick={onClose}
           isDisabled={boolean('isDisabled', false)}
         />
       </Section>