Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题 #2861

Merged
merged 4 commits into from
Oct 20, 2023
Merged

fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题 #2861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d2270b9
fix(tree): tree 组件，setItem 方法设置 checked, actived, expanded 属性时，应当触发相应…
TabSpace Oct 18, 2023
03b9d49
fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题
TabSpace Oct 20, 2023
05cc51f
test(tree): 完善单元测试，验证 onChange 事件中组件状态得到更新
TabSpace Oct 20, 2023
09c65c9
fix(tree): 解决合并冲突
TabSpace Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/tree/__tests__/event.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ describe('Tree:props:events', () => {
expect(rsActived.length).toBe(1);
expect(rsActived[0]).toBe('t2');
expect(rsContext.node.value).toBe('t2');
expect(rsContext.node.actived).toBe(true);
}, 300);

it('active 事件可触发', async () => {
Expand Down Expand Up @@ -98,6 +99,7 @@ describe('Tree:props:events', () => {
expect(rsActived.length).toBe(1);
expect(rsActived[0]).toBe('t2');
expect(rsContext.node.value).toBe('t2');
expect(rsContext.node.actived).toBe(true);
}, 300);
});

Expand Down Expand Up @@ -161,6 +163,7 @@ describe('Tree:props:events', () => {
expect(rsExpanded.length).toBe(1);
expect(rsExpanded[0]).toBe('t2');
expect(rsContext.node.value).toBe('t2');
expect(rsContext.node.expanded).toBe(true);
}, 300);

it('expand 事件可触发', async () => {
Expand Down Expand Up @@ -222,6 +225,7 @@ describe('Tree:props:events', () => {
expect(rsExpanded.length).toBe(1);
expect(rsExpanded[0]).toBe('t2');
expect(rsContext.node.value).toBe('t2');
expect(rsContext.node.expanded).toBe(true);
}, 300);
});

Expand Down Expand Up @@ -286,6 +290,7 @@ describe('Tree:props:events', () => {
expect(rsValue.length).toBe(1);
expect(rsValue[0]).toBe('t2.1');
expect(rsContext.node.value).toBe('t2');
expect(rsContext.node.checked).toBe(true);
}, 300);

it('change 事件可触发', async () => {
Expand Down Expand Up @@ -348,6 +353,7 @@ describe('Tree:props:events', () => {
expect(rsValue.length).toBe(1);
expect(rsValue[0]).toBe('t2.1');
expect(rsContext.node.value).toBe('t2');
expect(rsContext.node.checked).toBe(true);
}, 300);
});

Expand Down
13 changes: 4 additions & 9 deletions src/tree/_example/checkable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,19 +149,14 @@ export default {
},
methods: {
onClick(context) {
console.info('onClick:', context);
console.info('onClick context:', context);
const { node } = context;
console.info(node.value, 'checked:', node.checked);
console.info(node.value, 'onClick context.node.checked:', node.checked);
},
onChange(checked, context) {
console.info('onChange:', checked, context);
console.info('onChange checked:', checked, 'context:', context);
const { node } = context;
console.info(node.value, 'checked:', node.checked);
},
propOnChange(checked, context) {
console.info('propOnChange:', checked, context);
const { node } = context;
console.info(node.value, 'checked:', node.checked);
console.info(node.value, 'onChange context.node.checked:', node.checked);
},
selectInvert() {
const { tree } = this.$refs;
Expand Down
57 changes: 39 additions & 18 deletions src/tree/_example/controlled.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,39 +169,60 @@ export default {
this.expanded = ['1', '1.2'];
},
onClick(context) {
console.info('onClick:', context);
const { node } = context;
console.info(node.value, 'checked:', node.checked, 'expanded:', node.expanded, 'actived:', node.actived);
console.info('onClick context:', context);
},
onChange(vals, context) {
console.info('onChange:', vals, context);
const checked = vals.filter((val) => val !== '2.1');
console.info('节点 2.1 不允许选中');
console.info('onChange value:', vals, 'context:', context);
const { node } = context;
// onChange 事件发生时，context.node 状态预先发生变更，此时拿到预先变更的节点状态
console.info(node.value, 'context.node.checked:', node.checked);
if (this.syncProps) {
const checked = vals.filter((val) => {
if (val === '2.1') {
console.info('节点 2.1 不允许选中');
return false;
}
return true;
});
// 受控状态下, tree 的 props.value 可被修改为预期的值
console.log('before set this.checked, expect checked:', checked);
this.checked = checked;
}
const { node } = context;
console.info(node.value, 'checked:', node.checked);
// 赋值变更后的选中态之后，nextTick 之后触发视图更新
// node.checked 状态发生变更，符合 tree 的 props.value 的取值
this.$nextTick(() => {
console.info(node.value, 'nextTick context.node.checked:', node.checked);
});
},
onActive(vals, context) {
console.info('onActive:', vals, context);
const actived = vals.filter((val) => val !== '2.2');
console.info('节点 2.2 不允许激活', actived);
console.info('onActive actived:', vals, 'context:', context);
const { node } = context;
console.info(node.value, 'context.node.actived:', node.actived);
const actived = vals.filter((val) => {
if (val === '2.2') {
console.info('节点 2.2 不允许激活');
return false;
}
return true;
});
if (this.syncProps) {
this.actived = actived;
}
const { node } = context;
console.info(node.value, 'actived:', node.actived);
},
onExpand(vals, context) {
console.info('onExpand:', vals, context);
const expanded = vals.filter((val) => val !== '2.3');
console.info('节点 2.3 不允许展开', expanded);
console.info('onExpand expanded:', vals, 'context:', context);
const { node } = context;
console.info(node.value, 'context.node.expanded:', node.expanded);
const expanded = vals.filter((val) => {
if (val === '2.3') {
console.info('节点 2.3 不允许展开');
return false;
}
return true;
});
if (this.syncProps) {
this.expanded = expanded;
}
const { node } = context;
console.info(node.value, 'expanded:', node.expanded);
},
},
};
Expand Down
31 changes: 19 additions & 12 deletions src/tree/hooks/useTreeAction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,12 @@ export default function useTreeAction(state: TypeTreeState) {
const { store } = treeState;
const componentName = usePrefixClass('tree').value;

const [, setTValue] = state.vmValue;
const [, setTActived] = state.vmActived;
const [, setTExpanded] = state.vmExpanded;
const [tValue, setTValue] = state.vmValue;
const [tActived, setTActived] = state.vmActived;
const [tExpanded, setTExpanded] = state.vmExpanded;

const setExpanded = (item: TypeTargetNode, isExpanded: boolean): TreeNodeValue[] => {
const node = getNode(store, item);
const expanded = node.setExpanded(isExpanded);
const mouseEvent = treeState.mouseEvent as MouseEvent;
const evtCtx: TypeExpandEventContext = {
node: node.getModel(),
Expand All @@ -36,9 +35,12 @@ export default function useTreeAction(state: TypeTreeState) {
evtCtx.trigger = 'icon-click';
}
}
const expanded = node.setExpanded(isExpanded, {
directly: true,
});
setTExpanded(expanded, evtCtx);
if (evtCtx.trigger === 'setItem') {
store.replaceExpanded(expanded);
if (evtCtx.trigger !== 'setItem') {
store.replaceExpanded(tExpanded.value as TreeNodeValue[]);
}
return expanded;
};
Expand All @@ -50,7 +52,6 @@ export default function useTreeAction(state: TypeTreeState) {

const setActived = (item: TypeTargetNode, isActived: boolean) => {
const node = getNode(store, item);
const actived = node.setActived(isActived);
const mouseEvent = treeState.mouseEvent as MouseEvent;
const evtCtx: TypeActiveEventContext = {
node: node.getModel(),
Expand All @@ -60,9 +61,12 @@ export default function useTreeAction(state: TypeTreeState) {
if (mouseEvent) {
evtCtx.trigger = 'node-click';
}
const actived = node.setActived(isActived, {
directly: true,
});
setTActived(actived, evtCtx);
if (evtCtx.trigger === 'setItem') {
store.replaceActived(actived);
if (evtCtx.trigger !== 'setItem') {
store.replaceActived(tActived.value as TreeNodeValue[]);
}
return actived;
};
Expand All @@ -74,7 +78,6 @@ export default function useTreeAction(state: TypeTreeState) {

const setChecked = (item: TypeTargetNode, isChecked: boolean, ctx: { e: Event }): TreeNodeValue[] => {
const node = getNode(store, item);
const checked = node.setChecked(isChecked);
const mouseEvent = ctx?.e as MouseEvent;
const evtCtx: TypeChangeEventContext = {
node: node.getModel(),
Expand All @@ -84,9 +87,13 @@ export default function useTreeAction(state: TypeTreeState) {
if (mouseEvent) {
evtCtx.trigger = 'node-click';
}
const checked = node.setChecked(isChecked, {
directly: true,
});
setTValue(checked, evtCtx);
if (evtCtx.trigger === 'setItem') {
store.replaceChecked(checked);
// 这是针对受控执行的操作，如果 props.value 未变更，则执行还原操作
if (evtCtx.trigger !== 'setItem') {
store.replaceChecked(tValue.value as TreeNodeValue[]);
}
return checked;
};
Expand Down
16 changes: 3 additions & 13 deletions src/tree/hooks/useTreeStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,25 +186,15 @@ export default function useTreeStore(state: TypeTreeState) {
state.setStore(store);

// 配置属性监听
watch(refProps.value, (nVal: TreeNodeValue[]) => {
const previousVal = store.getChecked();
if (nVal.join() === previousVal?.join()) return;
store.replaceChecked(nVal);
});
watch(refProps.expanded, (nVal: TreeNodeValue[]) => {
store.replaceExpanded(nVal);
});
watch(refProps.actived, (nVal: TreeNodeValue[]) => {
const previousVal = store.getActived();
if (nVal.join() === previousVal?.join()) return;
store.replaceActived(nVal);
});
// tValue 就是 refProps.value
watch(tValue, (nVal: TreeNodeValue[]) => {
store.replaceChecked(nVal);
});
// tExpanded 就是 refProps.expanded
watch(tExpanded, (nVal: TreeNodeValue[]) => {
store.replaceExpanded(nVal);
});
// tActived 就是 refProps.actived
watch(tActived, (nVal: TreeNodeValue[]) => {
store.replaceActived(nVal);
});
Expand Down
Loading