Web: Components: removed reactstrap from hide-filter

web/ASC.Web.Components/src/components/filter-input/hide-filter.js

@@ -1,21 +1,17 @@
 import React from "react";
-import styled from 'styled-components';
-import { Icons } from '../icons';
-import { Popover, PopoverBody } from 'reactstrap';
+import styled from "styled-components";
+import { Icons } from "../icons";
+import DropDown from "../drop-down";
+import { handleAnyClick } from "../../utils/event";
 
 const Caret = styled.div`
   width: 7px;
   position: absolute;
   right: 6px;
-  transform: ${props => props.isOpen ? 'rotate(180deg)' : 'rotate(0)'};
-  top: ${props => props.isOpen ? '2px' : '0'};
-`;
-const StyledPopover = styled(Popover)`
-  .popover{
-    border: none;
-    max-width: 320px;
-  }
+  transform: ${props => (props.isOpen ? "rotate(180deg)" : "rotate(0)")};
+  top: ${props => (props.isOpen ? "2px" : "0")};
 `;
+
 const StyledHideFilterButton = styled.div`
   display: flex;
   position: relative;
@@ -23,68 +19,104 @@ const StyledHideFilterButton = styled.div`
   font-weight: 600;
   font-size: 16px;
   height: 100%;
-  border: 1px solid #ECEEF1;
+  border: 1px solid #eceef1;
   border-radius: 3px;
-  background-color: #F8F9F9;
+  background-color: #f8f9f9;
   padding: 0 20px 0 9px;
   margin-right: 2px;
-  cursor: ${props => props.isDisabled ? 'default' : 'pointer'};
+  cursor: ${props => (props.isDisabled ? "default" : "pointer")};
   font-family: Open Sans;
   font-style: normal;
 
   :hover {
-    border-color: ${props => props.isDisabled ? '#ECEEF1' : '#A3A9AE'};
+    border-color: ${props => (props.isDisabled ? "#ECEEF1" : "#A3A9AE")};
   }
   :active {
-    background-color: ${props => props.isDisabled ? '#F8F9F9' : '#ECEEF1'};
+    background-color: ${props => (props.isDisabled ? "#F8F9F9" : "#ECEEF1")};
   }
 `;
 const StyledHideFilter = styled.div`
   display: inline-block;
   height: 100%;
 `;
-const StyledPopoverBody = styled(PopoverBody)`
-  border-radius: 6px;
-  box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.13);
+const DropDownStyle = styled.div`
+  .drop-down {
+    padding: 8px;
+  }
+  position: relative;
 `;
 
 class HideFilter extends React.Component {
   constructor(props) {
     super(props);
 
-    this.toggle = this.toggle.bind(this);
+    this.ref = React.createRef();
+    this.dropDownRef = React.createRef();
     this.state = {
       popoverOpen: false
     };
   }
 
-  toggle() {
+  onClick = (state, e) => {
+    if (!state && e && this.dropDownRef.current.contains(e.target)) {
+      return;
+    }
     if (!this.props.isDisabled) {
       this.setState({
-        popoverOpen: !this.state.popoverOpen
+        popoverOpen: state
       });
     }
+  };
+
+  handleClick = e => {
+    this.state.popoverOpen &&
+      !this.ref.current.contains(e.target) &&
+      this.onClick(false);
+  };
+
+  componentWillUnmount() {
+    handleAnyClick(false, this.handleClick);
+  }
+
+  componentDidUpdate(prevState) {
+    if (this.state.popoverOpen !== prevState.popoverOpen) {
+      handleAnyClick(this.state.popoverOpen, this.handleClick);
+    }
   }
 
   render() {
     //console.log("HideFilter render");
     return (
-      <StyledHideFilter>
-        <StyledHideFilterButton id="PopoverLegacy" isDisabled={this.props.isDisabled} >{this.props.count} <Caret isOpen={this.state.popoverOpen}><Icons.ExpanderDownIcon size='scale' isfill={true} color="#A3A9AE" /></Caret></StyledHideFilterButton>
-
-        <StyledPopover
-          isOpen={this.state.popoverOpen}
-          trigger="legacy"
-          placement="bottom-start"
-          target="PopoverLegacy"
-          hideArrow={true}
-          toggle={this.toggle}>
-          <StyledPopoverBody>{this.props.children}</StyledPopoverBody>
-        </StyledPopover>
+      <StyledHideFilter
+        onClick={this.onClick.bind(this, !this.state.popoverOpen)}
+        ref={this.ref}
+      >
+        <StyledHideFilterButton
+          id="PopoverLegacy"
+          isDisabled={this.props.isDisabled}
+        >
+          {this.props.count}
+          <Caret isOpen={this.state.popoverOpen}>
+            <Icons.ExpanderDownIcon
+              size="scale"
+              isfill={true}
+              color="#A3A9AE"
+            />
+          </Caret>
+        </StyledHideFilterButton>
 
+        <DropDownStyle ref={this.dropDownRef}>
+          <DropDown
+            className="drop-down"
+            manualY="8px"
+            opened={this.state.popoverOpen}
+          >
+            {this.props.children}
+          </DropDown>
+        </DropDownStyle>
       </StyledHideFilter>
     );
   }
 }
 
-export default HideFilter
+export default HideFilter;