Overlay: Inherit zIndexGroupLevel from ancestors

fix #123

Author: Vladimir Varankin

src/Modal/examples.js

@@ -1,7 +1,8 @@
 import React from 'react';
-
 import Button from '../Button';
 import Modal from '../Modal';
+import Select from '../Select';
+import Item from '../Item';
 
 class ModalExampleControlled extends React.Component {
     constructor(props) {
@@ -15,8 +16,13 @@ class ModalExampleControlled extends React.Component {
         return (
             <div className="example">
                 <Button theme="islands" size="s" onClick={() => this.onModalAnchorClick()}>Open controlled modal</Button>
-                <Modal theme="islands" visible={this.state.visible}>
+                <Modal theme="islands" visible={this.state.visible} zIndexGroupLevel={40}>
                     <p>I can do this all day.</p>
+                    <Select theme="islands" size="l" placeholder="Select days" value={[12]}>
+                        <Item value="12" checkedText="Dec">December</Item>
+                        <Item value="1" checkedText="Jan">January</Item>
+                        <Item value="2" checkedText="Feb">February</Item>
+                    </Select>
                     <p>Because we can!</p>
                     <Button theme="islands" size="l" onClick={() => this.onModalCloseClick()}>Close modal</Button>
                 </Modal>

src/Overlay/Portal/index.js

@@ -5,7 +5,6 @@ class Portal extends React.Component {
     constructor(props) {
         super(props);
         this.portalNode = null;
-        this.isAttachedToPortal = false;
     }
 
     componentDidMount() {
@@ -30,7 +29,6 @@ class Portal extends React.Component {
             this.mountPortal();
             // NOTE: `ReactDOM.unstable_renderSubtreeIntoContainer` to store intermediate contexts
             ReactDOM.unstable_renderSubtreeIntoContainer(this, child, this.portalNode);
-            this.isAttachedToPortal = true;
         } else {
             this.unmountPortal();
         }
@@ -44,11 +42,8 @@ class Portal extends React.Component {
     }
 
     unmountPortal() {
-        if (this.isAttachedToPortal) {
-            ReactDOM.unmountComponentAtNode(this.portalNode);
-            this.isAttachedToPortal = false;
-        }
         if (this.portalNode) {
+            ReactDOM.unmountComponentAtNode(this.portalNode);
             this.getPortalRootNode().removeChild(this.portalNode);
             this.portalNode = null;
         }

src/Overlay/index.js

@@ -28,38 +28,39 @@ class Overlay extends Component {
 
     getChildContext() {
         return {
+            zIndexGroupLevel: this.context.zIndexGroupLevel || this.props.zIndexGroupLevel,
             isParentLayerVisible: this.isVisible,
             preventParentLayerClickOutside: this.preventClickOutside,
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.visible) {
-            this.layerWillBecomeVisible();
+            this.layerBecomeVisible();
         }
     }
 
-    componentWillUpdate(nextProps) {
+    componentDidUpdate({ visible }) {
         this.handleParentLayerHide();
-        // NOTE(narqo@): do this only when visible is going to be changed
-        if (this.props.visible !== nextProps.visible) {
-            if (nextProps.visible) {
-                this.layerWillBecomeVisible();
+        // NOTE(narqo@): do this only when visible was changed
+        if (this.props.visible !== visible) {
+            if (this.props.visible) {
+                this.layerBecomeVisible();
             } else {
-                this.layerWillBecomeHidden();
+                this.layerBecomeHidden();
             }
         }
     }
 
     componentWillUnmount() {
         this.requestHide(null, false);
-        this.layerWillBecomeHidden();
+        this.layerBecomeHidden();
     }
 
-    layerWillBecomeVisible() {
+    layerBecomeVisible() {
         visibleLayersStack.unshift(this);
 
-        this.captureZIndex();
+        this.acquireZIndex();
 
         document.addEventListener('keydown', this.onDocumentKeyPress);
         // NOTE(narqo@): we have to use `nextTick` or nested layer will be closed immediately after being opened
@@ -71,7 +72,7 @@ class Overlay extends Component {
         });
     }
 
-    layerWillBecomeHidden() {
+    layerBecomeHidden() {
         const idx = visibleLayersStack.indexOf(this);
         if (idx > -1) {
             visibleLayersStack.splice(idx, 1);
@@ -151,8 +152,8 @@ class Overlay extends Component {
         }
     }
 
-    captureZIndex() {
-        const level = this.props.zIndexGroupLevel;
+    acquireZIndex() {
+        const level = this.context.zIndexGroupLevel || this.props.zIndexGroupLevel;
 
         let zIndexes = visibleLayersZIndexes[level];
         if (!zIndexes) {
@@ -168,7 +169,8 @@ class Overlay extends Component {
     }
 
     releaseZIndex() {
-        const zIndexes = visibleLayersZIndexes[this.props.zIndexGroupLevel];
+        const level = this.context.zIndexGroupLevel || this.props.zIndexGroupLevel;
+        const zIndexes = visibleLayersZIndexes[level];
         const idx = zIndexes.indexOf(this.zIndex);
         if (idx > -1) {
             zIndexes.splice(idx, 1);
@@ -177,12 +179,14 @@ class Overlay extends Component {
 }
 
 Overlay.childContextTypes = Overlay.contextTypes = {
+    zIndexGroupLevel: React.PropTypes.number,
     isParentLayerVisible: React.PropTypes.func,
     preventParentLayerClickOutside: React.PropTypes.func,
 };
 
 Overlay.propsTypes = {
     visible: React.PropTypes.bool.isRequired,
+    zIndexGroupLevel: React.PropTypes.number,
     onClick: React.PropTypes.func,
     onRequestHide: React.PropTypes.func,
     onOrderChange: React.PropTypes.func,

src/Popup/examples.js

@@ -119,6 +119,12 @@ class PopupExampleScroll extends React.Component {
         };
     }
 
+    getChildContext() {
+        return {
+            zIndexGroupLevel: this.props.zIndexGroupLevel,
+        };
+    }
+
     render() {
         return (
             <div className="example">
@@ -179,14 +185,18 @@ class PopupExampleScroll extends React.Component {
     }
 }
 
+PopupExampleScroll.childContextTypes = {
+    zIndexGroupLevel: React.PropTypes.number,
+};
+
 function Example() {
     return (
         <div className="examples">
             <PopupExampleSimple />
 
             <PopupExampleNested />
 
-            <PopupExampleScroll />
+            <PopupExampleScroll zIndexGroupLevel={20} />
         </div>
     );
 }

src/Popup/index.js

@@ -125,13 +125,7 @@ class Popup extends Component {
     }
 
     onLayerRequestHide(e, reason) {
-        if (this.props.visible && this.props.onRequestHide) {
-            if (reason === 'clickOutside') {
-                const anchor = this.getAnchor();
-                if (anchor instanceof Element && anchor.contains(e.target)) {
-                    return;
-                }
-            }
+        if (this.props.visible) {
             this.props.onRequestHide(e, reason, this.props);
         }
     }