@apdesign/web-react 1.4.0 → 1.4.2

package/es/Button/index.d.ts

@@ -2,12 +2,12 @@ import React from 'react';
 import Group from './group';
 import { ButtonProps } from './interface';
 declare const ButtonComponent: React.ForwardRefExoticComponent<Partial<{
-    htmlType?: "button" | "reset" | "submit";
-} & import("./interface").BaseButtonProps & Omit<React.ButtonHTMLAttributes<any>, "className" | "onClick" | "type"> & {
+    htmlType?: "button" | "submit" | "reset";
+} & import("./interface").BaseButtonProps & Omit<React.ButtonHTMLAttributes<any>, "className" | "type" | "onClick"> & {
     href: string;
     target?: string;
     anchorProps?: React.HTMLProps<HTMLAnchorElement>;
-} & Omit<React.AnchorHTMLAttributes<any>, "className" | "onClick" | "type">> & React.RefAttributes<unknown>> & {
+} & Omit<React.AnchorHTMLAttributes<any>, "className" | "type" | "onClick">> & React.RefAttributes<unknown>> & {
     __BYTE_BUTTON: boolean;
     Group: typeof Group;
 };

package/es/Modal/modal.js

@@ -212,12 +212,10 @@ function Modal(baseProps, ref) {
             (closeIcon !== undefined ? (React.createElement("span", { onClick: onCancel, className: prefixCls + "-close-icon" }, closeIcon)) : (React.createElement(IconHover, { tabIndex: -1, onClick: onCancel, className: prefixCls + "-close-icon", role: "button", "aria-label": "Close" },
                 React.createElement(IconClose, null))))));
     var ariaProps = title ? { 'aria-labelledby': "arco-dialog-" + dialogIndex.current } : {};
-    // 将绑定到弹窗的尺寸相关样式移到上层div
-    var _h = style || {}, width = _h.width, height = _h.height, restStyle = __rest(_h, ["width", "height"]);
     var modalDom = (React.createElement("div", __assign({ role: "dialog", "aria-modal": "true" }, ariaProps, { className: cs(prefixCls, (_a = {},
             _a[prefixCls + "-simple"] = simple,
             _a[prefixCls + "-rtl"] = rtl,
-            _a), className), style: __assign(__assign({ display: draggable ? 'block' : null }, restStyle), { width: draggable ? '100%' : width, height: draggable ? '100%' : height }), ref: modalRef }), innerFocusLock ? (React.createElement(FocusLock, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
+            _a), className), style: style, ref: modalRef }), innerFocusLock ? (React.createElement(FocusLock, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
             tabIndex: -1,
             onKeyDown: onEscExit,
         } }, element)) : (React.createElement(React.Fragment, null, element))));
@@ -230,8 +228,7 @@ function Modal(baseProps, ref) {
         },
     });
     // 包装在Draggable中的modal
-    var wrappedModalDom = draggable && title ? (React.createElement(Draggable, __assign({ bounds: "parent", handle: "." + prefixCls + "-header" }, draggableProps),
-        React.createElement("div", { style: { top: 0, verticalAlign: 'middle', display: 'inline-block', width: width, height: height } }, modalWithMouseEventsDom))) : (modalWithMouseEventsDom);
+    var wrappedModalDom = draggable && title ? (React.createElement(Draggable, __assign({ bounds: "parent", handle: "." + prefixCls + "-header" }, draggableProps), modalWithMouseEventsDom)) : (modalWithMouseEventsDom);
     var setTransformOrigin = function (e) {
         if (haveOriginTransformOrigin.current)
             return;

package/es/Select/select.js

@@ -52,7 +52,7 @@ import Trigger from '../Trigger';
 import OptGroup from './opt-group';
 import Option from './option';
 import ResizeObserver from '../_util/resizeObserver';
-import { isArray, isFunction, isNullOrUndefined, isObject } from '../_util/is';
+import { isArray, isFunction, isObject } from '../_util/is';
 import getHotkeyHandler from '../_util/getHotkeyHandler';
 import warning from '../_util/warning';
 import SelectView from '../_class/select-view';
@@ -217,18 +217,14 @@ function Select(baseProps, ref) {
     }, [isMultipleMode, value]);
     useEffect(function () {
         if (isMultipleQuickSelectMode) {
-            // 判断 props.value 之前有值现在被手动设置为 undefined 或者 []
-            var hadValueBefore = !isNullOrUndefined(prevValueRef.current) &&
-                !(Array.isArray(prevValueRef.current) && prevValueRef.current.length === 0);
-            var isEmptyNow = isNullOrUndefined(props.value) || (Array.isArray(props.value) && props.value.length === 0);
-            if (hadValueBefore && isEmptyNow) {
+            if (props.value !== prevValueRef.current) {
                 setValue(getValidValue(props.value, isMultipleMode, labelInValue));
                 setProxyValue(getValidValue(props.value, isMultipleMode, labelInValue));
             }
             // 更新 ref 以保存当前值用于下次比较
             prevValueRef.current = props.value;
         }
-    }, [props.value, isMultipleQuickSelectMode]);
+    }, [props.value, isMultipleQuickSelectMode, labelInValue]);
     // 选项下拉框显示/隐藏时的一些自动行为
     useEffect(function () {
         if (popupVisible) {

package/es/TreeSelect/hook/useStateValue.js

@@ -166,7 +166,9 @@ var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
     }, [props.onChange, props.labelInValue, props.multiple, props.treeCheckable, props.value]);
     var confirmSetValue = function () {
         var onChange = props.onChange, labelInValue = props.labelInValue;
-        setValue(__spreadArray([], __read(proxyValueCopy.current), false));
+        if (!('value' in props)) {
+            setValue(__spreadArray([], __read(proxyValueCopy.current), false));
+        }
         var tmp = proxyValueCopy.current.map(function (x) {
             return labelInValue ? { label: x.label, value: x.value } : x.value;
         });

package/es/TreeSelect/tree-list.js

@@ -144,10 +144,42 @@ function TreeList(props, ref) {
                         clipPath: 'polygon(12px 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
                         whiteSpace: 'nowrap',
                     }, onClick: function () {
-                        handleCheck([nodeProps._key], {
+                        // 为了兼容严格勾选模式，这边改成先清空勾选，再由树组件内部触发勾选，才能准确获取子节点父节点勾选数据
+                        // 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 },
+                            node: { props: nodeProps }, // 不完整
                         });
                         confirmCheck();
                     } }, (_a = locale.Select) === null || _a === void 0 ? void 0 : _a.filterThisItemOnly), propsRenderExtra === null || propsRenderExtra === void 0 ? void 0 :

package/es/TreeSelect/tree-select.js

@@ -216,8 +216,10 @@ var TreeSelect = function (baseProps, ref) {
         tryUpdatePopupVisible(false);
     };
     var confirmCheck = function () {
+        var _a;
         confirmSetValue();
-        tryUpdatePopupVisible(false);
+        setPopupVisible(false);
+        (_a = props.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, false);
     };
     var handleRemoveCheckedItem = function (item, index, e) {
         e.stopPropagation();
@@ -233,9 +235,7 @@ var TreeSelect = function (baseProps, ref) {
                 selected: false,
             });
             if (isMultipleQuickSelectMode) {
-                setTimeout(function () {
-                    confirmCheck();
-                }, 0);
+                confirmCheck();
             }
             return;
         }
@@ -247,9 +247,7 @@ var TreeSelect = function (baseProps, ref) {
             selected: false,
         });
         if (isMultipleQuickSelectMode) {
-            setTimeout(function () {
-                confirmCheck();
-            }, 0);
+            confirmCheck();
         }
     };
     useEffect(function () {
@@ -369,6 +367,9 @@ var TreeSelect = function (baseProps, ref) {
             e.stopPropagation();
             triggerChange([], {});
             (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props, !!popupVisible);
+            if (isMultipleQuickSelectMode) {
+                confirmCheck();
+            }
         }, onKeyDown: function (e) {
             var _a;
             e.stopPropagation();

package/es/Typography/base.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TypographyParagraphProps, TypographyTitleProps } from './interface';
 declare const _default: React.ForwardRefExoticComponent<TypographyParagraphProps & TypographyTitleProps & import("./interface").CommonProps & {
-    componentType: "Paragraph" | "Title" | "Text";
+    componentType: "Title" | "Paragraph" | "Text";
 } & React.RefAttributes<unknown>>;
 export default _default;

package/es/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.4.0";
+export declare const version = "1.4.2";

package/es/index.js

@@ -69,4 +69,4 @@ export { default as Upload } from './Upload';
 export { default as Mentions } from './Mentions';
 export { default as Watermark } from './Watermark';
 export { default as Image } from './Image';
-export var version = '1.4.0';
+export var version = '1.4.2';

package/lib/Modal/modal.js

@@ -236,12 +236,10 @@ function Modal(baseProps, ref) {
             (closeIcon !== undefined ? (react_1.default.createElement("span", { onClick: onCancel, className: prefixCls + "-close-icon" }, closeIcon)) : (react_1.default.createElement(icon_hover_1.default, { tabIndex: -1, onClick: onCancel, className: prefixCls + "-close-icon", role: "button", "aria-label": "Close" },
                 react_1.default.createElement(IconClose_1.default, null))))));
     var ariaProps = title ? { 'aria-labelledby': "arco-dialog-" + dialogIndex.current } : {};
-    // 将绑定到弹窗的尺寸相关样式移到上层div
-    var _h = style || {}, width = _h.width, height = _h.height, restStyle = __rest(_h, ["width", "height"]);
     var modalDom = (react_1.default.createElement("div", __assign({ role: "dialog", "aria-modal": "true" }, ariaProps, { className: (0, classNames_1.default)(prefixCls, (_a = {},
             _a[prefixCls + "-simple"] = simple,
             _a[prefixCls + "-rtl"] = rtl,
-            _a), className), style: __assign(__assign({ display: draggable ? 'block' : null }, restStyle), { width: draggable ? '100%' : width, height: draggable ? '100%' : height }), ref: modalRef }), innerFocusLock ? (react_1.default.createElement(react_focus_lock_1.default, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
+            _a), className), style: style, ref: modalRef }), innerFocusLock ? (react_1.default.createElement(react_focus_lock_1.default, { crossFrame: false, disabled: !visible, autoFocus: innerAutoFocus, lockProps: {
             tabIndex: -1,
             onKeyDown: onEscExit,
         } }, element)) : (react_1.default.createElement(react_1.default.Fragment, null, element))));
@@ -254,8 +252,7 @@ function Modal(baseProps, ref) {
         },
     });
     // 包装在Draggable中的modal
-    var wrappedModalDom = draggable && title ? (react_1.default.createElement(react_draggable_1.default, __assign({ bounds: "parent", handle: "." + prefixCls + "-header" }, draggableProps),
-        react_1.default.createElement("div", { style: { top: 0, verticalAlign: 'middle', display: 'inline-block', width: width, height: height } }, modalWithMouseEventsDom))) : (modalWithMouseEventsDom);
+    var wrappedModalDom = draggable && title ? (react_1.default.createElement(react_draggable_1.default, __assign({ bounds: "parent", handle: "." + prefixCls + "-header" }, draggableProps), modalWithMouseEventsDom)) : (modalWithMouseEventsDom);
     var setTransformOrigin = function (e) {
         if (haveOriginTransformOrigin.current)
             return;

package/lib/Select/select.js

@@ -241,18 +241,14 @@ function Select(baseProps, ref) {
     }, [isMultipleMode, value]);
     (0, react_1.useEffect)(function () {
         if (isMultipleQuickSelectMode) {
-            // 判断 props.value 之前有值现在被手动设置为 undefined 或者 []
-            var hadValueBefore = !(0, is_1.isNullOrUndefined)(prevValueRef.current) &&
-                !(Array.isArray(prevValueRef.current) && prevValueRef.current.length === 0);
-            var isEmptyNow = (0, is_1.isNullOrUndefined)(props.value) || (Array.isArray(props.value) && props.value.length === 0);
-            if (hadValueBefore && isEmptyNow) {
+            if (props.value !== prevValueRef.current) {
                 setValue((0, utils_1.getValidValue)(props.value, isMultipleMode, labelInValue));
                 setProxyValue((0, utils_1.getValidValue)(props.value, isMultipleMode, labelInValue));
             }
             // 更新 ref 以保存当前值用于下次比较
             prevValueRef.current = props.value;
         }
-    }, [props.value, isMultipleQuickSelectMode]);
+    }, [props.value, isMultipleQuickSelectMode, labelInValue]);
     // 选项下拉框显示/隐藏时的一些自动行为
     (0, react_1.useEffect)(function () {
         if (popupVisible) {

package/lib/TreeSelect/hook/useStateValue.js

@@ -173,7 +173,9 @@ var useStateValue = function (props, key2nodeProps, indeterminateKeys) {
     }, [props.onChange, props.labelInValue, props.multiple, props.treeCheckable, props.value]);
     var confirmSetValue = function () {
         var onChange = props.onChange, labelInValue = props.labelInValue;
-        setValue(__spreadArray([], __read(proxyValueCopy.current), false));
+        if (!('value' in props)) {
+            setValue(__spreadArray([], __read(proxyValueCopy.current), false));
+        }
         var tmp = proxyValueCopy.current.map(function (x) {
             return labelInValue ? { label: x.label, value: x.value } : x.value;
         });

package/lib/TreeSelect/tree-list.js

@@ -168,10 +168,42 @@ function TreeList(props, ref) {
                         clipPath: 'polygon(12px 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%)',
                         whiteSpace: 'nowrap',
                     }, onClick: function () {
-                        handleCheck([nodeProps._key], {
+                        // 为了兼容严格勾选模式，这边改成先清空勾选，再由树组件内部触发勾选，才能准确获取子节点父节点勾选数据
+                        // 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 },
+                            node: { props: nodeProps }, // 不完整
                         });
                         confirmCheck();
                     } }, (_a = locale.Select) === null || _a === void 0 ? void 0 : _a.filterThisItemOnly), propsRenderExtra === null || propsRenderExtra === void 0 ? void 0 :

package/lib/TreeSelect/tree-select.js

@@ -240,8 +240,10 @@ var TreeSelect = function (baseProps, ref) {
         tryUpdatePopupVisible(false);
     };
     var confirmCheck = function () {
+        var _a;
         confirmSetValue();
-        tryUpdatePopupVisible(false);
+        setPopupVisible(false);
+        (_a = props.onVisibleChange) === null || _a === void 0 ? void 0 : _a.call(props, false);
     };
     var handleRemoveCheckedItem = function (item, index, e) {
         e.stopPropagation();
@@ -257,9 +259,7 @@ var TreeSelect = function (baseProps, ref) {
                 selected: false,
             });
             if (isMultipleQuickSelectMode) {
-                setTimeout(function () {
-                    confirmCheck();
-                }, 0);
+                confirmCheck();
             }
             return;
         }
@@ -271,9 +271,7 @@ var TreeSelect = function (baseProps, ref) {
             selected: false,
         });
         if (isMultipleQuickSelectMode) {
-            setTimeout(function () {
-                confirmCheck();
-            }, 0);
+            confirmCheck();
         }
     };
     (0, react_1.useEffect)(function () {
@@ -393,6 +391,9 @@ var TreeSelect = function (baseProps, ref) {
             e.stopPropagation();
             triggerChange([], {});
             (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props, !!popupVisible);
+            if (isMultipleQuickSelectMode) {
+                confirmCheck();
+            }
         }, onKeyDown: function (e) {
             var _a;
             e.stopPropagation();

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

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.4.0';
+exports.version = '1.4.2';

package/package.json

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