@zat-design/sisyphus-react 4.5.8-beta.6 → 4.5.9-beta.1

package/es/ProTreeModal/index.js

@@ -7,7 +7,7 @@ import { ReactSVG } from 'react-svg';
 import classNames from 'classnames';
 import { ProDrawerForm, useProConfig } from "../index";
 import { Trigger, ListView, TreeView, Cascader } from "./components";
-import { getFlatTreeData, filterCheckedNodes, getChildrenKeys, findTreeNodeByKey, getAllKeys, transformMessage, addLevelAndParentId } from "./utils";
+import { getFlatTreeData, filterCheckedNodes, getChildrenKeys, findTreeNodeByKey, transformMessage, addLevelAndParentId } from "./utils";
 import { transformTreeToArray, treeNodeFind } from "../ProTable/components/RcTable/components/DraggableTable/components/DndWrapper/utils/index";
 import searchSVG from "../assets/input-search.svg";
 import locale, { formatMessage } from "../locale";
@@ -15,13 +15,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const LIST = 'LIST';
 const TREE = 'TREE';
 export const CASCADER = 'CASCADER';
+const getSelectableValues = (flatTreeData, fieldNameValue) => flatTreeData.filter(item => item.disabled !== true).map(item => item[fieldNameValue]);
+const isAllSelectableChecked = (selectableValues, checkedValues) => selectableValues.length > 0 && selectableValues.every(selectableValue => checkedValues.includes(selectableValue));
+const getSelectionState = (currentState, checkedValues, fieldNames) => {
+  const selectableValues = getSelectableValues(currentState.flatTreeData, fieldNames.value);
+  return {
+    checkedValues,
+    treeViewData: filterCheckedNodes(currentState.originalTreeData, checkedValues, '', fieldNames),
+    checkAll: isAllSelectableChecked(selectableValues, checkedValues)
+  };
+};
 const ProTreeModal = props => {
   const {
     dics = {}
   } = useProConfig('ProEnum');
   const listRef = useRef(null);
   const {
-    open,
+    open: controlledOpen,
     value,
     onChange,
     dataSource,
@@ -83,20 +93,32 @@ const ProTreeModal = props => {
     console.error('allValue must be input');
     allValue = 'all';
   }
-  const [state, setState] = useSetState({
+  const [{
+    open,
+    checkedValues,
+    treeData,
+    treeViewData,
+    originalTreeData,
+    flatTreeData,
+    searchStr,
+    checkAll,
+    transformedTree
+  }, setState] = useSetState({
     open: false,
     checkedValues: [],
-    beforeClearAllValues: [],
-    // 点击清空全部并点击关闭、此时数据回显示不正确
     treeData: [],
     treeViewData: [],
     originalTreeData: [],
     flatTreeData: [],
     searchStr: '',
     checkAll: false,
-    allKeys: [],
     transformedTree: []
   });
+  const openSnapshotValuesRef = useRef([]);
+  const previousControlledOpenRef = useRef(controlledOpen);
+  const fieldNamesRef = useRef(fieldNames);
+  fieldNamesRef.current = fieldNames;
+  const selectableValues = useMemo(() => getSelectableValues(flatTreeData, fieldNameValue), [flatTreeData, fieldNameValue]);
   const fetchFunction = useRequestFunc(useRequest?.service, {
     manual: true,
     onSuccess: res => {
@@ -115,8 +137,7 @@ const ProTreeModal = props => {
       setState({
         treeData: responseData,
         originalTreeData: responseData,
-        flatTreeData: getFlatTreeData(responseData, fieldNames, modeType),
-        allKeys: getAllKeys(responseData, fieldNames)
+        flatTreeData: getFlatTreeData(responseData, fieldNames, modeType)
       });
     },
     debounceWait: 300,
@@ -129,8 +150,7 @@ const ProTreeModal = props => {
       setState({
         treeData: normalizedDataSource,
         originalTreeData: _cloneDeep(normalizedDataSource),
-        flatTreeData,
-        allKeys: getAllKeys(normalizedDataSource, fieldNames)
+        flatTreeData
       });
     } else if (enumCode) {
       let dictEnum = dics[enumCode] || [];
@@ -147,8 +167,7 @@ const ProTreeModal = props => {
       setState({
         treeData: normalizedDictEnum,
         originalTreeData: _cloneDeep(normalizedDictEnum),
-        flatTreeData: getFlatTreeData(normalizedDictEnum, fieldNames),
-        allKeys: getAllKeys(normalizedDictEnum, fieldNames)
+        flatTreeData: getFlatTreeData(normalizedDictEnum, fieldNames)
       });
     }
   }, [dataSource, enumCode]);
@@ -171,25 +190,33 @@ const ProTreeModal = props => {
     fetchFunction.run(params);
   }, [useRequest?.options]);
   useEffect(() => {
-    setState({
-      open
-    });
-  }, [open]);
+    const wasControlledOpen = previousControlledOpenRef.current === true;
+    if (controlledOpen === true && !wasControlledOpen) {
+      setState(prevState => {
+        openSnapshotValuesRef.current = [...prevState.checkedValues];
+        return {
+          open: true
+        };
+      });
+    } else if (controlledOpen === false && wasControlledOpen) {
+      const checkedValues = [...openSnapshotValuesRef.current];
+      setState(prevState => ({
+        open: false,
+        ...getSelectionState(prevState, checkedValues, fieldNamesRef.current)
+      }));
+    } else {
+      setState({
+        open: controlledOpen
+      });
+    }
+    previousControlledOpenRef.current = controlledOpen;
+  }, [controlledOpen]);
   useEffect(() => {
     if (value) {
-      let checkedValues = [];
-      const {
-        treeData,
-        allKeys,
-        originalTreeData
-      } = state;
-      let treeViewData = [];
+      let nextCheckedValues = [];
+      let nextTreeViewData = [];
       if (allValue && typeof value === 'string' && allValue === value) {
-        if (modeType === LIST) {
-          checkedValues = treeData.map(item => item[fieldNameValue]) || [];
-        } else if (modeType === TREE) {
-          checkedValues = allKeys;
-        }
+        nextCheckedValues = selectableValues;
       } else {
         if (!Array.isArray(value)) {
           console.error('Please pass in the array');
@@ -200,42 +227,43 @@ const ProTreeModal = props => {
           const isObjectArray = value.every(element => typeof element === 'object' && element !== null);
           if (!isObjectArray) {
             console.error('Please enter an array object');
-            checkedValues = [];
+            nextCheckedValues = [];
           }
-          checkedValues = value.map(item => item[fieldNameValue]);
+          nextCheckedValues = value.map(item => item[fieldNameValue]);
         } else {
-          checkedValues = value;
+          nextCheckedValues = value;
         }
       }
-      treeViewData = filterCheckedNodes(originalTreeData, checkedValues, '', fieldNames);
+      nextTreeViewData = filterCheckedNodes(originalTreeData, nextCheckedValues, '', fieldNames);
+      openSnapshotValuesRef.current = [...nextCheckedValues];
       setState({
-        checkedValues,
-        checkAll: checkedValues.length === allKeys.length,
-        treeViewData,
-        beforeClearAllValues: checkedValues
+        checkedValues: nextCheckedValues,
+        checkAll: isAllSelectableChecked(selectableValues, nextCheckedValues),
+        treeViewData: nextTreeViewData
       });
-    } else if (modeType === LIST && state.flatTreeData && state.flatTreeData.length > 0) {
+    } else if (modeType === LIST && flatTreeData && flatTreeData.length > 0) {
       // mode: 'list' 下，如果没有 value prop，自动将 fixed 的项加入到 checkedValues
-      const fixedItems = state.flatTreeData.filter(item => item.fixed === 'right').map(item => item[fieldNameValue]);
-      if (fixedItems.length > 0 && state.checkedValues.length === 0) {
+      const fixedItems = flatTreeData.filter(item => item.fixed === 'right').map(item => item[fieldNameValue]);
+      if (fixedItems.length > 0 && checkedValues.length === 0) {
         // 只有当 checkedValues 为空时才自动添加 fixed 项，避免覆盖已有的选中状态
-        const treeViewData = filterCheckedNodes(state.originalTreeData, fixedItems, '', fieldNames);
+        const nextTreeViewData = filterCheckedNodes(originalTreeData, fixedItems, '', fieldNames);
+        openSnapshotValuesRef.current = [...fixedItems];
         setState({
           checkedValues: fixedItems,
-          checkAll: fixedItems.length === state.allKeys.length,
-          treeViewData,
-          beforeClearAllValues: fixedItems
+          checkAll: isAllSelectableChecked(selectableValues, fixedItems),
+          treeViewData: nextTreeViewData
         });
       }
     }
-  }, [value, state.allKeys, state.open, state.flatTreeData, state.originalTreeData, modeType, fieldNameValue]);
+  }, [value, open, flatTreeData, originalTreeData, modeType, fieldNameValue, selectableValues]);
   useDeepCompareEffect(() => {
-    const transformedTree = addLevelAndParentId(state.treeData, fieldNames);
+    const nextTransformedTree = addLevelAndParentId(treeData, fieldNames);
     setState({
-      transformedTree
+      transformedTree: nextTransformedTree
     });
-  }, [state.treeData]);
+  }, [treeData]);
   const handleClick = () => {
+    openSnapshotValuesRef.current = [...checkedValues];
     setState({
       open: true
     });
@@ -246,46 +274,37 @@ const ProTreeModal = props => {
    * close Drawer and onChange(values)
    */
   const handleFinish = () => {
-    // 全选的时候返回 allValue 标记即可
-    // 3.3.2 版本全选的时候返回所有值的合集 list
-    if (allValue !== undefined && state.checkAll && !draggable) {
-      if (labelInValue) {
-        onChange?.(state.flatTreeData);
-      } else {
-        onChange?.(state.flatTreeData.map(item => item[fieldNameValue]));
-      }
-    } else if (draggable && span) {
+    if (draggable && span) {
       // 开启 draggable 使用拖拽后的顺序
       const checkedList = listRef.current?.onChange();
       onChange(checkedList);
     } else {
-      let values = [];
+      let values = checkedValues;
       if (labelInValue) {
-        state.checkedValues.forEach(val => {
-          const option = state.flatTreeData.find(item => item[fieldNameValue] === val);
+        values = [];
+        checkedValues.forEach(val => {
+          const option = flatTreeData.find(item => item[fieldNameValue] === val);
           option && values.push(option);
         });
-      } else {
-        values = state.checkedValues;
       }
-      if (min) {
-        if (values.length < min) {
-          message.error(formatMessage(locale?.ProTreeModal?.selectMin, {
-            min
-          }));
-          return;
-        }
+      const skipMinCheck = allValue !== undefined && checkAll && !draggable;
+      if (!skipMinCheck && min && values.length < min) {
+        message.error(formatMessage(locale?.ProTreeModal?.selectMin, {
+          min
+        }));
+        return;
       }
       onChange?.(values);
     }
+    openSnapshotValuesRef.current = [...checkedValues];
     // fix: 当有 openChange 时候、点击确定应该由关闭 openChange 控制
-    if (!openChange || open === undefined) {
+    if (!openChange || controlledOpen === undefined) {
       setState({
         open: false
       });
       openChange?.(false);
     }
-    if (openChange && open !== undefined) {
+    if (openChange && controlledOpen !== undefined) {
       openChange?.(true);
     }
   };
@@ -295,19 +314,18 @@ const ProTreeModal = props => {
    */
   const handleClearAll = (immediateSubmit = false) => {
     // 处理 ProTable 场景下 disabled 的不需要被清理
-    const _checkedValues = span ? state.flatTreeData.filter(item => item.disabled)?.map(item => item[fieldNameValue]) : [];
+    const nextCheckedValues = span ? flatTreeData.filter(item => item.disabled)?.map(item => item[fieldNameValue]) : [];
     setState({
-      checkedValues: _checkedValues,
-      beforeClearAllValues: state.checkedValues,
-      // 把清空全部之前的数据记录下
+      checkedValues: nextCheckedValues,
       treeViewData: [],
       checkAll: false
     });
     if (immediateSubmit) {
+      openSnapshotValuesRef.current = [...nextCheckedValues];
       if (labelInValue) {
         onChange?.([]);
       } else {
-        onChange?.(_checkedValues);
+        onChange?.(nextCheckedValues);
       }
     }
   };
@@ -316,11 +334,11 @@ const ProTreeModal = props => {
    * Drawer close
    */
   const handleClose = () => {
-    setState({
+    const restoredCheckedValues = [...openSnapshotValuesRef.current];
+    setState(prevState => ({
       open: false,
-      checkedValues: state.beforeClearAllValues,
-      beforeClearAllValues: []
-    });
+      ...getSelectionState(prevState, restoredCheckedValues, fieldNames)
+    }));
     openChange?.(false);
   };
 
@@ -329,25 +347,25 @@ const ProTreeModal = props => {
    * @param values
    */
   const handleListCheckChange = (e, code) => {
-    let checkedValues = [...state.checkedValues];
+    let nextCheckedValues = [...checkedValues];
     const {
       checked
     } = e.target;
     if (!checked) {
-      checkedValues = checkedValues.filter(value => value !== code);
+      nextCheckedValues = nextCheckedValues.filter(value => value !== code);
     } else if (draggable && span) {
       // 固定在右侧的情况
-      const fixedOption = state.flatTreeData.find(item => item.fixed === 'right') || {};
-      const fixedIdx = checkedValues.findIndex(value => value === fixedOption[fieldNameValue]);
+      const fixedOption = flatTreeData.find(item => item.fixed === 'right') || {};
+      const fixedIdx = nextCheckedValues.findIndex(value => value === fixedOption[fieldNameValue]);
       if (fixedIdx >= 0) {
-        checkedValues.splice(fixedIdx, 0, code);
+        nextCheckedValues.splice(fixedIdx, 0, code);
       } else {
-        checkedValues.push(code);
+        nextCheckedValues.push(code);
       }
     } else {
-      checkedValues.push(code);
+      nextCheckedValues.push(code);
     }
-    if (max && checkedValues.length > max) {
+    if (max && nextCheckedValues.length > max) {
       message.error(maxMessage ? transformMessage({
         max
       }, maxMessage) : formatMessage(locale?.ProTreeModal?.selectMax, {
@@ -356,8 +374,8 @@ const ProTreeModal = props => {
       return;
     }
     setState({
-      checkedValues,
-      checkAll: checkedValues.length === state.flatTreeData.length
+      checkedValues: nextCheckedValues,
+      checkAll: isAllSelectableChecked(selectableValues, nextCheckedValues)
     });
   };
   const handleDragEndChange = checkedValues => {
@@ -366,89 +384,86 @@ const ProTreeModal = props => {
     });
   };
   const onCheck = (checkedKeys, info) => {
-    let checkedValues = [...state.checkedValues];
-    const {
-      originalTreeData
-    } = state;
+    let nextCheckedValues = [...checkedValues];
 
     // 如果有检索则自管理
-    if (state.searchStr) {
+    if (searchStr) {
       const {
         node
       } = info;
       // 从完整树中找到当前节点
-      const activeNode = treeNodeFind(state.transformedTree, t => t[fieldNameValue] === node[fieldNameValue], {
+      const activeNode = treeNodeFind(transformedTree, t => t[fieldNameValue] === node[fieldNameValue], {
         childrenKey: fieldNames.children
       });
       const allChildren = transformTreeToArray([activeNode], {
         childrenKey: fieldNames.children
       })?.map(item => item[fieldNameValue]);
       // 子项合并勾选
-      checkedValues = checkedValues.concat(allChildren);
+      nextCheckedValues = nextCheckedValues.concat(allChildren);
       // 从完整树中拿到父节点 只要存在父节点，那么就判断当前children是否全被勾选 若全被勾选就合并当前key到勾选队列
-      const _recourse = findNode => {
+      const appendCheckedParentKeys = findNode => {
         if (findNode.parentId) {
-          const parentNode = treeNodeFind(state.transformedTree, t => t[fieldNameValue] === findNode.parentId, {
+          const parentNode = treeNodeFind(transformedTree, t => t[fieldNameValue] === findNode.parentId, {
             childrenKey: fieldNames.children
           });
           const parentChildrenKeys = transformTreeToArray([parentNode], {
             childrenKey: fieldNames.children
           })?.map(item => item[fieldNameValue]);
           const parentChildrenAllChecked = parentChildrenKeys.every(key => {
-            return checkedValues.includes(key);
+            return nextCheckedValues.includes(key);
           });
           if (parentChildrenAllChecked) {
             // 把当前父节点追加进来
-            checkedValues = checkedValues.concat([parentNode[fieldNameValue]]);
+            nextCheckedValues = nextCheckedValues.concat([parentNode[fieldNameValue]]);
             // 继续向上查找
             if (parentNode.parentId) {
-              _recourse(parentNode);
+              appendCheckedParentKeys(parentNode);
             }
           }
         }
       };
-      _recourse(activeNode);
+      appendCheckedParentKeys(activeNode);
     }
-    const _checkStrictly = state.searchStr ? true : checkStrictly;
+    const effectiveCheckStrictly = searchStr ? true : checkStrictly;
 
     // 此时应该取消掉自身并包含它所有的子集
-    if (!info.checked && !_checkStrictly) {
+    if (!info.checked && !effectiveCheckStrictly) {
       // 1. 取消自身
       // 2. 把所有的子节点也要取消
-      const childrenkeys = [];
-      getChildrenKeys(info.node, childrenkeys, fieldNames, 'treeCheck');
-      checkedValues = checkedValues.filter(key => !childrenkeys.includes(key));
+      const childrenKeys = [];
+      getChildrenKeys(info.node, childrenKeys, fieldNames, 'treeCheck');
+      nextCheckedValues = nextCheckedValues.filter(key => !childrenKeys.includes(key));
 
       // 3. 取消父节点
       const parentNodes = findTreeNodeByKey(originalTreeData, info.node.key, fieldNames);
       const parentKeys = parentNodes.reduce((prev, curr) => prev.concat(curr[fieldNameValue]), []);
-      checkedValues = checkedValues.filter(key => !parentKeys.includes(key));
+      nextCheckedValues = nextCheckedValues.filter(key => !parentKeys.includes(key));
     } else {
-      // _checkStrictly 模式下取 checkedKeys.checked 或者自身的 key
-      if (_checkStrictly) {
+      // checkStrictly 模式下取 checkedKeys.checked 或者自身的 key
+      if (effectiveCheckStrictly) {
         if (!info.checked) {
-          checkedValues = checkedValues.filter(key => key !== info.node.key);
+          nextCheckedValues = nextCheckedValues.filter(key => key !== info.node.key);
         }
         checkedKeys = checkedKeys.checked || [];
       }
       checkedKeys.forEach(key => {
-        const exist = checkedValues.includes(key);
+        const exist = nextCheckedValues.includes(key);
         if (info.checked && !exist) {
-          checkedValues.push(key);
+          nextCheckedValues.push(key);
         }
       });
     }
 
     // 根据选中的筛选出 viewTreeData
-    let treeViewData = [];
+    let nextTreeViewData = [];
     if (!checkStrictly) {
-      treeViewData = filterCheckedNodes(originalTreeData, checkedValues, '', fieldNames);
+      nextTreeViewData = filterCheckedNodes(originalTreeData, nextCheckedValues, '', fieldNames);
     } else {
-      treeViewData = state.flatTreeData.filter(item => {
-        return checkedValues.includes(item[fieldNameValue]);
+      nextTreeViewData = flatTreeData.filter(item => {
+        return nextCheckedValues.includes(item[fieldNameValue]);
       });
     }
-    if (max && checkedValues.length > max) {
+    if (max && nextCheckedValues.length > max) {
       message.error(maxMessage ? transformMessage({
         max
       }, maxMessage) : formatMessage(locale?.ProTreeModal?.selectMax, {
@@ -457,9 +472,9 @@ const ProTreeModal = props => {
       return;
     }
     setState({
-      checkedValues,
-      treeViewData,
-      checkAll: state.allKeys.length === checkedValues.length
+      checkedValues: nextCheckedValues,
+      treeViewData: nextTreeViewData,
+      checkAll: isAllSelectableChecked(selectableValues, nextCheckedValues)
     });
   };
 
@@ -469,7 +484,7 @@ const ProTreeModal = props => {
    */
   const handleFilterClose = fileNameValue => {
     setState({
-      checkedValues: state.checkedValues.filter(value => value !== fileNameValue),
+      checkedValues: checkedValues.filter(value => value !== fileNameValue),
       checkAll: false
     });
   };
@@ -480,36 +495,33 @@ const ProTreeModal = props => {
    * @param node
    */
   const treeFilterClose = (fileNamekey, node) => {
-    let checkedValues = [...state.checkedValues];
-    let treeViewData = [];
-    const {
-      originalTreeData
-    } = state;
+    let nextCheckedValues = [...checkedValues];
+    let nextTreeViewData = [];
     if (checkStrictly) {
-      checkedValues = checkedValues.filter(key => key !== fileNamekey);
+      nextCheckedValues = nextCheckedValues.filter(key => key !== fileNamekey);
       // handleFilterClose
-      treeViewData = state.flatTreeData.filter(item => {
-        return checkedValues.includes(item[fieldNameValue]);
+      nextTreeViewData = flatTreeData.filter(item => {
+        return nextCheckedValues.includes(item[fieldNameValue]);
       });
     } else {
       // 1. 取消自身
-      checkedValues = checkedValues.filter(key => key !== fileNamekey);
+      nextCheckedValues = nextCheckedValues.filter(key => key !== fileNamekey);
       // 2. 把所有的子节点也要取消
-      const childrenkeys = [];
-      getChildrenKeys(node, childrenkeys, fieldNames, 'treeClose');
-      checkedValues = checkedValues.filter(key => !childrenkeys.includes(key));
+      const childrenKeys = [];
+      getChildrenKeys(node, childrenKeys, fieldNames, 'treeClose');
+      nextCheckedValues = nextCheckedValues.filter(key => !childrenKeys.includes(key));
 
       // 3. 取消父节点
       const parentNodes = findTreeNodeByKey(originalTreeData, fileNamekey, fieldNames);
       const parentKeys = parentNodes.reduce((prev, curr) => prev.concat(curr[fieldNames.value]), []);
-      checkedValues = checkedValues.filter(key => !parentKeys.includes(key));
+      nextCheckedValues = nextCheckedValues.filter(key => !parentKeys.includes(key));
 
       // 根据选中的筛选出 viewTreeData
-      treeViewData = filterCheckedNodes(originalTreeData, checkedValues, '', fieldNames);
+      nextTreeViewData = filterCheckedNodes(originalTreeData, nextCheckedValues, '', fieldNames);
     }
     setState({
-      checkedValues,
-      treeViewData,
+      checkedValues: nextCheckedValues,
+      treeViewData: nextTreeViewData,
       checkAll: false
     });
   };
@@ -518,12 +530,12 @@ const ProTreeModal = props => {
   } = useDebounceFn(str => {
     if (modeType === LIST || modeType === CASCADER) {
       const isCASCADER = modeType === CASCADER;
-      const data = state.flatTreeData.filter(item => {
+      const filteredData = flatTreeData.filter(item => {
         const title = isCASCADER ? item?.title : item[fieldNameLabel];
         return title.includes(str);
       });
       setState({
-        treeData: !str ? state.originalTreeData : data
+        treeData: !str ? originalTreeData : filteredData
       });
     }
   }, {
@@ -571,9 +583,9 @@ const ProTreeModal = props => {
       });
     }
     return /*#__PURE__*/_jsx(Trigger, {
-      checkedValues: state.checkedValues,
+      checkedValues: checkedValues,
       value: value,
-      checkAll: state.checkAll,
+      checkAll: checkAll,
       triggerStyle: style,
       disabled: disabled,
       isView: isView,
@@ -585,7 +597,7 @@ const ProTreeModal = props => {
       appointChange: appointChange,
       appointProps: appointProps
     });
-  }, [state.checkedValues, state.checkAll, style, disabled, isView, value]);
+  }, [checkedValues, checkAll, style, disabled, isView, value]);
 
   /**
    * 全选操作
@@ -594,26 +606,26 @@ const ProTreeModal = props => {
     const {
       checked
     } = e.target;
-    let checkedValues = [];
-    let treeViewData = [];
-    if (modeType === LIST || modeType === CASCADER) {
-      if (checked) {
-        checkedValues = state.flatTreeData.map(item => item[fieldNameValue]);
-      } else if (!checked && span) {
+    let nextCheckedValues = [];
+    let nextTreeViewData = [];
+    if (checked) {
+      nextCheckedValues = flatTreeData.filter(item => item.disabled !== true || checkedValues.includes(item[fieldNameValue])).map(item => item[fieldNameValue]);
+    } else if (modeType === LIST || modeType === CASCADER) {
+      if (span) {
         // ProTable 场景下 disabled 不取消掉
-        checkedValues = state.flatTreeData.filter(item => item.disabled).map(item => item[fieldNameValue]);
-      } else if (!checked) {
-        checkedValues = [];
+        nextCheckedValues = flatTreeData.filter(item => item.disabled).map(item => item[fieldNameValue]);
+      } else {
+        nextCheckedValues = [];
       }
-    } else if (modeType === TREE) {
-      checkedValues = checked ? state.allKeys : [];
+    }
+    if (modeType === TREE) {
       if (checkStrictly) {
-        treeViewData = [...state.flatTreeData];
+        nextTreeViewData = flatTreeData.filter(item => nextCheckedValues.includes(item[fieldNameValue]));
       } else {
-        treeViewData = filterCheckedNodes(state.originalTreeData, checkedValues, '', fieldNames);
+        nextTreeViewData = filterCheckedNodes(originalTreeData, nextCheckedValues, '', fieldNames);
       }
     }
-    if (max && checkedValues.length > max) {
+    if (max && nextCheckedValues.length > max) {
       message.error(maxMessage ? transformMessage({
         max
       }, maxMessage) : formatMessage(locale?.ProTreeModal?.selectMax, {
@@ -622,9 +634,9 @@ const ProTreeModal = props => {
       return;
     }
     setState({
-      checkedValues,
-      checkAll: checked,
-      treeViewData
+      checkedValues: nextCheckedValues,
+      checkAll: isAllSelectableChecked(selectableValues, nextCheckedValues),
+      treeViewData: nextTreeViewData
     });
   };
 
@@ -633,7 +645,7 @@ const ProTreeModal = props => {
    * @returns
    */
   const renderContainer = () => {
-    if (state.treeData.length === 0 && state.searchStr) {
+    if (treeData.length === 0 && searchStr) {
       return /*#__PURE__*/_jsx("div", {
         className: "pro-tree-modal-no-checks",
         children: locale?.ProTreeModal?.noFinal
@@ -642,11 +654,11 @@ const ProTreeModal = props => {
     switch (modeType) {
       case LIST:
         return /*#__PURE__*/_jsx(ListView, {
-          treeData: state.treeData,
+          treeData: treeData,
           optionRender: optionRender,
-          checkedValues: state.checkedValues,
+          checkedValues: checkedValues,
           handleOnChange: handleListCheckChange,
-          searchStr: state.searchStr,
+          searchStr: searchStr,
           showCodeName: showCodeName,
           disabled: disabled || isView,
           fieldNames: fieldNames,
@@ -654,13 +666,13 @@ const ProTreeModal = props => {
         });
       case TREE:
         return /*#__PURE__*/_jsx(TreeView, {
-          treeData: state.transformedTree,
-          originalTreeData: state.originalTreeData,
-          flatTreeData: state.flatTreeData,
-          checkedValues: state.checkedValues,
+          treeData: transformedTree,
+          originalTreeData: originalTreeData,
+          flatTreeData: flatTreeData,
+          checkedValues: checkedValues,
           onCheck: onCheck,
           optionRender: optionRender,
-          searchStr: state.searchStr,
+          searchStr: searchStr,
           showCodeName: showCodeName,
           disabled: disabled || isView,
           checkStrictly: checkStrictly,
@@ -668,24 +680,24 @@ const ProTreeModal = props => {
           fieldNames: fieldNames
         });
       case CASCADER:
-        if (state.searchStr && state.treeData.length) {
+        if (searchStr && treeData.length) {
           return /*#__PURE__*/_jsx(ListView, {
-            treeData: state.treeData,
+            treeData: treeData,
             modeType: CASCADER,
             optionRender: optionRender,
-            checkedValues: state.checkedValues,
+            checkedValues: checkedValues,
             handleOnChange: handleListCheckChange,
-            searchStr: state.searchStr,
+            searchStr: searchStr,
             showCodeName: showCodeName,
             disabled: disabled || isView,
             fieldNames: fieldNames
           });
         }
         return /*#__PURE__*/_jsx(Cascader, {
-          dataSource: state.treeData,
+          dataSource: treeData,
           fieldNames: fieldNames,
-          checkedValues: state.checkedValues,
-          searchStr: state.searchStr,
+          checkedValues: checkedValues,
+          searchStr: searchStr,
           showCodeName: showCodeName,
           handleOnChange: handleListCheckChange,
           optionRender: optionRender
@@ -696,21 +708,21 @@ const ProTreeModal = props => {
   };
   const listTreeData = useMemo(() => {
     const checkListOptions = [];
-    state.checkedValues.forEach(key => {
-      const option = state.flatTreeData.find(item => item[fieldNameValue] === key);
+    checkedValues.forEach(key => {
+      const option = flatTreeData.find(item => item[fieldNameValue] === key);
       if (option) {
         checkListOptions.push(option);
       }
     });
     return checkListOptions;
-  }, [state.checkedValues, state.flatTreeData]);
+  }, [checkedValues, flatTreeData]);
 
   /**
    * 勾选后的右侧展示
    * @returns
    */
   const renderView = () => {
-    if (state.checkedValues.length === 0) {
+    if (checkedValues.length === 0) {
       return /*#__PURE__*/_jsx("div", {
         className: "pro-tree-modal-no-checks",
         children: locale?.ProTreeModal?.noCheck
@@ -726,7 +738,7 @@ const ProTreeModal = props => {
           fieldNames: fieldNames,
           disabled: disabled || isView,
           draggable: draggable,
-          flatTreeData: state.flatTreeData,
+          flatTreeData: flatTreeData,
           span: span,
           ref: listRef,
           optionRender: optionRender,
@@ -738,7 +750,7 @@ const ProTreeModal = props => {
           mode: "view",
           checkStrictly: checkStrictly,
           showCodeName: showCodeName,
-          treeData: checkStrictly ? listTreeData : state.treeViewData,
+          treeData: checkStrictly ? listTreeData : treeViewData,
           tags: tags,
           fieldNames: fieldNames,
           disabled: disabled || isView,
@@ -757,16 +769,16 @@ const ProTreeModal = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       className: "pro-tree-modal",
-      children: [open === undefined && TriggerComponent, /*#__PURE__*/_jsx(ProDrawerForm, {
+      children: [controlledOpen === undefined && TriggerComponent, /*#__PURE__*/_jsx(ProDrawerForm, {
         onOk: handleFinish,
         onCancel: handleClose,
         okDisabled: disabled,
-        open: state.open,
+        open: open,
         title: title,
         mode: "Modal",
         className: "pro-tree-modal-container",
         extraLeft: allValue !== undefined && !isView ? /*#__PURE__*/_jsx(Checkbox, {
-          checked: state.checkAll,
+          checked: checkAll,
           disabled: disabled,
           onChange: handleAllCheck,
           children: locale?.ProTreeModal?.checkAll
@@ -778,7 +790,7 @@ const ProTreeModal = props => {
             children: [/*#__PURE__*/_jsx(Input, {
               disabled: disabled,
               allowClear: true,
-              value: state.searchStr,
+              value: searchStr,
               placeholder: placeholder || locale?.ProTreeModal?.input,
               className: "pro-tree-modal-search",
               onChange: e => handleSetSearchStr(e.target.value),
@@ -795,7 +807,7 @@ const ProTreeModal = props => {
             children: [/*#__PURE__*/_jsxs("div", {
               className: "pro-tree-modal-box-header",
               children: [/*#__PURE__*/_jsxs("span", {
-                children: [locale?.ProTreeModal?.check, " (", state.checkedValues.length, "/", max || state.flatTreeData.length, ")"]
+                children: [locale?.ProTreeModal?.check, " (", checkedValues.length, "/", max || flatTreeData.length, ")"]
               }), !isView ? /*#__PURE__*/_jsx(Button, {
                 disabled: disabled,
                 type: "link",