@apdesign/web-react 1.3.4 → 1.4.1

package/lib/TreeSelect/tree-list.d.ts

@@ -7,6 +7,7 @@ interface TreeListProps extends TreeSelectProps {
     filterNode: TreeProps['filterNode'];
     inputValue?: string;
     prefixCls?: string;
+    confirmCheck: () => void;
 }
 declare const _default: React.ForwardRefExoticComponent<TreeListProps & React.RefAttributes<unknown>>;
 export default _default;

package/lib/TreeSelect/tree-list.js

@@ -61,10 +61,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var Tree_1 = __importDefault(require("../Tree"));
 var is_1 = require("../_util/is");
+var ConfigProvider_1 = require("../ConfigProvider");
 function TreeList(props, ref) {
-    var value = props.value, multiple = props.multiple, loadMore = props.loadMore, treeCheckedStrategy = props.treeCheckedStrategy, treeCheckStrictly = props.treeCheckStrictly, treeData = props.treeData, treeProps = props.treeProps, prefixCls = props.prefixCls, treeCheckable = props.treeCheckable;
+    var value = props.value, multiple = props.multiple, isQuickSingleSelectMode = props.isQuickSingleSelectMode, loadMore = props.loadMore, treeCheckedStrategy = props.treeCheckedStrategy, treeCheckStrictly = props.treeCheckStrictly, treeData = props.treeData, treeProps = props.treeProps, prefixCls = props.prefixCls, treeCheckable = props.treeCheckable, confirmCheck = props.confirmCheck;
+    var locale = (0, react_1.useContext)(ConfigProvider_1.ConfigContext).locale;
     var propsRenderTitle = treeProps && treeProps.renderTitle;
+    var propsRenderExtra = treeProps && treeProps.renderExtra;
     var treeRef = (0, react_1.useRef)();
+    var isMultipleQuickSelectMode = multiple && isQuickSingleSelectMode;
     var handleCheck = (0, react_1.useCallback)(function (keys, _a) {
         var checkedNodes = _a.checkedNodes, checked = _a.checked, node = _a.node;
         var newValue = keys.map(function (key) {
@@ -144,6 +148,69 @@ function TreeList(props, ref) {
         }
         return title;
     }, [prefixCls, props.inputValue, propsRenderTitle]);
+    var renderExtra = (0, react_1.useCallback)(function (nodeProps) {
+        var _a;
+        if (isMultipleQuickSelectMode) {
+            if (propsRenderExtra) {
+                console.warn('renderExtra is not recommended for use in quick single select mode');
+            }
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: prefixCls + "-extra-QuickSingleSelect-button", style: {
+                        position: 'absolute',
+                        right: 0,
+                        display: 'none',
+                        backgroundColor: 'rgb(var(--primary-6))',
+                        cursor: 'pointer',
+                        color: 'white',
+                        padding: '6px',
+                        fontSize: 12,
+                        paddingLeft: '20px',
+                        clipPath: 'polygon(12px 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                        whiteSpace: 'nowrap',
+                    }, onClick: function () {
+                        // 为了兼容严格勾选模式，这边改成先清空勾选，再由树组件内部触发勾选，才能准确获取子节点父节点勾选数据
+                        // onCheck 方法需要在 TreeContext 进行增加renderExtra的参数
+                        // props.onChange([], {
+                        //   checked: false,
+                        //   trigger: nodeProps,
+                        // });
+                        // requestAnimationFrame(() => {
+                        //   onCheck(true, nodeProps._key, e);
+                        //   confirmCheck();
+                        // });
+                        // 上面有点UI卡顿体验不好 方案二 手动获取所有勾选的key，自己构造handleCheck参数
+                        var treeCheckStrictly = props.treeCheckStrictly;
+                        var checkedKeys;
+                        var getAllCheckedKeys = function (node, keys) {
+                            if (keys === void 0) { keys = []; }
+                            if (Array.isArray(node.childrenData) && node.childrenData.length) {
+                                node.childrenData.forEach(function (child) {
+                                    getAllCheckedKeys(child, keys);
+                                });
+                            }
+                            else {
+                                keys.push(node._key);
+                            }
+                            return keys;
+                        };
+                        if (treeCheckStrictly) {
+                            checkedKeys = [nodeProps._key];
+                        }
+                        else {
+                            // 找到所有允许勾选的子节点
+                            checkedKeys = getAllCheckedKeys(nodeProps);
+                        }
+                        handleCheck(checkedKeys, {
+                            checkedNodes: [],
+                            checked: true,
+                            node: { props: nodeProps }, // 不完整
+                        });
+                        confirmCheck();
+                    } }, (_a = locale.Select) === null || _a === void 0 ? void 0 : _a.filterThisItemOnly), propsRenderExtra === null || propsRenderExtra === void 0 ? void 0 :
+                propsRenderExtra(nodeProps)));
+        }
+        return propsRenderExtra === null || propsRenderExtra === void 0 ? void 0 : propsRenderExtra(nodeProps);
+    }, [propsRenderExtra, isMultipleQuickSelectMode]);
     var extraProps = (0, react_1.useMemo)(function () {
         return props.treeCheckable
             ? {
@@ -163,6 +230,6 @@ function TreeList(props, ref) {
     }, []);
     return (react_1.default.createElement(Tree_1.default, __assign({ ref: treeRef, size: props.size, blockNode: true, filterNode: props.filterNode }, treeProps, { checkable: treeCheckable, multiple: multiple, loadMore: props.loadMore ? handleLoadMore : undefined, checkedStrategy: treeCheckedStrategy, checkStrictly: treeCheckStrictly, onMouseDown: function (e) {
             e.preventDefault();
-        } }, extraProps, { treeData: treeData, fieldNames: props.fieldNames, renderTitle: renderTitle, onSelect: onSelect, selectedKeys: selectedKeys })));
+        } }, extraProps, { treeData: treeData, fieldNames: props.fieldNames, renderTitle: renderTitle, renderExtra: renderExtra, onSelect: onSelect, selectedKeys: selectedKeys })));
 }
 exports.default = (0, react_1.forwardRef)(TreeList);

package/lib/TreeSelect/tree-select.js

@@ -113,6 +113,7 @@ var classNames_1 = __importDefault(require("../_util/classNames"));
 var useMergeProps_1 = __importDefault(require("../_util/hooks/useMergeProps"));
 var useIsFirstRender_1 = __importDefault(require("../_util/hooks/useIsFirstRender"));
 var useId_1 = __importDefault(require("../_util/hooks/useId"));
+var Button_1 = __importDefault(require("../Button"));
 function isEmptyValue(value) {
     return (!value ||
         ((0, is_1.isArray)(value) && value.length === 0) ||
@@ -122,10 +123,11 @@ var defaultProps = {
     bordered: true,
     treeCheckedStrategy: Tree_1.default.SHOW_CHILD,
     fieldNames: interface_1.DefaultFieldNames,
+    isQuickSingleSelectMode: true,
 };
 var triggerPopupAlign = { bottom: 4 };
 var TreeSelect = function (baseProps, ref) {
-    var _a = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl;
+    var _a = (0, react_1.useContext)(ConfigProvider_1.ConfigContext), getPrefixCls = _a.getPrefixCls, renderEmpty = _a.renderEmpty, componentConfig = _a.componentConfig, rtl = _a.rtl, locale = _a.locale;
     var props = (0, useMergeProps_1.default)(baseProps, defaultProps, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.TreeSelect);
     var refIsFirstRender = (0, useIsFirstRender_1.default)();
     var triggerRef = (0, react_1.useRef)();
@@ -147,8 +149,9 @@ var TreeSelect = function (baseProps, ref) {
     // 触发 onInputValueChange 回调的原因
     var refOnInputChangeCallbackReason = (0, react_1.useRef)(null);
     var onInputValueChange = props.onInputValueChange;
-    var _f = __read((0, useStateValue_1.default)(props, key2nodeProps, indeterminateKeys), 2), value = _f[0], setValue = _f[1];
     var multiple = props.multiple || props.treeCheckable;
+    var isMultipleQuickSelectMode = multiple && props.isQuickSingleSelectMode;
+    var _f = __read((0, useStateValue_1.default)(props, key2nodeProps, indeterminateKeys), 5), value = _f[0], setValue = _f[1], realValue = _f[2], confirmSetValue = _f[3], cancelSetValue = _f[4];
     var prefixCls = getPrefixCls('tree-select');
     var isFilterNode = inputValue && !(0, is_1.isFunction)(props.onSearch);
     // Unique ID of this select instance
@@ -158,6 +161,9 @@ var TreeSelect = function (baseProps, ref) {
         if (visible !== popupVisible) {
             setPopupVisible(visible);
             (_a = props.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, visible);
+            if (isMultipleQuickSelectMode && !visible) {
+                cancelSetValue();
+            }
         }
     };
     // 尝试更新 inputValue，并触发 onInputValueChange
@@ -230,6 +236,15 @@ var TreeSelect = function (baseProps, ref) {
             tryUpdatePopupVisible(false);
         }
     }, [setValue, resetInputValue, popupVisible]);
+    var cancelCheck = function () {
+        tryUpdatePopupVisible(false);
+    };
+    var confirmCheck = function () {
+        var _a;
+        confirmSetValue();
+        setPopupVisible(false);
+        (_a = props.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, false);
+    };
     var handleRemoveCheckedItem = function (item, index, e) {
         e.stopPropagation();
         if (item.disabled) {
@@ -237,21 +252,31 @@ var TreeSelect = function (baseProps, ref) {
         }
         var itemValue = (0, is_1.isObject)(item.value) ? item.value.value : item.value;
         if (!props.treeCheckable || props.treeCheckStrictly || !key2nodeProps[itemValue]) {
-            var newValue = value.filter(function (_, i) { return i !== index; });
+            var newValue = realValue.filter(function (_, i) { return i !== index; });
             triggerChange(newValue, {
                 trigger: key2nodeProps[itemValue] || item,
                 checked: false,
                 selected: false,
             });
+            if (isMultipleQuickSelectMode) {
+                setTimeout(function () {
+                    confirmCheck();
+                }, 0);
+            }
             return;
         }
-        var result = (0, util_1.getAllCheckedKeysByCheck)(itemValue, false, (0, utils_1.normalizeValueToArray)(value), key2nodeProps, indeterminateKeys.current);
+        var result = (0, util_1.getAllCheckedKeysByCheck)(itemValue, false, (0, utils_1.normalizeValueToArray)(realValue), key2nodeProps, indeterminateKeys.current);
         indeterminateKeys.current = result.indeterminateKeys;
-        triggerChange((0, useStateValue_1.parseValue)(result.checkedKeys, key2nodeProps, value), {
+        triggerChange((0, useStateValue_1.parseValue)(result.checkedKeys, key2nodeProps, realValue), {
             trigger: key2nodeProps[itemValue],
             checked: false,
             selected: false,
         });
+        if (isMultipleQuickSelectMode) {
+            setTimeout(function () {
+                confirmCheck();
+            }, 0);
+        }
     };
     (0, react_1.useEffect)(function () {
         inputValue !== undefined && handleSearch(inputValue);
@@ -314,12 +339,35 @@ var TreeSelect = function (baseProps, ref) {
     var renderView = function (eleView) {
         return (react_1.default.createElement(Trigger_1.default, __assign({ autoAlignPopupWidth: false, autoAlignPopupMinWidth: true, ref: triggerRef, classNames: "slideDynamicOrigin", trigger: "click", position: "bl", getPopupContainer: props.getPopupContainer, popupAlign: triggerPopupAlign, unmountOnExit: props.unmountOnExit }, props.triggerProps, { className: (0, classNames_1.default)(prefixCls + "-trigger", props.triggerProps && props.triggerProps.className), popup: function () {
                 var _a;
-                var _b, _c, _d;
+                var _b, _c, _d, _e, _f;
                 var dropdownRender = props.dropdownRender;
-                var dom = (isFilterNode && isEmptyValue(searchKeys)) || isEmptyValue(treeData) ? (props.notFoundContent || renderEmpty('TreeSelect')) : (react_1.default.createElement(tree_list_1.default, __assign({ prefixCls: prefixCls, ref: treeRef }, props, { inputValue: inputValue, filterNode: filterNode, value: value, onChange: triggerChange, multiple: multiple, treeData: treeData })));
-                return (react_1.default.createElement("div", { id: instancePopupID, className: (0, classNames_1.default)(prefixCls + "-popup", (_a = {}, _a[prefixCls + "-rtl-popup"] = rtl, _a)), style: __assign({ maxHeight: ((_b = props.treeProps) === null || _b === void 0 ? void 0 : _b.height) || ((_d = (_c = props.treeProps) === null || _c === void 0 ? void 0 : _c.virtualListProps) === null || _d === void 0 ? void 0 : _d.height)
+                var treeListDom = (react_1.default.createElement(tree_list_1.default, __assign({ prefixCls: prefixCls, ref: treeRef }, props, { inputValue: inputValue, filterNode: filterNode, value: value, onChange: triggerChange, multiple: multiple, treeData: treeData, confirmCheck: confirmCheck })));
+                var dom = (isFilterNode && isEmptyValue(searchKeys)) || isEmptyValue(treeData) ? (props.notFoundContent || renderEmpty('TreeSelect')) : isMultipleQuickSelectMode ? (react_1.default.createElement("div", { style: {
+                        maxHeight: 188,
+                        display: 'flex',
+                        flexDirection: 'column',
+                    } },
+                    react_1.default.createElement("div", { style: { flex: 1, overflowY: 'auto' } }, treeListDom),
+                    react_1.default.createElement("div", { style: {
+                            flex: 'none',
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: 12,
+                            padding: '8px 16px 4px',
+                            borderTop: '1px solid var(--color-fill-3)',
+                        } },
+                        react_1.default.createElement(Button_1.default, { size: "mini", onClick: cancelCheck }, (_b = locale.Select) === null || _b === void 0 ? void 0 : _b.cancelText),
+                        react_1.default.createElement(Button_1.default, { type: "primary", size: "mini", onClick: function () {
+                                confirmCheck();
+                            } }, (_c = locale.Select) === null || _c === void 0 ? void 0 : _c.okText)))) : (treeListDom);
+                var wrapStyle = isMultipleQuickSelectMode
+                    ? {
+                        overflow: 'hidden',
+                    }
+                    : {};
+                return (react_1.default.createElement("div", { id: instancePopupID, className: (0, classNames_1.default)(prefixCls + "-popup", (_a = {}, _a[prefixCls + "-rtl-popup"] = rtl, _a)), style: __assign(__assign({ maxHeight: ((_d = props.treeProps) === null || _d === void 0 ? void 0 : _d.height) || ((_f = (_e = props.treeProps) === null || _e === void 0 ? void 0 : _e.virtualListProps) === null || _f === void 0 ? void 0 : _f.height)
                             ? 'unset'
-                            : '' }, props.dropdownMenuStyle) }, (0, is_1.isFunction)(dropdownRender) ? dropdownRender(dom) : dom));
+                            : '' }, wrapStyle), props.dropdownMenuStyle) }, (0, is_1.isFunction)(dropdownRender) ? dropdownRender(dom) : dom));
             }, disabled: props.disabled, onVisibleChange: function (visible) {
                 tryUpdatePopupVisible(visible);
                 // props.onVisibleChange && props.onVisibleChange(visible);
@@ -340,9 +388,9 @@ var TreeSelect = function (baseProps, ref) {
             return props.triggerElement({ value: valueForCallback });
         })()
         : props.triggerElement;
-    return !(0, is_1.isNullOrUndefined)(customTriggerElement) ? (renderView(customTriggerElement)) : (react_1.default.createElement(select_view_1.default, __assign({ ref: refSelectView, rtl: rtl, ariaControls: instancePopupID }, props, { popupVisible: popupVisible, value: !multiple && (0, is_1.isArray)(value) ? value[0] : value, inputValue: inputValue, 
+    return !(0, is_1.isNullOrUndefined)(customTriggerElement) ? (renderView(customTriggerElement)) : (react_1.default.createElement(select_view_1.default, __assign({ ref: refSelectView, rtl: rtl, ariaControls: instancePopupID }, props, { popupVisible: popupVisible, value: !multiple && (0, is_1.isArray)(realValue) ? realValue[0] : realValue, inputValue: inputValue, 
         // other
-        isEmptyValue: isEmptyValue(value), prefixCls: prefixCls, isMultiple: multiple, renderText: renderText, onSort: tryUpdateSelectValue, onRemoveCheckedItem: handleRemoveCheckedItem, onClear: function (e) {
+        isEmptyValue: isEmptyValue(realValue), prefixCls: prefixCls, isMultiple: multiple, renderText: renderText, onSort: tryUpdateSelectValue, onRemoveCheckedItem: handleRemoveCheckedItem, onClear: function (e) {
             var _a;
             e.stopPropagation();
             triggerChange([], {});

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.3.4";
+export declare const version = "1.4.1";

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.3.4';
+exports.version = '1.4.1';

package/package.json

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