@zohodesk/components/es/Popup/Popup.js

In this Package, we Provide Some Basic Components to Build Web App

/**** Libraries ****/
import React from 'react';
import hoistStatics from 'hoist-non-react-statics';
import { PopupPropTypes, ContextTypes } from "./props/propTypes";
/**** Methods ****/

import { debounce, isDescendant, isTextSelected, cancelBubblingEffect, DUMMY_OBJECT } from "../utils/Common.js";
import viewPort from "./viewPort";
import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.js";
import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
import { addIntersectionObserver, removeIntersectionObserver } from "./intersectionObserver";
import { positionMapping } from "../DropBox/DropBoxPositionMapping.js";
import isMobilePopover from "../DropBox/utils/isMobilePopover.js";
import selectn from 'selectn';
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,
    isOutsideScrollBlocked: isOutsideScrollBlock = 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,
        isMobile: false
      };
      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.getIsOutsideScrollBlocked = this.getIsOutsideScrollBlocked.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.handleBlockScroll = this.handleBlockScroll.bind(this);
      this.handlePositionChange = this.handlePositionChange.bind(this);
      this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
      this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
      this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
      this.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
      this.handleRemovingScrollBlock = this.handleRemovingScrollBlock.bind(this);
      this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
      this.updateVisibilityOnIntersection = this.updateVisibilityOnIntersection.bind(this);
      this.handleAddingScrollToUpdatePosition = this.handleAddingScrollToUpdatePosition.bind(this);
      this.handleRemovingScrollToUpdatePosition = this.handleRemovingScrollToUpdatePosition.bind(this);
      this.updatePositionOnScroll = this.updatePositionOnScroll.bind(this);
      this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
      this.updatePopupState = this.updatePopupState.bind(this);
      this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
      this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
      this.positionRef = /*#__PURE__*/React.createRef();
      this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize

      this.size = null;
      this.isTargetElementVisible = false;
      this.isAbsolutePopup = isAbsolutePopup;
      this.needPopupArrow = needPopupArrow;
      this.customPositionOrder = customPositionOrder;
      this.scrollDebounceTime = popupScrollDebounceTime;
      this.closeOnScroll = closeOnScrollPopup;
      this.isOutsideScrollBlock = isOutsideScrollBlock; // 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
        });
      }
    }

    handleScrollAndBlockEvents(isPopupReady, isMobile) {
      if (isPopupReady && !isMobile) {
        this.handleAddingScrollBlock();
        this.handleAddingScrollToUpdatePosition();
      } else {
        this.handleRemovingScrollBlock();
        this.handleRemovingScrollToUpdatePosition();
      }
    }

    componentDidUpdate(prevProps, prevState) {
      const {
        isPopupReady,
        isMobile
      } = this.state;
      const {
        isPopupReady: oldStateOpen = false,
        isMobile: oldIsMobileState
      } = 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();
        }
      }

      if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
        this.handleScrollAndBlockEvents(isPopupReady, isMobile);
      }
    }

    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);
      this.handleRemovingScrollBlock();
      this.handleRemovingScrollToUpdatePosition();
      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);
      }
    }

    handleAddingScrollBlock() {
      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);

      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
        addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
        this.addScrollBlockListeners();
      }
    }

    handleRemovingScrollBlock() {
      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);

      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
        removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
        this.removeScrollBlockListeners();
      }
    }

    handleAddingScrollToUpdatePosition() {
      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);

      if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
        addIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
        document.addEventListener('scroll', this.updatePositionOnScroll, {
          capture: true,
          passive: false
        });
      }
    }

    handleRemovingScrollToUpdatePosition() {
      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);

      if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
        removeIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
        document.removeEventListener('scroll', this.updatePositionOnScroll, {
          capture: true,
          passive: false
        });
      }
    }

    handleDropElementStyleUpdate(_ref) {
      let {
        top = '',
        left = '',
        bottom = '',
        right = ''
      } = _ref;
      const {
        dropElement
      } = this;
      Object.assign(dropElement.style, {
        top: top ? `${top}px` : '',
        left: left ? `${left}px` : '',
        right: right ? `${right}px` : '',
        bottom: bottom ? `${bottom}px` : ''
      });
    }

    setContainerDynamicPositioning(betterPosition, needArrow) {
      const {
        dropElement
      } = this;
      const {
        isMobile
      } = this.state;
      const {
        view,
        viewsOffset
      } = betterPosition || DUMMY_OBJECT;
      const styleToApply = selectn(`${view}`, viewsOffset);

      if (isMobile) {
        this.handleDropElementStyleUpdate({
          top: '',
          left: '',
          right: '',
          bottom: ''
        });
      } else {
        this.handleDropElementStyleUpdate(styleToApply);

        if (this.positionRef.current !== view) {
          dropElement.setAttribute('data-position', `${view}`);
          dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));

          if (needArrow) {
            dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
          }

          this.positionRef.current = view;
        }
      }
    }

    updatePositionOnScroll(e) {
      const {
        placeHolderElement,
        defaultPosition,
        isTargetElementVisible
      } = this;

      if (e.target.contains(placeHolderElement) && isTargetElementVisible) {
        this.handlePopupPosition(defaultPosition, true);
      }
    }

    addScrollBlockListeners() {
      document.addEventListener('wheel', this.handleBlockScroll, {
        capture: true,
        passive: false
      });
      document.addEventListener('touchmove', this.handleBlockScroll, {
        capture: true,
        passive: false
      });
      document.addEventListener('scroll', this.handlePositionChange, {
        capture: true,
        passive: false
      });
      document.addEventListener('keydown', this.preventKeyboardScroll, {
        capture: true,
        passive: false
      });
    }

    removeScrollBlockListeners() {
      document.removeEventListener('wheel', this.handleBlockScroll, {
        capture: true,
        passive: false
      });
      document.removeEventListener('touchmove', this.handleBlockScroll, {
        capture: true,
        passive: false
      });
      document.removeEventListener('scroll', this.handlePositionChange, {
        capture: true,
        passive: false
      });
      document.removeEventListener('keydown', this.preventKeyboardScroll, {
        capture: true,
        passive: false
      });
    }

    handleBlockScroll(event) {
      // const targetElement = this.placeHolderElement;
      const containerElement = this.dropElement;

      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target)) {
        // --- Scroll exclude Target & Container elements --- For reference. Will adopt in future
        // if(
        //   (containerElement && (containerElement !== event.target && !containerElement.contains(event.target)))
        //   && (targetElement && (targetElement !== event.target && !targetElement.contains(event.target)))
        // ) {
        event.preventDefault();
      }
    }

    handlePositionChange(event) {
      const targetElement = this.placeHolderElement;
      const containerElement = this.dropElement;

      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && targetElement && targetElement !== event.target && !targetElement.contains(event.target) && event.target.contains(targetElement)) {
        this.handlePopupPosition(this.state.position, true); // this.closePopupOnly(event);
      }
    }

    preventKeyboardScroll(event) {
      const containerElement = this.dropElement;
      const keys = [32, 37, 38, 39, 40]; // Space, Arrow keys

      if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && keys.includes(event.keyCode)) {
        event.preventDefault();
      }
    }

    handleIntersectionObserver(entry) {
      if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
        this.closePopupOnly();
      }
    }

    updateVisibilityOnIntersection(entry) {
      const {
        dropElement
      } = this;

      if (entry.isIntersecting === true) {
        this.isTargetElementVisible = true;
        dropElement.setAttribute('data-visible', 'visible');
      } else if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
        this.isTargetElementVisible = false;
        dropElement.setAttribute('data-visible', 'hidden');
      }
    }

    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;
    }

    getIsOutsideScrollBlocked(popup) {
      const {
        isOutsideScrollBlocked
      } = popup.props;
      const {
        isOutsideScrollBlock
      } = popup;
      return isOutsideScrollBlocked !== undefined ? isOutsideScrollBlocked : isOutsideScrollBlock;
    }

    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);
    }

    updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute) {
      const isMobile = isMobilePopover(true);
      this.setState({
        isPopupReady: true,
        position: view,
        positions: views,
        positionsOffset: viewsOffset,
        targetOffset,
        popupOffset,
        isAbsolutePositioningNeeded: isAbsolute,
        isMobile: isMobile
      });
    }

    handlePopupPosition() {
      let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
      let isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
      // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
      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) {
        const isMobile = isMobilePopover(true);
        this.setState({
          isPopupOpen: true,
          isPopupReady: true,
          isMobile: isMobile
        });
        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 || DUMMY_OBJECT;

          if (!isAbsolute) {
            if (!isPopupReady) {
              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
            }

            if (!dropElement) {
              return;
            }

            this.setContainerDynamicPositioning(betterPosition, needArrow);
          } else {
            if (position !== view || !isPopupReady) {
              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
            }
          }
        });
      };

      if (isUpdatePosition) {
        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 isMobile = isMobilePopover(true);
                const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
                  needArrow,
                  isAbsolute,
                  customOrder
                });
                const {
                  view,
                  views,
                  viewsOffset = {},
                  targetOffset,
                  popupOffset
                } = betterPosition || {};
                const {
                  left: oldLeft = '',
                  top: oldTop = '',
                  bottom: oldBottom = '',
                  right: oldRight = ''
                } = positionsOffset[position] || {};
                const {
                  left = '',
                  top = '',
                  bottom = '',
                  right = ''
                } = viewsOffset[view] || {};
                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom || oldRight !== right; // let isInViewPort = viewPort.isInViewPort(
                //   placeHolderElement,
                //   scrollContainer
                // );

                if (changeState) {
                  popup.setState({
                    position: view,
                    positions: views,
                    positionsOffset: viewsOffset,
                    targetOffset,
                    popupOffset,
                    isAbsolutePositioningNeeded: isAbsolute,
                    isMobile: isMobile
                  });
                } // 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 {
        isMobile,
        ...restState
      } = this.state; // const localState = isPopupReady ? this.state : {};

      return /*#__PURE__*/React.createElement(Component, { ...this.props,
        ...restState,
        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 = ContextTypes;
  Popup.propTypes = PopupPropTypes;
  return hoistStatics(Popup, Component);
};

export default Popup;