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

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

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

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

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

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

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

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

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

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

var _configure = require("../../../lib/configure");

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

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

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

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

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 = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var popupStyle = {
  whiteSpace: 'nowrap'
};

var Dropdown =
/*#__PURE__*/
function (_PureComponent) {
  (0, _inherits2["default"])(Dropdown, _PureComponent);

  var _super = _createSuper(Dropdown);

  function Dropdown(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Dropdown);
    _this = _super.call(this, props);
    /**
     * 调用传入的onHiddenChange方法
     *
     * @param {boolean} hidden
     */

    _this.handlePopupHiddenChange = function (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);
      }
    };

    _this.handleClick = function (e) {
      var _this$props2 = _this.props,
          onOverlayClick = _this$props2.onOverlayClick,
          overlay = _this$props2.overlay,
          hidden = _this$props2.hidden,
          visible = _this$props2.visible;

      var _ref = (0, _react.isValidElement)(overlay) && overlay.props || {},
          onClick = _ref.onClick;

      if (onOverlayClick) {
        onOverlayClick(e);
      }

      if (onClick) {
        onClick(e);
      }

      if (hidden === undefined && visible === undefined) {
        _this.setState({
          hidden: true
        });
      }
    };

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

  (0, _createClass2["default"])(Dropdown, [{
    key: "getMenuElement",
    value: function getMenuElement() {
      var overlay = this.props.overlay;

      if ((0, _react.isValidElement)(overlay)) {
        return (0, _react.cloneElement)(overlay, {
          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;
      return _react["default"].createElement(_Trigger["default"], {
        prefixCls: prefixCls,
        action: this.triggerAction,
        builtinPlacements: _placements["default"],
        popupPlacement: placement,
        popupContent: this.getMenuElement(),
        popupStyle: popupStyle,
        popupClassName: popupClassName,
        onPopupHiddenChange: this.handlePopupHiddenChange,
        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 (0, _configure.getProPrefixCls)(suffixCls, prefixCls);
    }
  }]);
  return Dropdown;
}(_react.PureComponent);

exports["default"] = Dropdown;
Dropdown.displayName = 'Dropdown';
Dropdown.propTypes = {
  trigger: _propTypes["default"].arrayOf(_propTypes["default"].oneOf([_enum.Action.focus, _enum.Action.hover, _enum.Action.click, _enum.Action.contextMenu])),
  overlay: _propTypes["default"].any,
  placement: _propTypes["default"].oneOf([_enum2.Placements.bottomLeft, _enum2.Placements.bottomCenter, _enum2.Placements.bottomRight, _enum2.Placements.topLeft, _enum2.Placements.topCenter, _enum2.Placements.topRight]),
  hidden: _propTypes["default"].bool,
  visible: _propTypes["default"].bool,
  onHiddenChange: _propTypes["default"].func,
  onVisibleChange: _propTypes["default"].func,
  onOverlayClick: _propTypes["default"].func,
  suffixCls: _propTypes["default"].string,
  prefixCls: _propTypes["default"].string,
  defaultHidden: _propTypes["default"].bool,
  defaultVisible: _propTypes["default"].bool,
  popupClassName: _propTypes["default"].string
};
Dropdown.defaultProps = {
  suffixCls: 'dropdown',
  placement: _enum2.Placements.bottomLeft,
  trigger: [_enum.Action.hover, _enum.Action.focus],
  defaultHidden: true
};
//# sourceMappingURL=Dropdown.js.map