From d2270b99bbc6bd9caccaddf114df0dd87495500e Mon Sep 17 00:00:00 2001 From: TabSpace Date: Wed, 18 Oct 2023 15:45:08 +0800 Subject: [PATCH] =?UTF-8?q?fix(tree):=20tree=20=E7=BB=84=E4=BB=B6=EF=BC=8C?= =?UTF-8?q?setItem=20=E6=96=B9=E6=B3=95=E8=AE=BE=E7=BD=AE=20checked,=20act?= =?UTF-8?q?ived,=20expanded=20=E5=B1=9E=E6=80=A7=E6=97=B6=EF=BC=8C?= =?UTF-8?q?=E5=BA=94=E5=BD=93=E8=A7=A6=E5=8F=91=E7=9B=B8=E5=BA=94=E5=8F=98?= =?UTF-8?q?=E6=9B=B4=E4=BA=8B=E4=BB=B6=EF=BC=8C=E5=B9=B6=E8=A7=A6=E5=8F=91?= =?UTF-8?q?=E5=AF=B9=E5=BA=94=20props=20=E7=9A=84=E5=8F=98=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/tree/__tests__/api.test.jsx | 127 ++++++++++++++++++++++++++++++-- src/tree/hooks/useTreeAction.ts | 9 +++ src/tree/tree.tsx | 7 +- 3 files changed, 130 insertions(+), 13 deletions(-) diff --git a/src/tree/__tests__/api.test.jsx b/src/tree/__tests__/api.test.jsx index 400a2dedf..6688c6b18 100644 --- a/src/tree/__tests__/api.test.jsx +++ b/src/tree/__tests__/api.test.jsx @@ -123,7 +123,7 @@ describe('Tree:api', () => { expect(wrapper.find('[data-value="t1"]').text()).toBe('节点1'); }); - it('可以设置节点属性 checked，触发视图更新', async () => { + it('可以设置节点属性 checked, 触发视图更新', async () => { const data = [ { value: 't1', @@ -142,13 +142,37 @@ describe('Tree:api', () => { ], }, ]; + let changeParams = null; + let changeCount = 0; + const onChange = (checked, context) => { + changeCount += 1; + changeParams = { + checked, + context, + }; + }; const wrapper = mount({ + data() { + return { + checked: [], + }; + }, render() { - return ; + return ( + + ); }, }); - await delay(10); + await delay(1); const { tree } = wrapper.vm.$refs; tree.setItem('t1', { checked: true, @@ -156,14 +180,24 @@ describe('Tree:api', () => { tree.setItem('t2', { checked: true, }); - await delay(10); + + expect(wrapper.vm.checked.length).toBe(2); + expect(wrapper.vm.checked[0]).toBe('t1.1'); + expect(wrapper.vm.checked[1]).toBe('t2.1'); + await delay(1); expect(wrapper.find('[data-value="t1"] .t-checkbox').classes('t-is-checked')).toBe(true); expect(wrapper.find('[data-value="t1.1"] .t-checkbox').classes('t-is-checked')).toBe(true); expect(wrapper.find('[data-value="t2"] .t-checkbox').classes('t-is-checked')).toBe(true); expect(wrapper.find('[data-value="t2.1"] .t-checkbox').classes('t-is-checked')).toBe(true); + + expect(changeCount).toBe(2); + expect(changeParams.checked.length).toBe(2); + expect(changeParams.checked[0]).toBe('t1.1'); + expect(changeParams.checked[1]).toBe('t2.1'); + expect(changeParams.context.node.value).toEqual('t2'); }); - it('可以设置节点属性 expanded，触发视图更新', async () => { + it('可以设置节点属性 expanded, 触发视图更新', async () => { const data = [ { value: 't1', @@ -182,13 +216,23 @@ describe('Tree:api', () => { ], }, ]; + + let expandParams = null; + let expandCount = 0; + const onExpand = (expanded, context) => { + expandCount += 1; + expandParams = { + expanded, + context, + }; + }; const wrapper = mount({ render() { - return ; + return ; }, }); - await delay(10); + await delay(1); const { tree } = wrapper.vm.$refs; tree.setItem('t1', { expanded: true, @@ -196,13 +240,80 @@ describe('Tree:api', () => { tree.setItem('t2', { expanded: true, }); - await delay(10); + await delay(1); const t1d1 = wrapper.find('[data-value="t1.1"]'); expect(t1d1.exists()).toBe(true); expect(t1d1.classes('t-tree__item--visible')).toBe(true); const t2d1 = wrapper.find('[data-value="t2.1"]'); expect(t2d1.exists()).toBe(true); expect(t2d1.classes('t-tree__item--visible')).toBe(true); + + expect(expandCount).toBe(2); + expect(expandParams.expanded.length).toBe(2); + expect(expandParams.expanded[0]).toBe('t1'); + expect(expandParams.expanded[1]).toBe('t2'); + expect(expandParams.context.node.value).toEqual('t2'); + }); + + it('可以设置节点属性 actived, 触发视图更新', async () => { + const data = [ + { + value: 't1', + children: [ + { + value: 't1.1', + }, + ], + }, + { + value: 't2', + children: [ + { + value: 't2.1', + }, + ], + }, + ]; + + let activeParams = null; + let activeCount = 0; + const onActive = (actived, context) => { + activeCount += 1; + activeParams = { + actived, + context, + }; + }; + const wrapper = mount({ + render() { + return ; + }, + }); + + await delay(1); + const t1d1 = wrapper.find('[data-value="t1.1"]'); + const t2d1 = wrapper.find('[data-value="t2.1"]'); + + const { tree } = wrapper.vm.$refs; + tree.setItem('t1.1', { + actived: true, + }); + expect(activeCount).toBe(1); + expect(activeParams.actived.length).toBe(1); + expect(activeParams.actived[0]).toBe('t1.1'); + expect(activeParams.context.node.value).toEqual('t1.1'); + await delay(1); + expect(t1d1.classes('t-is-active')).toBe(true); + + tree.setItem('t2.1', { + actived: true, + }); + expect(activeCount).toBe(2); + expect(activeParams.actived.length).toBe(1); + expect(activeParams.actived[0]).toBe('t2.1'); + expect(activeParams.context.node.value).toEqual('t2.1'); + await delay(1); + expect(t2d1.classes('t-is-active')).toBe(true); }); }); diff --git a/src/tree/hooks/useTreeAction.ts b/src/tree/hooks/useTreeAction.ts index a0a213542..912c69d19 100644 --- a/src/tree/hooks/useTreeAction.ts +++ b/src/tree/hooks/useTreeAction.ts @@ -37,6 +37,9 @@ export default function useTreeAction(state: TypeTreeState) { } } setTExpanded(expanded, evtCtx); + if (evtCtx.trigger === 'setItem') { + store.replaceExpanded(expanded); + } return expanded; }; @@ -58,6 +61,9 @@ export default function useTreeAction(state: TypeTreeState) { evtCtx.trigger = 'node-click'; } setTActived(actived, evtCtx); + if (evtCtx.trigger === 'setItem') { + store.replaceActived(actived); + } return actived; }; @@ -79,6 +85,9 @@ export default function useTreeAction(state: TypeTreeState) { evtCtx.trigger = 'node-click'; } setTValue(checked, evtCtx); + if (evtCtx.trigger === 'setItem') { + store.replaceChecked(checked); + } return checked; }; diff --git a/src/tree/tree.tsx b/src/tree/tree.tsx index a10f6688e..dbaa160cf 100644 --- a/src/tree/tree.tsx +++ b/src/tree/tree.tsx @@ -101,12 +101,9 @@ export default defineComponent({ const val = spec[name]; delete spec[name]; const methodName = `set${upperFirst(name)}`; - const setupMethod = node[methodName]; + const setupMethod = this[methodName]; if (isFunction(setupMethod)) { - setupMethod.call(node, val, { - directly: true, - isAction: false, - }); + setupMethod.call(this, node, val); } } });