Skip to content

fix(TreeItem): prevent click event from propagating on operations span #3889

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

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
+226 −191
Open

fix(TreeItem): prevent click event from propagating on operations span #3889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion packages/components/tree/TreeItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,7 +308,7 @@ const TreeItem = forwardRef(

if (operationsView) {
return (
<span className={treeClassNames.treeOperations} data-target="operations">
<span className={treeClassNames.treeOperations} data-target="operations" onClick={stopPropagation}>
{operationsView}
</span>
);
Expand Down
192 changes: 104 additions & 88 deletions packages/components/tree/_example/operations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,6 @@
import React, { useRef, useState } from 'react';
import {
InputAdornment,
Button,
Input,
Tree,
Form,
Switch,
Space,
TreeNodeModel,
TreeInstanceFunctions,
} from 'tdesign-react';

import type { TreeProps, TreeNodeValue } from 'tdesign-react';
import { Button, Input, InputAdornment, Space, Switch, Tree } from 'tdesign-react';
import type { TreeInstanceFunctions, TreeNodeModel, TreeProps } from 'tdesign-react';

const items = [
{
Expand All @@ -25,10 +14,12 @@ const items = [
let index = 2;

export default () => {
const treeRef = useRef<TreeInstanceFunctions<{ value: string; label?: string }>>(null);

const [activeMultiple, setActiveMultiple] = useState(false);
const [useActived, setUseActived] = useState(false);
const [expandParent, setExpandParent] = useState(false);
const [filterText, setFilterText] = useState('');
const [activeId, setActiveId] = useState<TreeNodeValue>('');
const [activeIds, setActiveIds] = useState([]);

const getLabelContent = (node: TreeNodeModel) => {
Expand All @@ -45,8 +36,6 @@ export default () => {
return label;
};

const renderOperations: TreeProps['operations'] = (node) => `value: ${node.value}`;

const handleInputChange = (value: string) => {
setFilterText(value);
console.info('on input:', value);
Expand All @@ -69,11 +58,9 @@ export default () => {
const handleActive: TreeProps['onActive'] = (vals, state) => {
console.info('on active:', vals, state);
setActiveIds(vals);
setActiveId(vals[0] || '');
};

/* ======== 操作 api ======= */
const treeRef = useRef<TreeInstanceFunctions<{ value: string; label?: string }>>(null);

const setLabel = (value: string) => {
const node = treeRef.current.getItem(value);
Expand All @@ -82,10 +69,7 @@ export default () => {
data.label = label;
};

const getActivedNode = () => {
const activeNode = treeRef.current.getItem(activeId);
return activeNode;
};
const getActivedNodes = () => activeIds.map((id) => treeRef.current.getItem(id));

const getInsertItem = () => {
let item = null;
Expand All @@ -96,17 +80,20 @@ export default () => {
};
return item;
};

const append = (node?: TreeNodeModel) => {
const item = getInsertItem();
if (item) {
if (!node) {
treeRef.current.appendTo('', item);
} else {
treeRef.current.appendTo(node.value, item);
}
// setLabel(item.value);
if (useActived) {
if (!item) return;
if (!node) {
treeRef.current.appendTo('', item);
} else {
treeRef.current.appendTo(node.value, item);
}
if (useActived) {
if (activeMultiple) {
setActiveIds((v) => [...v, item.value]);
} else {
setActiveIds([item.value]);
}
}
};
Expand Down Expand Up @@ -164,21 +151,18 @@ export default () => {

const getActiveChildren = () => {
console.log(activeIds);
const node = getActivedNode();
if (!node) return;
let nodes: Array<TreeNodeModel> = [];
if (node) {
const nodes = getActivedNodes();
if (!nodes.length) return;
const allChildren: Array<TreeNodeModel> = [];
nodes.forEach((node) => {
const child = node.getChildren(true);
if (typeof child === 'boolean') {
// getChildren will never return true value.
nodes = [];
} else {
nodes = child;
if (Array.isArray(child)) {
allChildren.push(...child);
}
}
});
console.info(
'getActiveChildren:',
nodes.map((node) => node.value),
allChildren.map((node) => node.value),
);
};

Expand All @@ -187,52 +171,75 @@ export default () => {
};

const getActiveChecked = () => {
const node = getActivedNode();
if (!node) return;
const nodes = treeRef.current.getItems(node.value);
const nodes = getActivedNodes();
if (!nodes.length) return;
const allCheckedNodes: Array<TreeNodeModel> = [];
nodes.forEach((node) => {
const nodeItems = treeRef.current.getItems(node.value);
allCheckedNodes.push(...nodeItems.filter((item) => item.checked));
});
console.info(
'getChecked:',
nodes.filter((node) => node.checked).map((node) => node.value),
allCheckedNodes.map((node) => node.value),
);
};

const getActiveParent = () => {
const node = getActivedNode();
if (!node) return;
const parent = treeRef.current.getParent(node.value);
console.info('getParent', parent?.value);
const nodes = getActivedNodes();
if (!nodes.length) return;
const parents = nodes
.map((node) => {
const parent = treeRef.current.getParent(node.value);
return parent;
})
.filter(Boolean);
console.info(
'getParent',
parents.map((parent) => parent.value),
);
};

const getActiveParents = () => {
const node = getActivedNode();
if (!node) return;
const parents = treeRef.current.getParents(node.value);
const nodes = getActivedNodes();
if (!nodes.length) return;
const allParents: Array<TreeNodeModel> = [];
nodes.forEach((node) => {
const parents = treeRef.current.getParents(node.value);
allParents.push(...parents);
});
console.info(
'getParents',
parents.map((node) => node.value),
allParents.map((node) => node.value),
);
};

const getActiveIndex = () => {
const node = getActivedNode();
if (!node) return;
const index = treeRef.current.getIndex(node.value);
console.info('getIndex', index);
const nodes = getActivedNodes();
if (!nodes.length) return;
const indexes = nodes.map((node) => {
const index = treeRef.current.getIndex(node.value);
return { value: node.value, index };
});
console.info('getIndex', indexes);
};

const setActiveChecked = () => {
const node = getActivedNode();
if (!node) return;
treeRef.current.setItem(node.value, {
checked: true,
const nodes = getActivedNodes();
if (!nodes.length) return;
nodes.forEach((node) => {
treeRef.current.setItem(node.value, {
checked: true,
});
});
};

const setActiveExpanded = () => {
const node = getActivedNode();
if (!node) return;
treeRef.current.setItem(node?.value, {
expanded: true,
const nodes = getActivedNodes();
if (!nodes.length) return;
nodes.forEach((node) => {
treeRef.current.setItem(node.value, {
expanded: true,
});
});
};

Expand Down Expand Up @@ -270,44 +277,51 @@ export default () => {
};

const getActivePlainData = () => {
const node = getActivedNode();
if (!node) return;
const data = getPlainData(node);
console.log('getActivePlainData:', data);
return data;
const nodes = getActivedNodes();
if (!nodes.length) return;
const allData = nodes.map((node) => {
const data = getPlainData(node);
return { nodeValue: node.value, data };
});
console.log('getActivePlainData:', allData);
return allData;
};

return (
<Space direction="vertical">
<h3 className="title">render:</h3>
<Tree hover expandAll data={items} label={getLabel} operations={renderOperations} />
<h3 className="title">api:</h3>
<div className="operations">
<Form labelWidth={200}>
<Form.FormItem label="插入节点使用高亮节点" initialData={useActived}>
<Switch<boolean> onChange={setUseActived} />
</Form.FormItem>
<Form.FormItem label="子节点展开触发父节点展开" initialData={expandParent}>
<Switch<boolean> onChange={setExpandParent} />
</Form.FormItem>
</Form>
</div>
<div className="operations">
<style>{`.tdesign-tree-operations .t-is-active .t-tree__label { background-color: rgba(0, 0, 255, 0.2);}`}</style>
<Space direction="vertical">
<Space>
<span>允许多个节点同时高亮</span>
<Switch<boolean> value={activeMultiple} onChange={setActiveMultiple} />
</Space>
<Space>
<span>插入节点使用高亮节点</span>
<Switch<boolean> value={useActived} onChange={setUseActived} />
</Space>
<Space>
<span>子节点展开触发父节点展开</span>
<Switch<boolean> value={expandParent} onChange={setExpandParent} />
</Space>
</Space>
<Space>
<InputAdornment prepend="filter:">
<Input value={filterText} onChange={handleInputChange} />
</InputAdornment>
</div>
</Space>
<Tree
ref={treeRef}
className="tdesign-tree-operations"
hover
expandAll
activable
checkable
checkStrictly
line
allowFoldNodeOnFilter
data={items}
actived={activeIds}
activeMultiple
allowFoldNodeOnFilter
activeMultiple={activeMultiple}
label={getLabel}
expandParent={expandParent}
filter={filterByText}
Expand All @@ -316,7 +330,6 @@ export default () => {
onChange={handleChange}
onActive={handleActive}
/>
<h3 className="title">api:</h3>
<Space breakLine>
<Button theme="primary" onClick={getItem}>
{"获取 value 为 'node1' 的单个节点"}
Expand Down Expand Up @@ -355,6 +368,9 @@ export default () => {
获取高亮节点与其子节点的数据
</Button>
</Space>
<Space>
<strong>* 相关信息通过控制台输出</strong>
</Space>
</Space>
);
};
Loading
Loading