Skip to content

Commit e7f1a11

Browse files
artmsilvaartmsilva
committed
fix: success toast rendering
1 parent 7c479df commit e7f1a11

File tree

1 file changed

+164
-160
lines changed

1 file changed

+164
-160
lines changed

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

+164-160
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,180 @@
1-
import React, { useEffect, useState } from "react";
2-
import Fuse from "fuse.js";
31
// disable eslint for this line because we want to import all assets
42
/*eslint import/namespace: ['error', { allowComputed: true }]*/
53
import * as AllAssets from "@washingtonpost/wpds-assets";
6-
import { toast } from "react-toastify";
7-
import MDXStyling from "~/components/Markdown/Styling";
8-
import { Grid } from "../Components/Grid";
9-
import { InputText } from "@washingtonpost/wpds-ui-kit";
104
import Search from "@washingtonpost/wpds-assets/asset/search";
11-
import { Icon, theme, AlertBanner, Box } from "@washingtonpost/wpds-ui-kit";
5+
import { InputText } from "@washingtonpost/wpds-ui-kit";
6+
import { AlertBanner, Box, Icon, theme } from "@washingtonpost/wpds-ui-kit";
7+
import Fuse from "fuse.js";
128
import { paramCase } from "param-case";
139
import { pascalCase } from "pascal-case";
10+
import React, { useEffect, useState } from "react";
11+
import { toast } from "react-toastify";
12+
import MDXStyling from "~/components/Markdown/Styling";
13+
import { Grid } from "../Components/Grid";
1414
import { logoList } from "./LogoSamples";
1515

1616
/**
1717
* ICON SEARCH (adding this cause its hard to find this feature in codebase)
1818
*/
1919

20-
const SuccessToast = () => {
21-
return (
22-
<AlertBanner.Root variant="success">
23-
<AlertBanner.Content css={{ minWidth: 250, paddingRight: "$050" }}>
24-
<b>Copied: </b>
25-
<Box as="span" css={{ fontSize: 16 }}>
26-
Import statement for{" "}
27-
<Box as="i" css={{ textTransform: "capitalize" }}>
28-
{Name}
29-
</Box>
30-
</Box>
31-
</AlertBanner.Content>
32-
</AlertBanner.Root>
33-
);
20+
const SuccessToast = ({ Name }) => {
21+
return (
22+
<AlertBanner.Root variant="success">
23+
<AlertBanner.Content css={{ minWidth: 250, paddingRight: "$050" }}>
24+
<b>Copied: </b>
25+
<Box as="span" css={{ fontSize: 16 }}>
26+
Import statement for{" "}
27+
<Box as="i" css={{ textTransform: "capitalize" }}>
28+
{Name}
29+
</Box>
30+
</Box>
31+
</AlertBanner.Content>
32+
</AlertBanner.Root>
33+
);
3434
};
3535

3636
export default function Icons({ data }) {
37-
38-
const [controlledValue, setControlledValue] = useState("");
39-
40-
useEffect(() => {
41-
// if on window and has search query
42-
if (typeof window !== "undefined" && window.location.search) {
43-
const search = new URLSearchParams(window.location.search).get("search");
44-
setControlledValue(search);
45-
}
46-
}, []);
47-
48-
// when search query changes
49-
useEffect(() => {
50-
if (controlledValue) {
51-
// debounce search
52-
const timeout = setTimeout(() => {
53-
handleChange({ target: { value: controlledValue } });
54-
55-
// push search query to url
56-
if (typeof window !== "undefined") {
57-
window.history.pushState(
58-
{},
59-
"",
60-
`${window.location.pathname}?search=${controlledValue}`
61-
);
62-
}
63-
}, 300);
64-
65-
return () => clearTimeout(timeout);
66-
}
67-
}, [controlledValue]);
68-
69-
const fuse = new Fuse(data, {
70-
keys: ["name", "description"],
71-
threshold: 0.1,
72-
});
73-
74-
const [ExampleToCopy, setExampleToCopy] = useState(null);
75-
const [Name, setName] = useState("");
76-
const [Filter, setFilter] = useState([]);
77-
78-
useEffect(() => {
79-
if (ExampleToCopy) {
80-
window.navigator.clipboard.writeText(ExampleToCopy);
81-
82-
toast(<SuccessToast />, {
83-
position: "top-center",
84-
closeButton: false,
85-
autoClose: 2000,
86-
hideProgressBar: true,
87-
draggable: false,
88-
onClose: () => {
89-
setName(null);
90-
},
91-
});
92-
}
93-
}, [ExampleToCopy, Name]);
94-
95-
function setVariables(example, Name) {
96-
setName(Name);
97-
setExampleToCopy(example);
98-
}
99-
100-
function handleChange(e) {
101-
const value = e.target.value;
102-
103-
setControlledValue(value);
104-
105-
const result = fuse.search(value);
106-
setFilter(result);
107-
}
108-
109-
const GetIcons = () => {
110-
let list;
111-
112-
if (Filter.length === 0) {
113-
list = Object.keys(AllAssets).filter(
114-
(asset) => !logoList.includes(paramCase(asset))
115-
);
116-
} else {
117-
list = Filter.map((filtered) =>
118-
pascalCase(filtered.item.name).replace("15", "Svg15")
119-
);
120-
}
121-
122-
return list.map((Asset, i) => {
123-
const Sample = AllAssets[Asset];
124-
if (!Sample) {
125-
return;
126-
}
127-
const componentName = paramCase(Asset);
128-
129-
const importExample = `import { ${Asset} } from "@washingtonpost/wpds-assets";`;
130-
131-
return (
132-
<MDXStyling.Cell key={i}>
133-
<Box
134-
as="button"
135-
onClick={() => setVariables(importExample, componentName)}
136-
css={{
137-
display: "flex",
138-
width: "100%",
139-
flexDirection: "column",
140-
alignItems: "center",
141-
justifyContent: "center",
142-
cursor: "pointer",
143-
gap: "$075",
144-
border: "none",
145-
"&:hover": { opacity: 0.5 },
146-
backgroundColor: theme.colors.gray500,
147-
padding: theme.space[100],
148-
color: "$primary",
149-
}}
150-
>
151-
<Icon size="$150">
152-
<Sample />
153-
</Icon>
154-
<Box as="span">{componentName}</Box>
155-
</Box>
156-
</MDXStyling.Cell>
157-
);
158-
});
159-
};
160-
161-
return (
162-
<>
163-
<Box css={{ marginBottom: "$050" }}>
164-
<InputText onChange={handleChange} label="Search" icon="right" value={controlledValue}>
165-
<Icon label="">
166-
<Search />
167-
</Icon>
168-
</InputText>
169-
</Box>
170-
171-
<Grid maxSize={"150px"}>
172-
<GetIcons />
173-
</Grid>
174-
</>
175-
);
37+
const [controlledValue, setControlledValue] = useState("");
38+
39+
useEffect(() => {
40+
// if on window and has search query
41+
if (typeof window !== "undefined" && window.location.search) {
42+
const search = new URLSearchParams(window.location.search).get("search");
43+
setControlledValue(search);
44+
}
45+
}, []);
46+
47+
// when search query changes
48+
useEffect(() => {
49+
if (controlledValue) {
50+
// debounce search
51+
const timeout = setTimeout(() => {
52+
handleChange({ target: { value: controlledValue } });
53+
54+
// push search query to url
55+
if (typeof window !== "undefined") {
56+
window.history.pushState(
57+
{},
58+
"",
59+
`${window.location.pathname}?search=${controlledValue}`,
60+
);
61+
}
62+
}, 300);
63+
64+
return () => clearTimeout(timeout);
65+
}
66+
}, [controlledValue]);
67+
68+
const fuse = new Fuse(data, {
69+
keys: ["name", "description"],
70+
threshold: 0.1,
71+
});
72+
73+
const [ExampleToCopy, setExampleToCopy] = useState(null);
74+
const [Name, setName] = useState("");
75+
const [Filter, setFilter] = useState([]);
76+
77+
useEffect(() => {
78+
if (ExampleToCopy) {
79+
window.navigator.clipboard.writeText(ExampleToCopy);
80+
81+
toast(<SuccessToast Name={Name}/>, {
82+
position: "top-center",
83+
closeButton: false,
84+
autoClose: 2000,
85+
hideProgressBar: true,
86+
draggable: false,
87+
onClose: () => {
88+
setName(null);
89+
},
90+
});
91+
}
92+
}, [ExampleToCopy, Name]);
93+
94+
function setVariables(example, Name) {
95+
setName(Name);
96+
setExampleToCopy(example);
97+
}
98+
99+
function handleChange(e) {
100+
const value = e.target.value;
101+
102+
setControlledValue(value);
103+
104+
const result = fuse.search(value);
105+
setFilter(result);
106+
}
107+
108+
const GetIcons = () => {
109+
let list;
110+
111+
if (Filter.length === 0) {
112+
list = Object.keys(AllAssets).filter(
113+
(asset) => !logoList.includes(paramCase(asset)),
114+
);
115+
} else {
116+
list = Filter.map((filtered) =>
117+
pascalCase(filtered.item.name).replace("15", "Svg15"),
118+
);
119+
}
120+
121+
return list.map((Asset, i) => {
122+
const Sample = AllAssets[Asset];
123+
if (!Sample) {
124+
return;
125+
}
126+
const componentName = paramCase(Asset);
127+
128+
const importExample = `import { ${Asset} } from "@washingtonpost/wpds-assets";`;
129+
130+
return (
131+
<MDXStyling.Cell key={i}>
132+
<Box
133+
as="button"
134+
onClick={() => setVariables(importExample, componentName)}
135+
css={{
136+
display: "flex",
137+
width: "100%",
138+
flexDirection: "column",
139+
alignItems: "center",
140+
justifyContent: "center",
141+
cursor: "pointer",
142+
gap: "$075",
143+
border: "none",
144+
"&:hover": { opacity: 0.5 },
145+
backgroundColor: theme.colors.gray500,
146+
padding: theme.space[100],
147+
color: "$primary",
148+
}}
149+
>
150+
<Icon size="$150">
151+
<Sample />
152+
</Icon>
153+
<Box as="span">{componentName}</Box>
154+
</Box>
155+
</MDXStyling.Cell>
156+
);
157+
});
158+
};
159+
160+
return (
161+
<>
162+
<Box css={{ marginBottom: "$050" }}>
163+
<InputText
164+
onChange={handleChange}
165+
label="Search"
166+
icon="right"
167+
value={controlledValue}
168+
>
169+
<Icon label="">
170+
<Search />
171+
</Icon>
172+
</InputText>
173+
</Box>
174+
175+
<Grid maxSize={"150px"}>
176+
<GetIcons />
177+
</Grid>
178+
</>
179+
);
176180
}

0 commit comments

Comments
 (0)