From 838b5255f7249ddcfff57ecfc0f1499791039cb9 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 25 Nov 2020 12:32:28 +0300 Subject: [PATCH 01/44] Web: Common: DropDown/Backdrop: fixed ability to click on page elements when open DropDown --- .../src/components/backdrop/index.js | 6 +- .../src/components/drop-down/index.js | 74 +++++++++++-------- 2 files changed, 49 insertions(+), 31 deletions(-) diff --git a/web/ASC.Web.Components/src/components/backdrop/index.js b/web/ASC.Web.Components/src/components/backdrop/index.js index 853313b68a..0e4481bd9a 100644 --- a/web/ASC.Web.Components/src/components/backdrop/index.js +++ b/web/ASC.Web.Components/src/components/backdrop/index.js @@ -3,7 +3,8 @@ import PropTypes from "prop-types"; import styled from "styled-components"; const StyledBackdrop = styled.div` - background-color: rgba(6, 22, 38, 0.1); + background-color: ${(props) => + props.withBackdrop ? "rgba(6, 22, 38, 0.1)" : "unset"}; display: ${(props) => (props.visible ? "block" : "none")}; height: 100vh; position: fixed; @@ -11,6 +12,7 @@ const StyledBackdrop = styled.div` z-index: ${(props) => props.zIndex}; left: 0; top: 0; + cursor: ${(props) => (props.withBackdrop ? "pointer" : "default")}; ; `; const Backdrop = (props) => { @@ -24,11 +26,13 @@ Backdrop.propTypes = { className: PropTypes.string, id: PropTypes.string, style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + withBackdrop: PropTypes.bool, }; Backdrop.defaultProps = { visible: false, zIndex: 200, + withBackdrop: true, }; export default Backdrop; diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index 5401f9d8af..c434484f46 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -98,6 +98,7 @@ class DropDown extends React.PureComponent { componentDidMount() { if (this.props.open) { this.props.enableOnClickOutside(); + console.log("in compdidM "); this.checkPosition(); } } @@ -126,6 +127,10 @@ class DropDown extends React.PureComponent { this.props.clickOutsideAction(e, !this.props.open); }; + toggleBackdrop = () => { + this.toggleDropDown({}); + }; + checkPosition = () => { if (!this.dropDownRef.current) return; @@ -158,7 +163,7 @@ class DropDown extends React.PureComponent { }; render() { - const { maxHeight, children } = this.props; + const { maxHeight, children, withBackdrop, open } = this.props; const { directionX, directionY, width } = this.state; const rowHeights = React.Children.map(children, (child) => this.getItemHeight(child) @@ -172,28 +177,36 @@ class DropDown extends React.PureComponent { : {}; //console.log("DropDown render", this.props); return ( - - {maxHeight ? ( - - {Row} - - ) : ( - children - )} - + <> + + + {maxHeight ? ( + + {Row} + + ) : ( + children + )} + + ); } } @@ -227,15 +240,16 @@ const EnhancedComponent = onClickOutside(DropDown); class DropDownContainer extends React.Component { render() { - const { withBackdrop = false, open } = this.props; + const { withBackdrop = false } = this.props; const isTablet = window.innerWidth < 1024; //TODO: Make some better + return ( - <> - - {withBackdrop && open && isTablet && ( - - )} - + ); } } From c32d308e18d12541858eb5124253c305061562b0 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 25 Nov 2020 19:01:57 +0300 Subject: [PATCH 02/44] Web: Common: DropDown/Backdrop: fixed double render Backdrop --- .../src/components/backdrop/index.js | 39 ++++++++++++++++--- .../src/components/drop-down/index.js | 30 ++++---------- 2 files changed, 41 insertions(+), 28 deletions(-) diff --git a/web/ASC.Web.Components/src/components/backdrop/index.js b/web/ASC.Web.Components/src/components/backdrop/index.js index 0e4481bd9a..09a1b1e7cb 100644 --- a/web/ASC.Web.Components/src/components/backdrop/index.js +++ b/web/ASC.Web.Components/src/components/backdrop/index.js @@ -4,7 +4,9 @@ import styled from "styled-components"; const StyledBackdrop = styled.div` background-color: ${(props) => - props.withBackdrop ? "rgba(6, 22, 38, 0.1)" : "unset"}; + props.withBackdrop && !props.backdropExist + ? "rgba(6, 22, 38, 0.1)" + : "unset"}; display: ${(props) => (props.visible ? "block" : "none")}; height: 100vh; position: fixed; @@ -15,10 +17,37 @@ const StyledBackdrop = styled.div` cursor: ${(props) => (props.withBackdrop ? "pointer" : "default")}; ; `; -const Backdrop = (props) => { - //console.log("Backdrop render"); - return ; -}; +class Backdrop extends React.Component { + constructor(props) { + super(props); + + this.state = { + backdropExist: false, + }; + } + + componentDidUpdate(prevProps) { + if (prevProps.visible !== this.props.visible) { + const isExist = + document.querySelectorAll("#backdrop-component").length > 1; + this.setState({ backdropExist: isExist }); + } + } + + render() { + const { backdropExist } = this.state; + + console.log("backdropExist", backdropExist); + + return this.props.visible ? ( + + ) : null; + } +} Backdrop.propTypes = { visible: PropTypes.bool, diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index c434484f46..b306d7fe49 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -5,7 +5,6 @@ import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual- import DropDownItem from "../drop-down-item"; import Backdrop from "../backdrop"; import { VariableSizeList } from "react-window"; -import onClickOutside from "react-onclickoutside"; const StyledDropdown = styled.div` font-family: "Open Sans", sans-serif, Arial; @@ -97,23 +96,14 @@ class DropDown extends React.PureComponent { componentDidMount() { if (this.props.open) { - this.props.enableOnClickOutside(); - console.log("in compdidM "); this.checkPosition(); } } - componentWillUnmount() { - this.props.disableOnClickOutside(); - } - componentDidUpdate(prevProps) { if (this.props.open !== prevProps.open) { if (this.props.open) { - this.props.enableOnClickOutside(); this.checkPosition(); - } else { - this.props.disableOnClickOutside(); } } } @@ -163,7 +153,7 @@ class DropDown extends React.PureComponent { }; render() { - const { maxHeight, children, withBackdrop, open } = this.props; + const { maxHeight, children, withBackdrop, open, isTablet } = this.props; const { directionX, directionY, width } = this.state; const rowHeights = React.Children.map(children, (child) => this.getItemHeight(child) @@ -176,14 +166,18 @@ class DropDown extends React.PureComponent { ? { height: calculatedHeight + "px" } : {}; //console.log("DropDown render", this.props); + + const needBackdrop = withBackdrop || isTablet ? true : false; + return ( <> + - ); + return ; } } From 4908e77f0767bde311b839ba518a7f63b9e8b33c Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Fri, 27 Nov 2020 14:15:39 +0300 Subject: [PATCH 03/44] Web: Components: dropdown/group-buttons-menu/backdrop: fixed mechanism for hiding disabled items --- .../src/components/backdrop/index.js | 2 - .../src/components/drop-down/index.js | 7 ++- .../components/group-buttons-menu/index.js | 59 +++++++++++-------- 3 files changed, 39 insertions(+), 29 deletions(-) diff --git a/web/ASC.Web.Components/src/components/backdrop/index.js b/web/ASC.Web.Components/src/components/backdrop/index.js index 09a1b1e7cb..edc8f74c1f 100644 --- a/web/ASC.Web.Components/src/components/backdrop/index.js +++ b/web/ASC.Web.Components/src/components/backdrop/index.js @@ -37,8 +37,6 @@ class Backdrop extends React.Component { render() { const { backdropExist } = this.state; - console.log("backdropExist", backdropExist); - return this.props.visible ? ( { + console.log("crash"); + if (child && !child.props.disabled) return child; + }); + return ( <> ) : ( - children + enabledChildren )} diff --git a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js index ffa9d6f878..8b0047abb1 100644 --- a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js +++ b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js @@ -205,37 +205,44 @@ class GroupButtonsMenu extends React.Component { } = this.props; const { priorityItems, moreItems, visible } = this.state; + const enabledMoreItems = moreItems.filter((item) => !item.disabled); + const enabledPriorityItems = priorityItems.filter((item) => !item.disabled); + return ( - {priorityItems.map((item, i) => ( - - {item.children} - - ))} + {enabledPriorityItems.length && + enabledPriorityItems.map((item, i) => { + //if (item.disabled) return; + return ( + + {item.children} + + ); + })} - {moreItems.length > 0 && ( + {enabledMoreItems.length > 0 && ( - {moreItems.map((item, i) => ( + {enabledMoreItems.map((item, i) => ( Date: Fri, 4 Dec 2020 00:20:29 +0300 Subject: [PATCH 04/44] Web: Components: Backdrop/DropDown: fixed work of hiding backdrop in dropdown --- .../src/components/backdrop/index.js | 13 +++++++++---- .../src/components/drop-down/index.js | 5 ++--- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/web/ASC.Web.Components/src/components/backdrop/index.js b/web/ASC.Web.Components/src/components/backdrop/index.js index edc8f74c1f..222fab91fb 100644 --- a/web/ASC.Web.Components/src/components/backdrop/index.js +++ b/web/ASC.Web.Components/src/components/backdrop/index.js @@ -28,8 +28,7 @@ class Backdrop extends React.Component { componentDidUpdate(prevProps) { if (prevProps.visible !== this.props.visible) { - const isExist = - document.querySelectorAll("#backdrop-component").length > 1; + const isExist = document.querySelectorAll("#backdrop-active").length > 1; this.setState({ backdropExist: isExist }); } } @@ -39,11 +38,17 @@ class Backdrop extends React.Component { return this.props.visible ? ( - ) : null; + ) : ( + + ); } } diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index 2ef4d73b39..de078e6491 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -117,8 +117,8 @@ class DropDown extends React.PureComponent { this.props.clickOutsideAction(e, !this.props.open); }; - toggleBackdrop = () => { - this.toggleDropDown({}); + toggleBackdrop = (e) => { + this.toggleDropDown(e); }; checkPosition = () => { @@ -170,7 +170,6 @@ class DropDown extends React.PureComponent { const needBackdrop = withBackdrop || isTablet ? true : false; const enabledChildren = React.Children.map(children, (child) => { - console.log("crash"); if (child && !child.props.disabled) return child; }); From 51595ac11a89e63b82284b8c6305c42614c3f480 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Fri, 4 Dec 2020 00:21:48 +0300 Subject: [PATCH 05/44] Web: Common/Components: applying a new backdrop/dropdown hiding mechanic --- .../FilterInput/sub-components/HideFilter.js | 6 +++++- .../NavMenu/sub-components/profile-actions.js | 6 +++++- .../src/components/combobox/index.js | 6 +++++- .../src/components/context-menu-button/index.js | 6 +++++- .../src/components/date-picker/index.js | 6 +++++- .../src/components/drop-down/index.js | 10 +--------- .../src/components/group-button/index.js | 6 +++--- .../src/components/main-button/index.js | 13 ++++++++++--- 8 files changed, 39 insertions(+), 20 deletions(-) diff --git a/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js b/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js index 8e53274b3a..cb06d03b08 100644 --- a/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js +++ b/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js @@ -26,7 +26,11 @@ class HideFilter extends React.Component { }; handleClickOutside = (e) => { - if (this.ref.current.contains(e.target)) return; + if ( + this.ref.current.contains(e.target) && + !e.target.closest("#backdrop-active") + ) + return; this.setState({ popoverOpen: !this.state.popoverOpen }); }; diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js index a58bc31f50..35310815ed 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js +++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js @@ -39,7 +39,11 @@ class ProfileActions extends React.PureComponent { }; onClose = (e) => { - if (this.ref.current.contains(e.target)) return; + if ( + this.ref.current.contains(e.target) && + !e.target.closest("#backdrop-active") + ) + return; this.setOpened(!this.state.opened); }; diff --git a/web/ASC.Web.Components/src/components/combobox/index.js b/web/ASC.Web.Components/src/components/combobox/index.js index d41e787b7e..91c26f7a26 100644 --- a/web/ASC.Web.Components/src/components/combobox/index.js +++ b/web/ASC.Web.Components/src/components/combobox/index.js @@ -48,7 +48,11 @@ class ComboBox extends React.Component { setIsOpen = (isOpen) => this.setState({ isOpen: isOpen }); handleClickOutside = (e) => { - if (this.ref.current.contains(e.target)) return; + if ( + this.ref.current.contains(e.target) && + !e.target.closest("#backdrop-active") + ) + return; this.setState({ isOpen: !this.state.isOpen }, () => { this.props.toggleAction && this.props.toggleAction(e, this.state.isOpen); diff --git a/web/ASC.Web.Components/src/components/context-menu-button/index.js b/web/ASC.Web.Components/src/components/context-menu-button/index.js index 358a182651..01cdbe16db 100644 --- a/web/ASC.Web.Components/src/components/context-menu-button/index.js +++ b/web/ASC.Web.Components/src/components/context-menu-button/index.js @@ -140,7 +140,11 @@ class ContextMenuButton extends React.Component { }; clickOutsideAction = (e) => { - if (this.ref.current.contains(e.target)) return; + if ( + this.ref.current.contains(e.target) && + !e.target.closest("#backdrop-active") + ) + return; this.onIconButtonClick(); }; diff --git a/web/ASC.Web.Components/src/components/date-picker/index.js b/web/ASC.Web.Components/src/components/date-picker/index.js index 730e244200..fad97b4b05 100644 --- a/web/ASC.Web.Components/src/components/date-picker/index.js +++ b/web/ASC.Web.Components/src/components/date-picker/index.js @@ -374,7 +374,11 @@ class DatePicker extends Component { {isOpen ? ( displayType === "dropdown" ? ( - + {this.renderBody()} diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index de078e6491..12a7bb0b97 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -108,19 +108,11 @@ class DropDown extends React.PureComponent { } } - handleClickOutside = (e) => { - this.toggleDropDown(e); - }; - toggleDropDown = (e) => { this.props.clickOutsideAction && this.props.clickOutsideAction(e, !this.props.open); }; - toggleBackdrop = (e) => { - this.toggleDropDown(e); - }; - checkPosition = () => { if (!this.dropDownRef.current) return; @@ -179,7 +171,7 @@ class DropDown extends React.PureComponent { visible={open} withBackdrop={needBackdrop} zIndex={149} - onClick={this.toggleBackdrop} + onClick={this.toggleDropDown} /> { - this.state.isOpen && - !this.ref.current.contains(e.target) && - this.setIsOpen(false); + (this.state.isOpen && !this.ref.current.contains(e.target)) || + e.target.closest("#backdrop-active"); + this.setIsOpen(false); }; checkboxChange = (e) => { diff --git a/web/ASC.Web.Components/src/components/main-button/index.js b/web/ASC.Web.Components/src/components/main-button/index.js index ba750d85cf..cf716cbf67 100644 --- a/web/ASC.Web.Components/src/components/main-button/index.js +++ b/web/ASC.Web.Components/src/components/main-button/index.js @@ -117,11 +117,18 @@ class MainButton extends React.PureComponent { if (props.opened) handleAnyClick(true, this.handleClick); } - handleClick = (e) => - this.state.isOpen && - !this.ref.current.contains(e.target) && + handleClick = (e) => { + if ( + !this.state.isOpen && + this.ref.current.contains(e.target) && + !e.target.closest("#backdrop-active") + ) + return; this.toggle(false); + }; + stopAction = (e) => e.preventDefault(); + toggle = (isOpen) => this.setState({ isOpen: isOpen }); componentWillUnmount() { From 06c132777a1c0f60f60f6f081c7586a50d94eb9e Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Fri, 4 Dec 2020 11:41:56 +0300 Subject: [PATCH 06/44] Web: Common/Components: removed binding to id, added passing and binding className --- .../FilterInput/sub-components/HideFilter.js | 2 +- .../NavMenu/sub-components/profile-actions.js | 2 +- .../src/components/backdrop/index.js | 21 +++++++++++-------- .../src/components/combobox/index.js | 2 +- .../components/context-menu-button/index.js | 2 +- .../src/components/group-button/index.js | 2 +- .../src/components/main-button/index.js | 2 +- 7 files changed, 18 insertions(+), 15 deletions(-) diff --git a/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js b/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js index cb06d03b08..1a448718c6 100644 --- a/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js +++ b/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js @@ -28,7 +28,7 @@ class HideFilter extends React.Component { handleClickOutside = (e) => { if ( this.ref.current.contains(e.target) && - !e.target.closest("#backdrop-active") + !e.target.closest(".backdrop-active") ) return; this.setState({ popoverOpen: !this.state.popoverOpen }); diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js index 35310815ed..b08ec15b3e 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js +++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js @@ -41,7 +41,7 @@ class ProfileActions extends React.PureComponent { onClose = (e) => { if ( this.ref.current.contains(e.target) && - !e.target.closest("#backdrop-active") + !e.target.closest(".backdrop-active") ) return; diff --git a/web/ASC.Web.Components/src/components/backdrop/index.js b/web/ASC.Web.Components/src/components/backdrop/index.js index 222fab91fb..9b814cc764 100644 --- a/web/ASC.Web.Components/src/components/backdrop/index.js +++ b/web/ASC.Web.Components/src/components/backdrop/index.js @@ -28,23 +28,26 @@ class Backdrop extends React.Component { componentDidUpdate(prevProps) { if (prevProps.visible !== this.props.visible) { - const isExist = document.querySelectorAll("#backdrop-active").length > 1; + const isExist = document.querySelectorAll(".backdrop-active").length > 1; this.setState({ backdropExist: isExist }); } } render() { const { backdropExist } = this.state; + const { className } = this.props; - return this.props.visible ? ( + const classNameStr = this.props.visible + ? this.props.className + ? `backdrop-active ${className}` + : "backdrop-active" + : this.props.className + ? `backdrop-active ${className}` + : "backdrop-inactive"; + + return ( - ) : ( - diff --git a/web/ASC.Web.Components/src/components/combobox/index.js b/web/ASC.Web.Components/src/components/combobox/index.js index 91c26f7a26..5c9311ab0b 100644 --- a/web/ASC.Web.Components/src/components/combobox/index.js +++ b/web/ASC.Web.Components/src/components/combobox/index.js @@ -50,7 +50,7 @@ class ComboBox extends React.Component { handleClickOutside = (e) => { if ( this.ref.current.contains(e.target) && - !e.target.closest("#backdrop-active") + !e.target.closest(".backdrop-active") ) return; diff --git a/web/ASC.Web.Components/src/components/context-menu-button/index.js b/web/ASC.Web.Components/src/components/context-menu-button/index.js index 01cdbe16db..94f6f9fd6b 100644 --- a/web/ASC.Web.Components/src/components/context-menu-button/index.js +++ b/web/ASC.Web.Components/src/components/context-menu-button/index.js @@ -142,7 +142,7 @@ class ContextMenuButton extends React.Component { clickOutsideAction = (e) => { if ( this.ref.current.contains(e.target) && - !e.target.closest("#backdrop-active") + !e.target.closest(".backdrop-active") ) return; diff --git a/web/ASC.Web.Components/src/components/group-button/index.js b/web/ASC.Web.Components/src/components/group-button/index.js index 440734b914..1ed45b3c6a 100644 --- a/web/ASC.Web.Components/src/components/group-button/index.js +++ b/web/ASC.Web.Components/src/components/group-button/index.js @@ -139,7 +139,7 @@ class GroupButton extends React.Component { clickOutsideAction = (e) => { (this.state.isOpen && !this.ref.current.contains(e.target)) || - e.target.closest("#backdrop-active"); + e.target.closest(".backdrop-active"); this.setIsOpen(false); }; diff --git a/web/ASC.Web.Components/src/components/main-button/index.js b/web/ASC.Web.Components/src/components/main-button/index.js index cf716cbf67..d6364d7038 100644 --- a/web/ASC.Web.Components/src/components/main-button/index.js +++ b/web/ASC.Web.Components/src/components/main-button/index.js @@ -121,7 +121,7 @@ class MainButton extends React.PureComponent { if ( !this.state.isOpen && this.ref.current.contains(e.target) && - !e.target.closest("#backdrop-active") + !e.target.closest(".backdrop-active") ) return; this.toggle(false); From ffcfc11587167521893f5d31282f65483597f5e8 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Fri, 4 Dec 2020 11:50:21 +0300 Subject: [PATCH 07/44] Web: Components: Backdrop: fixed backdrop overlay --- web/ASC.Web.Components/src/components/backdrop/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web/ASC.Web.Components/src/components/backdrop/index.js b/web/ASC.Web.Components/src/components/backdrop/index.js index 9b814cc764..473f9afad0 100644 --- a/web/ASC.Web.Components/src/components/backdrop/index.js +++ b/web/ASC.Web.Components/src/components/backdrop/index.js @@ -26,6 +26,13 @@ class Backdrop extends React.Component { }; } + componentDidMount() { + if (this.props.visible) { + const isExist = document.querySelectorAll(".backdrop-active").length > 1; + this.setState({ backdropExist: isExist }); + } + } + componentDidUpdate(prevProps) { if (prevProps.visible !== this.props.visible) { const isExist = document.querySelectorAll(".backdrop-active").length > 1; From 4a8ba1493f51166f301f02abfb9d47510a0d6556 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Fri, 4 Dec 2020 11:52:31 +0300 Subject: [PATCH 08/44] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index f274f3d949..5c0b5a24c7 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.489", + "version": "1.0.490", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js", From 55928c4207ae3460bb9d60a8e94324154fc609ac Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Fri, 4 Dec 2020 11:52:40 +0300 Subject: [PATCH 09/44] web: common: bump version --- web/ASC.Web.Common/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Common/package.json b/web/ASC.Web.Common/package.json index c911e39cc2..9b027a8c07 100644 --- a/web/ASC.Web.Common/package.json +++ b/web/ASC.Web.Common/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-common", - "version": "1.0.282", + "version": "1.0.283", "description": "Ascensio System SIA common components and solutions library", "license": "AGPL-3.0", "files": [ From 089e398fed6b1d4cc322f0d95f643a307a271194 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Fri, 4 Dec 2020 14:58:05 +0300 Subject: [PATCH 10/44] Web: Components: drop-down: fixed passing props style --- .../src/components/drop-down/index.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index 12a7bb0b97..ddbfa4c822 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -4,6 +4,7 @@ import PropTypes from "prop-types"; import CustomScrollbarsVirtualList from "../scrollbar/custom-scrollbars-virtual-list"; import DropDownItem from "../drop-down-item"; import Backdrop from "../backdrop"; +import Box from "../box"; import { VariableSizeList } from "react-window"; const StyledDropdown = styled.div` @@ -145,7 +146,14 @@ class DropDown extends React.PureComponent { }; render() { - const { maxHeight, children, withBackdrop, open, isTablet } = this.props; + const { + maxHeight, + children, + withBackdrop, + open, + isTablet, + style, + } = this.props; const { directionX, directionY, width } = this.state; const rowHeights = React.Children.map(children, (child) => this.getItemHeight(child) @@ -166,7 +174,7 @@ class DropDown extends React.PureComponent { }); return ( - <> + - + ); } } From 93da24a63a245aa35e343c602734536b072192a7 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Fri, 4 Dec 2020 14:58:37 +0300 Subject: [PATCH 11/44] Web: Common/Files/People: fixed z-index --- .../Client/src/components/pages/Home/Section/Header/index.js | 2 +- .../src/components/pages/VersionHistory/Section/Header/index.js | 2 +- .../Client/src/components/pages/Home/Section/Header/index.js | 2 +- .../src/components/NavMenu/sub-components/header-nav.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js index 97e2736cb2..3759cb5cb1 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js @@ -130,7 +130,7 @@ const StyledContainer = styled.div` `} position: absolute; top: 56px; - z-index: 180; + z-index: 140; } } diff --git a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js index 77cd0cdacf..9ae483e953 100644 --- a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js @@ -40,7 +40,7 @@ const StyledContainer = styled.div` & > div:first-child { position: absolute; top: 56px; - z-index: 180; + z-index: 140; } } diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js index f436f5a07b..2114f4e77a 100644 --- a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js @@ -64,7 +64,7 @@ const StyledContainer = styled.div` `} position: absolute; top: 56px; - z-index: 180; + z-index: 140; } } diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js index c47d097d37..5c1bedfb5b 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js +++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js @@ -24,7 +24,7 @@ const StyledNav = styled.nav` position: absolute; right: 0; height: 56px; - z-index: 190; + z-index: 140; .profile-menu { right: 12px; From 5a6469dffa23920e9a3911e0235cf0752a96e2b4 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Tue, 8 Dec 2020 09:49:07 +0300 Subject: [PATCH 12/44] Web: Components: backdrop: fixed collapse conditions dropdowns --- .../src/components/backdrop/index.js | 41 +++++++++++++++---- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/web/ASC.Web.Components/src/components/backdrop/index.js b/web/ASC.Web.Components/src/components/backdrop/index.js index 473f9afad0..47c81d4b71 100644 --- a/web/ASC.Web.Components/src/components/backdrop/index.js +++ b/web/ASC.Web.Components/src/components/backdrop/index.js @@ -24,13 +24,8 @@ class Backdrop extends React.Component { this.state = { backdropExist: false, }; - } - componentDidMount() { - if (this.props.visible) { - const isExist = document.querySelectorAll(".backdrop-active").length > 1; - this.setState({ backdropExist: isExist }); - } + this.backdropRef = React.createRef(); } componentDidUpdate(prevProps) { @@ -40,6 +35,36 @@ class Backdrop extends React.Component { } } + onClickHandler = (e) => { + if (!e) return; + const { target, clientX, clientY } = e; + const nearOpenDropdown = target.closest("[open]"); + const nearAside = target.closest(".aside-container"); + + if ((nearOpenDropdown || nearAside) && (clientX !== 0 || clientY !== 0)) { + let rects; + if (nearOpenDropdown) { + rects = nearOpenDropdown.getBoundingClientRect(); + } + if (nearAside) { + rects = nearAside.getBoundingClientRect(); + } + const { x, y, width, height } = rects; + + if ( + clientX < x || + clientX > x + width || + clientY < y || + clientY > y + height + ) { + const backdrops = document.querySelectorAll(".backdrop-active"); + backdrops.forEach((item) => item.click()); + } + } + + this.props.onClick && this.props.onClick(e); + }; + render() { const { backdropExist } = this.state; const { className } = this.props; @@ -49,14 +74,16 @@ class Backdrop extends React.Component { ? `backdrop-active ${className}` : "backdrop-active" : this.props.className - ? `backdrop-active ${className}` + ? `backdrop-inactive ${className}` : "backdrop-inactive"; return ( ); } From 52f0c1f96b703d8070bb1d976dbf383fcf2fe4df Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Tue, 8 Dec 2020 13:33:58 +0300 Subject: [PATCH 13/44] Web: Components/Files: fix bugs, refactoring --- .../src/components/panels/SharingPanel/index.js | 6 +++++- .../src/components/backdrop/index.js | 17 +++++++---------- .../src/components/link-with-dropdown/index.js | 6 +++++- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js index 2cbfdfa43f..09a7fe3477 100644 --- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js @@ -75,7 +75,11 @@ class SharingPanelComponent extends React.Component { this.setState({ showActionPanel: !this.state.showActionPanel }); onCloseActionPanel = (e) => { - if (this.ref.current.contains(e.target)) return; + if ( + this.ref.current.contains(e.target) && + !e.target.closest(".backdrop-active") + ) + return; this.setState({ showActionPanel: !this.state.showActionPanel }); }; diff --git a/web/ASC.Web.Components/src/components/backdrop/index.js b/web/ASC.Web.Components/src/components/backdrop/index.js index 47c81d4b71..64ee87635c 100644 --- a/web/ASC.Web.Components/src/components/backdrop/index.js +++ b/web/ASC.Web.Components/src/components/backdrop/index.js @@ -4,7 +4,7 @@ import styled from "styled-components"; const StyledBackdrop = styled.div` background-color: ${(props) => - props.withBackdrop && !props.backdropExist + props.withBackdrop && props.needBackground ? "rgba(6, 22, 38, 0.1)" : "unset"}; display: ${(props) => (props.visible ? "block" : "none")}; @@ -22,21 +22,19 @@ class Backdrop extends React.Component { super(props); this.state = { - backdropExist: false, + needBackground: true, }; - - this.backdropRef = React.createRef(); } componentDidUpdate(prevProps) { if (prevProps.visible !== this.props.visible) { - const isExist = document.querySelectorAll(".backdrop-active").length > 1; - this.setState({ backdropExist: isExist }); + const needBackground = + document.querySelectorAll(".backdrop-active").length <= 1; + this.setState({ needBackground: needBackground }); } } onClickHandler = (e) => { - if (!e) return; const { target, clientX, clientY } = e; const nearOpenDropdown = target.closest("[open]"); const nearAside = target.closest(".aside-container"); @@ -66,7 +64,7 @@ class Backdrop extends React.Component { }; render() { - const { backdropExist } = this.state; + const { needBackground } = this.state; const { className } = this.props; const classNameStr = this.props.visible @@ -79,10 +77,9 @@ class Backdrop extends React.Component { return ( ); diff --git a/web/ASC.Web.Components/src/components/link-with-dropdown/index.js b/web/ASC.Web.Components/src/components/link-with-dropdown/index.js index 08dc0275de..dd0e0ba583 100644 --- a/web/ASC.Web.Components/src/components/link-with-dropdown/index.js +++ b/web/ASC.Web.Components/src/components/link-with-dropdown/index.js @@ -155,7 +155,11 @@ class LinkWithDropdown extends React.Component { }; onClose = (e) => { - if (this.ref.current.contains(e.target)) return; + if ( + this.ref.current.contains(e.target) && + !e.target.closest(".backdrop-active") + ) + return; this.setIsOpen(!this.state.isOpen); }; From 31a8e30ee9c1c2397ce232af972232a2754fe19c Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Tue, 8 Dec 2020 13:40:12 +0300 Subject: [PATCH 14/44] Web: Components: drop-down: refactoring --- web/ASC.Web.Components/src/components/drop-down/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index ddbfa4c822..f70106d0b7 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -151,7 +151,7 @@ class DropDown extends React.PureComponent { children, withBackdrop, open, - isTablet, + style, } = this.props; const { directionX, directionY, width } = this.state; @@ -166,6 +166,7 @@ class DropDown extends React.PureComponent { ? { height: calculatedHeight + "px" } : {}; //console.log("DropDown render", this.props); + const isTablet = window.innerWidth < 1024; const needBackdrop = withBackdrop || isTablet ? true : false; @@ -234,7 +235,7 @@ DropDown.defaultProps = { withBackdrop: false, }; -class DropDownContainer extends React.Component { +/*class DropDownContainer extends React.Component { render() { const isTablet = window.innerWidth < 1024; //TODO: Make some better @@ -245,6 +246,6 @@ class DropDownContainer extends React.Component { DropDownContainer.propTypes = { open: PropTypes.bool, withBackdrop: PropTypes.bool, -}; +};*/ -export default DropDownContainer; +export default DropDown; From 6af035a1310bde24ea1e6e06b5bdff9c09b96024 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Tue, 8 Dec 2020 13:40:18 +0300 Subject: [PATCH 15/44] web: components: bump version --- web/ASC.Web.Components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Components/package.json b/web/ASC.Web.Components/package.json index 5c0b5a24c7..5390e0ec2e 100644 --- a/web/ASC.Web.Components/package.json +++ b/web/ASC.Web.Components/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-components", - "version": "1.0.490", + "version": "1.0.491", "description": "Ascensio System SIA component library", "license": "AGPL-3.0", "main": "dist/asc-web-components.js", From f632890cf275b0f19b6acce0ed87dccfb8830c00 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Tue, 8 Dec 2020 13:40:32 +0300 Subject: [PATCH 16/44] web: common: bump version --- web/ASC.Web.Common/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ASC.Web.Common/package.json b/web/ASC.Web.Common/package.json index d13532f334..ab04b97323 100644 --- a/web/ASC.Web.Common/package.json +++ b/web/ASC.Web.Common/package.json @@ -1,6 +1,6 @@ { "name": "asc-web-common", - "version": "1.0.286", + "version": "1.0.287", "description": "Ascensio System SIA common components and solutions library", "license": "AGPL-3.0", "files": [ From 34d246deafbb9318a6ef1cb6d9366641ca473626 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Tue, 8 Dec 2020 14:16:23 +0300 Subject: [PATCH 17/44] Web: Components/Files/People: z-index fix --- .../Client/src/components/pages/Home/Section/Header/index.js | 2 +- .../src/components/pages/VersionHistory/Section/Header/index.js | 2 +- .../Client/src/components/pages/Home/Section/Header/index.js | 2 +- .../src/components/group-buttons-menu/index.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js index 3759cb5cb1..3e5caf1ca0 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js @@ -130,7 +130,7 @@ const StyledContainer = styled.div` `} position: absolute; top: 56px; - z-index: 140; + z-index: 139; } } diff --git a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js index 9ae483e953..1309c925a9 100644 --- a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js @@ -40,7 +40,7 @@ const StyledContainer = styled.div` & > div:first-child { position: absolute; top: 56px; - z-index: 140; + z-index: 139; } } diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js index 2114f4e77a..05108cb59f 100644 --- a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js @@ -64,7 +64,7 @@ const StyledContainer = styled.div` `} position: absolute; top: 56px; - z-index: 140; + z-index: 139; } } diff --git a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js index 8b0047abb1..e6f345fa80 100644 --- a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js +++ b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js @@ -20,7 +20,7 @@ const StyledGroupButtonsMenu = styled.div` white-space: nowrap; display: ${(props) => (props.visible ? "block" : "none")}; - z-index: 189; + z-index: 139; @media ${desktop} { margin-top: 1px; From de11873bd405df7ade8ae53df83e76fee719dfc4 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Tue, 8 Dec 2020 14:54:39 +0300 Subject: [PATCH 18/44] Web: Components: group-buttons-menu: fixed display of disabled items --- .../src/components/group-buttons-menu/index.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js index e6f345fa80..2b51bfd273 100644 --- a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js +++ b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js @@ -205,14 +205,11 @@ class GroupButtonsMenu extends React.Component { } = this.props; const { priorityItems, moreItems, visible } = this.state; - const enabledMoreItems = moreItems.filter((item) => !item.disabled); - const enabledPriorityItems = priorityItems.filter((item) => !item.disabled); - return ( - {enabledPriorityItems.length && - enabledPriorityItems.map((item, i) => { + {priorityItems.length && + priorityItems.map((item, i) => { //if (item.disabled) return; return ( - {enabledMoreItems.length > 0 && ( + {moreItems.length > 0 && ( - {enabledMoreItems.map((item, i) => ( + {moreItems.map((item, i) => ( Date: Wed, 9 Dec 2020 10:59:04 +0300 Subject: [PATCH 19/44] Web: Files/Components/Common/People: z-index fix --- .../Client/src/components/pages/Home/Section/Header/index.js | 2 +- .../components/pages/VersionHistory/Section/Header/index.js | 2 +- .../Client/src/components/pages/Home/Section/Header/index.js | 2 +- .../src/components/NavMenu/sub-components/header-nav.js | 2 +- web/ASC.Web.Components/src/components/drop-down/index.js | 4 ++-- .../src/components/group-buttons-menu/index.js | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js index e047627c0c..a4e5379581 100644 --- a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js @@ -134,7 +134,7 @@ const StyledContainer = styled.div` `} position: absolute; top: 56px; - z-index: 139; + z-index: 180; } } diff --git a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js index 1309c925a9..77cd0cdacf 100644 --- a/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js +++ b/products/ASC.Files/Client/src/components/pages/VersionHistory/Section/Header/index.js @@ -40,7 +40,7 @@ const StyledContainer = styled.div` & > div:first-child { position: absolute; top: 56px; - z-index: 139; + z-index: 180; } } diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js index 05108cb59f..f436f5a07b 100644 --- a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js @@ -64,7 +64,7 @@ const StyledContainer = styled.div` `} position: absolute; top: 56px; - z-index: 139; + z-index: 180; } } diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js index 5c1bedfb5b..c47d097d37 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js +++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js @@ -24,7 +24,7 @@ const StyledNav = styled.nav` position: absolute; right: 0; height: 56px; - z-index: 140; + z-index: 190; .profile-menu { right: 12px; diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index f70106d0b7..4fd01bd1d0 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -41,7 +41,7 @@ const StyledDropdown = styled.div` css` left: ${(props) => (props.manualX ? props.manualX : "0px")}; `} - z-index: 150; + z-index: 200; display: ${(props) => (props.open ? "block" : "none")}; background: #ffffff; border-radius: 6px; @@ -179,7 +179,7 @@ class DropDown extends React.PureComponent { diff --git a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js index 2b51bfd273..50f210a733 100644 --- a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js +++ b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js @@ -20,7 +20,7 @@ const StyledGroupButtonsMenu = styled.div` white-space: nowrap; display: ${(props) => (props.visible ? "block" : "none")}; - z-index: 139; + z-index: 189; @media ${desktop} { margin-top: 1px; From 0bdd17ce6fce7cee74c0a1a701eb17cb06055188 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 9 Dec 2020 12:38:58 +0300 Subject: [PATCH 20/44] Web: Components: drop-down: added prop to show disabled items --- .../src/components/drop-down/README.md | 1 + .../src/components/drop-down/index.js | 46 +++++++++++-------- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/web/ASC.Web.Components/src/components/drop-down/README.md b/web/ASC.Web.Components/src/components/drop-down/README.md index 91835b48ed..be80e18f7f 100644 --- a/web/ASC.Web.Components/src/components/drop-down/README.md +++ b/web/ASC.Web.Components/src/components/drop-down/README.md @@ -34,3 +34,4 @@ When using component, it should be noted that parent must have CSS property _pos | `open` | `bool` | - | - | `false` | Tells when the dropdown should be opened | | `style` | `obj`, `array` | - | - | - | Accepts css style | | `withBackdrop` | `bool` | - | - | `true` | Used to display backdrop | +| `showDisabledItems` | `bool` | - | - | `false` | Display disabled items or not | diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index 4fd01bd1d0..74c1ae16f2 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -145,16 +145,37 @@ class DropDown extends React.PureComponent { return isTablet ? 36 : 32; }; + hideDisabledItems = () => { + const { children } = this.props; + const enabledChildren = React.Children.map(children, (child) => { + if (child && !child.props.disabled) return child; + }); + + const sizeEnabledChildren = enabledChildren.length; + + const cleanChildren = React.Children.map( + enabledChildren, + (child, index) => { + if (!child.props.isSeparator) return child; + if (index !== sizeEnabledChildren - 1) return child; + } + ); + + return cleanChildren; + }; + render() { const { maxHeight, children, withBackdrop, open, - + showDisabledItems, style, } = this.props; const { directionX, directionY, width } = this.state; + let cleanChildren; + const rowHeights = React.Children.map(children, (child) => this.getItemHeight(child) ); @@ -170,9 +191,7 @@ class DropDown extends React.PureComponent { const needBackdrop = withBackdrop || isTablet ? true : false; - const enabledChildren = React.Children.map(children, (child) => { - if (child && !child.props.disabled) return child; - }); + if (!showDisabledItems) cleanChildren = this.hideDisabledItems(); return ( @@ -201,8 +220,10 @@ class DropDown extends React.PureComponent { > {Row} + ) : cleanChildren ? ( + cleanChildren ) : ( - enabledChildren + children )} @@ -227,25 +248,14 @@ DropDown.propTypes = { style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), withBackdrop: PropTypes.bool, columnCount: PropTypes.number, + showDisabledItems: PropTypes.bool, }; DropDown.defaultProps = { directionX: "left", directionY: "bottom", withBackdrop: false, + showDisabledItems: false, }; -/*class DropDownContainer extends React.Component { - render() { - const isTablet = window.innerWidth < 1024; //TODO: Make some better - - return ; - } -} - -DropDownContainer.propTypes = { - open: PropTypes.bool, - withBackdrop: PropTypes.bool, -};*/ - export default DropDown; From 4ebaa335ef226874e378d7f59af6d84a56270bfd Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 9 Dec 2020 13:06:32 +0300 Subject: [PATCH 21/44] Web: Components: combobox: added prop showDisabledItems to show disabled items when displayType !== toggle --- web/ASC.Web.Components/src/components/combobox/README.md | 1 + web/ASC.Web.Components/src/components/combobox/index.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/web/ASC.Web.Components/src/components/combobox/README.md b/web/ASC.Web.Components/src/components/combobox/README.md index c5b8dd1c91..caa809a73a 100644 --- a/web/ASC.Web.Components/src/components/combobox/README.md +++ b/web/ASC.Web.Components/src/components/combobox/README.md @@ -129,3 +129,4 @@ To use Combobox as a toggle button, you must declare it according to the paramet | `size` | `oneOf` | - | `base`, `middle`, `big`, `huge`, `content` | `base` | Select component width, one of default | | `style` | `obj`, `array` | - | - | - | Accepts css style | | `toggleAction` | `func` | - | - | - | The event will be raised when using `displayType: toggle` when clicking on a component | +| `showDisabledItems` | `bool` | - | - | `false` | Display disabled items or not when displayType !== toggle | diff --git a/web/ASC.Web.Components/src/components/combobox/index.js b/web/ASC.Web.Components/src/components/combobox/index.js index d9ee9b999e..1bc6e123b3 100644 --- a/web/ASC.Web.Components/src/components/combobox/index.js +++ b/web/ASC.Web.Components/src/components/combobox/index.js @@ -109,6 +109,7 @@ class ComboBox extends React.Component { displayType, toggleAction, textOverflow, + showDisabledItems, } = this.props; const { isOpen, selectedOption } = this.state; @@ -163,6 +164,7 @@ class ComboBox extends React.Component { clickOutsideAction={this.handleClickOutside} {...dropDownMaxHeightProp} {...dropDownManualWidthProp} + showDisabledItems={showDisabledItems} > {advancedOptions ? advancedOptions @@ -216,6 +218,7 @@ ComboBox.defaultProps = { scaledOptions: false, size: "base", disableIconClick: true, + showDisabledItems: false, }; export default ComboBox; From 6511557445bcc8c0c21d67631d8c8becfb4ab098 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Wed, 9 Dec 2020 13:09:41 +0300 Subject: [PATCH 22/44] Web: Components/People: applied prop showDisabledItems --- .../pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js | 1 + web/ASC.Web.Components/src/components/drop-down/index.js | 2 +- web/ASC.Web.Components/src/components/group-button/index.js | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/products/ASC.People/Client/src/components/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js b/products/ASC.People/Client/src/components/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js index 5f2de90c5d..73f195ccb9 100644 --- a/products/ASC.People/Client/src/components/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js +++ b/products/ASC.People/Client/src/components/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js @@ -304,6 +304,7 @@ class ProfileInfo extends React.PureComponent { scaledOptions={false} size="content" className="language-combo" + showDisabledItems={true} /> { if (!child.props.isSeparator) return child; - if (index !== sizeEnabledChildren - 1) return child; + if (index !== 0 && index !== sizeEnabledChildren - 1) return child; } ); diff --git a/web/ASC.Web.Components/src/components/group-button/index.js b/web/ASC.Web.Components/src/components/group-button/index.js index 1ed45b3c6a..c2909ea785 100644 --- a/web/ASC.Web.Components/src/components/group-button/index.js +++ b/web/ASC.Web.Components/src/components/group-button/index.js @@ -223,6 +223,7 @@ class GroupButton extends React.Component { manualY="72px" open={this.state.isOpen} clickOutsideAction={this.clickOutsideAction} + showDisabledItems={true} > {React.Children.map(children, (child) => ( Date: Wed, 9 Dec 2020 16:13:05 +0300 Subject: [PATCH 23/44] Web: Components: paging: fixed width of dropdown with list of pages' --- web/ASC.Web.Components/src/components/paging/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/web/ASC.Web.Components/src/components/paging/index.js b/web/ASC.Web.Components/src/components/paging/index.js index f87621a8e2..5a1b4fc0eb 100644 --- a/web/ASC.Web.Components/src/components/paging/index.js +++ b/web/ASC.Web.Components/src/components/paging/index.js @@ -39,9 +39,8 @@ const StyledPage = styled.div` margin-right: 8px; .manualWidth { - > div:last-of-type { - width: 120%; - } + .dropdown-container { + width: 120%; } } `; From 83bfa3ed06f27952265ba316a4c751f2529eb5fe Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Thu, 10 Dec 2020 19:40:23 +0300 Subject: [PATCH 24/44] Web: Components: backdrop: backdrop rendering conditions changed --- .../src/components/backdrop/backdrop.test.js | 4 +- .../src/components/backdrop/index.js | 111 +++++++++++------- 2 files changed, 69 insertions(+), 46 deletions(-) diff --git a/web/ASC.Web.Components/src/components/backdrop/backdrop.test.js b/web/ASC.Web.Components/src/components/backdrop/backdrop.test.js index fc4206725f..8ce412cb58 100644 --- a/web/ASC.Web.Components/src/components/backdrop/backdrop.test.js +++ b/web/ASC.Web.Components/src/components/backdrop/backdrop.test.js @@ -32,7 +32,9 @@ describe("", () => { }); it("accepts style", () => { - const wrapper = mount(); + const wrapper = mount( + + ); expect(wrapper.getDOMNode().style).toHaveProperty("color", "red"); }); diff --git a/web/ASC.Web.Components/src/components/backdrop/index.js b/web/ASC.Web.Components/src/components/backdrop/index.js index 64ee87635c..0cfe920957 100644 --- a/web/ASC.Web.Components/src/components/backdrop/index.js +++ b/web/ASC.Web.Components/src/components/backdrop/index.js @@ -4,9 +4,7 @@ import styled from "styled-components"; const StyledBackdrop = styled.div` background-color: ${(props) => - props.withBackdrop && props.needBackground - ? "rgba(6, 22, 38, 0.1)" - : "unset"}; + props.needBackground ? "rgba(6, 22, 38, 0.1)" : "unset"}; display: ${(props) => (props.visible ? "block" : "none")}; height: 100vh; position: fixed; @@ -14,7 +12,7 @@ const StyledBackdrop = styled.div` z-index: ${(props) => props.zIndex}; left: 0; top: 0; - cursor: ${(props) => (props.withBackdrop ? "pointer" : "default")}; ; + cursor: ${(props) => (props.needBackground ? "pointer" : "default")}; ; `; class Backdrop extends React.Component { @@ -22,67 +20,88 @@ class Backdrop extends React.Component { super(props); this.state = { - needBackground: true, + needBackdrop: false, + needBackground: false, }; + + this.backdropRef = React.createRef(); } componentDidUpdate(prevProps) { - if (prevProps.visible !== this.props.visible) { - const needBackground = - document.querySelectorAll(".backdrop-active").length <= 1; - this.setState({ needBackground: needBackground }); + if ( + prevProps.visible !== this.props.visible || + prevProps.isAside !== this.props.isAside || + prevProps.withBackground !== this.props.withBackground + ) { + this.checkingExistBackdrop(); } } + componentDidMount() { + this.checkingExistBackdrop(); + } + + checkingExistBackdrop = () => { + const { visible, isAside, withBackground } = this.props; + if (visible) { + const isTablet = window.innerWidth < 1024; + const backdrops = document.querySelectorAll(".backdrop-active"); + const backdropsAside = document.querySelectorAll( + ".backdrop-active-aside" + ); + + const needBackdrop = backdrops.length < 1 || isAside; + + let needBackground = + needBackdrop && (isTablet || isAside || withBackground); + + if (!isAside && backdropsAside.length > 0) needBackground = false; + if (isAside && backdropsAside.length > 1) needBackground = false; + + this.setState({ + needBackdrop: needBackdrop, + needBackground: needBackground, + }); + } else { + this.setState({ + needBackground: false, + needBackdrop: false, + }); + } + }; + onClickHandler = (e) => { - const { target, clientX, clientY } = e; - const nearOpenDropdown = target.closest("[open]"); - const nearAside = target.closest(".aside-container"); - - if ((nearOpenDropdown || nearAside) && (clientX !== 0 || clientY !== 0)) { - let rects; - if (nearOpenDropdown) { - rects = nearOpenDropdown.getBoundingClientRect(); - } - if (nearAside) { - rects = nearAside.getBoundingClientRect(); - } - const { x, y, width, height } = rects; - - if ( - clientX < x || - clientX > x + width || - clientY < y || - clientY > y + height - ) { - const backdrops = document.querySelectorAll(".backdrop-active"); + if (this.backdropRef.current.classList.contains("backdrop-active-aside")) { + const backdrops = document.querySelectorAll(".backdrop-active"); + if (backdrops.length > 0) { backdrops.forEach((item) => item.click()); } } - this.props.onClick && this.props.onClick(e); }; render() { - const { needBackground } = this.state; - const { className } = this.props; + const { needBackdrop, needBackground } = this.state; + const { className, isAside, visible } = this.props; - const classNameStr = this.props.visible - ? this.props.className - ? `backdrop-active ${className}` - : "backdrop-active" - : this.props.className - ? `backdrop-inactive ${className}` - : "backdrop-inactive"; + const classNameStr = isAside + ? className + ? `backdrop-active-aside ${className}` + : "backdrop-active-aside" + : className + ? `backdrop-active ${className}` + : "backdrop-active"; - return ( + return visible && (needBackdrop || isAside) ? ( - ); + ) : null; } } @@ -92,13 +111,15 @@ Backdrop.propTypes = { className: PropTypes.string, id: PropTypes.string, style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), - withBackdrop: PropTypes.bool, + withBackground: PropTypes.bool, + isAside: PropTypes.bool, }; Backdrop.defaultProps = { visible: false, zIndex: 200, - withBackdrop: true, + withBackground: false, + isAside: false, }; export default Backdrop; From 5510487db872e7bc77c35ad545dda50184ddd40c Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Thu, 10 Dec 2020 19:41:42 +0300 Subject: [PATCH 25/44] Web: Components: dropdown: added backdrop, new props, tests --- .../components/drop-down/drop-down.test.js | 16 ++ .../src/components/drop-down/index.js | 138 ++++++++++-------- 2 files changed, 95 insertions(+), 59 deletions(-) diff --git a/web/ASC.Web.Components/src/components/drop-down/drop-down.test.js b/web/ASC.Web.Components/src/components/drop-down/drop-down.test.js index 4f072f3a6b..ad2ec6a195 100644 --- a/web/ASC.Web.Components/src/components/drop-down/drop-down.test.js +++ b/web/ASC.Web.Components/src/components/drop-down/drop-down.test.js @@ -8,6 +8,8 @@ const baseProps = { directionX: "left", directionY: "bottom", manualWidth: "100%", + showDisabledItems: true, + withBackdrop: false, }; const baseChildren =
; @@ -25,6 +27,20 @@ describe("", () => { expect(wrapper.prop("open")).toEqual(true); }); + it("showDisabledItems", () => { + const wrapper = mount( + + ); + + expect(wrapper.prop("showDisabledItems")).toEqual(false); + }); + + it("render with backdrop", () => { + const wrapper = mount(); + + expect(wrapper.prop("withBackdrop")).toEqual(true); + }); + it("directionX right", () => { const wrapper = mount(); diff --git a/web/ASC.Web.Components/src/components/drop-down/index.js b/web/ASC.Web.Components/src/components/drop-down/index.js index 4e60fefa98..755fd2d645 100644 --- a/web/ASC.Web.Components/src/components/drop-down/index.js +++ b/web/ASC.Web.Components/src/components/drop-down/index.js @@ -6,6 +6,7 @@ import DropDownItem from "../drop-down-item"; import Backdrop from "../backdrop"; import Box from "../box"; import { VariableSizeList } from "react-window"; +import onClickOutside from "react-onclickoutside"; const StyledDropdown = styled.div` font-family: "Open Sans", sans-serif, Arial; @@ -97,18 +98,30 @@ class DropDown extends React.PureComponent { componentDidMount() { if (this.props.open) { + this.props.enableOnClickOutside(); this.checkPosition(); } } + componentWillUnmount() { + this.props.disableOnClickOutside(); + } + componentDidUpdate(prevProps) { if (this.props.open !== prevProps.open) { if (this.props.open) { + this.props.enableOnClickOutside(); this.checkPosition(); + } else { + this.props.disableOnClickOutside(); } } } + handleClickOutside = (e) => { + this.toggleDropDown(e); + }; + toggleDropDown = (e) => { this.props.clickOutsideAction && this.props.clickOutsideAction(e, !this.props.open); @@ -144,35 +157,29 @@ class DropDown extends React.PureComponent { return isTablet ? 36 : 32; }; - hideDisabledItems = () => { - const { children } = this.props; - const enabledChildren = React.Children.map(children, (child) => { - if (child && !child.props.disabled) return child; - }); + if (React.Children.count(this.props.children) > 0) { + const { children } = this.props; + const enabledChildren = React.Children.map(children, (child) => { + if (child && !child.props.disabled) return child; + }); - const sizeEnabledChildren = enabledChildren.length; + const sizeEnabledChildren = enabledChildren.length; - const cleanChildren = React.Children.map( - enabledChildren, - (child, index) => { - if (!child.props.isSeparator) return child; - if (index !== 0 && index !== sizeEnabledChildren - 1) return child; - } - ); + const cleanChildren = React.Children.map( + enabledChildren, + (child, index) => { + if (!child.props.isSeparator) return child; + if (index !== 0 && index !== sizeEnabledChildren - 1) return child; + } + ); - return cleanChildren; + return cleanChildren; + } }; render() { - const { - maxHeight, - children, - withBackdrop, - open, - showDisabledItems, - style, - } = this.props; + const { maxHeight, children, showDisabledItems } = this.props; const { directionX, directionY, width } = this.state; let cleanChildren; @@ -187,46 +194,34 @@ class DropDown extends React.PureComponent { ? { height: calculatedHeight + "px" } : {}; //console.log("DropDown render", this.props); - const isTablet = window.innerWidth < 1024; - - const needBackdrop = withBackdrop || isTablet ? true : false; if (!showDisabledItems) cleanChildren = this.hideDisabledItems(); return ( - - - - - {maxHeight ? ( - - {Row} - - ) : cleanChildren ? ( - cleanChildren - ) : ( - children - )} - - + + {maxHeight ? ( + + {Row} + + ) : cleanChildren ? ( + cleanChildren + ) : ( + children + )} + ); } } @@ -258,4 +253,29 @@ DropDown.defaultProps = { showDisabledItems: false, }; -export default DropDown; +const EnhancedComponent = onClickOutside(DropDown); + +class DropDownContainer extends React.Component { + toggleDropDown = (e) => { + this.props.clickOutsideAction(e, !this.props.open); + }; + render() { + const { withBackdrop = true, open } = this.props; + + return ( + <> + {withBackdrop ? ( + + ) : null} + + + ); + } +} + +DropDownContainer.propTypes = { + open: PropTypes.bool, + withBackdrop: PropTypes.bool, +}; + +export default DropDownContainer; From c8aad2f2d28b3072d68ce2ba4a465a457cdee4c4 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Thu, 10 Dec 2020 19:42:59 +0300 Subject: [PATCH 26/44] Web: Components: context-menu: added prop withBackdrop, tests --- .../src/components/context-menu/README.md | 1 + .../src/components/context-menu/context-menu.test.js | 6 +++++- web/ASC.Web.Components/src/components/context-menu/index.js | 5 ++++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/web/ASC.Web.Components/src/components/context-menu/README.md b/web/ASC.Web.Components/src/components/context-menu/README.md index 4ca6913c00..3887969d04 100644 --- a/web/ASC.Web.Components/src/components/context-menu/README.md +++ b/web/ASC.Web.Components/src/components/context-menu/README.md @@ -27,3 +27,4 @@ In particular case, state is created containing options for particular Row eleme | `options` | `array` | - | - | `[ ]` | DropDownItems collection | | `style` | `obj`, `array` | - | - | - | Accepts css style | | `targetAreaId` | `string` | - | - | - | Id of container apply to | +| `withBackdrop` | `bool` | - | - | `true` | Used to display backdrop | diff --git a/web/ASC.Web.Components/src/components/context-menu/context-menu.test.js b/web/ASC.Web.Components/src/components/context-menu/context-menu.test.js index ff05fbed7e..17c7804066 100644 --- a/web/ASC.Web.Components/src/components/context-menu/context-menu.test.js +++ b/web/ASC.Web.Components/src/components/context-menu/context-menu.test.js @@ -72,7 +72,11 @@ describe("", () => { it("accepts style", () => { const wrapper = mount( - + ); wrapper.setState({ visible: true }); diff --git a/web/ASC.Web.Components/src/components/context-menu/index.js b/web/ASC.Web.Components/src/components/context-menu/index.js index 9f83316058..6fa9f0cf42 100644 --- a/web/ASC.Web.Components/src/components/context-menu/index.js +++ b/web/ASC.Web.Components/src/components/context-menu/index.js @@ -81,7 +81,7 @@ class ContextMenu extends React.PureComponent { render() { //console.log('ContextMenu render', this.props); const { visible } = this.state; - const { options, id, className, style } = this.props; + const { options, id, className, style, withBackdrop } = this.props; return ( ((visible && options) || null) && ( @@ -91,6 +91,7 @@ class ContextMenu extends React.PureComponent { style={style} open={visible} clickOutsideAction={this.handleClick} + withBackdrop={withBackdrop} > {options.map((item) => { if (item && item.key !== undefined) { @@ -115,11 +116,13 @@ ContextMenu.propTypes = { className: PropTypes.string, id: PropTypes.string, style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + withBackdrop: PropTypes.bool, }; ContextMenu.defaultProps = { options: [], id: "contextMenu", + withBackdrop: true, }; export default ContextMenu; From 48f782b6bc854da1c2b2ad352e1fcd6a868a1d30 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Thu, 10 Dec 2020 20:06:04 +0300 Subject: [PATCH 27/44] Web: Common/Components: removed unnecessary DOM requests --- .../FilterInput/sub-components/HideFilter.js | 6 +----- web/ASC.Web.Common/src/components/NavMenu/index.js | 6 +++++- .../NavMenu/sub-components/profile-actions.js | 6 +----- .../src/components/combobox/index.js | 6 +----- .../src/components/context-menu-button/index.js | 13 +++++++------ .../src/components/drop-down/index.js | 2 +- .../src/components/group-button/index.js | 3 +-- .../src/components/help-button/index.js | 7 ++++++- .../src/components/link-with-dropdown/index.js | 6 +----- .../src/components/main-button/index.js | 7 +------ 10 files changed, 25 insertions(+), 37 deletions(-) diff --git a/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js b/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js index 1a448718c6..8e53274b3a 100644 --- a/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js +++ b/web/ASC.Web.Common/src/components/FilterInput/sub-components/HideFilter.js @@ -26,11 +26,7 @@ class HideFilter extends React.Component { }; handleClickOutside = (e) => { - if ( - this.ref.current.contains(e.target) && - !e.target.closest(".backdrop-active") - ) - return; + if (this.ref.current.contains(e.target)) return; this.setState({ popoverOpen: !this.state.popoverOpen }); }; diff --git a/web/ASC.Web.Common/src/components/NavMenu/index.js b/web/ASC.Web.Common/src/components/NavMenu/index.js index db00f04f68..645ad4e030 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/index.js +++ b/web/ASC.Web.Common/src/components/NavMenu/index.js @@ -110,7 +110,11 @@ class NavMenu extends React.Component { - + {isLoaded && isAuthenticated ? ( <> diff --git a/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js b/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js index b08ec15b3e..a58bc31f50 100644 --- a/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js +++ b/web/ASC.Web.Common/src/components/NavMenu/sub-components/profile-actions.js @@ -39,11 +39,7 @@ class ProfileActions extends React.PureComponent { }; onClose = (e) => { - if ( - this.ref.current.contains(e.target) && - !e.target.closest(".backdrop-active") - ) - return; + if (this.ref.current.contains(e.target)) return; this.setOpened(!this.state.opened); }; diff --git a/web/ASC.Web.Components/src/components/combobox/index.js b/web/ASC.Web.Components/src/components/combobox/index.js index 1bc6e123b3..1eb32c1757 100644 --- a/web/ASC.Web.Components/src/components/combobox/index.js +++ b/web/ASC.Web.Components/src/components/combobox/index.js @@ -48,11 +48,7 @@ class ComboBox extends React.Component { setIsOpen = (isOpen) => this.setState({ isOpen: isOpen }); handleClickOutside = (e) => { - if ( - this.ref.current.contains(e.target) && - !e.target.closest(".backdrop-active") - ) - return; + if (this.ref.current.contains(e.target)) return; this.setState({ isOpen: !this.state.isOpen }, () => { this.props.toggleAction && this.props.toggleAction(e, this.state.isOpen); diff --git a/web/ASC.Web.Components/src/components/context-menu-button/index.js b/web/ASC.Web.Components/src/components/context-menu-button/index.js index 94f6f9fd6b..94fd7492d3 100644 --- a/web/ASC.Web.Components/src/components/context-menu-button/index.js +++ b/web/ASC.Web.Components/src/components/context-menu-button/index.js @@ -140,11 +140,7 @@ class ContextMenuButton extends React.Component { }; clickOutsideAction = (e) => { - if ( - this.ref.current.contains(e.target) && - !e.target.closest(".backdrop-active") - ) - return; + if (this.ref.current.contains(e.target)) return; this.onIconButtonClick(); }; @@ -234,7 +230,12 @@ class ContextMenuButton extends React.Component { ) : ( <> - +