@helpscout/hsds-react/components/Popover/Popover.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = exports.Popover = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Popover = require("./Popover.utils");

var _Popover2 = require("./Popover.css");

var _Text = _interopRequireDefault(require("../Text"));

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

var _Tooltip2 = require("../Tooltip/Tooltip.css");

var _lodash = _interopRequireDefault(require("lodash.isfunction"));

var _jsxRuntime = require("react/jsx-runtime");

var getClassName = function getClassName(className) {
  return (0, _classnames.default)('c-Popover', className);
};

var PopoverContent = function PopoverContent(_ref) {
  var content = _ref.content,
      renderContent = _ref.renderContent;
  if (renderContent) return renderContent();

  if (content) {
    if ((0, _Popover.isPlainContent)(content)) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
        children: content
      });
    } else {
      return content;
    }
  }

  return null;
};

var PopoverHeader = function PopoverHeader(_ref2) {
  var header = _ref2.header,
      renderHeader = _ref2.renderHeader;
  if (!header && !renderHeader) return null;
  var headerContent;

  if (renderHeader) {
    headerContent = renderHeader();
  } else if (header) {
    headerContent = (0, _Popover.isPlainContent)(header) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover2.HeadingUI, {
      children: header
    }) : header;
  }

  if (headerContent) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover2.HeaderUI, {
      children: headerContent
    });
  }

  return null;
};

function noop() {}

var Popover = function Popover(_ref3) {
  var _ref3$arrowSize = _ref3.arrowSize,
      arrowSize = _ref3$arrowSize === void 0 ? 14 : _ref3$arrowSize,
      _ref3$innerRef = _ref3.innerRef,
      innerRef = _ref3$innerRef === void 0 ? noop : _ref3$innerRef,
      header = _ref3.header,
      renderHeader = _ref3.renderHeader,
      content = _ref3.content,
      renderContent = _ref3.renderContent,
      renderAnimation = _ref3.renderAnimation,
      className = _ref3.className,
      placement = _ref3.placement,
      _ref3$triggerOn = _ref3.triggerOn,
      triggerOn = _ref3$triggerOn === void 0 ? 'click' : _ref3$triggerOn,
      _ref3$withArrow = _ref3.withArrow,
      withArrow = _ref3$withArrow === void 0 ? true : _ref3$withArrow,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["arrowSize", "innerRef", "header", "renderHeader", "content", "renderContent", "renderAnimation", "className", "placement", "triggerOn", "withArrow"]);

  var render = function render(tooltipProps) {
    var toolTipComponent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Popover2.PopoverUI, (0, _extends2.default)({}, tooltipProps, {
      "data-cy": "PopoverContent",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverHeader, {
        header: header,
        renderHeader: renderHeader
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverContent, {
        content: content,
        renderContent: renderContent
      }), withArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover2.ArrowPopoverUI, {
        className: "ArrowPopoverUI",
        arrowSize: arrowSize,
        "data-popper-arrow": true
      })]
    }));
    var tooltipWithAnimation = (0, _lodash.default)(renderAnimation) ? renderAnimation(toolTipComponent) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip2.TooltipAnimationUI, {
      children: toolTipComponent
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "hsds-react hsds-beacon",
      children: tooltipWithAnimation
    });
  };

  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({}, rest, {
    className: getClassName(className),
    innerRef: innerRef,
    render: render,
    triggerOn: triggerOn,
    placement: placement
  }));
};

exports.Popover = Popover;
Popover.propTypes = {
  /** Size of the "arrow" or "tip" for the popover */
  arrowSize: _propTypes.default.number,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** Body content to render within the component. */
  content: _propTypes.default.any,
  innerRef: _propTypes.default.func,

  /** Title content to render within the component. */
  header: _propTypes.default.any,

  /** Where to place the Tooltip. */
  placement: _propTypes.default.string,

  /** Renders a component within the Popover. Is prioritized over `content` */
  renderContent: _propTypes.default.any,

  /** Renders a component within the Popover. Is prioritized over `header` */
  renderHeader: _propTypes.default.any,

  /** Renders a wrapper around the tooltip to customize the animation. */
  renderAnimation: _propTypes.default.func,

  /** Determines how to engage the component. */
  triggerOn: _propTypes.default.string,

  /** Whether to render the arrow */
  withArrow: _propTypes.default.bool
};
var _default = Popover;
exports.default = _default;