@apdesign/web-react 1.2.0 → 1.3.0

package/lib/Select/select.js

@@ -86,6 +86,7 @@ var ConfigProvider_1 = require("../ConfigProvider");
 var useMergeValue_1 = __importDefault(require("../_util/hooks/useMergeValue"));
 var omit_1 = __importDefault(require("../_util/omit"));
 var useMergeProps_1 = __importDefault(require("../_util/hooks/useMergeProps"));
+var index_1 = require("../index");
 var useId_1 = __importDefault(require("../_util/hooks/useId"));
 // 用户创建中的option的origin标识
 var USER_CREATING_OPTION_ORIGIN = 'userCreatingOption';
@@ -94,13 +95,14 @@ var defaultProps = {
     bordered: true,
     filterOption: true,
     unmountOnExit: true,
+    isQuickSingleSelectMode: true,
     defaultActiveFirstOption: true,
 };
 var triggerPopupAlign = { bottom: 4 };
 function Select(baseProps, ref) {
     var _a = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl;
     var props = (0, useMergeProps_1.default)(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.Select);
-    var children = props.children, renderFormat = props.renderFormat, defaultActiveFirstOption = props.defaultActiveFirstOption, disabled = props.disabled, unmountOnExit = props.unmountOnExit, notFoundContent = props.notFoundContent, showSearch = props.showSearch, tokenSeparators = props.tokenSeparators, options = props.options, filterOption = props.filterOption, labelInValue = props.labelInValue, getPopupContainer = props.getPopupContainer, trigger = props.trigger, triggerElement = props.triggerElement, triggerProps = props.triggerProps, dropdownRender = props.dropdownRender, dropdownMenuStyle = props.dropdownMenuStyle, dropdownMenuClassName = props.dropdownMenuClassName, virtualListProps = props.virtualListProps, 
+    var children = props.children, renderFormat = props.renderFormat, defaultActiveFirstOption = props.defaultActiveFirstOption, disabled = props.disabled, unmountOnExit = props.unmountOnExit, notFoundContent = props.notFoundContent, showSearch = props.showSearch, tokenSeparators = props.tokenSeparators, options = props.options, filterOption = props.filterOption, labelInValue = props.labelInValue, getPopupContainer = props.getPopupContainer, isQuickSingleSelectMode = props.isQuickSingleSelectMode, trigger = props.trigger, triggerElement = props.triggerElement, triggerProps = props.triggerProps, dropdownRender = props.dropdownRender, dropdownMenuStyle = props.dropdownMenuStyle, dropdownMenuClassName = props.dropdownMenuClassName, virtualListProps = props.virtualListProps, 
     // events
     onChange = props.onChange, onSelect = props.onSelect, onDeselect = props.onDeselect, onClear = props.onClear, onSearch = props.onSearch, onFocus = props.onFocus, onBlur = props.onBlur, onPopupScroll = props.onPopupScroll, onVisibleChange = props.onVisibleChange, onInputValueChange = props.onInputValueChange, onPaste = props.onPaste, onKeyDown = props.onKeyDown;
     // TODO 兼容逻辑，3.0 移除 tags 模式
@@ -112,35 +114,42 @@ function Select(baseProps, ref) {
     }
     var prefixCls = getPrefixCls('select');
     var isMultipleMode = mode === 'multiple';
+    var isMultipleQuickSelectMode = isMultipleMode && isQuickSingleSelectMode;
     // TODO: 统一 useMergeValue 函数的表现
     var _b = __read((0, react_1.useState)((0, utils_1.getValidValue)(props.defaultValue, isMultipleMode, labelInValue)), 2), stateValue = _b[0], setValue = _b[1];
-    var value = 'value' in props ? (0, utils_1.getValidValue)(props.value, isMultipleMode, labelInValue) : stateValue;
-    var _c = __read((0, useMergeValue_1.default)('', {
+    var _c = __read((0, react_1.useState)((0, utils_1.getValidValue)(props.defaultValue, isMultipleMode, labelInValue)), 2), stateProxyValue = _c[0], setProxyValue = _c[1];
+    var value = 'value' in props
+        ? (0, utils_1.getValidValue)(props.value, isMultipleMode, labelInValue)
+        : isMultipleQuickSelectMode
+            ? stateProxyValue
+            : stateValue;
+    var valueForInputShow = 'value' in props ? (0, utils_1.getValidValue)(props.value, isMultipleMode, labelInValue) : stateValue;
+    var _d = __read((0, useMergeValue_1.default)('', {
         value: 'inputValue' in props ? props.inputValue || '' : undefined,
-    }), 3), inputValue = _c[0], setInputValue = _c[1], stateInputValue = _c[2];
-    var _d = __read((0, useMergeValue_1.default)(false, {
+    }), 3), inputValue = _d[0], setInputValue = _d[1], stateInputValue = _d[2];
+    var _e = __read((0, useMergeValue_1.default)(false, {
         defaultValue: props.defaultPopupVisible,
         value: 'popupVisible' in props
             ? props.popupVisible
             : triggerProps && 'popupVisible' in triggerProps
                 ? triggerProps.popupVisible
                 : undefined,
-    }), 2), popupVisible = _d[0], setPopupVisible = _d[1];
+    }), 2), popupVisible = _e[0], setPopupVisible = _e[1];
     // allowCreate 时，用户正在创建的选项值
-    var _e = __read((0, react_1.useState)(null), 2), userCreatingOption = _e[0], setUserCreatingOption = _e[1];
+    var _f = __read((0, react_1.useState)(null), 2), userCreatingOption = _f[0], setUserCreatingOption = _f[1];
     // allowCreate 时，由用户输入而扩展到选项中的值
-    var _f = __read((0, react_1.useState)([]), 2), userCreatedOptions = _f[0], setUserCreatedOptions = _f[1];
+    var _g = __read((0, react_1.useState)([]), 2), userCreatedOptions = _g[0], setUserCreatedOptions = _g[1];
     // 具有选中态或者 hover 态的 option 的 value
-    var _g = __read((0, react_1.useState)((0, is_1.isArray)(value) ? value[0] : value), 2), valueActive = _g[0], setValueActive = _g[1];
+    var _h = __read((0, react_1.useState)((0, is_1.isArray)(value) ? value[0] : value), 2), valueActive = _h[0], setValueActive = _h[1];
     // 缓存较为耗时的 flatChildren 的结果
-    var _h = (0, react_1.useMemo)(function () {
+    var _j = (0, react_1.useMemo)(function () {
         return (0, utils_1.flatChildren)({ children: children, options: options, filterOption: filterOption }, {
             prefixCls: prefixCls,
             inputValue: inputValue,
             userCreatedOptions: userCreatedOptions,
             userCreatingOption: userCreatingOption,
         });
-    }, [children, options, filterOption, inputValue, userCreatingOption, userCreatedOptions]), childrenList = _h.childrenList, optionInfoMap = _h.optionInfoMap, optionValueList = _h.optionValueList, optionIndexListForArrowKey = _h.optionIndexListForArrowKey, hasOptGroup = _h.hasOptGroup, hasComplexLabelInOptions = _h.hasComplexLabelInOptions;
+    }, [children, options, filterOption, inputValue, userCreatingOption, userCreatedOptions]), childrenList = _j.childrenList, optionInfoMap = _j.optionInfoMap, optionValueList = _j.optionValueList, optionIndexListForArrowKey = _j.optionIndexListForArrowKey, hasOptGroup = _j.hasOptGroup, hasComplexLabelInOptions = _j.hasComplexLabelInOptions;
     // ref
     var refWrapper = (0, react_1.useRef)(null);
     var refTrigger = (0, react_1.useRef)(null);
@@ -218,10 +227,12 @@ function Select(baseProps, ref) {
         if (isMultipleMode) {
             if (!Array.isArray(value)) {
                 setValue(value === undefined ? [] : [value]);
+                setProxyValue(value === undefined ? [] : [value]);
             }
         }
         else if (Array.isArray(value)) {
             setValue(value.length === 0 ? undefined : value[0]);
+            setProxyValue(value.length === 0 ? undefined : value[0]);
         }
     }, [isMultipleMode, value]);
     // 选项下拉框显示/隐藏时的一些自动行为
@@ -395,21 +406,50 @@ function Select(baseProps, ref) {
             onChange(paramsForCallback.value, paramsForCallback.option);
         }
     };
-    // 多选时，选择/取消选择一个选项
-    var checkOption = function (optionValue, operation) {
+    var tryUpdateProxySelectValue = function (value) {
+        setProxyValue(value);
+    };
+    // 多选时，选择/取消选择一个选项。 fromTag 为 true 时，表示从input tag标签触发取消选择
+    var checkOption = function (optionValue, operation, fromTag) {
+        if (fromTag === void 0) { fromTag = false; }
         // 取消选中时不需要检查option是否存在，因为可能已被外部剔除了此选项
         if (operation === 'remove' || (operation === 'add' && optionInfoMap.get(optionValue))) {
             var newValue = operation === 'add'
                 ? value.concat(optionValue)
                 : value.filter(function (v) { return v !== optionValue; });
             var callbackToTrigger = operation === 'add' ? onSelect : onDeselect;
-            tryUpdateSelectValue(newValue);
             if (typeof callbackToTrigger === 'function') {
                 var paramsForCallback = getValueAndOptionForCallback(optionValue, false);
                 callbackToTrigger(paramsForCallback.value, paramsForCallback.option);
             }
+            // 如果是快速单选模式，更新代理值
+            if (isMultipleQuickSelectMode) {
+                tryUpdateProxySelectValue(newValue);
+                if (fromTag) {
+                    tryUpdateSelectValue(newValue);
+                }
+            }
+            else {
+                tryUpdateSelectValue(newValue);
+            }
         }
     };
+    // 多选时，确定
+    var confirmCheck = function () {
+        tryUpdateSelectValue(stateProxyValue);
+        tryUpdatePopupVisible(false);
+    };
+    // 多选时，取消
+    var cancelCheck = function () {
+        tryUpdateProxySelectValue(stateValue);
+        tryUpdatePopupVisible(false);
+    };
+    // 多选时候快速只选一个
+    var handleSingleQuickSelect = function (optionValue) {
+        tryUpdatePopupVisible(false);
+        tryUpdateProxySelectValue([optionValue]);
+        tryUpdateSelectValue([optionValue]);
+    };
     var handleOptionClick = function (optionValue, disabled) {
         if (disabled) {
             return;
@@ -481,41 +521,53 @@ function Select(baseProps, ref) {
         var needForbidVirtual = needMeasureLongestItem && hasComplexLabelInOptions;
         var mergedNotFoundContent = 'notFoundContent' in props ? notFoundContent : renderEmpty('Select');
         // 选项列表元素
-        var eleOptionList = childrenList.length ? (react_1.default.createElement(VirtualList_1.default, __assign({ id: instancePopupID, role: "listbox", style: dropdownMenuStyle, className: (0, classNames_1.default)(prefixCls + "-popup-inner", dropdownMenuClassName), ref: refWrapper, data: childrenList, height: null, isStaticItemHeight: !hasOptGroup, measureLongestItem: needMeasureLongestItem, itemKey: function (child) { return child.props._key; }, onMouseDown: utils_1.preventDefaultEvent, onMouseMove: function () {
-                refKeyboardArrowDirection.current = null;
-            }, onScroll: function (e) { return onPopupScroll && onPopupScroll(e.target); } }, virtualListProps, { threshold: needForbidVirtual ? null : virtualListProps === null || virtualListProps === void 0 ? void 0 : virtualListProps.threshold }), function (child) {
-            var _a;
-            if ((0, utils_1.isSelectOptGroup)(child)) {
-                return react_1.default.createElement(child.type, __assign({}, child.props, { prefixCls: prefixCls }));
-            }
-            if ((0, utils_1.isSelectOption)(child)) {
-                var optionValue = (_a = child.props) === null || _a === void 0 ? void 0 : _a.value;
-                var userCreatingOptionValue = (0, is_1.isObject)(userCreatingOption)
-                    ? userCreatingOption.value
-                    : userCreatingOption;
-                var userCreatedOptionValues = userCreatedOptions.map(function (op) {
-                    return (0, is_1.isObject)(op) ? op.value : op;
-                });
-                var optionProps = {
-                    prefixCls: prefixCls,
-                    rtl: rtl,
-                    _valueActive: valueActive,
-                    _valueSelect: value,
-                    _isMultipleMode: isMultipleMode,
-                    _isUserCreatingOption: allowCreate && userCreatingOptionValue === optionValue,
-                    _isUserCreatedOption: allowCreate && userCreatedOptionValues.indexOf(optionValue) > -1,
-                    _onClick: handleOptionClick,
-                    _onMouseEnter: function (value) {
-                        refKeyboardArrowDirection.current === null && setValueActive(value);
-                    },
-                    _onMouseLeave: function () {
-                        refKeyboardArrowDirection.current === null && setValueActive(undefined);
-                    },
-                };
-                return child && react_1.default.createElement(child.type, __assign({}, child.props, optionProps));
-            }
-            return child;
-        })) : null;
+        var eleOptionList = childrenList.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(VirtualList_1.default, __assign({ id: instancePopupID, role: "listbox", style: dropdownMenuStyle, className: (0, classNames_1.default)(prefixCls + "-popup-inner", dropdownMenuClassName), ref: refWrapper, data: childrenList, height: null, isStaticItemHeight: !hasOptGroup, measureLongestItem: needMeasureLongestItem, itemKey: function (child) { return child.props._key; }, onMouseDown: utils_1.preventDefaultEvent, onMouseMove: function () {
+                    refKeyboardArrowDirection.current = null;
+                }, onScroll: function (e) { return onPopupScroll && onPopupScroll(e.target); } }, virtualListProps, { threshold: needForbidVirtual ? null : virtualListProps === null || virtualListProps === void 0 ? void 0 : virtualListProps.threshold }), function (child) {
+                var _a;
+                if ((0, utils_1.isSelectOptGroup)(child)) {
+                    return react_1.default.createElement(child.type, __assign({}, child.props, { prefixCls: prefixCls }));
+                }
+                if ((0, utils_1.isSelectOption)(child)) {
+                    var optionValue = (_a = child.props) === null || _a === void 0 ? void 0 : _a.value;
+                    var userCreatingOptionValue = (0, is_1.isObject)(userCreatingOption)
+                        ? userCreatingOption.value
+                        : userCreatingOption;
+                    var userCreatedOptionValues = userCreatedOptions.map(function (op) {
+                        return (0, is_1.isObject)(op) ? op.value : op;
+                    });
+                    var optionProps = {
+                        prefixCls: prefixCls,
+                        rtl: rtl,
+                        _valueActive: valueActive,
+                        _valueSelect: value,
+                        _isMultipleMode: isMultipleMode,
+                        _isMultipleQuickSelectMode: isMultipleQuickSelectMode,
+                        _onSingleQuickSelect: handleSingleQuickSelect,
+                        _isUserCreatingOption: allowCreate && userCreatingOptionValue === optionValue,
+                        _isUserCreatedOption: allowCreate && userCreatedOptionValues.indexOf(optionValue) > -1,
+                        _onClick: handleOptionClick,
+                        _onMouseEnter: function (value) {
+                            refKeyboardArrowDirection.current === null && setValueActive(value);
+                        },
+                        _onMouseLeave: function () {
+                            refKeyboardArrowDirection.current === null && setValueActive(undefined);
+                        },
+                    };
+                    return child && react_1.default.createElement(child.type, __assign({}, child.props, optionProps));
+                }
+                return child;
+            }),
+            isMultipleQuickSelectMode && (react_1.default.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 12,
+                    padding: '8px 16px 4px',
+                    borderTop: '1px solid var(--color-fill-3)',
+                } },
+                react_1.default.createElement(index_1.Button, { size: "mini", onClick: cancelCheck }, "\u53D6\u6D88"),
+                react_1.default.createElement(index_1.Button, { type: "primary", size: "mini", onClick: confirmCheck }, "\u786E\u5B9A"))))) : null;
         // Avoid drop-down box jitter when user is creating a selection
         var isUserCreating = allowCreate && inputValue;
         // Dropdown-placeholder when there is no options
@@ -603,7 +655,7 @@ function Select(baseProps, ref) {
         // Option Items
         onRemoveCheckedItem: function (_, index, event) {
             event.stopPropagation();
-            checkOption(value[index], 'remove');
+            checkOption(value[index], 'remove', true);
         },
         onClear: function (event) {
             event.stopPropagation();
@@ -641,7 +693,12 @@ function Select(baseProps, ref) {
         });
     }, [hotkeyHandler, optionInfoMap, valueActive, getOptionInfoByValue, scrollIntoView]);
     var renderView = function (eleView) {
-        return (react_1.default.createElement(Trigger_1.default, __assign({ ref: function (ref) { return (refTrigger.current = ref); }, popup: renderPopup, trigger: trigger, disabled: disabled, getPopupContainer: getPopupContainer, classNames: "slideDynamicOrigin", autoAlignPopupWidth: true, popupAlign: triggerPopupAlign, popupVisible: popupVisible, unmountOnExit: unmountOnExit, onVisibleChange: tryUpdatePopupVisible, __onExit: function () {
+        return (react_1.default.createElement(Trigger_1.default, __assign({ ref: function (ref) { return (refTrigger.current = ref); }, popup: renderPopup, trigger: trigger, disabled: disabled, getPopupContainer: getPopupContainer, classNames: "slideDynamicOrigin", autoAlignPopupWidth: true, popupAlign: triggerPopupAlign, popupVisible: popupVisible, unmountOnExit: unmountOnExit, onVisibleChange: function (visible) {
+                if (visible === false && isMultipleQuickSelectMode) {
+                    setProxyValue(stateValue);
+                }
+                tryUpdatePopupVisible(visible);
+            }, __onExit: function () {
                 refPopupExiting.current = true;
             }, __onExited: function () {
                 refPopupExiting.current = false;
@@ -653,7 +710,7 @@ function Select(baseProps, ref) {
         : triggerElement;
     return (react_1.default.createElement(resizeObserver_1.default, { onResize: function () { return refTrigger.current.updatePopupPosition(); } }, usedTriggerElement !== undefined && usedTriggerElement !== null ? (renderView(usedTriggerElement)) : (react_1.default.createElement(select_view_1.default, __assign({}, props, selectViewEventHandlers, { ref: refSelectView, 
         // state
-        value: value, inputValue: inputValue, popupVisible: popupVisible, 
+        value: valueForInputShow, inputValue: inputValue, popupVisible: popupVisible, 
         // other
         rtl: rtl, prefixCls: prefixCls, allowCreate: !!allowCreate, ariaControls: instancePopupID, isEmptyValue: isNoOptionSelected, isMultiple: isMultipleMode, onSort: tryUpdateSelectValue, renderText: function (value) {
             var option = getOptionInfoByValue(value);

package/lib/index.d.ts

@@ -139,4 +139,4 @@ export type { WatermarkProps } from './Watermark/interface';
 export { default as Watermark } from './Watermark';
 export type { ImageProps, ImagePreviewProps, ImagePreviewActionProps, ImagePreviewGroupProps } from './Image/interface';
 export { default as Image } from './Image';
-export declare const version = "1.2.0";
+export declare const version = "1.3.0";

package/lib/index.js

@@ -147,4 +147,4 @@ var Watermark_1 = require("./Watermark");
 Object.defineProperty(exports, "Watermark", { enumerable: true, get: function () { return __importDefault(Watermark_1).default; } });
 var Image_1 = require("./Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
-exports.version = '1.2.0';
+exports.version = '1.3.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apdesign/web-react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "AP Design React UI Library.",
   "module": "./es/index.js",
   "main": "./lib/index.js",