choerodon-ui/es/rc-components/select/DropdownMenu.js

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

import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

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 React, { cloneElement, Component } from 'react';
import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import toArray from '../util/Children/toArray';
import Menu from '../menu';
import scrollIntoView from 'dom-scroll-into-view';
import { getSelectKeys, preventDefaultEvent, saveRef } from './util';
import FilterInput from './FilterInput';
import LocaleReceiver from '../../locale-provider/LocaleReceiver';
import defaultLocale from '../../locale-provider/default';

var DropdownMenu =
/*#__PURE__*/
function (_Component) {
  _inherits(DropdownMenu, _Component);

  var _super = _createSuper(DropdownMenu);

  function DropdownMenu() {
    var _this;

    _classCallCheck(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));

    _defineProperty(_assertThisInitialized(_this), "scrollActiveItemToView", function () {
      // scroll into view
      var itemComponent = 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;
        }

        scrollIntoView(itemComponent, findDOMNode(_this.menuRef), scrollIntoViewOpts);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "renderCheckLabel", function (locale) {
      var _this$props = _this.props,
          prefixCls = _this$props.prefixCls,
          checkAll = _this$props.checkAll;
      return React.createElement("div", {
        className: "".concat(prefixCls, "-select-all-none")
      }, React.createElement("span", {
        name: "check-all",
        onClick: checkAll
      }, locale.selectAll), React.createElement("span", {
        name: "check-none",
        onClick: checkAll
      }, locale.selectNone));
    });

    return _this;
  }

  _createClass(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 = 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 cloneElement(item, {
                ref: function ref(_ref) {
                  _this2.firstActiveItem = _ref;
                }
              });
            }

            return item;
          };

          clonedMenuItems = menuItems.map(function (item) {
            if (item.type.isMenuItemGroup) {
              var children = toArray(item.props.children).map(clone);
              return 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.createElement(Menu, _extends({
          ref: 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.createElement(FilterInput, _extends({}, props, {
        ref: 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.createElement("div", {
        className: "".concat(prefixCls, "-footer"),
        onMouseDown: 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.createElement(LocaleReceiver, {
          componentName: "Select",
          defaultLocale: defaultLocale.Select
        }, this.renderCheckLabel);
      }

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

  return DropdownMenu;
}(Component);

_defineProperty(DropdownMenu, "propTypes", {
  defaultActiveFirstOption: PropTypes.bool,
  value: PropTypes.any,
  dropdownMenuStyle: PropTypes.object,
  multiple: PropTypes.bool,
  onPopupFocus: PropTypes.func,
  onPopupScroll: PropTypes.func,
  onMenuDeSelect: PropTypes.func,
  onMenuSelect: PropTypes.func,
  onMouseDown: PropTypes.func,
  prefixCls: PropTypes.string,
  menuItems: PropTypes.any,
  inputValue: PropTypes.string,
  visible: PropTypes.bool,
  filter: PropTypes.bool,
  checkAll: PropTypes.func,
  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
  onKeyDown: PropTypes.func
});

_defineProperty(DropdownMenu, "defaultProps", {
  footer: null
});

export { DropdownMenu as default };
DropdownMenu.displayName = 'DropdownMenu';
//# sourceMappingURL=DropdownMenu.js.map