From f1026c8a2debe92a5674045dc1a26114d361a806 Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Thu, 1 Aug 2019 14:28:12 +0300 Subject: [PATCH] minor refactor in common components --- src/common/Checkbox/styles.less | 1 + src/common/NavBar/NavBar.js | 4 +- src/common/NavBar/NavBarButton/styles.less | 1 + src/common/NavBar/NavMenu/styles.less | 2 +- src/common/NavBar/styles.less | 1 + src/common/Popup/Label.js | 2 +- src/common/Popup/Menu.js | 2 +- src/common/Popup/Popup.js | 61 +++++++++++----------- 8 files changed, 39 insertions(+), 35 deletions(-) diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less index 498e75d3b..4d20ccdfd 100644 --- a/src/common/Checkbox/styles.less +++ b/src/common/Checkbox/styles.less @@ -9,6 +9,7 @@ } .icon { + display: block; width: var(--icon-size); height: var(--icon-size); fill: var(--icon-color); diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js index d5462771c..07daeb544 100644 --- a/src/common/NavBar/NavBar.js +++ b/src/common/NavBar/NavBar.js @@ -1,12 +1,12 @@ const React = require('react'); -const classnames = require('classnames'); const PropTypes = require('prop-types'); +const classnames = require('classnames'); const NavBarButton = require('./NavBarButton'); const SearchBar = require('./SearchBar'); const NavMenu = require('./NavMenu'); const styles = require('./styles'); -const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, navMenu }) => { +const NavBar = React.memo(({ className, backButton = false, tabs = [], title = '', searchBar = false, navMenu = false }) => { const onBackButtonClick = React.useCallback(() => { window.history.back(); }, []); diff --git a/src/common/NavBar/NavBarButton/styles.less b/src/common/NavBar/NavBarButton/styles.less index d6c78ac06..dd5e3fbf0 100644 --- a/src/common/NavBar/NavBarButton/styles.less +++ b/src/common/NavBar/NavBarButton/styles.less @@ -15,6 +15,7 @@ .icon { flex: none; + width: 1.5rem; height: 1.2rem; margin-right: 0.6rem; fill: var(--color-surfacelighter); diff --git a/src/common/NavBar/NavMenu/styles.less b/src/common/NavBar/NavMenu/styles.less index 55b73d56f..26a2112f3 100644 --- a/src/common/NavBar/NavMenu/styles.less +++ b/src/common/NavBar/NavMenu/styles.less @@ -14,7 +14,7 @@ } .icon { - display: block; + width: 50%; height: 50%; fill: var(--color-surfacelighter); } diff --git a/src/common/NavBar/styles.less b/src/common/NavBar/styles.less index 6815c414f..a84ae587c 100644 --- a/src/common/NavBar/styles.less +++ b/src/common/NavBar/styles.less @@ -51,6 +51,7 @@ flex-grow: 0; flex-shrink: 1; flex-basis: calc(var(--nav-bar-height) * 8); + min-width: calc(var(--nav-bar-height) * 3); height: var(--nav-bar-height); &+.spacing { diff --git a/src/common/Popup/Label.js b/src/common/Popup/Label.js index 5fce89cc0..255b59d5b 100644 --- a/src/common/Popup/Label.js +++ b/src/common/Popup/Label.js @@ -12,7 +12,7 @@ Label.propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node - ]) + ]).isRequired }; module.exports = Label; diff --git a/src/common/Popup/Menu.js b/src/common/Popup/Menu.js index a21df7bbc..577c1be4e 100644 --- a/src/common/Popup/Menu.js +++ b/src/common/Popup/Menu.js @@ -1,6 +1,6 @@ const PropTypes = require('prop-types'); -const Menu = ({ children }) => children; +const Menu = ({ className, tabIndex, children }) => children; Menu.displayName = 'Popup.Menu'; diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js index 404ddf7bb..5ba65cf5d 100644 --- a/src/common/Popup/Popup.js +++ b/src/common/Popup/Popup.js @@ -49,21 +49,23 @@ class Popup extends React.Component { } componentDidUpdate(prevProps, prevState) { - if (this.state.open && !prevState.open) { - this.updateStyles(); - this.popupMutationObserver.observe(document.documentElement, { - childList: true, - attributes: true, - characterData: true, - subtree: true - }); - if (typeof this.props.onOpen === 'function') { - this.props.onOpen(); - } - } else if (!this.state.open && prevState.open) { - this.popupMutationObserver.disconnect(); - if (typeof this.props.onClose === 'function') { - this.props.onClose(); + if (this.state.open !== prevState.open) { + this.updateMenuStyles(); + if (this.state.open) { + this.popupMutationObserver.observe(document.documentElement, { + childList: true, + attributes: true, + characterData: true, + subtree: true + }); + if (typeof this.props.onOpen === 'function') { + this.props.onOpen(); + } + } else { + this.popupMutationObserver.disconnect(); + if (typeof this.props.onClose === 'function') { + this.props.onClose(); + } } } } @@ -83,7 +85,7 @@ class Popup extends React.Component { menuChildrenRect.y !== prevMenuChildrenRect.y || menuChildrenRect.width !== prevMenuChildrenRect.width || menuChildrenRect.height !== prevMenuChildrenRect.height) { - this.updateStyles(); + this.updateMenuStyles(); } prevLabelRect = labelRect; @@ -95,7 +97,11 @@ class Popup extends React.Component { }); } - updateStyles = () => { + updateMenuStyles = () => { + if (!this.state.open) { + return; + } + this.menuContainerRef.current.removeAttribute('style'); this.menuScrollRef.current.removeAttribute('style'); this.menuBorderTopRef.current.removeAttribute('style'); @@ -156,7 +162,7 @@ class Popup extends React.Component { menuDirections.left = true; } - if (borderColor) { + if (borderColor.length > 0) { this.menuBorderTopRef.current.style.height = `${borderSize}px`; this.menuBorderRightRef.current.style.width = `${borderSize}px`; this.menuBorderBottomRef.current.style.height = `${borderSize}px`; @@ -199,8 +205,7 @@ class Popup extends React.Component { } onKeyUp = (event) => { - if (this.state.open && event.keyCode === 27) { // escape - event.stopPropagation(); + if (this.state.open && event.keyCode === 27) { this.close(); } } @@ -213,22 +218,18 @@ class Popup extends React.Component { this.setState({ open: false }); } - labelOnClick = (event) => { - event.stopPropagation(); - this.open(); - } - menuContainerOnClick = (event) => { - event.stopPropagation(); + event.nativeEvent.handled = true; } modalBackgroundOnClick = (event) => { - event.stopPropagation(); - this.close(); + if (!event.nativeEvent.handled) { + this.close(); + } } renderLabel(labelElement) { - return React.cloneElement(labelElement, { ref: this.labelRef, onClick: this.labelOnClick }); + return React.cloneElement(labelElement, { ref: this.labelRef, onClick: this.open }); } renderMenu(menuElement) { @@ -294,7 +295,7 @@ Popup.propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node - ]) + ]).isRequired }; module.exports = Popup;