@zohodesk/components 1.2.4 → 1.2.6

package/es/v1/Modal/Modal.js

@@ -0,0 +1,154 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**** Libraries ****/
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { defaultProps } from '../../Modal/props/defaultProps';
+import { propTypes } from '../../Modal/props/propTypes';
+import style from '../../AppContainer/AppContainer.module.css';
+let createdPortalIds = [];
+let newPortalPrefix = 'CPortal';
+let portalChildrenTopIndexValues;
+export default class Modal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleAddPortalId = this.handleAddPortalId.bind(this);
+    this.handleRemovePortalId = this.handleRemovePortalId.bind(this);
+    this.handleInsertPortalDiv = this.handleInsertPortalDiv.bind(this);
+    this.getPortalDiv = this.getPortalDiv.bind(this);
+    this.state = {
+      isMounted: false
+    };
+    this.portalId = props.portalId;
+    this.setRef = this.setRef.bind(this);
+    this.ref = null; // this.portalDiv = document.createDocumentFragment();
+  }
+
+  setRef(ele) {
+    this.ref = ele;
+
+    if (this.isZIndexAppendNeeded) {
+      this.ref.style.zIndex = this.zIndex;
+      this.isZIndexAppendNeeded = false;
+    }
+  }
+
+  getPortalDiv() {
+    this.modalRoot = this.props.portalId ? document.querySelector(`[data-portal=${this.props.portalId}]`) : '';
+
+    if (!this.modalRoot) {
+      this.portalId = this.handleAddPortalId();
+      this.newModalRoot = document.createElement('div');
+      this.newModalRoot.className = style.container;
+      this.newModalRoot.setAttribute('data-portal', this.portalId);
+      this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
+      this.modalRoot = this.newModalRoot;
+    }
+
+    return this.modalRoot;
+  }
+
+  componentDidMount() {
+    this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
+    this.portalDiv = this.getPortalDiv();
+    this.setState({
+      isMounted: true
+    }, () => {
+      this.handleInsertPortalDiv();
+    });
+  }
+
+  componentWillUnmount() {
+    //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
+    if (this.newModalRoot) {
+      this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
+      this.handleRemovePortalId();
+    }
+
+    if (this.zIndex && portalChildrenTopIndexValues === this.zIndex) {
+      portalChildrenTopIndexValues -= 1;
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.isActive != this.props.isActive) {
+      if (this.props.isActive) {
+        this.handleInsertPortalDiv();
+      } else if (this.zIndex && portalChildrenTopIndexValues === this.zIndex) {
+        portalChildrenTopIndexValues -= 1;
+      }
+    }
+  }
+
+  handleInsertPortalDiv() {
+    let {
+      autoZIndexNeeded
+    } = this.props;
+
+    if (autoZIndexNeeded) {
+      let {
+        isActive
+      } = this.props;
+
+      if (isActive) {
+        let newHighValue = Number(portalChildrenTopIndexValues || 10) + 1;
+        portalChildrenTopIndexValues = newHighValue;
+        this.zIndex = newHighValue;
+
+        if (this.ref) {
+          this.ref.style.zIndex = newHighValue;
+        } else {
+          this.isZIndexAppendNeeded = true;
+        }
+      }
+    }
+  }
+
+  handleAddPortalId() {
+    let createdPortalIdsLen = createdPortalIds.length;
+    let newPortalId = createdPortalIdsLen ? createdPortalIds[createdPortalIdsLen - 1] + 1 : 1;
+    createdPortalIds.push(newPortalId);
+    this.portalId = newPortalId;
+    this.isCustomPortalId = true;
+    return `${newPortalPrefix}${newPortalId}`;
+  }
+
+  handleRemovePortalId() {
+    if (this.isCustomPortalId) {
+      createdPortalIds = createdPortalIds.filter(id => id !== this.portalId);
+    }
+  }
+
+  render() {
+    let {
+      children
+    } = this.props,
+        {
+      isMounted
+    } = this.state;
+    let Element = children.type,
+        elementProps = children.props;
+
+    if (isMounted) {
+      if (Element) {
+        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Element, _extends({
+          ref: this.setRef
+        }, elementProps)), this.portalDiv);
+      }
+
+      return null;
+    }
+
+    return null;
+  }
+
+}
+Modal.defaultProps = defaultProps;
+Modal.propTypes = propTypes; // if (__DOCS__) {
+//   Modal.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     external: false,
+//     description: ' '
+//   };
+// }