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

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { cloneElement, isValidElement, useCallback, useContext, useEffect, useRef, useState } from 'react';
import ConfigContext from '../../../es/config-provider/ConfigContext';
import Trigger from '../../../es/trigger/Trigger';
import { Action } from '../../../es/trigger/enum';
import DropdownButton from './DropdownButton';
import { Placements } from './enum';
import builtinPlacements from './placements';
var popupStyle = {
  whiteSpace: 'nowrap'
};

var Dropdown = function Dropdown(props) {
  var _useContext = useContext(ConfigContext),
      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,
      disabled = props.disabled,
      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 = 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 = _slicedToArray(_useState, 2),
      hidden = _useState2[0],
      setHidden = _useState2[1];

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

    return overlay;
  }, [overlay]);
  var handleClick = 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 = useCallback(function (hidden) {
    if (propsHidden === undefined && propsVisible === undefined) {
      setHidden(hidden);
    }

    if (onHiddenChange) {
      onHiddenChange(hidden);
    }

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

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

Dropdown.displayName = 'Dropdown';
Dropdown.Button = DropdownButton;
Dropdown.defaultProps = {
  suffixCls: 'dropdown',
  placement: Placements.bottomLeft,
  trigger: [Action.hover, Action.focus],
  defaultHidden: true
};
export default Dropdown;
//# sourceMappingURL=Dropdown.js.map