@zohodesk/components 1.2.3 → 1.2.5

package/es/v1/Popup/Popup.js

@@ -0,0 +1,645 @@
+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 PropTypes from 'prop-types';
+import hoistStatics from 'hoist-non-react-statics';
+/**** Methods ****/
+
+import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from '../../utils/Common.js';
+import viewPort from './viewPort';
+import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from '../../Popup/PositionMapping.json';
+import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
+let lastOpenedGroup = [];
+let popups = {};
+
+global.closeGroupPopups = function (groupName) {
+  const groupPopups = popups[groupName] || [];
+  groupPopups.forEach(popup => {
+    popup.state.isPopupOpen && popup.setState({
+      isPopupOpen: false,
+      isPopupReady: false
+    });
+  });
+};
+
+const defaultState = {
+  position: 'bottomCenter',
+  height: '0px',
+  positions: {},
+  //{bottomCenter: true, bottomLeft: false, ...}
+  positionsOffset: {},
+  //{bottomCenter: {left: ‘’,top: ‘’ }, .....}
+  targetOffset: {},
+  //{height: ‘’, width: ‘’,}
+  popupOffset: {},
+  //{height: ‘’, width: ‘’,}
+  isAbsolutePositioningNeeded: true
+};
+/* eslint-disable react/no-deprecated */
+
+/* eslint-disable react/prop-types */
+
+const Popup = function (Component) {
+  let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
+  let needResizeHandling = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let {
+    isAbsolutePositioningNeeded: isAbsolutePopup = true,
+    isArrow: needPopupArrow = false,
+    customOrder: customPositionOrder = [],
+    scrollDebounceTime: popupScrollDebounceTime = 0,
+    closeOnScroll: closeOnScrollPopup = false
+  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
+  class Popup extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        isPopupOpen: props.isPopupOpen || false,
+        position: 'bottomCenter',
+        height: '0px',
+        isPopupReady: props.isPopupOpen || false,
+        positions: {},
+        //{bottomCenter: true, bottomLeft: false, ...}
+        positionsOffset: {},
+        //{bottomCenter: {left: ‘’,top: ‘’ }, .....}
+        targetOffset: {},
+        //{height: ‘’, width: ‘’,}
+        popupOffset: {},
+        //{height: ‘’, width: ‘’,}
+        isAbsolutePositioningNeeded: true
+      };
+      this.togglePopup = this.togglePopup.bind(this);
+      this.documentClickHandler = this.documentClickHandler.bind(this);
+      this.documentClickHandler1 = this.documentClickHandler1.bind(this);
+      this.removeClose = this.removeClose.bind(this);
+      this.documentKeyupHandler = this.documentKeyupHandler.bind(this);
+      this.openPopupOnly = this.openPopupOnly.bind(this);
+      this.closePopupOnly = this.closePopupOnly.bind(this);
+      this.getTargetRef = this.getTargetRef.bind(this);
+      this.getContainerRef = this.getContainerRef.bind(this);
+      this.handlePopupPosition = this.handlePopupPosition.bind(this);
+      this.handleResize = debounce(this.handleResize.bind(this), 300);
+      this.handlePopupResize = this.handlePopupResize.bind(this);
+      this.getIsAbsolutePopup = this.getIsAbsolutePopup.bind(this);
+      this.getNeedArrow = this.getNeedArrow.bind(this);
+      this.getCustomPositionOrder = this.getCustomPositionOrder.bind(this);
+      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this);
+      this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
+      this.getCloseOnScrollPopup = this.getCloseOnScrollPopup.bind(this);
+      this.handleCloseLastOpenedGroup = this.handleCloseLastOpenedGroup.bind(this);
+      this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+      this.handleDocumentFocus = this.handleDocumentFocus.bind(this);
+      this.handleGetNeedPrevent = this.handleGetNeedPrevent.bind(this);
+      this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
+
+      this.size = null;
+      this.isAbsolutePopup = isAbsolutePopup;
+      this.needPopupArrow = needPopupArrow;
+      this.customPositionOrder = customPositionOrder;
+      this.scrollDebounceTime = popupScrollDebounceTime;
+      this.closeOnScroll = closeOnScrollPopup;
+      const {
+        scrollDebounceTime
+      } = this.getScrollDebounceTime(this);
+      this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
+    }
+
+    componentDidMount() {
+      const group = this.getGroup();
+      const groupPopups = popups[group] || [];
+      groupPopups.push(this);
+      popups[group] = groupPopups;
+
+      if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
+        document.addEventListener('click', this.documentClickHandler, false);
+        document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
+
+        window.addEventListener('resize', this.handleResize);
+        document.addEventListener('click', this.documentClickHandler1, true);
+        document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
+        document.addEventListener('focus', this.handleDocumentFocus, true);
+      }
+    }
+
+    componentWillReceiveProps(nextProps) {
+      const {
+        isPopupOpen
+      } = this.state;
+
+      if (typeof nextProps.isPopupOpen !== 'undefined' && nextProps.isPopupOpen !== isPopupOpen) {
+        this.setState({
+          isPopupOpen: nextProps.isPopupOpen,
+          isPopupReady: nextProps.isPopupOpen
+        });
+      }
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+      const {
+        isPopupReady
+      } = this.state;
+      const {
+        isPopupReady: oldStateOpen = false
+      } = prevState || {};
+      const {
+        dropElement
+      } = this;
+      const {
+        needResizeHandling: propResizeHandling
+      } = this.props;
+
+      if (oldStateOpen !== isPopupReady) {
+        if (isPopupReady && dropElement && (propResizeHandling !== undefined ? propResizeHandling : needResizeHandling)) {
+          this.popupObserver.replaceObservationElement(dropElement);
+        } else if (!isPopupReady) {
+          this.size = null;
+          this.popupObserver.disconnect();
+        }
+      }
+    }
+
+    componentWillUnmount() {
+      const group = this.getGroup();
+      popups = Object.keys(popups).reduce((res, groupName) => {
+        if (groupName === group) {
+          const groupPopups = popups[group];
+          const newGroupPopups = groupPopups.filter(popup => popup !== this);
+          newGroupPopups.length === 0 && lastOpenedGroup.indexOf(group) >= 0 && lastOpenedGroup.splice(lastOpenedGroup.indexOf(group), 1);
+          res[group] = newGroupPopups;
+        }
+
+        return res;
+      }, popups);
+      let noPopups = true;
+
+      for (const i in popups) {
+        if (popups[i].length >= 1) {
+          noPopups = false;
+          break;
+        }
+      }
+
+      if (this.popupObserver) {
+        this.popupObserver.disconnect();
+      }
+
+      if (noPopups) {
+        document.removeEventListener('click', this.documentClickHandler);
+        document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
+
+        window.removeEventListener('resize', this.handleResize);
+        document.removeEventListener('click', this.documentClickHandler1, true);
+        document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
+        document.removeEventListener('focus', this.handleDocumentFocus, true);
+      }
+    }
+
+    getGroup() {
+      const {
+        popupGroup
+      } = this.props;
+      return popupGroup || group;
+    }
+
+    getNeedArrow(popup) {
+      const {
+        isArrow
+      } = popup.props;
+      const {
+        needPopupArrow
+      } = popup;
+      return isArrow !== undefined ? isArrow : needPopupArrow;
+    }
+
+    getScrollDebounceTime(popup) {
+      const {
+        scrollDebounceTime
+      } = popup.props;
+      const {
+        scrollDebounceTime: popupScrollDebounceTime
+      } = popup;
+      return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
+    }
+
+    getCloseOnScrollPopup(popup) {
+      const {
+        closeOnScroll
+      } = popup.props;
+      const {
+        closeOnScroll: closeOnScrollPopup
+      } = popup;
+      return closeOnScroll !== undefined ? closeOnScroll : closeOnScrollPopup;
+    }
+
+    getIsAbsolutePopup(popup) {
+      const {
+        isAbsolutePositioningNeeded
+      } = popup.props;
+      const {
+        isAbsolutePopup
+      } = popup;
+      return isAbsolutePositioningNeeded !== undefined ? isAbsolutePositioningNeeded : isAbsolutePopup;
+    }
+
+    getCustomPositionOrder(popup) {
+      const {
+        customOrder = []
+      } = popup.props;
+      const {
+        customPositionOrder
+      } = popup;
+      return customOrder.length !== 0 ? customOrder : customPositionOrder;
+    }
+
+    togglePopup(e, defaultPosition) {
+      const group = this.getGroup();
+      this.removeClose(e);
+      const {
+        isPopupOpen
+      } = this.state;
+      const groupPopups = popups[group] || [];
+      lastOpenedGroup = !isPopupOpen && lastOpenedGroup.indexOf(group) === -1 ? [group, ...lastOpenedGroup] : lastOpenedGroup;
+      isPopupOpen && lastOpenedGroup.splice(0, 1);
+      groupPopups.forEach(popup => {
+        if (popup !== this && popup.state.isPopupOpen) {
+          popup.setState({
+            isPopupOpen: false,
+            isPopupReady: false
+          });
+        }
+      });
+
+      if (isPopupOpen) {
+        this.setState({
+          isPopupOpen: false,
+          isPopupReady: false
+        });
+      } else {
+        this.handlePopupPosition(defaultPosition);
+      }
+    }
+
+    openPopupOnly(e, defaultPosition) {
+      const group = this.getGroup();
+      this.removeClose(e);
+      lastOpenedGroup = lastOpenedGroup.indexOf(group) === -1 ? [group, ...lastOpenedGroup] : lastOpenedGroup;
+      this.handlePopupPosition(defaultPosition);
+    }
+
+    closePopupOnly(e) {
+      this.removeClose(e);
+      lastOpenedGroup.splice(0, 1);
+      const {
+        isPopupOpen
+      } = this.state;
+
+      if (isPopupOpen) {
+        this.setState({
+          isPopupOpen: false,
+          isPopupReady: false
+        });
+      }
+    }
+
+    handleCloseLastOpenedGroup() {
+      const groupPopups = lastOpenedGroup.length ? popups[lastOpenedGroup[0]] || [] : [];
+      lastOpenedGroup.splice(0, 1);
+      groupPopups.forEach(popup => {
+        popup.state.isPopupOpen && popup.setState({
+          isPopupOpen: false,
+          isPopupReady: false
+        });
+      });
+    }
+
+    handleDocumentMouseDown(e) {
+      const needPrevent = this.handleGetNeedPrevent(e);
+
+      if (needPrevent) {
+        this.removeClose(e);
+      }
+    }
+
+    handleDocumentFocus(e) {
+      const needPrevent = this.handleGetNeedPrevent(e);
+
+      if (needPrevent) {
+        this.removeClose(e);
+      }
+    }
+
+    handleGetNeedPrevent(e) {
+      let needPrevent = false;
+
+      if (lastOpenedGroup.length > 1) {
+        const {
+          target
+        } = e;
+        const groupPopups = lastOpenedGroup.length ? popups[lastOpenedGroup[0]] : [];
+        let openedPopup = null; // eslint-disable-next-line guard-for-in
+
+        for (const i in groupPopups) {
+          const {
+            isPopupOpen
+          } = groupPopups[i].state;
+
+          if (isPopupOpen) {
+            openedPopup = groupPopups[i];
+            break;
+          }
+        }
+
+        if (openedPopup) {
+          const {
+            dropElement,
+            placeHolderElement
+          } = openedPopup;
+          const isDropBoxChild = isDescendant(dropElement, target);
+          const isTargetChild = isDescendant(placeHolderElement, target); // const isPopupMassUpdateChild = isDescendant(
+          //   massUpdateParent,
+          //   dropElement
+          // );
+
+          if (!isDropBoxChild && !isTargetChild // && isPopupMassUpdateChild
+          ) {
+            needPrevent = true;
+          }
+        }
+      }
+
+      return needPrevent;
+    }
+
+    documentClickHandler1(e) {
+      const needPrevent = this.handleGetNeedPrevent(e);
+
+      if (needPrevent) {
+        this.removeClose(e);
+        this.handleCloseLastOpenedGroup();
+      }
+    }
+
+    documentClickHandler() {
+      try {
+        Object.keys(popups).forEach(groupName => {
+          const groupPopups = popups[groupName] || [];
+          groupPopups.forEach(popup => {
+            popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
+              isPopupOpen: false,
+              isPopupReady: false
+            });
+          });
+        });
+        lastOpenedGroup = [];
+      } catch (e) {// eslint-disable-next-line no-console
+        //console.error('popup component not unmounted properly', e);
+      }
+    }
+
+    documentKeyupHandler(e) {
+      try {
+        if (e.keyCode === 27) {
+          this.handleCloseLastOpenedGroup();
+        }
+      } catch (e) {// eslint-disable-next-line no-console
+        //console.log('error', e);
+      }
+    }
+
+    removeClose(e) {
+      // e && e.preventDefault && e.preventDefault();
+      cancelBubblingEffect(e);
+    }
+
+    handlePopupPosition() {
+      let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
+      let isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
+      // isResizeHandling --->>> Window resize and dropBox resize
+      const {
+        direction
+      } = this.context || {};
+      const {
+        placeHolderElement,
+        dropElement
+      } = this;
+      const needArrow = this.getNeedArrow(this);
+      const isAbsolute = this.getIsAbsolutePopup(this);
+      const customOrder = this.getCustomPositionOrder(this);
+
+      if (direction === 'rtl') {
+        defaultPosition = isAbsolute ? rtlAbsolutePositionMapping[defaultPosition] : rtlFixedPositionMapping[defaultPosition];
+      } else {
+        defaultPosition = isAbsolute ? absolutePositionMapping[defaultPosition] : defaultPosition;
+      }
+
+      if (!placeHolderElement && !dropElement) {
+        this.setState({
+          isPopupOpen: true,
+          isPopupReady: true
+        });
+        return;
+      }
+
+      const setPosition = () => {
+        requestAnimationFrame(() => {
+          const {
+            placeHolderElement,
+            dropElement
+          } = this;
+          const {
+            position,
+            isPopupReady
+          } = this.state;
+          const scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
+          const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+            needArrow,
+            isAbsolute,
+            customOrder
+          });
+          const {
+            view,
+            views,
+            viewsOffset,
+            targetOffset,
+            popupOffset
+          } = betterPosition || {};
+
+          if (position !== view || !isPopupReady) {
+            this.setState({
+              isPopupReady: true,
+              position: view,
+              positions: views,
+              positionsOffset: viewsOffset,
+              targetOffset,
+              popupOffset,
+              isAbsolutePositioningNeeded: isAbsolute
+            });
+          }
+        });
+      };
+
+      if (isResizeHandling) {
+        setPosition();
+      } else {
+        this.defaultPosition = defaultPosition;
+        this.setState({
+          isPopupOpen: true,
+          isPopupReady: false
+        }, setPosition);
+      }
+    }
+
+    handleOpenPopupPositionChange() {
+      Object.keys(popups).forEach(groupName => {
+        const groupPopups = popups[groupName] || [];
+        groupPopups.forEach(popup => {
+          if (popup.state.isPopupOpen) {
+            const {
+              placeHolderElement,
+              dropElement,
+              defaultPosition
+            } = popup;
+            const {
+              position,
+              positionsOffset = {}
+            } = popup.state;
+
+            if (placeHolderElement && dropElement) {
+              const scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
+              requestAnimationFrame(() => {
+                const needArrow = this.getNeedArrow(popup);
+                const isAbsolute = this.getIsAbsolutePopup(popup);
+                const customOrder = this.getCustomPositionOrder(popup);
+                const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+                  needArrow,
+                  isAbsolute,
+                  customOrder
+                });
+                const {
+                  view,
+                  views,
+                  viewsOffset = {},
+                  targetOffset,
+                  popupOffset
+                } = betterPosition || {};
+                const {
+                  left: oldLeft = '',
+                  top: oldTop = ''
+                } = positionsOffset[position] || {};
+                const {
+                  left = '',
+                  top = ''
+                } = viewsOffset[view] || {};
+                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
+                //   placeHolderElement,
+                //   scrollContainer
+                // );
+
+                if (changeState) {
+                  popup.setState({
+                    position: view,
+                    positions: views,
+                    positionsOffset: viewsOffset,
+                    targetOffset,
+                    popupOffset,
+                    isAbsolutePositioningNeeded: isAbsolute
+                  });
+                } // if (!isInViewPort && !isAbsolute) {
+                //   popup.setState({ isPopupOpen: false, isPopupReady: false });
+                // } else if (view && changeState) {
+                //   popup.setState({
+                //     position: view,
+                //     positions: views,
+                //     positionsOffset: viewsOffset,
+                //     targetOffset,
+                //     popupOffset,
+                //     isAbsolutePositioningNeeded: isAbsolute
+                //   });
+                // }
+
+              });
+            }
+          }
+        });
+      });
+    }
+
+    handleResize() {
+      this.handleOpenPopupPositionChange();
+    }
+
+    handleScroll(e) {
+      // this.handleOpenPopupPositionChange();
+      const {
+        closeOnScroll
+      } = this.getCloseOnScrollPopup(this);
+      const {
+        isPopupReady
+      } = this.state;
+
+      if (isPopupReady) {
+        console.log('onscrollPopupREady');
+      }
+
+      if (isPopupReady && closeOnScroll) {
+        console.log(this, 'handle Scroll');
+        this.togglePopup(e);
+      }
+    }
+
+    handlePopupResize(popupSize) {
+      const {
+        height,
+        width
+      } = popupSize;
+      const {
+        height: oldHeight = 0,
+        width: oldWidth = 0
+      } = this.size || {};
+      const {
+        isPopupReady,
+        position
+      } = this.state;
+
+      if (isPopupReady && this.size && (oldHeight !== height || width !== oldWidth)) {
+        this.handlePopupPosition(position, true);
+      }
+
+      this.size = popupSize;
+    }
+
+    getTargetRef(el) {
+      this.placeHolderElement = el;
+    }
+
+    getContainerRef(el) {
+      this.dropElement = el;
+    }
+
+    render() {
+      const {
+        isPopupReady,
+        isPopupOpen
+      } = this.state;
+      const localState = isPopupReady ? this.state : {};
+      return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, this.state, {
+        openPopupOnly: this.openPopupOnly,
+        closePopupOnly: this.closePopupOnly,
+        togglePopup: this.togglePopup,
+        removeClose: this.removeClose,
+        getTargetRef: this.getTargetRef,
+        getContainerRef: this.getContainerRef
+      }));
+    }
+
+  }
+
+  Popup.displayName = Component.displayName || Component.name || Popup.name;
+  Popup.contextTypes = {
+    direction: PropTypes.string
+  };
+  return hoistStatics(Popup, Component);
+};
+
+export default Popup;