Web.Components: LinkWithDropdown: refactoring

web/ASC.Web.Components/src/components/link-with-dropdown/index.js

@@ -1,142 +1,132 @@
-import React from 'react';
+import React from "react";
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import { Icons } from '../icons';
+import { Icons } from "../icons";
-import DropDown from '../drop-down';
+import DropDown from "../drop-down";
-import DropDownItem from '../drop-down-item';
+import DropDownItem from "../drop-down-item";
-import { Text } from '../text';
+import { Text } from "../text";
-import { handleAnyClick } from '../../utils/event';
+import { handleAnyClick } from "../../utils/event";
 
-const SimpleLinkWithDropdown = ({ isBold, fontSize, isTextOverflow,
+// eslint-disable-next-line no-unused-vars
-    isHovered, isSemitransparent, color, title,
+const SimpleLinkWithDropdown = ({ isBold, fontSize, isTextOverflow, isHovered, isSemitransparent, color, title, dropdownType, data,
-    dropdownType, data, ...props }) => <a {...props}></a>;
+  ...props
+}) => <a {...props}></a>;
 
-const getColor = color => {
+SimpleLinkWithDropdown.propTypes = {
-    switch (color) {
+  isBold: PropTypes.bool,
-        case 'gray':
+  fontSize: PropTypes.number,
-            return '#A3A9AE';
+  isTextOverflow: PropTypes.bool,
-        case 'blue':
+  isHovered: PropTypes.bool,
-            return '#316DAA';
+  isSemitransparent: PropTypes.bool,
-        default:
+  color: PropTypes.string,
-            return '#333333';
+  title: PropTypes.string,
-    }
+  dropdownType: PropTypes.oneOf(["alwaysDashed", "appearDashedAfterHover"]).isRequired,
-}
+  data: PropTypes.array
+};
 
-const opacityCss = css`
+const color = props => props.color;
-    ${props => (props.isSemitransparent && `opacity: 0.5`)};
-`;
 
-const colorCss = css`
+// eslint-disable-next-line react/prop-types 
-    color: ${props => getColor(props.color)};
+const ExpanderDownIcon = ({ isSemitransparent, dropdownType, ...props }) => (<Icons.ExpanderDownIcon {...props} />);
-`;
-
-const hoveredCss = css`
-    ${colorCss};
-    text-decoration: none;
-    border-bottom: 1px dotted;
-`;
-
-const visitedCss = css`
-    ${colorCss};
-`;
-
-const dottedCss = css`
-    border-bottom: 1px dotted;
-`;
-const ExpanderDownIcon = ({ isSemitransparent, dropdownType, ...props }) => <Icons.ExpanderDownIcon {...props} />;
 
 const Caret = styled(ExpanderDownIcon)`
   width: 10px;
   min-width: 10px;
   height: 10px;
   min-height: 10px;
-
   margin-left: 5px;
   margin-top: -4px;
-    ${opacityCss};
+  
-    ${props => (props.dropdownType === 'appearDottedAfterHover') && `opacity: 0`};
+  position: absolute;
-    ${props => (props.dropdownType === 'appearDottedAfterHover') && `position: absolute`};
+  right: 6px;
+  top: 0;
+  bottom: 0;
+  margin: auto;
 
   path {
-        fill: ${props => getColor(props.color)};
+    fill: ${color};
   }
+
+  ${props => props.dropdownType === "appearDashedAfterHover" && `opacity: 0`};
 `;
 
 const StyledLinkWithDropdown = styled(SimpleLinkWithDropdown)`
-    ${opacityCss};
+
+  cursor: pointer;
   text-decoration: none;
   user-select: none;
-        &:hover { 
+  padding-right: 20px;
-            ${hoveredCss};
+  position: relative;
-        }
+  display: inline-grid;
-        &:visited { 
+
-            ${visitedCss};
+  color: ${color};
-        }
+
+  ${props => props.isSemitransparent && `opacity: 0.5`};
+  ${props => props.dropdownType === "alwaysDashed" && `text-decoration:  underline dashed`};
+
   &:not([href]):not([tabindex]) {
-            ${colorCss};
+    ${props => props.dropdownType === "alwaysDashed" && `text-decoration:  underline dashed`};
-            text-decoration: none;
+    color: ${color};
+
     &:hover {
-                ${hoveredCss};
+      text-decoration: underline dashed;
+      color: ${color};
     }
   }
 
-${props => (props.dropdownType === 'alwaysDotted' && dottedCss)};
-
-`;
-
-const StyledSpan = styled.span`
-    cursor: pointer;
   :hover {
+    color: ${color};
+
     svg {
-        ${props => (props.dropdownType === 'appearDottedAfterHover' && `position: static`)};
+      ${props => props.dropdownType === "appearDashedAfterHover" && `position: absolute; opacity: 1`};
-        ${props => (props.dropdownType === 'appearDottedAfterHover' && `opacity: 1`)};
+      ${props => props.isSemitransparent && `opacity: 0.5`};
-        ${props => (props.isSemitransparent && `opacity: 0.5`)};
     }
   }
+
 `;
 
-const SimpleText = ({ color, fontSize, isTextOverflow, ...props }) => <Text.Body as="span" fontSize={fontSize} color={getColor(color)} {...props} />
+const SimpleText = ({ isTextOverflow, fontSize, color, ...props }) => (<Text.Body as="span" {...props} />);
 const StyledText = styled(SimpleText)`
 
-    ${props => (props.isTextOverflow && css`
+  color: ${color};
-        white-space: nowrap;
+
-        overflow: hidden;
+  ${props => props.isTextOverflow && css`
-        text-overflow: ellipsis;
+      display: inline-block;
-    `)}
+      max-width: 100%;
+    `}
 `;
 
-const DataDropDown = ({ data, color, fontSize, ...props }) => <DropDown {...props}></DropDown>;
+const DataDropDown = ({ data, color, fontSize, title, ...props }) => (
+  <DropDown {...props}></DropDown>
+);
 
 class LinkWithDropdown extends React.PureComponent {
 
   constructor(props) {
     super(props);
 
-        this.ref = React.createRef();
-
     this.state = {
-            isOpen: false,
+      isOpen: false
-            data: props.data
     };
 
+    this.ref = React.createRef();
+
     this.handleClick = this.handleClick.bind(this);
-        this.stopAction = this.stopAction.bind(this);
     this.toggleDropdown = this.toggleDropdown.bind(this);
     this.onDropDownItemClick = this.onDropDownItemClick.bind(this);
 
-        if (props.isOpen)
+    if (props.isOpen) handleAnyClick(true, this.handleClick);
-            handleAnyClick(true, this.handleClick);
   }
 
-    handleClick = (e) => this.state.isOpen && !this.ref.current.contains(e.target) && this.toggleDropdown(false);
+  handleClick = e =>
-    stopAction = (e) => !this.props.href && e.preventDefault();
+    this.state.isOpen &&
-    toggleDropdown = (isOpen) => this.setState({ isOpen: isOpen });
+    !this.ref.current.contains(e.target) &&
-    clickToDropdown = () => {
+    this.toggleDropdown(false);
-        this.setState({
+
-            data: this.props.data,
+  toggleDropdown = isOpen => this.setState({ isOpen });
-            isOpen: !this.state.isOpen
+
-        });
+  clickToDropdown = () => this.setState({ isOpen: !this.state.isOpen });
-    }
+
 
   componentWillUnmount() {
     handleAnyClick(false, this.handleClick);
@@ -147,8 +137,7 @@ class LinkWithDropdown extends React.PureComponent {
       if (this.props.isOpen !== prevProps.isOpen) {
         this.toggleDropdown(this.props.isOpen);
       }
-        }
+    } else if (this.props.isOpen !== prevProps.isOpen) {
-        else if (this.props.isOpen !== prevProps.isOpen) {
       this.toggleDropdown(this.props.isOpen);
     }
 
@@ -157,73 +146,89 @@ class LinkWithDropdown extends React.PureComponent {
     }
   }
 
-    onDropDownItemClick = (item) => {
+  onDropDownItemClick = item => {
     item.onClick && item.onClick();
     this.toggleDropdown(!this.state.isOpen);
-    }
+  };
 
   render() {
-        // console.log("LinkWithDropdown render");
+    console.log("LinkWithDropdown render");
+
+    const {
+      isSemitransparent,
+      dropdownType,
+      isTextOverflow,
+      fontSize,
+      color,
+      isBold,
+      title
+    } = this.props;
     return (
       <>
-                <StyledSpan
+        <StyledLinkWithDropdown
           ref={this.ref}
-                    isSemitransparent={this.props.isSemitransparent}
           onClick={this.clickToDropdown}
-                    dropdownType={this.props.dropdownType}
+          isSemitransparent={isSemitransparent}
+          dropdownType={dropdownType}
+          color={color}
         >
-                    <StyledLinkWithDropdown {...this.props}>
           <StyledText
-                            isTextOverflow={this.props.isTextOverflow}
+            isTextOverflow={isTextOverflow}
-                            fontSize={this.props.fontSize}
+            truncate={isTextOverflow}
-                            color={this.props.color}
+            fontSize={fontSize}
-                            isBold={this.props.isBold}
+            color={color}
-                            title={this.props.title}
+            isBold={isBold}
+            title={title}
+            dropdownType={dropdownType}
           >
             {this.props.children}
           </StyledText>
-                    </StyledLinkWithDropdown>
+
           <Caret
-                        isSemitransparent={this.props.isSemitransparent}
+            color={color}
-                        color={this.props.color}
+            dropdownType={dropdownType}
-                        dropdownType={this.props.dropdownType}
           />
-                </StyledSpan>
+        </StyledLinkWithDropdown>
-                <DataDropDown isOpen={this.state.isOpen} {...this.props}>
+
-                    {
+        <DataDropDown
-                        this.state.data.map(item =>
+          isOpen={this.state.isOpen}
+          withArrow={false}
+          {...this.props}
+        >
+          {this.props.data.map(item => (
             <DropDownItem
-                                {...item}
+              key={item.key}
               onClick={this.onDropDownItemClick.bind(this.props, item)}
+              {...item}
             />
-                        )
+          ))}
-                    }
         </DataDropDown>
       </>
-
     );
   }
 }
 
 LinkWithDropdown.propTypes = {
-    color: PropTypes.oneOf(['gray', 'black', 'blue']),
+  color: PropTypes.string,
   data: PropTypes.array,
-    dropdownType: PropTypes.oneOf(['alwaysDotted', 'appearDottedAfterHover']).isRequired,
+  dropdownType: PropTypes.oneOf(["alwaysDashed", "appearDashedAfterHover"]).isRequired,
   fontSize: PropTypes.number,
   isBold: PropTypes.bool,
   isSemitransparent: PropTypes.bool,
   isTextOverflow: PropTypes.bool,
   title: PropTypes.string,
+  isOpen: PropTypes.bool,
+  children: PropTypes.any
 };
 
 LinkWithDropdown.defaultProps = {
-    color: 'black',
+  color: "#333333",
   data: [],
-    dropdownType: 'alwaysDotted',
+  dropdownType: "alwaysDashed",
   fontSize: 13,
   isBold: false,
   isSemitransparent: false,
-    isTextOverflow: true,
+  isTextOverflow: true
-}
+};
 
 export default LinkWithDropdown;

web/ASC.Web.Components/src/components/link-with-dropdown/link-with-dropdown.stories.js

@@ -2,13 +2,12 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import LinkWithDropdown from '.';
 import Readme from './README.md';
-import { text, boolean, withKnobs, select, number } from '@storybook/addon-knobs/react';
+import { text, boolean, withKnobs, select, number, color } from '@storybook/addon-knobs/react';
 import withReadme from 'storybook-readme/with-readme';
 import Section from '../../../.storybook/decorators/section';
 import { Col } from 'reactstrap';
 
-const colors = ['black', 'gray', 'blue'];
+const dropdownType = ["alwaysDashed", "appearDashedAfterHover"];
-const dropdownType = ['alwaysDotted', 'appearDottedAfterHover'];
 
 const dropdownItems = [
   {
@@ -39,8 +38,8 @@ storiesOf('Components|LinkWithDropdown', module)
     <Section>
       <Col>
         <LinkWithDropdown
-          dropdownType={select('dropdownType', dropdownType, 'alwaysDotted')}
+          dropdownType={select('dropdownType', dropdownType, 'alwaysDashed')}
-          color={select('color', colors, 'black')}
+          color={color('color', '#333333')}
           fontSize={number('fontSize', 13)}
           isBold={boolean('isBold', false)}
           title={text('title', undefined)}