UNPKG

acud

Version:

acg react 组件库

552 lines (551 loc) • 25 kB
"use strict"; 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn")); var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct")); var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf")); var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); var _some = _interopRequireDefault(require("lodash/some")); var _isEqual = _interopRequireDefault(require("lodash/isEqual")); var _isEmpty = _interopRequireDefault(require("lodash/isEmpty")); var _map = _interopRequireDefault(require("lodash/map")); var _every = _interopRequireDefault(require("lodash/every")); var _differenceBy = _interopRequireDefault(require("lodash/differenceBy")); var _forEach = _interopRequireDefault(require("lodash/forEach")); var _findIndex = _interopRequireDefault(require("lodash/findIndex")); var _react = _interopRequireDefault(require("react")); var _arrayTreeFilter = _interopRequireDefault(require("array-tree-filter")); var _classnames3 = _interopRequireDefault(require("classnames")); var _rcMotion = _interopRequireDefault(require("rc-motion")); var _checkbox = _interopRequireDefault(require("../checkbox")); var _virtualList = _interopRequireDefault(require("../virtual-list")); var _MenuItem = _interopRequireDefault(require("./MenuItem")); var _utils = require("./utils"); function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); } var DEFAULT_MENU_GAP = 4; // 菜单之间默认4px的间距 var Menus = /*#__PURE__*/function (_React$Component) { function Menus(props) { var _this; (0, _classCallCheck2["default"])(this, Menus); _this = _callSuper(this, Menus, [props]); _this.menus = {}; _this.vMenus = {}; _this.menuItems = {}; _this.saveMenuWrap = function (menuWrap) { _this.menuWrap = menuWrap; }; _this.saveMenus = function (menuIndex) { return function (menus) { _this.menus[menuIndex] = menus; }; }; _this.saveVMenus = function (menuIndex) { return function (menus) { _this.vMenus[menuIndex] = menus; }; }; _this.saveMenuItems = function (index) { return function (node) { _this.menuItems[index] = node; }; }; _this.handleMenuScroll = function (menuIndex) { return function (e) { var _a, _b, _c, _d; var menuScrollOpen = _this.state.menuScrollOpen; if (menuScrollOpen) { // 当前menu滚动时,取消当前选中项高亮,隐藏子级 var activeValue = _this.props.activeValue.slice(0, menuIndex); if (!(0, _isEqual["default"])(activeValue, _this.props.activeValue)) { (_b = (_a = _this.props).onActiveValueSet) === null || _b === void 0 ? void 0 : _b.call(_a, activeValue); } (_d = (_c = _this.props).onDropdownMenuScroll) === null || _d === void 0 ? void 0 : _d.call(_c, e, menuIndex); } }; }; _this.onShowActive = function () { _this.scrollActiveItemToView(); window.setTimeout(function () { _this.setMenuPosition(); window.setTimeout(function () { _this.handleMenuScrollChange(true); }, 0); }, 0); }; _this.onShowEnd = function () { _this.handleMenuScrollChange(false); }; _this.state = { // 默认关闭对menu scroll事件的监听,待scrollActiveItemToView完成后开启 menuScrollOpen: false }; return _this; } (0, _inherits2["default"])(Menus, _React$Component); return (0, _createClass2["default"])(Menus, [{ key: "componentDidUpdate", value: function componentDidUpdate(prevProps) { if (!(0, _isEqual["default"])(prevProps.activeValue, this.props.activeValue) || prevProps.options !== this.props.options) { this.setMenuPosition(); } } }, { key: "isStatusOption", value: function isStatusOption() { var statusValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; var option = arguments.length > 1 ? arguments[1] : undefined; var menuIndex = arguments.length > 2 ? arguments[2] : undefined; return statusValue[menuIndex] === option[this.getFieldName('value')]; } }, { key: "isActiveOption", value: function isActiveOption(value, optionValue) { var active = true; (0, _forEach["default"])(optionValue, function (val, index) { if (val !== value[index]) { active = false; return false; } }); return active; } }, { key: "getFieldName", value: function getFieldName(name) { var _this$props = this.props, fieldNames = _this$props.fieldNames, defaultFieldNames = _this$props.defaultFieldNames; // 防止只设置单个属性的名字 return fieldNames[name] || defaultFieldNames[name]; } }, { key: "getOption", value: function getOption(option, menuIndex) { var _this2 = this; var _this$props2 = this.props, prefixCls = _this$props2.prefixCls, mode = _this$props2.mode, keyword = _this$props2.keyword, value = _this$props2.value, activeValue = _this$props2.activeValue, hoveredValue = _this$props2.hoveredValue, expandTrigger = _this$props2.expandTrigger, expandIcon = _this$props2.expandIcon, loadingIcon = _this$props2.loadingIcon, titlePlacement = _this$props2.titlePlacement; var isMulti = mode === 'multiple'; var optionValue = function () { var value = option[_this2.getFieldName('value')]; return /*#__PURE__*/_react["default"].isValidElement(value) ? menuIndex : value; }(); var optionKey = [].concat((0, _toConsumableArray2["default"])(activeValue.slice(0, menuIndex)), [optionValue]); var hasChildren = option[this.getFieldName('children')] && option[this.getFieldName('children')].length > 0; var hasLeaf = hasChildren || option.isLeaf === false; var onSelect = this.props.onSelect.bind(this, option, menuIndex); var onMultiSelect = this.props.onMultiSelect.bind(this, option, menuIndex, optionKey); var onItemDoubleClick = this.props.onItemDoubleClick.bind(this, option, menuIndex); var handleClick = function handleClick(e) { isMulti && !hasLeaf ? undefined : onSelect(e); }; var handleMultiClick = function handleMultiClick(e) { if (activeValue[menuIndex] === optionValue) { e.stopPropagation(); } }; var expandProps = { onClick: handleClick, onDoubleClick: onItemDoubleClick }; var menuItemCls = "".concat(prefixCls, "-menu-item"); if (isMulti) { menuItemCls += " ".concat(prefixCls, "-menu-item-multi"); } var expandIconNode = null; if (hasLeaf) { menuItemCls += " ".concat(prefixCls, "-menu-item-expand"); if (!option.loading) { expandIconNode = /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(prefixCls, "-menu-item-expand-icon") }, expandIcon); } } if (expandTrigger === 'hover') { expandProps = { onMouseEnter: this.delayOnEvent.bind(this, onSelect), onMouseLeave: this.delayOnEvent.bind(this), onClick: handleClick }; } if (this.isStatusOption(hoveredValue, option, menuIndex) && hasLeaf) { menuItemCls += " ".concat(prefixCls, "-menu-item-hovered"); } if (this.isStatusOption(activeValue, option, menuIndex)) { expandProps.ref = this.saveMenuItems(menuIndex); } if (!isMulti && this.isActiveOption(value, optionKey)) { menuItemCls += " ".concat(prefixCls, "-menu-item-active"); } if (option.disabled) { menuItemCls += " ".concat(prefixCls, "-menu-item-disabled"); } var loadingIconNode = null; if (option.loading) { menuItemCls += " ".concat(prefixCls, "-menu-item-loading"); loadingIconNode = loadingIcon || null; } var _ref = function () { if (!isMulti) { return {}; } var checked; var indeterminate; if (keyword) { checked = (0, _utils.isIncludeArray)(value, optionValue); } else if (hasLeaf) { var children = option[_this2.getFieldName('children')]; var getEnableValues = _this2.props.getEnableValues.bind(_this2); var getTotalValues = _this2.props.getTotalValues.bind(_this2); var enableValues = getEnableValues(children); var totalValues = getTotalValues(children); var disabledValues = (0, _differenceBy["default"])(totalValues, enableValues, JSON.stringify); var selectedValue = (0, _map["default"])(value, function (valueItem) { return valueItem.slice(menuIndex + 1); }); var disabledSelectedValues = []; (0, _forEach["default"])(disabledValues, function (valueItem) { if ((0, _utils.isIncludeArray)(selectedValue, valueItem)) { disabledSelectedValues.push(valueItem); } }); var childrenValue = [].concat((0, _toConsumableArray2["default"])(getEnableValues(children)), disabledSelectedValues); var includeCallback = function includeCallback(valueItem) { return (0, _utils.isIncludeArray)(value, [].concat((0, _toConsumableArray2["default"])(optionKey), (0, _toConsumableArray2["default"])(valueItem))); }; checked = !(0, _isEmpty["default"])(childrenValue) && (0, _every["default"])(childrenValue, includeCallback); indeterminate = !checked && (0, _some["default"])(childrenValue, includeCallback); } else { checked = (0, _utils.isIncludeArray)(value, optionKey); } return { checked: checked, indeterminate: indeterminate }; }(), checked = _ref.checked, indeterminate = _ref.indeterminate; var label = option[this.getFieldName('label')]; var labelContent = /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(prefixCls, "-menu-item-label") }, label); var menuItemProps = { key: optionKey, option: option, label: label, menuItemCls: menuItemCls, expandProps: expandProps, prefixCls: prefixCls, isMulti: isMulti, checked: checked, indeterminate: indeterminate, labelContent: labelContent, expandIconNode: expandIconNode, loadingIconNode: loadingIconNode, handleMultiClick: handleMultiClick, onMultiSelect: onMultiSelect, onMouseEnter: expandProps === null || expandProps === void 0 ? void 0 : expandProps.onMouseEnter, titlePlacement: titlePlacement }; return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], menuItemProps)); } }, { key: "getCheckAllOption", value: function getCheckAllOption(menuIndex) { var _this$props3 = this.props, mode = _this$props3.mode, prefixCls = _this$props3.prefixCls, value = _this$props3.value, enableValues = _this$props3.enableValues, totalValues = _this$props3.totalValues, _this$props3$withChec = _this$props3.withCheckAll, withCheckAll = _this$props3$withChec === void 0 ? true : _this$props3$withChec, locale = _this$props3.locale; var isMulti = mode === 'multiple'; if (!(isMulti && menuIndex === 0) || !withCheckAll) { return null; } var disabledValues = (0, _differenceBy["default"])(totalValues, enableValues, JSON.stringify); var disabledSelectedValues = []; (0, _forEach["default"])(disabledValues, function (valueItem) { if ((0, _utils.isIncludeArray)(value, valueItem)) { disabledSelectedValues.push(valueItem); } }); var childrenValue = [].concat((0, _toConsumableArray2["default"])(enableValues), disabledSelectedValues); var checked = value.length > 0 && value.length >= childrenValue.length && childrenValue.every(function (valueItem) { return (0, _utils.isIncludeArray)(value, valueItem); }); var indeterminate = !checked && value.length > 0; var onMultiSelectAll = this.props.onMultiSelectAll.bind(this); return /*#__PURE__*/_react["default"].createElement("li", { className: "".concat(prefixCls, "-menu-item ").concat(prefixCls, "-menu-item-multi ").concat(prefixCls, "-menu-item-multi-check-all"), role: "menuitem", onMouseDown: function onMouseDown(e) { return e.preventDefault(); } }, /*#__PURE__*/_react["default"].createElement("div", { className: "".concat(prefixCls, "-menu-item-content") }, /*#__PURE__*/_react["default"].createElement(_checkbox["default"], { className: "".concat(prefixCls, "-menu-item-checkbox"), checked: checked, indeterminate: indeterminate, onChange: onMultiSelectAll }, /*#__PURE__*/_react["default"].createElement("span", { className: "".concat(prefixCls, "-menu-item-label") }, locale === null || locale === void 0 ? void 0 : locale.checkAll)))); } }, { key: "getActiveOptions", value: function getActiveOptions(values) { var _this3 = this; var options = this.props.options; var activeValue = values || this.props.activeValue; return (0, _arrayTreeFilter["default"])(options, function (o, level) { return o[_this3.getFieldName('value')] === activeValue[level]; }, { childrenKeyName: this.getFieldName('children') }); } }, { key: "getShowOptions", value: function getShowOptions() { var _this4 = this; var options = this.props.options; var result = this.getActiveOptions().map(function (activeOption) { return activeOption[_this4.getFieldName('children')]; }).filter(function (activeOption) { return !(0, _isEmpty["default"])(activeOption); }); result.unshift(options); return result; } }, { key: "delayOnEvent", value: function delayOnEvent(onEvent) { var _this5 = this; for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { args[_key - 1] = arguments[_key]; } if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; } if (typeof onEvent === 'function') { this.delayTimer = window.setTimeout(function () { onEvent.apply(void 0, args); _this5.delayTimer = null; }, 150); } } }, { key: "scrollActiveItemToView", value: function scrollActiveItemToView() { var _this6 = this; var _a; // scroll into view var showOptions = this.getShowOptions(); var optionsLength = showOptions.length; var activeValue = this.props.activeValue; // eslint-disable-next-line no-plusplus var _loop = function _loop(i) { var menuItemParent = _this6.vMenus[i]; var options = showOptions[i]; var index = (0, _findIndex["default"])(options, function (option) { var value = option[_this6.getFieldName('value')]; return value === activeValue[i]; }); (_a = menuItemParent === null || menuItemParent === void 0 ? void 0 : menuItemParent.scrollTo) === null || _a === void 0 ? void 0 : _a.call(menuItemParent, { index: index }); }; for (var i = 0; i < optionsLength; i++) { _loop(i); } } }, { key: "setMenuPosition", value: function setMenuPosition() { var _this7 = this; var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function () {}; var _a, _b, _c, _d, _e, _f; var _this$props4 = this.props, menusEdgeBuffer = _this$props4.menusEdgeBuffer, popupPlacement = _this$props4.popupPlacement; var menuDirections = []; var optionsLength = this.getShowOptions().length; if (Number(optionsLength) <= 0) { return; } var isPlaceTop = ['topLeft', 'topRight'].includes(popupPlacement); var clientHeight = window.innerHeight; var clientWidth = window.innerWidth; var _loop2 = function _loop2() { var currentMenu = _this7.menus[i]; var prevMenu = _this7.menus[i - 1]; var prevVMenu = _this7.vMenus[i - 1].componentRef.current; // 1、计算left并设置 var prevMenusWidthSum = 0; var prevMenuDir = menuDirections[i - 1] || 'right'; if (prevMenuDir === 'right') { // 往右展开时到达边界 // eslint-disable-next-line max-len if (clientWidth - prevMenu.getBoundingClientRect().left - prevMenu.offsetWidth - DEFAULT_MENU_GAP < currentMenu.offsetWidth) { prevMenusWidthSum = prevMenu.offsetLeft - currentMenu.offsetWidth - DEFAULT_MENU_GAP; menuDirections[i] = 'left'; } else { prevMenusWidthSum = prevMenu.offsetLeft + prevMenu.offsetWidth + DEFAULT_MENU_GAP; menuDirections[i] = 'right'; } } else if (prevMenuDir === 'left') { // 往左展开时到达边界 if (prevMenu.getBoundingClientRect().left - DEFAULT_MENU_GAP < currentMenu.offsetWidth) { prevMenusWidthSum = prevMenu.offsetLeft + prevMenu.offsetWidth + DEFAULT_MENU_GAP; menuDirections[i] = 'right'; } else { prevMenusWidthSum = prevMenu.offsetLeft - currentMenu.offsetWidth - DEFAULT_MENU_GAP; menuDirections[i] = 'left'; } } // 设置left currentMenu.style.left = prevMenusWidthSum + 'px'; // 2、计算top/bottom并设置 if (isPlaceTop) { var prevMenuBottom = Number((0, _utils.getElementStyle)(prevMenu).bottom.replace('px', '')); var prevMenuTransform = (_b = (0, _utils.getElementStyle)((_a = _this7.menuItems[i - 1]) === null || _a === void 0 ? void 0 : _a.parentElement)) === null || _b === void 0 ? void 0 : _b.transform; var prevMenuTranslateY = prevMenuTransform && prevMenuTransform !== 'none' ? parseFloat(prevMenuTransform.substring(6).split(',')[5]) : 0; var bottom = prevMenu.offsetHeight + prevMenuBottom + (prevVMenu.scrollTop - prevMenuTranslateY) - (((_c = _this7.menuItems[i - 1]) === null || _c === void 0 ? void 0 : _c.offsetTop) || 0) - currentMenu.offsetHeight; currentMenu.style.bottom = (bottom < 0 ? 0 : bottom) + 'px'; } else { var prevMenuTop = Number((0, _utils.getElementStyle)(prevMenu).top.replace('px', '')); var _prevMenuTransform = (_e = (0, _utils.getElementStyle)((_d = _this7.menuItems[i - 1]) === null || _d === void 0 ? void 0 : _d.parentElement)) === null || _e === void 0 ? void 0 : _e.transform; var _prevMenuTranslateY = _prevMenuTransform && _prevMenuTransform !== 'none' ? parseFloat(_prevMenuTransform.substring(6).split(',')[5]) : 0; var prevMenuItemsTopSum = prevMenuTop + (((_f = _this7.menuItems[i - 1]) === null || _f === void 0 ? void 0 : _f.offsetTop) || 0) - (prevVMenu.scrollTop - _prevMenuTranslateY); var menuWrapTop = _this7.menuWrap.parentElement.getBoundingClientRect().top; var currentMenuHeight = currentMenu.offsetHeight; var currentMenuMaxTop = clientHeight - menuWrapTop - currentMenuHeight - menusEdgeBuffer; var currentMenuTop = function () { if (currentMenuMaxTop <= 0) { return 0; } return prevMenuItemsTopSum > currentMenuMaxTop ? currentMenuMaxTop : prevMenuItemsTopSum; }(); currentMenu.style.top = (currentMenuTop < 0 ? 0 : currentMenuTop) + 'px'; } }; for (var i = 1; i < optionsLength; i++) { _loop2(); } if (typeof callback === 'function') { callback(); } } }, { key: "handleMenuScrollChange", value: function handleMenuScrollChange(menuScrollOpen) { this.setState({ menuScrollOpen: menuScrollOpen }); } }, { key: "render", value: function render() { var _this8 = this; var _this$props5 = this.props, prefixCls = _this$props5.prefixCls, transitionName = _this$props5.transitionName, visible = _this$props5.visible, virtual = _this$props5.virtual, hoveredValue = _this$props5.hoveredValue, dropdownMenuRender = _this$props5.dropdownMenuRender, dropdownMenuColumnStyle = _this$props5.dropdownMenuColumnStyle, size = _this$props5.size, mode = _this$props5.mode; var showOptions = this.getShowOptions(); var isMulti = mode === 'multiple'; var sizeCls = (0, _classnames3["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-menu-lg"), size === 'large'), "".concat(prefixCls, "-menu-sm"), size === 'small')); var menuClas = (0, _classnames3["default"])("".concat(prefixCls, "-menu"), (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-menu-multi"), isMulti), sizeCls, sizeCls)); var menu = showOptions.map(function (options, menuIndex) { var menuKey = "u + ".concat(menuIndex); var menuProps = { key: menuKey, className: menuClas, ref: _this8.saveMenus(menuIndex), style: dropdownMenuColumnStyle }; var getMenu = function getMenu(menuProps) { return /*#__PURE__*/_react["default"].createElement("ul", menuProps, /*#__PURE__*/_react["default"].createElement(_virtualList["default"], { itemKey: "value", ref: _this8.saveVMenus(menuIndex), data: options, height: 256, itemHeight: 32, fullHeight: false, virtual: virtual, onMouseDown: function onMouseDown(e) { return e.preventDefault(); }, onScroll: _this8.handleMenuScroll(menuIndex) }, function (option, optionIndex) { var optionComp = _this8.getOption(option, menuIndex); if (optionIndex === 0) { return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _this8.getCheckAllOption(menuIndex), optionComp); } return optionComp; })); }; if (dropdownMenuRender) { return /*#__PURE__*/_react["default"].createElement("div", menuProps, dropdownMenuRender(getMenu(), menuIndex, hoveredValue)); } return getMenu(menuProps); }); return /*#__PURE__*/_react["default"].createElement(_rcMotion["default"], { visible: visible, motionName: transitionName, removeOnLeave: false, leavedClassName: "".concat(prefixCls, "-menu-wrap-hidden"), onAppearActive: this.onShowActive, onEnterActive: this.onShowActive, onLeaveEnd: this.onShowEnd }, function (_ref2) { var className = _ref2.className, style = _ref2.style; return /*#__PURE__*/_react["default"].createElement("div", { ref: _this8.saveMenuWrap, className: className, style: (0, _extends2["default"])({ position: 'relative' }, style) }, menu); }); } }]); }(_react["default"].Component); Menus.defaultProps = { options: [], value: [], activeValue: [], onSelect: function onSelect() {}, prefixCls: 'rc-cascader-menus', visible: false, virtual: false, expandTrigger: 'click', menusEdgeBuffer: 20 }; var _default = exports["default"] = Menus;