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

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

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PopOverContainer = PopOverContainer;
exports.PopOverTarget = PopOverTarget;
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _hooks = require("@zohodesk/hooks");

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _Popup = _interopRequireDefault(require("../Popup/Popup"));

var _Layout = require("../Layout");

var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));

var _PopOverModule = _interopRequireDefault(require("../../PopOver/PopOver.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

  var popOverTargetRef = function popOverTargetRef(el) {
    popOverTarget.current = el;
    getTargetRef(el);
  };

  var popOverContainerRef = function popOverContainerRef(el) {
    popOverContainer.current = el;
    getContainerRef(el);
  };

  var togglePopup = function togglePopup(e) {
    var togglePopup = props.togglePopup;
    togglePopup(e, boxPosition);
  };

  (0, _hooks.useEffectCallOnlyAfterState)(function () {
    isPopupOpen && onPopupOpen && onPopupOpen();
    !isPopupOpen && onPopupClose && onPopupClose();
  }, [isPopupOpen]);

  var childrens = _react["default"].Children.map(children, function (child, index) {
    var element = index === 1 ? /*#__PURE__*/_react["default"].cloneElement(child, {
      isPopupOpen: isPopupOpen,
      togglePopup: togglePopup,
      removeClose: removeClose,
      right: right,
      left: left,
      top: top,
      bottom: bottom,
      arrowRight: arrowRight,
      arrowLeft: arrowLeft,
      arrowTop: arrowTop,
      arrowBottom: arrowBottom,
      boxPosition: position,
      isAnimate: isAnimate,
      isArrow: isArrow,
      arrowPosition: arrowPosition,
      size: size,
      onClick: onClick,
      getRef: popOverContainerRef,
      isPopupReady: isPopupReady
    }) : /*#__PURE__*/_react["default"].cloneElement(child, {
      isPopupOpen: isPopupOpen,
      togglePopup: togglePopup,
      removeClose: removeClose,
      getRef: popOverTargetRef
    });
    return element;
  });

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: _PopOverModule["default"].popup
  }, childrens);
}

PopOver.defaultProps = _defaultProps.PopOver_defaultProps;
PopOver.propTypes = _propTypes.PopOver_propTypes;

var _default = (0, _Popup["default"])(PopOver);

exports["default"] = _default;

function PopOverTarget(props) {
  var children = props.children,
      togglePopup = props.togglePopup;

  var getRef = function getRef(el) {
    var getRef = props.getRef;
    getRef(el);
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: _PopOverModule["default"].target,
    onClick: togglePopup,
    ref: getRef
  }, children);
}

PopOverTarget.propTypes = _propTypes.PopOverTarget_propTypes;

function PopOverContainer(props) {
  var children = props.children,
      isPopupOpen = props.isPopupOpen,
      isAnimate = props.isAnimate,
      isArrow = props.isArrow,
      size = props.size,
      arrowPosition = props.arrowPosition,
      boxPosition = props.boxPosition,
      right = props.right,
      left = props.left,
      top = props.top,
      bottom = props.bottom,
      arrowRight = props.arrowRight,
      arrowLeft = props.arrowLeft,
      arrowTop = props.arrowTop,
      arrowBottom = props.arrowBottom,
      animationStyle = props.animationStyle,
      onClick = props.onClick,
      removeClose = props.removeClose;

  var getRef = function getRef(el) {
    var getRef = props.getRef;
    getRef && getRef(el);
  };

  var handleClick = function handleClick(e) {
    removeClose && removeClose(e);
    onClick && onClick();
  };

  return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
    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["default"].createElement(_Layout.Box, {
    flexible: true,
    shrink: true,
    scroll: "vertical"
  }, children));
}

PopOverContainer.defaultProps = _defaultProps.PopOverContainer_defaultProps;
PopOverContainer.propTypes = _propTypes.PopOverContainer_propTypes;