refactor(tree): tree 组件 vue2,vue3 统一业务代码 (#2820)

* docs(tree): 添加分支维护备忘 * docs(tree): 完善分支维护说明 * refactor(tree): 改进代码与 vue3 api 的适配能力 * refactor(tree): 修正 treeItem 组件与 vue3 代码适配的问题 * refactor(tree): tree 类型文件更名为 tree-types.ts * refactor(tree): tree 组件使用 useVModel 改进受控逻辑 * fix(tree): tree 组件，修正受控形态下，赋值结果为空时依然更新了选中状态的问题 * test(tree): tree 组件添加测试: actived 受控处理可赋值空值 * test(tree): tree 组件还原 state 示例 * refactor(tree): tree 组件适配 useVModel 方法，完善 vue3 适配方式 * refactor(tree): tree 组件，改进类型的 vue3 适配 * refactor(tree): tree 组件解决 vue3 类型警告问题 * refactor(tree): 解决 vue3 类型告警问题 * refactor(tree): 解决组件引用方式在 vue3 告警的问题 * refactor(tree): 对照 vue3 代码，改进 useVModel 的使用方式 * test(tree): 解决示例在控制台告警的问题 * refactor(tree): 解决 vue3 h 方法差异问题 * refactor(tree): tree 组件，修正 vue3 下 slots 获取方式差异 * refactor(tree): 示例消除 vue2, vue3 差异 * refactor(tree): 解决与 vue3 受控代码保持一致的问题 * refactor(tree): tree 组件统一受控示例 * refactor(tree): 解决 tree 组件数据变更示例适配 vue3 环境需要调整逻辑的问题 * refactor(tree): tree 组件完善示例样式 * refactor(tree): tree 组件完善示例样式 * refactor(tree): tree 组件，示例代码与 vue3 统一 * refactor(tree): 改进代码结构，使用共享对象传递公共数据 * refactor(tree): tree 组件改进代码结构 * refactor(tree): 解决 vue3 未能触发 item render 的问题 * refactor(tree): 改进组件结构 * refactor(tree): 解决 vue3 props.disableCheck 未能正常工作的问题 * refactor(tree): 解决 empty 示例废弃 api 未生效的问题 * refactor(tree): 解决与 vue3 的示例差异 * refactor(tree): tree 组件完善节点操作示例 * refactor(tree): tree 组件完善属性变更逻辑 * refactor(tree): tree 组件，解决 setData 方法未能触发新增属性变更的问题 * refactor(tree): tree 组件，完善同步属性的示例 * refactor(tree): tree 组件虚拟滚动示例，降低节点数量便于调试 * refactor(tree): tree 组件，解决虚拟滚动数据变更的状态异常 * test(tree): tree 组件，屏蔽动画带来的测试概率性差异 * test(tree): tree 组件测试代码格式改进，适配 vue3 项目 * test(tree): tree 组件，测试代码与 vue3 版本统一 * refactor(tree): tree 组件虚拟滚动事件绑定适配 vue3 * test(tree): tree 组件统一vue2/vue3测试代码形式 * test(tree): tree 组件测试用例适配 vue-next 项目 * test(tree): tree 组件，vue2,vue3 统一测试用例 * test(tree): tree 组件，vue2,vue3 统一测试用例 * fix(tree): tree 组件虚拟滚动解决滚动条样式异常问题 * refactor(tree): tree 组件文件名称按规范重命名 * refactor(tree): tree 组件完善 expand-all 示例 * refactor(tree): tree 组件示例样式改进 * refactor(tree): tree 组件改进示例 * refactor(tree): 完善组件示例 * refactor(tree): tree 组件完善示例，分拆不同形式虚拟滚动示例 * refactor(tree): tree 组件改进清空节点的性能 * refactor(tree): tree 组件，完善虚拟滚动示例。变更受控实现 * fix(tree): tree 组件修正受控表现 * fix(tree): tree 组件修正事件触发规则 * test(tree): tree 组件完善单元测试 * chore(tree): tree 组件修改，更新 src/_common * fix(tree): tree 组件, update api * test(tree): tree, update snapshot * refactor(tree-select): 修正类型告警问题 * chore(tree): update common * chore(tree): update example * test(tree): update snapshot * chore: update common * chore(tree): update common * chore: revert style dir delete --------- Co-authored-by: Uyarn <uyarnchen@gmail.com>
Tencent · Oct 23, 2023 · 7fe8bc1 · 7fe8bc1
1 parent 17bb10f
commit 7fe8bc1
Show file tree

Hide file tree

Showing 71 changed files with 10,794 additions and 13,075 deletions.
diff --git a/src/common.ts b/src/common.ts
@@ -45,7 +45,7 @@ export type OptionData = {
 } & PlainObject;
 
 export type TreeOptionData<T = string | number> = {
-  children?: Array<TreeOptionData<T>>;
+  children?: Array<TreeOptionData<T>> | boolean;
   /** option label content */
   label?: string | TNode;
   /** option search text */

diff --git a/src/tree-select/useTreeSelect.ts b/src/tree-select/useTreeSelect.ts
@@ -177,7 +177,10 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
       return;
     }
     const onlyLeafNode = Boolean(
-      !props.multiple && props.treeProps?.valueMode === 'onlyLeaf' && ctx.node?.data?.children?.length,
+      !props.multiple
+        && props.treeProps?.valueMode === 'onlyLeaf'
+        && Array.isArray(ctx.node?.data?.children)
+        && ctx.node?.data?.children?.length,
     );
     let current: TreeSelectValue = value;
     const nodeValue = Array.isArray(value) ? value[0] : value;

diff --git a/src/tree-select/utils.ts b/src/tree-select/utils.ts
@@ -18,7 +18,7 @@ export function getNodeDataByValue(
         // results.push(item);
         results.set(values[index], item);
       }
-      if (item.children?.length) {
+      if (Array.isArray(item.children) && item.children?.length) {
         getTreeNodeData(values, item.children, keys, results);
       }
       if (results.size >= values.length) {

diff --git a/src/tree/__tests__/activable.test.jsx b/src/tree/__tests__/activable.test.jsx
@@ -166,6 +166,55 @@ describe('Tree:activable', () => {
       expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(false);
       expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
     });
+
+    it('actived 受控处理可赋值空值', async () => {
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+            {
+              value: 't1.2',
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        data() {
+          return {
+            actived: ['t1'],
+          };
+        },
+        methods: {
+          onActive(vals) {
+            const actived = vals.filter((val) => val !== 't1');
+            this.actived = actived;
+          },
+        },
+        render() {
+          return (
+            <Tree
+              ref="tree"
+              data={data}
+              activable
+              actived={this.actived}
+              onActive={this.onActive}
+              expand-all
+              transition={false}
+            ></Tree>
+          );
+        },
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(true);
+      await wrapper.find('[data-value="t1"] .t-tree__label').trigger('click');
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      await delay(1);
+      await wrapper.find('[data-value="t1"] .t-tree__label').trigger('click');
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+    });
   });
 
   describe('props.activeMultiple', () => {

diff --git a/src/tree/__tests__/adapt.js b/src/tree/__tests__/adapt.js
@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { defineComponent } from '@vue/composition-api';
diff --git a/src/tree/__tests__/api.test.jsx b/src/tree/__tests__/api.test.jsx
@@ -24,7 +24,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
       expect(wrapper.find('[data-value="t1"]').exists()).toBe(true);
@@ -57,7 +57,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -86,7 +86,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -109,7 +109,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -146,7 +146,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} checkable />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} checkable />;
         },
       });
 
@@ -186,7 +186,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} />;
+          return <Tree ref="tree" transition={false} data={data} />;
         },
       });
 
@@ -224,7 +224,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -264,7 +264,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -308,7 +308,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -354,7 +354,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -392,7 +392,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -430,7 +430,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -472,7 +472,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -518,7 +518,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -556,7 +556,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -594,7 +594,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -636,7 +636,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -668,7 +668,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -690,7 +690,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -722,7 +722,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -762,7 +762,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 

diff --git a/src/tree/__tests__/checkable.test.jsx b/src/tree/__tests__/checkable.test.jsx
@@ -18,7 +18,7 @@ describe('Tree:checkable', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree data={data} expandAll></Tree>;
+          return <Tree transition={false} data={data} expandAll></Tree>;
         },
       });
       expect(wrapper.find('[data-value="t1"] input[type=checkbox]').exists()).toBe(false);
@@ -37,7 +37,7 @@ describe('Tree:checkable', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree data={data} checkable expandAll></Tree>;
+          return <Tree transition={false} data={data} checkable expandAll></Tree>;
         },
       });
       expect(wrapper.find('[data-value="t1"] input[type=checkbox]').exists()).toBe(true);
@@ -67,7 +67,7 @@ describe('Tree:checkable', () => {
           };
         },
         render() {
-          return <Tree data={data} checkable expandAll defaultValue={this.value}></Tree>;
+          return <Tree transition={false} data={data} checkable expandAll defaultValue={this.value}></Tree>;
         },
       });
       expect(wrapper.find('[data-value="t1"] .t-checkbox').classes('t-is-checked')).toBe(false);
@@ -99,7 +99,7 @@ describe('Tree:checkable', () => {
           };
         },
         render() {
-          return <Tree data={data} checkable expandAll value={this.value}></Tree>;
+          return <Tree transition={false} data={data} checkable expandAll value={this.value}></Tree>;
         },
       });
       expect(wrapper.find('[data-value="t1"] .t-checkbox').classes('t-is-checked')).toBe(false);
@@ -129,7 +129,7 @@ describe('Tree:checkable', () => {
           };
         },
         render() {
-          return <Tree data={data} checkable expandAll value={this.value}></Tree>;
+          return <Tree transition={false} data={data} checkable expandAll value={this.value}></Tree>;
         },
       });
       wrapper.setData({
@@ -166,7 +166,7 @@ describe('Tree:checkable', () => {
           });
         },
         render() {
-          return <Tree ref="tree" data={data} checkable expandAll checkStrictly></Tree>;
+          return <Tree transition={false} ref="tree" data={data} checkable expandAll checkStrictly></Tree>;
         },
       });
 
@@ -195,12 +195,17 @@ describe('Tree:checkable', () => {
           ],
         },
       ];
+      let changeParams = null;
+      const onChange = (checked, context) => {
+        changeParams = [checked, context];
+      };
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} checkable valueMode="onlyLeaf"></Tree>;
+          return (
+            <Tree transition={false} ref="tree" data={data} checkable valueMode="onlyLeaf" onChange={onChange}></Tree>
+          );
         },
       });
-
       await wrapper.find('[data-value="t1"] input[type="checkbox"]').setChecked();
       // const treeWrapper = wrapper.findComponent(Tree);
       // const changeParams = treeWrapper.emitted().change[0];
@@ -224,9 +229,13 @@ describe('Tree:checkable', () => {
           ],
         },
       ];
+      let changeParams = null;
+      const onChange = (checked, context) => {
+        changeParams = [checked, context];
+      };
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} checkable valueMode="all"></Tree>;
+          return <Tree transition={false} ref="tree" data={data} checkable valueMode="all" onChange={onChange}></Tree>;
         },
       });
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -253,9 +262,22 @@ describe('Tree:checkable', () => {
           ],
         },
       ];
+      let changeParams = null;
+      const onChange = (checked, context) => {
+        changeParams = [checked, context];
+      };
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} checkable valueMode="parentFirst"></Tree>;
+          return (
+            <Tree
+              transition={false}
+              ref="tree"
+              data={data}
+              checkable
+              valueMode="parentFirst"
+              onChange={onChange}
+            ></Tree>
+          );
         },
       });
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/* eslint-disable import/prefer-default-export */
		export { defineComponent } from '@vue/composition-api';