choerodon-ui/pro/lib/dropdown/Dropdown.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

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

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

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

var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext"));

var _Trigger = _interopRequireDefault(require("../../../lib/trigger/Trigger"));

var _enum = require("../../../lib/trigger/enum");

var _enum2 = require("./enum");

var _placements = _interopRequireDefault(require("./placements"));

var popupStyle = {
  whiteSpace: 'nowrap'
};

var Dropdown = function Dropdown(props) {
  var _useContext = (0, _react.useContext)(_ConfigContext["default"]),
      getProPrefixCls = _useContext.getProPrefixCls;

  var onOverlayClick = props.onOverlayClick,
      propsHidden = props.hidden,
      propsVisible = props.visible,
      trigger = props.trigger,
      overlay = props.overlay,
      children = props.children,
      placement = props.placement,
      popupClassName = props.popupClassName,
      getPopupContainer = props.getPopupContainer,
      onHiddenBeforeChange = props.onHiddenBeforeChange,
      suffixCls = props.suffixCls,
      customizePrefixCls = props.prefixCls,
      onHiddenChange = props.onHiddenChange,
      onVisibleChange = props.onVisibleChange;
  var prefixCls = getProPrefixCls(suffixCls, customizePrefixCls);

  var _useState = (0, _react.useState)(function () {
    if ('hidden' in props) {
      return props.hidden;
    }

    if ('visible' in props) {
      return !props.visible;
    }

    if ('defaultHidden' in props) {
      return props.defaultHidden;
    }

    return !props.defaultVisible;
  }),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      hidden = _useState2[0],
      setHidden = _useState2[1];

  var renderedContentPropsRef = (0, _react.useRef)();
  var getContent = (0, _react.useCallback)(function () {
    if (typeof overlay === 'function') {
      return overlay.apply(void 0, arguments);
    }

    return overlay;
  }, [overlay]);
  var handleClick = (0, _react.useCallback)(function (e) {
    if (onOverlayClick) {
      onOverlayClick(e);
    }

    var _ref = renderedContentPropsRef.current || {},
        onClick = _ref.onClick;

    if (onClick) {
      onClick(e);
    }

    if (propsHidden === undefined && propsVisible === undefined) {
      setHidden(true);
    }
  }, [onOverlayClick, propsHidden, propsVisible]);
  var handlePopupHiddenChange = (0, _react.useCallback)(function (hidden) {
    if (propsHidden === undefined && propsVisible === undefined) {
      setHidden(hidden);
    }

    if (onHiddenChange) {
      onHiddenChange(hidden);
    }

    if (onVisibleChange) {
      onVisibleChange(!hidden);
    }
  }, [propsHidden, propsVisible, onHiddenChange, onVisibleChange]);
  var renderPopupContent = (0, _react.useCallback)(function () {
    var content = getContent.apply(void 0, arguments);

    if ( /*#__PURE__*/(0, _react.isValidElement)(content)) {
      renderedContentPropsRef.current = content.props;
      return /*#__PURE__*/(0, _react.cloneElement)(content, {
        onClick: handleClick
      });
    }
  }, [getContent]);
  (0, _react.useEffect)(function () {
    if (propsHidden !== undefined) {
      setHidden(propsHidden);
    } else if (propsVisible !== undefined) {
      setHidden(!propsVisible);
    }
  }, [propsHidden, propsVisible]);
  return /*#__PURE__*/_react["default"].createElement(_Trigger["default"], {
    prefixCls: prefixCls,
    action: trigger,
    builtinPlacements: _placements["default"],
    popupPlacement: placement,
    popupContent: renderPopupContent,
    popupStyle: popupStyle,
    popupClassName: popupClassName,
    onPopupHiddenChange: handlePopupHiddenChange,
    onPopupHiddenBeforeChange: onHiddenBeforeChange,
    popupHidden: hidden,
    getPopupContainer: getPopupContainer
  }, children);
};

Dropdown.displayName = 'Dropdown';
var MemoDropdown = /*#__PURE__*/(0, _react.memo)(Dropdown);
MemoDropdown.defaultProps = {
  suffixCls: 'dropdown',
  placement: _enum2.Placements.bottomLeft,
  trigger: [_enum.Action.hover, _enum.Action.focus],
  defaultHidden: true
};
var _default = MemoDropdown;
exports["default"] = _default;
//# sourceMappingURL=Dropdown.js.map