choerodon-ui/lib/rc-components/select/DropdownMenu.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

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

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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

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

var _reactDom = require("react-dom");

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

var _toArray = _interopRequireDefault(require("../util/Children/toArray"));

var _menu = _interopRequireDefault(require("../menu"));

var _domScrollIntoView = _interopRequireDefault(require("dom-scroll-into-view"));

var _util = require("./util");

var _FilterInput = _interopRequireDefault(require("./FilterInput"));

var _LocaleReceiver = _interopRequireDefault(require("../../locale-provider/LocaleReceiver"));

var _default = _interopRequireDefault(require("../../locale-provider/default"));

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 DropdownMenu =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(DropdownMenu, _Component);

  var _super = _createSuper(DropdownMenu);

  function DropdownMenu() {
    var _this;

    (0, _classCallCheck2["default"])(this, DropdownMenu);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollActiveItemToView", function () {
      // scroll into view
      var itemComponent = (0, _reactDom.findDOMNode)(_this.firstActiveItem);
      var props = _this.props;

      if (itemComponent) {
        var scrollIntoViewOpts = {
          onlyScrollIfNeeded: true
        };

        if ((!props.value || props.value.length === 0) && props.firstActiveValue) {
          scrollIntoViewOpts.alignWithTop = true;
        }

        (0, _domScrollIntoView["default"])(itemComponent, (0, _reactDom.findDOMNode)(_this.menuRef), scrollIntoViewOpts);
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderCheckLabel", function (locale) {
      var _this$props = _this.props,
          prefixCls = _this$props.prefixCls,
          checkAll = _this$props.checkAll;
      return _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-select-all-none")
      }, _react["default"].createElement("span", {
        name: "check-all",
        onClick: checkAll
      }, locale.selectAll), _react["default"].createElement("span", {
        name: "check-none",
        onClick: checkAll
      }, locale.selectNone));
    });
    return _this;
  }

  (0, _createClass2["default"])(DropdownMenu, [{
    key: "componentWillMount",
    value: function componentWillMount() {
      this.lastInputValue = this.props.inputValue;
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.scrollActiveItemToView();
      this.lastVisible = this.props.visible;
    }
  }, {
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps) {
      if (!nextProps.visible) {
        this.lastVisible = false;
      } // freeze when hide


      return nextProps.visible;
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var props = this.props;

      if (!prevProps.visible && props.visible) {
        this.scrollActiveItemToView();
      }

      this.lastVisible = props.visible;
      this.lastInputValue = props.inputValue;
    }
  }, {
    key: "renderMenu",
    value: function renderMenu() {
      var _this2 = this;

      var props = this.props;
      var menuItems = props.menuItems,
          value = props.value,
          defaultActiveFirstOption = props.defaultActiveFirstOption,
          prefixCls = props.prefixCls,
          multiple = props.multiple,
          onMenuSelect = props.onMenuSelect,
          inputValue = props.inputValue,
          firstActiveValue = props.firstActiveValue,
          backfillValue = props.backfillValue;

      if (menuItems && menuItems.length) {
        var menuProps = {};

        if (multiple) {
          menuProps.onDeselect = props.onMenuDeselect;
          menuProps.onSelect = onMenuSelect;
        } else {
          menuProps.onClick = onMenuSelect;
        }

        var selectedKeys = (0, _util.getSelectKeys)(menuItems, value);
        var activeKeyProps = {};
        var clonedMenuItems = menuItems;

        if (selectedKeys.length || firstActiveValue) {
          if (props.visible && !this.lastVisible) {
            activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue;
          }

          var foundFirst = false; // set firstActiveItem via cloning menus
          // for scroll into view

          var clone = function clone(item) {
            if (!foundFirst && selectedKeys.indexOf(item.key) !== -1 || !foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1) {
              foundFirst = true;
              return (0, _react.cloneElement)(item, {
                ref: function ref(_ref) {
                  _this2.firstActiveItem = _ref;
                }
              });
            }

            return item;
          };

          clonedMenuItems = menuItems.map(function (item) {
            if (item.type.isMenuItemGroup) {
              var children = (0, _toArray["default"])(item.props.children).map(clone);
              return (0, _react.cloneElement)(item, {}, children);
            }

            return clone(item);
          });
        } // clear activeKey when inputValue change


        var lastValue = value && value[value.length - 1];

        if (inputValue !== this.lastInputValue && (!lastValue || lastValue !== backfillValue)) {
          activeKeyProps.activeKey = '';
        }

        return _react["default"].createElement(_menu["default"], (0, _extends2["default"])({
          ref: (0, _util.saveRef)(this, 'menuRef'),
          style: this.props.dropdownMenuStyle,
          defaultActiveFirst: defaultActiveFirstOption
        }, activeKeyProps, {
          multiple: multiple
        }, menuProps, {
          selectedKeys: selectedKeys,
          prefixCls: "".concat(prefixCls, "-menu")
        }), clonedMenuItems);
      }

      return null;
    }
  }, {
    key: "renderFilterInput",
    value: function renderFilterInput() {
      var _this$props2 = this.props,
          prefixCls = _this$props2.prefixCls,
          filter = _this$props2.filter,
          placeholder = _this$props2.placeholder,
          onFilterChange = _this$props2.onFilterChange,
          filterValue = _this$props2.filterValue,
          onKeyDown = _this$props2.onKeyDown;
      var props = {
        filterValue: filterValue,
        prefixCls: prefixCls,
        placeholder: placeholder,
        onChange: onFilterChange,
        onKeyDown: onKeyDown
      };
      return filter ? _react["default"].createElement(_FilterInput["default"], (0, _extends2["default"])({}, props, {
        ref: (0, _util.saveRef)(this, 'filterRef')
      })) : null;
    }
  }, {
    key: "getFooter",
    value: function getFooter() {
      var _this$props3 = this.props,
          prefixCls = _this$props3.prefixCls,
          footer = _this$props3.footer;
      return footer ? _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-footer"),
        onMouseDown: _util.preventDefaultEvent
      }, footer) : null;
    }
  }, {
    key: "render",
    value: function render() {
      var renderMenu = this.renderMenu();
      var filterInput = this.renderFilterInput();
      var _this$props4 = this.props,
          multiple = _this$props4.multiple,
          menuItems = _this$props4.menuItems,
          checkAll = _this$props4.checkAll,
          onMouseDown = _this$props4.onMouseDown;
      var selectOpt = null;

      if (checkAll && multiple && menuItems.length && menuItems[0].key !== 'NOT_FOUND') {
        selectOpt = _react["default"].createElement(_LocaleReceiver["default"], {
          componentName: "Select",
          defaultLocale: _default["default"].Select
        }, this.renderCheckLabel);
      }

      return _react["default"].createElement("div", {
        onMouseDown: onMouseDown
      }, filterInput, selectOpt, _react["default"].createElement("div", {
        style: {
          overflow: 'auto'
        },
        onScroll: this.props.onPopupScroll,
        onFocus: this.props.onPopupFocus
      }, renderMenu), this.getFooter());
    }
  }]);
  return DropdownMenu;
}(_react.Component);

exports["default"] = DropdownMenu;
(0, _defineProperty2["default"])(DropdownMenu, "propTypes", {
  defaultActiveFirstOption: _propTypes["default"].bool,
  value: _propTypes["default"].any,
  dropdownMenuStyle: _propTypes["default"].object,
  multiple: _propTypes["default"].bool,
  onPopupFocus: _propTypes["default"].func,
  onPopupScroll: _propTypes["default"].func,
  onMenuDeSelect: _propTypes["default"].func,
  onMenuSelect: _propTypes["default"].func,
  onMouseDown: _propTypes["default"].func,
  prefixCls: _propTypes["default"].string,
  menuItems: _propTypes["default"].any,
  inputValue: _propTypes["default"].string,
  visible: _propTypes["default"].bool,
  filter: _propTypes["default"].bool,
  checkAll: _propTypes["default"].func,
  footer: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),
  onKeyDown: _propTypes["default"].func
});
(0, _defineProperty2["default"])(DropdownMenu, "defaultProps", {
  footer: null
});
DropdownMenu.displayName = 'DropdownMenu';
//# sourceMappingURL=DropdownMenu.js.map