@zohodesk/components/es/v1/PopOver/PopOver.js

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

import React, { useRef } from 'react';
import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
import { PopOver_defaultProps, PopOverContainer_defaultProps } from "./props/defaultProps";
import { PopOver_propTypes, PopOverTarget_propTypes, PopOverContainer_propTypes } from "./props/propTypes";
import Popup from "../Popup/Popup";
import { Box } from "../Layout";
import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
import style from "../../PopOver/PopOver.module.css";

function PopOver(props) {
  let {
    children,
    isPopupOpen,
    removeClose,
    right,
    left,
    top,
    bottom,
    arrowRight,
    arrowLeft,
    arrowTop,
    arrowBottom,
    isAnimate,
    isArrow,
    arrowPosition,
    position,
    size,
    onClick,
    isPopupReady,
    getTargetRef,
    getContainerRef,
    boxPosition,
    onPopupOpen,
    onPopupClose
  } = props;
  const popOverTarget = useRef(null);
  const popOverContainer = useRef(null);

  const popOverTargetRef = el => {
    popOverTarget.current = el;
    getTargetRef(el);
  };

  const popOverContainerRef = el => {
    popOverContainer.current = el;
    getContainerRef(el);
  };

  const togglePopup = e => {
    let {
      togglePopup
    } = props;
    togglePopup(e, boxPosition);
  };

  useEffectCallOnlyAfterState(() => {
    isPopupOpen && onPopupOpen && onPopupOpen();
    !isPopupOpen && onPopupClose && onPopupClose();
  }, [isPopupOpen]);
  let childrens = React.Children.map(children, (child, index) => {
    let element = index === 1 ? /*#__PURE__*/React.cloneElement(child, {
      isPopupOpen,
      togglePopup: togglePopup,
      removeClose,
      right,
      left,
      top,
      bottom,
      arrowRight,
      arrowLeft,
      arrowTop,
      arrowBottom,
      boxPosition: position,
      isAnimate,
      isArrow,
      arrowPosition,
      size,
      onClick,
      getRef: popOverContainerRef,
      isPopupReady
    }) : /*#__PURE__*/React.cloneElement(child, {
      isPopupOpen,
      togglePopup: togglePopup,
      removeClose,
      getRef: popOverTargetRef
    });
    return element;
  });
  return /*#__PURE__*/React.createElement("div", {
    className: style.popup
  }, childrens);
}

PopOver.defaultProps = PopOver_defaultProps;
PopOver.propTypes = PopOver_propTypes;
export default Popup(PopOver);
export function PopOverTarget(props) {
  let {
    children,
    togglePopup
  } = props;

  const getRef = el => {
    let {
      getRef
    } = props;
    getRef(el);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: style.target,
    onClick: togglePopup,
    ref: getRef
  }, children);
}
PopOverTarget.propTypes = PopOverTarget_propTypes;
export function PopOverContainer(props) {
  let {
    children,
    isPopupOpen,
    isAnimate,
    isArrow,
    size,
    arrowPosition,
    boxPosition,
    right,
    left,
    top,
    bottom,
    arrowRight,
    arrowLeft,
    arrowTop,
    arrowBottom,
    animationStyle,
    onClick,
    removeClose
  } = props;

  const getRef = el => {
    let {
      getRef
    } = props;
    getRef && getRef(el);
  };

  const handleClick = e => {
    removeClose && removeClose(e);
    onClick && onClick();
  };

  return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
    animationStyle: animationStyle,
    arrowBottom: arrowBottom,
    arrowLeft: arrowLeft,
    arrowPosition: arrowPosition,
    arrowRight: arrowRight,
    arrowTop: arrowTop,
    bottom: bottom,
    boxPosition: boxPosition,
    getRef: getRef,
    isActive: isPopupOpen,
    isAnimate: isAnimate,
    isArrow: isArrow,
    left: left,
    right: right,
    size: size,
    top: top,
    alignBox: "row"
  }, /*#__PURE__*/React.createElement(Box, {
    flexible: true,
    shrink: true,
    scroll: "vertical"
  }, children));
}
PopOverContainer.defaultProps = PopOverContainer_defaultProps;
PopOverContainer.propTypes = PopOverContainer_propTypes;