From fd69e61a34f231c989505ce3d273b07bbd25466d Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Mon, 3 Dec 2018 15:11:47 +0200 Subject: [PATCH] popup refactored to work with divs as borders --- src/common/Popup/Popup.js | 105 ++++++++++++++++++++++------------- src/common/Popup/styles.less | 59 ++++++++------------ 2 files changed, 89 insertions(+), 75 deletions(-) diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js index 0fc56d22a..9cbe16c5f 100644 --- a/src/common/Popup/Popup.js +++ b/src/common/Popup/Popup.js @@ -11,12 +11,16 @@ class Popup extends Component { super(props); this.labelRef = React.createRef(); + this.labelBorderTopRef = React.createRef(); + this.labelBorderRightRef = React.createRef(); + this.labelBorderBottomRef = React.createRef(); + this.labelBorderLeftRef = React.createRef(); this.menuRef = React.createRef(); - this.scrollRef = React.createRef(); - this.borderTopRef = React.createRef(); - this.borderRightRef = React.createRef(); - this.borderBottomRef = React.createRef(); - this.borderLeftRef = React.createRef(); + this.menuScrollRef = React.createRef(); + this.menuBorderTopRef = React.createRef(); + this.menuBorderRightRef = React.createRef(); + this.menuBorderBottomRef = React.createRef(); + this.menuBorderLeftRef = React.createRef(); this.state = { open: false @@ -41,26 +45,22 @@ class Popup extends Component { } componentDidUpdate(prevProps, prevState) { - if (this.state.open !== prevState.open) { + if (this.state.open && !prevState.open) { this.updateStyles(); - if (this.state.open && typeof this.props.onOpen === 'function') { + if (typeof this.props.onOpen === 'function') { this.props.onOpen(); - } else if (!this.state.open && typeof this.props.onClose === 'function') { - this.props.onClose(); } + } else if (!this.state.open && prevState.open && typeof this.props.onClose === 'function') { + this.props.onClose(); } } updateStyles = () => { - if (!this.state.open) { - this.labelRef.current.style.border = null; - return; - } - const menuDirections = {}; const bodyRect = document.body.getBoundingClientRect(); const menuRect = this.menuRef.current.getBoundingClientRect(); const labelRect = this.labelRef.current.getBoundingClientRect(); + const borderWidth = 1 / window.devicePixelRatio; const labelPosition = { left: labelRect.x - bodyRect.x, top: labelRect.y - bodyRect.y, @@ -70,60 +70,83 @@ class Popup extends Component { if (menuRect.height <= labelPosition.bottom) { this.menuRef.current.style.top = `${labelPosition.top + labelRect.height}px`; - this.scrollRef.current.style.maxHeight = `${labelPosition.bottom}px`; + this.menuScrollRef.current.style.maxHeight = `${labelPosition.bottom}px`; menuDirections.bottom = true; } else if (menuRect.height <= labelPosition.top) { this.menuRef.current.style.bottom = `${labelPosition.bottom + labelRect.height}px`; - this.scrollRef.current.style.maxHeight = `${labelPosition.top}px`; + this.menuScrollRef.current.style.maxHeight = `${labelPosition.top}px`; menuDirections.top = true; } else if (labelPosition.bottom >= labelPosition.top) { this.menuRef.current.style.top = `${labelPosition.top + labelRect.height}px`; - this.scrollRef.current.style.maxHeight = `${labelPosition.bottom}px`; + this.menuScrollRef.current.style.maxHeight = `${labelPosition.bottom}px`; menuDirections.bottom = true; } else { this.menuRef.current.style.bottom = `${labelPosition.bottom + labelRect.height}px`; - this.scrollRef.current.style.maxHeight = `${labelPosition.top}px`; + this.menuScrollRef.current.style.maxHeight = `${labelPosition.top}px`; menuDirections.top = true; } if (menuRect.width <= (labelPosition.right + labelRect.width)) { this.menuRef.current.style.left = `${labelPosition.left}px`; - this.scrollRef.current.style.maxWidth = `${labelPosition.right + labelRect.width}px`; + this.menuScrollRef.current.style.maxWidth = `${labelPosition.right + labelRect.width}px`; menuDirections.right = true; } else if (menuRect.width <= (labelPosition.left + labelRect.width)) { this.menuRef.current.style.right = `${labelPosition.right}px`; - this.scrollRef.current.style.maxWidth = `${labelPosition.left + labelRect.width}px`; + this.menuScrollRef.current.style.maxWidth = `${labelPosition.left + labelRect.width}px`; menuDirections.left = true; } else if (labelPosition.right > labelPosition.left) { this.menuRef.current.style.left = `${labelPosition.left}px`; - this.scrollRef.current.style.maxWidth = `${labelPosition.right + labelRect.width}px`; + this.menuScrollRef.current.style.maxWidth = `${labelPosition.right + labelRect.width}px`; menuDirections.right = true; } else { this.menuRef.current.style.right = `${labelPosition.right}px`; - this.scrollRef.current.style.maxWidth = `${labelPosition.left + labelRect.width}px`; + this.menuScrollRef.current.style.maxWidth = `${labelPosition.left + labelRect.width}px`; menuDirections.left = true; } if (!!this.props.borderColor) { - this.borderTopRef.current.style.borderTopColor = this.props.borderColor; - this.borderRightRef.current.style.borderRightColor = this.props.borderColor; - this.borderBottomRef.current.style.borderBottomColor = this.props.borderColor; - this.borderLeftRef.current.style.borderLeftColor = this.props.borderColor; - this.labelRef.current.style.border = `1px solid ${this.props.borderColor}`; - const borderWidth = 1 / window.devicePixelRatio; + this.menuBorderTopRef.current.style.backgroundColor = this.props.borderColor; + this.menuBorderTopRef.current.style.height = `${borderWidth}px`; + this.menuBorderRightRef.current.style.backgroundColor = this.props.borderColor; + this.menuBorderRightRef.current.style.width = `${borderWidth}px`; + this.menuBorderBottomRef.current.style.backgroundColor = this.props.borderColor; + this.menuBorderBottomRef.current.style.height = `${borderWidth}px`; + this.menuBorderLeftRef.current.style.backgroundColor = this.props.borderColor; + this.menuBorderLeftRef.current.style.width = `${borderWidth}px`; + this.labelBorderTopRef.current.style.backgroundColor = this.props.borderColor; + this.labelBorderTopRef.current.style.height = `${borderWidth}px`; + this.labelBorderTopRef.current.style.top = `${labelPosition.top}px`; + this.labelBorderTopRef.current.style.right = `${labelPosition.right}px`; + this.labelBorderTopRef.current.style.left = `${labelPosition.left}px`; + this.labelBorderRightRef.current.style.backgroundColor = this.props.borderColor; + this.labelBorderRightRef.current.style.width = `${borderWidth}px`; + this.labelBorderRightRef.current.style.top = `${labelPosition.top}px`; + this.labelBorderRightRef.current.style.right = `${labelPosition.right}px`; + this.labelBorderRightRef.current.style.bottom = `${labelPosition.bottom}px`; + this.labelBorderBottomRef.current.style.backgroundColor = this.props.borderColor; + this.labelBorderBottomRef.current.style.height = `${borderWidth}px`; + this.labelBorderBottomRef.current.style.right = `${labelPosition.right}px`; + this.labelBorderBottomRef.current.style.bottom = `${labelPosition.bottom}px`; + this.labelBorderBottomRef.current.style.left = `${labelPosition.left}px`; + this.labelBorderLeftRef.current.style.backgroundColor = this.props.borderColor; + this.labelBorderLeftRef.current.style.width = `${borderWidth}px`; + this.labelBorderLeftRef.current.style.top = `${labelPosition.top}px`; + this.labelBorderLeftRef.current.style.bottom = `${labelPosition.bottom}px`; + this.labelBorderLeftRef.current.style.left = `${labelPosition.left}px`; + if (menuDirections.top) { - this.labelRef.current.style.borderTop = 'none'; + this.labelBorderTopRef.current.style.display = 'none'; if (menuDirections.left) { - this.borderBottomRef.current.style.right = `${labelRect.width - borderWidth}px`; + this.menuBorderBottomRef.current.style.right = `${labelRect.width - borderWidth}px`; } else { - this.borderBottomRef.current.style.left = `${labelRect.width - borderWidth}px`; + this.menuBorderBottomRef.current.style.left = `${labelRect.width - borderWidth}px`; } } else { - this.labelRef.current.style.borderBottom = 'none'; + this.labelBorderBottomRef.current.style.display = 'none'; if (menuDirections.left) { - this.borderTopRef.current.style.right = `${labelRect.width - borderWidth}px`; + this.menuBorderTopRef.current.style.right = `${labelRect.width - borderWidth}px`; } else { - this.borderTopRef.current.style.left = `${labelRect.width - borderWidth}px`; + this.menuBorderTopRef.current.style.left = `${labelRect.width - borderWidth}px`; } } } @@ -162,14 +185,18 @@ class Popup extends Component { return (
-
+
{children}
-
-
-
-
+
+
+
+
+
+
+
+
); } diff --git a/src/common/Popup/styles.less b/src/common/Popup/styles.less index 88d463629..d2b7cab31 100644 --- a/src/common/Popup/styles.less +++ b/src/common/Popup/styles.less @@ -5,46 +5,33 @@ .scroll-container { overflow: auto; } +} - .border { - position: absolute; - border: 0 solid transparent; - pointer-events: none; +.border { + position: absolute; + pointer-events: none; - &-top { - left: 0; - top: 0; - right: 0; - height: 0; - border-top-width: 1px; - height: 100%; - } + &-top { + top: 0; + right: 0; + left: 0; + } - &-bottom { - left: 0; - bottom: 0; - right: 0; - height: 0; - border-bottom-width: 1px; - height: 100%; - } + &-bottom { + right: 0; + bottom: 0; + left: 0; + } - &-left { - top: 0; - bottom: 0; - left: 0; - width: 0; - border-left-width: 1px; - width: 100%; - } + &-left { + top: 0; + bottom: 0; + left: 0; + } - &-right { - top: 0; - bottom: 0; - right: 0; - width: 0; - border-right-width: 1px; - width: 100%; - } + &-right { + top: 0; + right: 0; + bottom: 0; } } \ No newline at end of file