Skip to content

Commit bdf21f9

Browse files
artmsilvaartmsilva
authored
fix: color search bug (#653)
1 parent 8f1f97b commit bdf21f9

File tree

1 file changed

+120
-115
lines changed

1 file changed

+120
-115
lines changed

‎build.washingtonpost.com/components/Markdown/Examples/TokenColorTable.jsx

+120-115
Original file line numberDiff line numberDiff line change
@@ -5,118 +5,110 @@ import { useTheme } from "next-themes";
55
import Fuse from "fuse.js";
66
import { InputSearch } from "@washingtonpost/wpds-ui-kit";
77

8-
export default function ColorTokenTable() {
9-
const light = convertObjectToArray(Tokens.color.light, "");
10-
const dark = convertObjectToArray(Tokens.color.dark, "");
11-
const themePalette = convertObjectToArray(Tokens.color.theme, "");
12-
const staticColors = convertObjectToArray(Tokens.color.static, "-static");
13-
const [defaultPalette, setDefaultPalette] = useState([
14-
...light,
15-
...staticColors,
16-
...themePalette,
17-
]);
18-
const [results, setResults] = useState([]);
19-
const [currentValue, setCurrentValue] = useState("");
20-
const { theme } = useTheme();
8+
const headers = ["Name", "Preview", "RGBA", "HEX", "Description"];
219

22-
const fuse = new Fuse([...light, ...staticColors, ...themePalette], {
23-
keys: ["name", "value"],
24-
threshold: 0.2,
25-
});
26-
27-
useEffect(() => {
28-
if (theme === "dark") {
29-
fuse.setCollection([...dark, ...staticColors, ...themePalette]);
30-
setDefaultPalette([...dark, ...staticColors, ...themePalette]);
31-
} else {
32-
fuse.setCollection([...light, ...staticColors, ...themePalette]);
33-
setDefaultPalette([...light, ...staticColors, ...themePalette]);
34-
}
35-
const results = fuse.search(currentValue);
36-
setResults(results);
37-
}, [theme]);
10+
function convertObjectToArray(obj, suffix) {
11+
return Object.entries(obj).map(([key, value]) => ({
12+
name: key + suffix,
13+
...value,
14+
}));
15+
}
3816

39-
function handleChange(e) {
40-
setCurrentValue(e.target.value);
41-
const results = fuse.search(e.target.value);
42-
setCurrentValue(e.target.value);
43-
setResults(results);
44-
}
17+
const light = convertObjectToArray(Tokens.color.light, "");
18+
const dark = convertObjectToArray(Tokens.color.dark, "");
19+
const themePalette = convertObjectToArray(Tokens.color.theme, "");
20+
const staticColors = convertObjectToArray(Tokens.color.static, "-static");
4521

46-
const Container = styled("div", {
47-
overflowX: "auto",
48-
width: "100%",
49-
});
22+
const Container = styled("div", {
23+
overflowX: "auto",
24+
width: "100%",
25+
});
5026

51-
const StyledTable = styled("table", {
52-
borderCollapse: "collapse",
53-
borderSpacing: "0",
54-
width: "100%",
55-
marginBottom: "calc($050 / 2)",
56-
"& th": {
57-
textAlign: "left",
58-
fontWeight: "$light",
59-
borderBottom: "1px solid $subtle",
60-
fontSize: "$100",
61-
color: "$accessible",
62-
paddingInlineStart: 0,
63-
py: "$100",
64-
paddingRight: "$200",
27+
const StyledTable = styled("table", {
28+
borderCollapse: "collapse",
29+
borderSpacing: "0",
30+
width: "100%",
31+
marginBottom: "calc($050 / 2)",
32+
"& th": {
33+
textAlign: "left",
34+
fontWeight: "$light",
35+
borderBottom: "1px solid $subtle",
36+
fontSize: "$100",
37+
color: "$accessible",
38+
paddingInlineStart: 0,
39+
py: "$100",
40+
paddingRight: "$200",
41+
"@sm": {
42+
paddingRight: "0px",
43+
},
44+
"&.hide": {
6545
"@sm": {
66-
paddingRight: "0px",
67-
},
68-
"&.hide": {
69-
"@sm": {
70-
display: "none",
71-
},
46+
display: "none",
7247
},
7348
},
74-
"& tr": {
75-
height: 80,
49+
},
50+
"& tr": {
51+
height: 80,
52+
},
53+
"& td": {
54+
borderBottom: "1px solid $subtle",
55+
fontSize: "$100",
56+
paddingInlineStart: 0,
57+
paddingInlineEnd: "$100",
58+
color: "$accessible",
59+
py: "$100",
60+
paddingRight: "$200",
61+
"@sm": {
62+
paddingRight: "0px",
7663
},
77-
"& td": {
78-
borderBottom: "1px solid $subtle",
79-
fontSize: "$100",
80-
paddingInlineStart: 0,
81-
paddingInlineEnd: "$100",
82-
color: "$accessible",
83-
py: "$100",
84-
paddingRight: "$200",
64+
"&.rgba": {
65+
minWidth: 200,
8566
"@sm": {
86-
paddingRight: "0px",
87-
},
88-
"&.rgba": {
89-
minWidth: 200,
90-
"@sm": {
91-
minWidth: "unset",
92-
},
67+
minWidth: "unset",
9368
},
94-
"&.upper": {
95-
textTransform: "uppercase",
96-
},
97-
"&.hide": {
98-
"@sm": {
99-
display: "none",
100-
},
101-
},
102-
"&.nowrap": {
103-
whiteSpace: "nowrap",
69+
},
70+
"&.upper": {
71+
textTransform: "uppercase",
72+
},
73+
"&.hide": {
74+
"@sm": {
75+
display: "none",
10476
},
10577
},
106-
});
78+
"&.nowrap": {
79+
whiteSpace: "nowrap",
80+
},
81+
},
82+
});
83+
84+
const Swatch = styled("div", {
85+
width: 40,
86+
height: 40,
87+
borderRadius: 4,
88+
border: "1px solid $faint",
89+
});
10790

108-
const Swatch = styled("div", {
109-
width: 40,
110-
height: 40,
111-
borderRadius: 4,
112-
border: "1px solid $faint",
113-
});
91+
const fuse = new Fuse([...light, ...staticColors, ...themePalette], {
92+
keys: ["name", "value"],
93+
threshold: 0.2,
94+
});
11495

115-
function convertObjectToArray(obj, suffix) {
116-
return Object.entries(obj).map(([key, value]) => ({
117-
name: key + suffix,
118-
...value,
119-
}));
96+
export default function TokenColorTable() {
97+
const [defaultPalette, setDefaultPalette] = useState([
98+
...light,
99+
...staticColors,
100+
...themePalette,
101+
]);
102+
const [results, setResults] = useState([]);
103+
const [currentValue, setCurrentValue] = useState("");
104+
const { theme } = useTheme();
105+
106+
function formatToken(item = {}) {
107+
let value = item?.value ?? "";
108+
if (theme === "dark" && item?.valueDark) {
109+
value = item?.valueDark;
110+
}
111+
return value && value.substring(1, value.length - 1);
120112
}
121113

122114
function lookUpValue(item = {}) {
@@ -134,15 +126,26 @@ export default function ColorTokenTable() {
134126
}
135127
}
136128

137-
function formatToken(item = {}) {
138-
let value = item?.value ?? "";
139-
if (theme === "dark" && item?.valueDark) {
140-
value = item?.valueDark;
129+
useEffect(() => {
130+
if (theme === "dark") {
131+
fuse.setCollection([...dark, ...staticColors, ...themePalette]);
132+
setDefaultPalette([...dark, ...staticColors, ...themePalette]);
133+
} else {
134+
fuse.setCollection([...light, ...staticColors, ...themePalette]);
135+
setDefaultPalette([...light, ...staticColors, ...themePalette]);
141136
}
142-
return value && value.substring(1, value.length - 1);
143-
}
137+
const results = fuse.search(currentValue);
138+
setResults(results);
139+
}, [theme]);
144140

145-
const headers = ["Name", "Preview", "RGBA", "HEX", "Description"];
141+
useEffect(() => {
142+
const results = fuse.search(currentValue);
143+
setResults(results);
144+
}, [currentValue]);
145+
146+
function handleChange(e) {
147+
setCurrentValue(e.target.value);
148+
}
146149

147150
return (
148151
<>
@@ -154,20 +157,22 @@ export default function ColorTokenTable() {
154157
onChange={handleChange}
155158
value={currentValue}
156159
/>
157-
<InputSearch.Popover>
158-
<InputSearch.List css={{ width: "100%" }}>
160+
{results && (
161+
<InputSearch.Popover>
159162
{results.length > 0 ? (
160-
results.map((result, i) => (
161-
<InputSearch.ListItem
162-
key={`${result.item.name}-${i}`}
163-
value={result.item.name}
164-
/>
165-
))
163+
<InputSearch.List css={{ width: "100%" }}>
164+
{results.map((result, i) => (
165+
<InputSearch.ListItem
166+
key={`${result.item.name}-${i}`}
167+
value={result.item.name}
168+
/>
169+
))}
170+
</InputSearch.List>
166171
) : (
167172
<InputSearch.EmptyState />
168173
)}
169-
</InputSearch.List>
170-
</InputSearch.Popover>
174+
</InputSearch.Popover>
175+
)}
171176
</InputSearch.Root>
172177
<Container>
173178
<StyledTable>

0 commit comments

Comments
 (0)