web: components: Any click optimization

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

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import InputBlock from '../input-block'
 import DropDownItem from '../drop-down-item'
 import DropDown from '../drop-down'
+import { handleAnyClick } from '../../utils/event';
 
 const StyledComboBox = styled.div`
     & > div {
@@ -44,9 +45,12 @@ class ComboBox extends React.PureComponent {
     this.toggle = this.toggle.bind(this);
     this.comboBoxClick = this.comboBoxClick.bind(this);
     this.optionClick = this.optionClick.bind(this);
+
+    if(props.opened)
+      handleAnyClick(true, this.handleClick);
   }
 
-  handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false);
+  handleClick = (e) => this.state.isOpen && !this.ref.current.contains(e.target) && this.toggle(false);
   stopAction = (e) => e.preventDefault();
   toggle = (isOpen) => this.setState({ isOpen: isOpen });
   comboBoxClick = () => {
@@ -63,24 +67,23 @@ class ComboBox extends React.PureComponent {
     this.props.onSelect && this.props.onSelect(option);
   };
 
-  componentDidMount() {
-    if (this.ref.current) {
-      document.addEventListener("click", this.handleClick);
-    }
-  }
 
   componentWillUnmount() {
-    document.removeEventListener("click", this.handleClick)
+    handleAnyClick(false, this.handleClick);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     if (this.props.opened !== prevProps.opened) {
       this.toggle(this.props.opened);
     }
+
+    if(this.state.isOpen !== prevState.isOpen) {
+      handleAnyClick(this.state.isOpen, this.handleClick);
+    }
   }
 
   render() {
-    //console.log("ComboBox render");
+    console.log("ComboBox render");
     return (
       <StyledComboBox ref={this.ref} {...this.props} data={this.state.boxLabel} onClick={this.comboBoxClick} onSelect={this.stopAction} >
         <InputBlock placeholder={this.state.boxLabel}

web/ASC.Web.Components/src/components/context-menu-button/index.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import DropDownItem from '../drop-down-item'
 import DropDown from '../drop-down'
 import IconButton from '../icon-button'
+import { handleAnyClick } from '../../utils/event';
 
 const StyledOuther = styled.div`
   display: inline-block;
@@ -27,28 +28,29 @@ class ContextMenuButton extends React.PureComponent {
     this.toggle = this.toggle.bind(this);
     this.onIconButtonClick = this.onIconButtonClick.bind(this);
     this.onDropDownItemClick = this.onDropDownItemClick.bind(this);
+
+    if(props.opened)
+      handleAnyClick(true, this.handleClick);
   }
 
-  handleClick = (e) => !this.ref.current.contains(e.target) && this.toggle(false);
+  handleClick = (e) => this.state.isOpen && !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)
+    handleAnyClick(false, this.handleClick);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     // Store prevId in state so we can compare when props change.
     // Clear out previously-loaded data (so we don't render stale stuff).
     if (this.props.opened !== prevProps.opened) {
       this.toggle(this.props.opened);
     }
+
+    if(this.state.isOpen !== prevState.isOpen) {
+      handleAnyClick(this.state.isOpen, this.handleClick);
+    }
   }
 
   onIconButtonClick = () => {

web/ASC.Web.Components/src/components/group-button/index.js

@@ -5,6 +5,7 @@ import { Icons } from "../icons";
 import DropDown from "../drop-down";
 import DropDownItem from "../drop-down-item";
 import Checkbox from "../checkbox";
+import { handleAnyClick } from '../../utils/event';
 
 const textColor = "#333333",
   disabledTextColor = "#A3A9AE";
@@ -108,10 +109,13 @@ class GroupButton extends React.PureComponent {
     this.toggle = this.toggle.bind(this);
     this.checkboxChange = this.checkboxChange.bind(this);
     this.dropDownItemClick = this.dropDownItemClick.bind(this);
+
+    if(props.opened)
+       handleAnyClick(true, this.handleClick);
   }
 
   handleClick = e =>
-    !this.ref.current.contains(e.target) && this.toggle(false);
+    this.state.isOpen && !this.ref.current.contains(e.target) && this.toggle(false);
 
   stopAction = e => e.preventDefault();
 
@@ -122,7 +126,7 @@ class GroupButton extends React.PureComponent {
     this.setState({ selected: this.props.selected });
   };
 
-  dropDownItemClick = child => {
+    dropDownItemClick = child => {
     child.props.onClick && child.props.onClick();
     this.props.onSelect && this.props.onSelect(child);
     this.setState({ selected: child.props.label });
@@ -133,26 +137,24 @@ class GroupButton extends React.PureComponent {
     this.props.disabled ? this.stopAction(e) : this.toggle(!this.state.isOpen);
   };
 
-  componentDidMount() {
-    if (this.ref.current) {
-      document.addEventListener("click", this.handleClick);
-    }
-  }
-
   componentWillUnmount() {
-    document.removeEventListener("click", this.handleClick);
+    handleAnyClick(false, this.handleClick);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     // Store prevId in state so we can compare when props change.
     // Clear out previously-loaded data (so we don't render stale stuff).
     if (this.props.opened !== prevProps.opened) {
       this.toggle(this.props.opened);
     }
+
+    if(this.state.isOpen !== prevState.isOpen) {
+      handleAnyClick(this.state.isOpen, this.handleClick);
+    }
   }
 
   render() {
-    //console.log("GroupButton render");
+    console.log("GroupButton render");
     const { label, isDropdown, disabled, isSeparator, isSelect, isIndeterminate, children, checked } = this.props;
     const color = disabled ? disabledTextColor : textColor;
     const itemLabel = !isSelect ? label : this.state.selected;

web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import Avatar from '../../avatar'
 import DropDown from '../../drop-down'
 import DropDownItem from '../../drop-down-item'
+import { handleAnyClick } from '../../../utils/event';
 
 class ProfileActions extends React.PureComponent {
 
@@ -22,30 +23,31 @@ class ProfileActions extends React.PureComponent {
     this.getUserRole = this.getUserRole.bind(this);
     this.onAvatarClick = this.onAvatarClick.bind(this);
     this.onDropDownItemClick = this.onDropDownItemClick.bind(this);
+
+    if(props.opened)
+      handleAnyClick(true, this.handleClick);
   };
 
   handleClick = (e) => {
-    !this.ref.current.contains(e.target) && this.toggle(false);
+    this.state.opened && !this.ref.current.contains(e.target) && this.toggle(false);
   }
 
   toggle = (opened) => {
     this.setState({ opened: opened });
   }
 
-  componentDidMount() {
-    if (this.ref.current) {
-      document.addEventListener("click", this.handleClick);
-    }
-  }
-
   componentWillUnmount() {
-    document.removeEventListener("click", this.handleClick)
+    handleAnyClick(false, this.handleClick);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     if (this.props.opened !== prevProps.opened) {
       this.toggle(this.props.opened);
     }
+
+    if(this.state.opened !== prevState.opened) {
+      handleAnyClick(this.state.opened, this.handleClick);
+    }
   }
 
   getUserRole = (user) => {

web/ASC.Web.Components/src/components/main-button/index.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import DropDown from "../drop-down";
 import { Icons } from "../icons";
+import { handleAnyClick } from "../../utils/event";
 
 const backgroundColor = "#ED7309",
   disableBackgroundColor = "#FFCCA6",
@@ -112,28 +113,29 @@ class MainButton extends React.PureComponent {
     this.state = {
       isOpen: props.opened
     };
+
+    if(props.opened)
+      handleAnyClick(true, this.handleClick);
   }
 
-  handleClick = e => !this.ref.current.contains(e.target) && this.toggle(false);
+  handleClick = e => this.state.isOpen && !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);
+    handleAnyClick(false, this.handleClick);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     // Store prevId in state so we can compare when props change.
     // Clear out previously-loaded data (so we don't render stale stuff).
     if (this.props.opened !== prevProps.opened) {
       this.toggle(this.props.opened);
     }
+
+    if(this.state.isOpen !== prevState.isOpen) {
+      handleAnyClick(this.state.isOpen, this.handleClick);
+    }
   }
 
   onMainButtonClick = () => {

web/ASC.Web.Components/src/utils/event.js

@@ -0,0 +1,8 @@
+export const handleAnyClick = (subscribe, handler) => {
+    if(subscribe) {
+      document.addEventListener("click", handler);
+    }
+    else {
+      document.removeEventListener("click", handler);
+    }
+  };