-
Notifications
You must be signed in to change notification settings - Fork 263
/
Node.tsx
109 lines (94 loc) 路 2.94 KB
/
Node.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect } from 'react';
import { INode } from "@antv/g6"
import { GraphinContext } from '../../index';
import './index.less';
import type { LegendChildrenProps, OptionType } from './typing';
const LegendNode: React.FunctionComponent<LegendChildrenProps> = props => {
const { graph, theme } = React.useContext(GraphinContext);
const { options: defaultOptions, dataMap, onChange } = props;
const { mode } = theme;
const [state, setState] = React.useState({
options: defaultOptions,
});
/** 鏇存柊state渚濊禆 */
useEffect(() => {
setState({
options: defaultOptions,
});
}, [defaultOptions]);
const { options } = state;
const handleClick = (option: OptionType) => {
const checkedValue = { ...option, checked: !option.checked };
const result = options.map((c: any) => {
const matched = c.value === option.value;
return matched ? checkedValue : c;
});
setState({
options: result,
});
const nodes = dataMap.get(checkedValue.value);
/** highlight */
// const nodesId = nodes.map((c) => c.id);
// apis.highlightNodeById(nodesId);
// @ts-ignore
nodes.forEach((node: any) => {
graph.setItemState(node.id, 'active', checkedValue.checked);
graph.setItemState(node.id, 'inactive', !checkedValue.checked);
const { id } = node;
const item = graph.findById(id) as INode;
const edges = item.getEdges();
edges.forEach(edge => {
graph.setItemState(edge, 'normal', checkedValue.checked);
graph.setItemState(edge, 'inactive', !checkedValue.checked);
})
});
onChange(checkedValue, result);
};
return (
<ul className="graphin-components-legend-content">
{options.map((option: OptionType) => {
const { label, checked, color } = option;
const dotColors = {
light: {
active: color,
inactive: '#ddd',
},
dark: {
active: color,
inactive: '#2f2f2f',
},
};
const labelColor = {
light: {
active: '#000',
inactive: '#ddd',
},
dark: {
active: '#fff',
inactive: '#2f2f2f',
},
};
const status = checked ? 'active' : 'inactive';
return (
<li // eslint-disable-line jsx-a11y/no-noninteractive-element-interactions
key={option.value}
className="item"
onClick={() => {
handleClick(option);
}}
onKeyDown={() => {
handleClick(option);
}}
>
<span className="dot" style={{ background: dotColors[mode][status] }} />
<span className="label" style={{ color: labelColor[mode][status] }}>
{label}
</span>
</li>
);
})}
</ul>
);
};
export default LegendNode;