"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var _domScrollIntoView = _interopRequireDefault(require("dom-scroll-into-view")); var PropTypes = _interopRequireWildcard(require("prop-types")); var _raf = _interopRequireDefault(require("raf")); var _rcMenu = _interopRequireDefault(require("rc-menu")); var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray")); var React = _interopRequireWildcard(require("react")); var _reactDom = require("react-dom"); var _util = require("./util"); function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } var DropdownMenu = /*#__PURE__*/ function (_React$Component) { _inherits(DropdownMenu, _React$Component); function DropdownMenu(props) { var _this; _classCallCheck(this, DropdownMenu); _this = _possibleConstructorReturn(this, _getPrototypeOf(DropdownMenu).call(this, props)); _this.rafInstance = null; _this.lastVisible = false; _this.scrollActiveItemToView = function () { // scroll into view var itemComponent = (0, _reactDom.findDOMNode)(_this.firstActiveItem); var _this$props = _this.props, visible = _this$props.visible, firstActiveValue = _this$props.firstActiveValue; var value = _this.props.value; if (!itemComponent || !visible) { return; } var scrollIntoViewOpts = { onlyScrollIfNeeded: true }; if ((!value || value.length === 0) && firstActiveValue) { scrollIntoViewOpts.alignWithTop = true; } // Delay to scroll since current frame item position is not ready when pre view is by filter // https://github.com/ant-design/ant-design/issues/11268#issuecomment-406634462 _this.rafInstance = (0, _raf["default"])(function () { (0, _domScrollIntoView["default"])(itemComponent, (0, _reactDom.findDOMNode)(_this.menuRef), scrollIntoViewOpts); }); }; _this.renderMenu = function () { var _this$props2 = _this.props, menuItems = _this$props2.menuItems, menuItemSelectedIcon = _this$props2.menuItemSelectedIcon, defaultActiveFirstOption = _this$props2.defaultActiveFirstOption, prefixCls = _this$props2.prefixCls, multiple = _this$props2.multiple, onMenuSelect = _this$props2.onMenuSelect, inputValue = _this$props2.inputValue, backfillValue = _this$props2.backfillValue, onMenuDeselect = _this$props2.onMenuDeselect, visible = _this$props2.visible; var firstActiveValue = _this.props.firstActiveValue; if (menuItems && menuItems.length) { var menuProps = {}; if (multiple) { menuProps.onDeselect = onMenuDeselect; menuProps.onSelect = onMenuSelect; } else { menuProps.onClick = onMenuSelect; } var value = _this.props.value; var selectedKeys = (0, _util.getSelectKeys)(menuItems, value); var activeKeyProps = {}; var defaultActiveFirst = defaultActiveFirstOption; var clonedMenuItems = menuItems; if (selectedKeys.length || firstActiveValue) { if (visible && !_this.lastVisible) { activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue; } else if (!visible) { // Do not trigger auto active since we already have selectedKeys if (selectedKeys[0]) { defaultActiveFirst = false; } activeKeyProps.activeKey = undefined; } var foundFirst = false; // set firstActiveItem via cloning menus // for scroll into view var clone = function clone(item) { var key = item.key; if (!foundFirst && selectedKeys.indexOf(key) !== -1 || !foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1) { foundFirst = true; return React.cloneElement(item, { ref: function ref(_ref) { _this.firstActiveItem = _ref; } }); } return item; }; clonedMenuItems = menuItems.map(function (item) { if (item.type.isMenuItemGroup) { var children = (0, _toArray["default"])(item.props.children).map(clone); return React.cloneElement(item, {}, children); } return clone(item); }); } else { // Clear firstActiveItem when dropdown menu items was empty // Avoid `Unable to find node on an unmounted component` // https://github.com/ant-design/ant-design/issues/10774 _this.firstActiveItem = null; } // clear activeKey when inputValue change var lastValue = value && value[value.length - 1]; if (inputValue !== _this.lastInputValue && (!lastValue || lastValue !== backfillValue)) { activeKeyProps.activeKey = ''; } return React.createElement(_rcMenu["default"], _extends({ ref: _this.saveMenuRef, style: _this.props.dropdownMenuStyle, defaultActiveFirst: defaultActiveFirst, role: "listbox", itemIcon: multiple ? menuItemSelectedIcon : null }, activeKeyProps, { multiple: multiple }, menuProps, { selectedKeys: selectedKeys, prefixCls: "".concat(prefixCls, "-menu") }), clonedMenuItems); } return null; }; _this.lastInputValue = props.inputValue; _this.saveMenuRef = (0, _util.saveRef)(_assertThisInitialized(_this), 'menuRef'); return _this; } _createClass(DropdownMenu, [{ 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 this.props.visible && !nextProps.visible || nextProps.visible || nextProps.inputValue !== this.props.inputValue; } }, { 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: "componentWillUnmount", value: function componentWillUnmount() { if (this.rafInstance) { _raf["default"].cancel(this.rafInstance); } } }, { key: "render", value: function render() { var renderMenu = this.renderMenu(); return renderMenu ? React.createElement("div", { style: { overflow: 'auto', transform: 'translateZ(0)' }, id: this.props.ariaId, onFocus: this.props.onPopupFocus, onMouseDown: _util.preventDefaultEvent, onScroll: this.props.onPopupScroll }, renderMenu) : null; } }]); return DropdownMenu; }(React.Component); exports["default"] = DropdownMenu; DropdownMenu.displayName = 'DropdownMenu'; DropdownMenu.propTypes = { ariaId: PropTypes.string, defaultActiveFirstOption: PropTypes.bool, value: PropTypes.any, dropdownMenuStyle: PropTypes.object, multiple: PropTypes.bool, onPopupFocus: PropTypes.func, onPopupScroll: PropTypes.func, onMenuDeSelect: PropTypes.func, onMenuSelect: PropTypes.func, prefixCls: PropTypes.string, menuItems: PropTypes.any, inputValue: PropTypes.string, visible: PropTypes.bool, firstActiveValue: PropTypes.string, menuItemSelectedIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]) };