wix-style-react/dist/es/src/Popover/Popover.js

wix-style-react

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["dataHook", "animate", "theme", "className"];

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import { Popover as CorePopover } from "wix-ui-core/dist/es/src/components/popover";
import { buildChildrenObject } from "wix-ui-core/dist/es/src/utils";
import requestAnimationFramePolyfill from '../utils/request-animation-frame';
import PropTypes from 'prop-types';
import { st, classes } from './Popover.st.css';
import { FontUpgradeContext } from '../FontUpgrade/context';
import FontUpgrade from '../FontUpgrade';
import { ThemeProviderConsumerBackwardCompatible } from '../ThemeProvider/ThemeProviderConsumerBackwardCompatible';
import { placements } from './constants';
export { placements };
/**
 *  This has been added in order to fix jsdom not having requestAnimation frame
 *  installed. Jest by default has this polyfilled, but mocha fails on it.
 *  Decided with Shlomi to get rid of this on next major version 7, where we will support
 *  only jest.
 */

if (process.env.NODE_ENV === 'test') {
  requestAnimationFramePolyfill.install();
}

var ANIMATION_ENTER = 150;
var ANIMATION_EXIT = 100;

var ContentElement = function ContentElement(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/React.createElement(FontUpgradeContext.Consumer, null, function (_ref2) {
    var active = _ref2.active;
    return /*#__PURE__*/React.createElement(FontUpgrade, {
      active: !!active
    }, /*#__PURE__*/React.createElement(CorePopover.Content, {
      children: children
    }));
  });
};

ContentElement.displayName = 'Popover.Content';

var Popover = /*#__PURE__*/function (_React$Component) {
  _inherits(Popover, _React$Component);

  var _super = _createSuper(Popover);

  function Popover() {
    _classCallCheck(this, Popover);

    return _super.apply(this, arguments);
  }

  _createClass(Popover, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          dataHook = _this$props.dataHook,
          animate = _this$props.animate,
          theme = _this$props.theme,
          className = _this$props.className,
          rest = _objectWithoutProperties(_this$props, _excluded);

      var timeout = animate ? {
        enter: ANIMATION_ENTER,
        exit: ANIMATION_EXIT
      } : undefined;
      return /*#__PURE__*/React.createElement(ThemeProviderConsumerBackwardCompatible, null, function (_ref3) {
        var themeClassName = _ref3.className;
        return /*#__PURE__*/React.createElement(CorePopover, _extends({
          disableClickOutsideWhenClosed: true,
          timeout: timeout,
          "data-hook": dataHook
        }, rest, {
          className: st(classes.root, {
            theme: theme
          }, className, themeClassName)
        }));
      });
    }
  }]);

  return Popover;
}(React.Component);

_defineProperty(Popover, "displayName", 'Popover');

_defineProperty(Popover, "Element", CorePopover.Element);

_defineProperty(Popover, "Content", ContentElement);

_defineProperty(Popover, "propTypes", {
  /** The Popover's placement:
   *  * auto-start
   *  * auto
   *  * auto-end
   *  * top-start
   *  * top
   *  * top-end
   *  * right-start
   *  * right
   *  * right-end
   *  * bottom-end
   *  * bottom
   *  * bottom-start
   *  * left-end
   *  * left
   *  * left-start
   */
  placement: PropTypes.oneOf(placements),

  /** Is the content shown or not */
  shown: PropTypes.bool,

  /** Enables calculations in relation to a dom element */
  appendTo: PropTypes.oneOf(['window', 'scrollParent', 'parent', 'viewport']),

  /** custom classname */
  className: PropTypes.string,

  /** the classname to be passed to the popover's content container */
  contentClassName: PropTypes.string,

  /** Custom arrow element */
  customArrow: PropTypes.func,

  /** Breaking change: When true - onClickOutside will be called only when popover content is shown */
  disableClickOutsideWhenClosed: PropTypes.bool,

  /** popovers content is set to minnimum width of trigger element, but it can expand up to the value of maxWidth. */
  dynamicWidth: PropTypes.bool,

  /** Clicking on elements with this excluded class will will not trigger onClickOutside callback */
  excludeClass: PropTypes.string,

  /**
   * Whether to enable the fixed behaviour. This behaviour is used to keep the `<Popover/>` at it's
   * original placement even when it's being positioned outside the boundary.
   */
  fixed: PropTypes.bool,

  /**
   * Whether to enable the flip behaviour. This behaviour is used to flip the `<Popover/>`'s placement
   * when it starts to overlap the target element (`<Popover.Element/>`).
   */
  flip: PropTypes.bool,

  /* stretch trigger element to the width of its container. */
  fluid: PropTypes.bool,

  /** Hide Delay in ms */
  hideDelay: PropTypes.number,

  /** Id */
  id: PropTypes.string,

  /**
   * popover content maxWidth value
   * - `number` value which converts to css with `px`
   * - `string` value that contains `px`
   */
  maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

  /**
   * popover content minWidth value
   * - `number` value which converts to css with `px`
   * - `string` value that contains `px`
   */
  minWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

  /** Moves arrow by amount */
  moveArrowTo: PropTypes.number,

  /** Moves popover relative to the parent */
  moveBy: PropTypes.shape({
    x: PropTypes.number,
    y: PropTypes.number
  }),

  /** onClick on the component */
  onClick: PropTypes.func,

  /** Provides callback to invoke when clicked outside of the popover */
  onClickOutside: PropTypes.func,

  /** onKeyDown on the target component */
  onKeyDown: PropTypes.func,

  /** onMouseEnter on the component */
  onMouseEnter: PropTypes.func,

  /** onMouseLeave on the component */
  onMouseLeave: PropTypes.func,

  /** target element role value */
  role: PropTypes.string,

  /** Show show arrow from the content */
  showArrow: PropTypes.bool,

  /** Show Delay in ms */
  showDelay: PropTypes.number,

  /** Inline style */
  style: PropTypes.object,

  /** Animation timer */
  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
    enter: PropTypes.number,
    exit: PropTypes.number
  })]),

  /**
   * popover content width value
   * - `number` value which converts to css with `px`
   * - `string` value that contains `px`
   */
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

  /** popover z-index */
  zIndex: PropTypes.number,

  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** Adds enter and exit animation */
  animate: PropTypes.bool,

  /** The theme of the popover */
  theme: PropTypes.oneOf(['dark', 'light']),
  children: function children(props, propName) {
    var childrenArr = React.Children.toArray(props[propName]);
    var childrenObj = buildChildrenObject(childrenArr, {
      Element: null,
      Content: null
    });

    if (!childrenObj.Element) {
      return new Error('Invalid children provided, <Popover.Element/> must be provided');
    }

    if (!childrenObj.Content) {
      return new Error('Invalid children provided, <Popover.Content/> must be provided');
    }

    return childrenArr.reduce(function (err, child) {
      if (!err && child.type.displayName !== 'Popover.Element' && child.type.displayName !== 'Popover.Content') {
        return new Error("Invalid children provided, unknown child <".concat(child.type.displayName || child.type, "/> supplied"));
      }

      return err;
    }, false);
  }
});

_defineProperty(Popover, "defaultProps", {
  appendTo: 'parent',
  animate: false
});

export default Popover;