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

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
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.module.css";

class PopOver extends React.Component {
  constructor(props) {
    super(props);
    this.popOverTargetRef = this.popOverTargetRef.bind(this);
    this.popOverContainerRef = this.popOverContainerRef.bind(this);
    this.togglePopup = this.togglePopup.bind(this);
  }

  componentDidUpdate(prevProps) {
    let {
      isPopupOpen,
      onPopupOpen,
      onPopupClose
    } = this.props;

    if (prevProps.isPopupOpen !== isPopupOpen) {
      isPopupOpen && onPopupOpen && onPopupOpen();
      !isPopupOpen && onPopupClose && onPopupClose();
    }
  }

  popOverTargetRef(el) {
    this.popOverTarget = el;
    let {
      getTargetRef
    } = this.props;
    getTargetRef(el);
  }

  popOverContainerRef(el) {
    this.popOverContainer = el;
    let {
      getContainerRef
    } = this.props;
    getContainerRef(el);
  }

  togglePopup(e) {
    let {
      togglePopup,
      boxPosition
    } = this.props;
    togglePopup(e, boxPosition);
  }

  render() {
    let {
      children,
      isPopupOpen,
      removeClose,
      right,
      left,
      top,
      bottom,
      arrowRight,
      arrowLeft,
      arrowTop,
      arrowBottom,
      isAnimate,
      isArrow,
      arrowPosition,
      position,
      size,
      onClick,
      isPopupReady
    } = this.props;
    let childrens = React.Children.map(children, (child, index) => {
      let element = index === 1 ? /*#__PURE__*/React.cloneElement(child, {
        isPopupOpen,
        togglePopup: this.togglePopup,
        removeClose,
        right,
        left,
        top,
        bottom,
        arrowRight,
        arrowLeft,
        arrowTop,
        arrowBottom,
        boxPosition: position,
        isAnimate,
        isArrow,
        arrowPosition,
        size,
        onClick,
        getRef: this.popOverContainerRef,
        isPopupReady
      }) : /*#__PURE__*/React.cloneElement(child, {
        isPopupOpen,
        togglePopup: this.togglePopup,
        removeClose,
        getRef: this.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 class PopOverTarget extends React.Component {
  constructor(props) {
    super(props);
    this.getRef = this.getRef.bind(this);
  }

  getRef(el) {
    let {
      getRef
    } = this.props;
    getRef(el);
  }

  render() {
    let {
      children,
      togglePopup
    } = this.props;
    return /*#__PURE__*/React.createElement("div", {
      className: style.target,
      onClick: togglePopup,
      ref: this.getRef
    }, children);
  }

}
PopOverTarget.propTypes = PopOverTarget_propTypes;
export class PopOverContainer extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.getRef = this.getRef.bind(this);
  }

  getRef(el) {
    let {
      getRef
    } = this.props;
    getRef && getRef(el);
  }

  handleClick(e) {
    let {
      onClick,
      removeClose
    } = this.props;
    removeClose && removeClose(e);
    onClick && onClick();
  }

  render() {
    let {
      children,
      isPopupOpen,
      isAnimate,
      isArrow,
      size,
      arrowPosition,
      boxPosition,
      right,
      left,
      top,
      bottom,
      arrowRight,
      arrowLeft,
      arrowTop,
      arrowBottom,
      animationStyle,
      getRef
    } = this.props;
    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;