-
Notifications
You must be signed in to change notification settings - Fork 8
/
DrawLine.tsx
107 lines (100 loc) 路 2.29 KB
/
DrawLine.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
import * as React from 'react';
import arraysEqual from './utils/arraysEqual';
import getWords from './utils/getWords';
import usePrevious from './usePrevious';
import { RenderWordProps } from './Spectrum';
interface DrawLineProps {
width: number;
colors: Array<string>;
wordWidths: Array<number>;
wordDistances: Array<number>;
truncate: boolean;
wordHeight: number;
wordRadius: number;
lineDistance: number;
renderWord: React.FC<RenderWordProps>;
}
const DrawLine = ({
width,
colors,
wordWidths,
wordDistances,
wordHeight,
wordRadius,
lineDistance,
truncate,
renderWord,
}: DrawLineProps): React.ReactElement => {
const previous = usePrevious({
width,
colors,
wordWidths,
wordDistances,
wordHeight,
wordRadius,
lineDistance,
truncate,
renderWord,
});
const [words, setWords] = React.useState(() =>
getWords({
width,
colors,
wordWidths,
wordDistances,
truncate,
}),
);
React.useEffect(() => {
// Handle props update on the runtime
// Memo isn't helping here as props contains array
// whose reference might change on every re-render
if (
previous &&
(previous.width !== width ||
previous.wordHeight !== wordHeight ||
previous.wordRadius !== wordRadius ||
previous.lineDistance !== lineDistance ||
previous.truncate !== truncate ||
!arraysEqual(previous.wordWidths, wordWidths) ||
!arraysEqual(previous.wordDistances, wordDistances) ||
!arraysEqual(previous.colors, colors))
) {
const newWords = getWords({
width,
colors,
wordWidths,
wordDistances,
truncate,
});
setWords(newWords);
}
}, [
previous,
width,
colors,
wordWidths,
wordDistances,
truncate,
wordHeight,
wordRadius,
lineDistance,
]);
return (
<>
{words.map(({ width: w, distance, background }, i) => {
const style = {
width: w,
marginRight: distance,
height: wordHeight,
background,
display: 'inline-block',
borderRadius: wordRadius,
marginBottom: lineDistance,
};
return renderWord({ key: i, style });
})}
</>
);
};
export default React.memo(DrawLine);