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

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

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";

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { cloneElement, isValidElement, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { getProPrefixCls } from '../../../es/configure';
import Trigger from '../../../es/trigger/Trigger';
import { Action } from '../../../es/trigger/enum';
import { Placements } from './enum';
import builtinPlacements from './placements';
import autobind from '../_util/autobind';
var popupStyle = {
  whiteSpace: 'nowrap'
};

var Dropdown =
/*#__PURE__*/
function (_PureComponent) {
  _inherits(Dropdown, _PureComponent);

  var _super = _createSuper(Dropdown);

  function Dropdown(props) {
    var _this;

    _classCallCheck(this, Dropdown);

    _this = _super.call(this, props);

    if ('hidden' in props) {
      _this.state = {
        hidden: props.hidden
      };
    } else if ('visible' in props) {
      _this.state = {
        hidden: !props.visible
      };
    } else if ('defaultHidden' in props) {
      _this.state = {
        hidden: props.defaultHidden
      };
    } else {
      _this.state = {
        hidden: !props.defaultVisible
      };
    }

    return _this;
  }

  _createClass(Dropdown, [{
    key: "handlePopupHiddenChange",

    /**
     * 调用传入的onHiddenChange方法
     *
     * @param {boolean} hidden
     */
    value: function handlePopupHiddenChange(hidden) {
      var _this$props = this.props,
          onHiddenChange = _this$props.onHiddenChange,
          onVisibleChange = _this$props.onVisibleChange,
          propsHidden = _this$props.hidden,
          propsVisible = _this$props.visible;

      if (propsHidden === undefined && propsVisible === undefined) {
        this.setState({
          hidden: hidden
        });
      }

      if (onHiddenChange) {
        onHiddenChange(hidden);
      }

      if (onVisibleChange) {
        onVisibleChange(!hidden);
      }
    }
  }, {
    key: "handleClick",
    value: function handleClick(e) {
      var _this$props2 = this.props,
          onOverlayClick = _this$props2.onOverlayClick,
          hidden = _this$props2.hidden,
          visible = _this$props2.visible;

      var _ref = this.renderedContentProps || {},
          onClick = _ref.onClick;

      if (onOverlayClick) {
        onOverlayClick(e);
      }

      if (onClick) {
        onClick(e);
      }

      if (hidden === undefined && visible === undefined) {
        this.setState({
          hidden: true
        });
      }
    }
  }, {
    key: "getContent",
    value: function getContent() {
      var overlay = this.props.overlay;

      if (typeof overlay === 'function') {
        return overlay.apply(void 0, arguments);
      }

      return overlay;
    }
  }, {
    key: "renderPopupContent",
    value: function renderPopupContent() {
      var content = this.getContent.apply(this, arguments);

      if (isValidElement(content)) {
        this.renderedContentProps = content.props;
        return cloneElement(content, {
          onClick: this.handleClick
        });
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(_ref2) {
      var hidden = _ref2.hidden,
          visible = _ref2.visible;

      if (hidden !== undefined) {
        this.setState({
          hidden: hidden
        });
      } else if (visible !== undefined) {
        this.setState({
          hidden: !visible
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var prefixCls = this.prefixCls,
          hidden = this.state.hidden,
          _this$props3 = this.props,
          children = _this$props3.children,
          placement = _this$props3.placement,
          popupClassName = _this$props3.popupClassName,
          getPopupContainer = _this$props3.getPopupContainer,
          onHiddenBeforeChange = _this$props3.onHiddenBeforeChange;
      return React.createElement(Trigger, {
        prefixCls: prefixCls,
        action: this.triggerAction,
        builtinPlacements: builtinPlacements,
        popupPlacement: placement,
        popupContent: this.renderPopupContent,
        popupStyle: popupStyle,
        popupClassName: popupClassName,
        onPopupHiddenChange: this.handlePopupHiddenChange,
        onPopupHiddenBeforeChange: onHiddenBeforeChange,
        popupHidden: hidden,
        getPopupContainer: getPopupContainer
      }, children);
    }
  }, {
    key: "triggerAction",
    get: function get() {
      var trigger = this.props.trigger;
      return trigger;
    }
  }, {
    key: "transitionName",
    get: function get() {
      var placement = this.props.placement;
      var result = 'slide-up';

      if (placement && placement.startsWith('top')) {
        result = 'slide-down';
      }

      return result;
    }
  }, {
    key: "prefixCls",
    get: function get() {
      var _this$props4 = this.props,
          suffixCls = _this$props4.suffixCls,
          prefixCls = _this$props4.prefixCls;
      return getProPrefixCls(suffixCls, prefixCls);
    }
  }]);

  return Dropdown;
}(PureComponent);

export { Dropdown as default };
Dropdown.displayName = 'Dropdown';
Dropdown.propTypes = {
  trigger: PropTypes.arrayOf(PropTypes.oneOf([Action.focus, Action.hover, Action.click, Action.contextMenu])),
  overlay: PropTypes.any,
  placement: PropTypes.oneOf([Placements.bottomLeft, Placements.bottomCenter, Placements.bottomRight, Placements.topLeft, Placements.topCenter, Placements.topRight]),
  hidden: PropTypes.bool,
  visible: PropTypes.bool,
  onHiddenChange: PropTypes.func,
  onHiddenBeforeChange: PropTypes.func,
  onVisibleChange: PropTypes.func,
  onOverlayClick: PropTypes.func,
  suffixCls: PropTypes.string,
  prefixCls: PropTypes.string,
  defaultHidden: PropTypes.bool,
  defaultVisible: PropTypes.bool,
  popupClassName: PropTypes.string
};
Dropdown.defaultProps = {
  suffixCls: 'dropdown',
  placement: Placements.bottomLeft,
  trigger: [Action.hover, Action.focus],
  defaultHidden: true
};

__decorate([autobind], Dropdown.prototype, "handlePopupHiddenChange", null);

__decorate([autobind], Dropdown.prototype, "handleClick", null);

__decorate([autobind], Dropdown.prototype, "renderPopupContent", null);
//# sourceMappingURL=Dropdown.js.map