@babylonjs/shared-ui-components 8.46.1 → 8.46.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,8 +5,8 @@ type GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradien
|
|
|
5
5
|
label: string;
|
|
6
6
|
gradients: Nullable<Array<T>>;
|
|
7
7
|
addGradient: (step?: T) => void;
|
|
8
|
-
removeGradient: (step: T) => void;
|
|
9
|
-
onChange: (newGradient: T) => void;
|
|
8
|
+
removeGradient: (step: T, index: number) => void;
|
|
9
|
+
onChange: (newGradient: T, index: number) => void;
|
|
10
10
|
};
|
|
11
11
|
export declare const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>>;
|
|
12
12
|
export declare const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
2
3
|
import { List } from "../primitives/list.js";
|
|
3
4
|
import { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from "../primitives/gradient.js";
|
|
4
5
|
import { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from "@babylonjs/core/Misc/gradients.js";
|
|
@@ -14,59 +15,59 @@ function GradientsToListItems(gradients) {
|
|
|
14
15
|
export const FactorGradientList = (props) => {
|
|
15
16
|
FactorGradientList.displayName = "FactorGradientList";
|
|
16
17
|
const { gradients } = props;
|
|
17
|
-
const items = GradientsToListItems(gradients);
|
|
18
|
-
return (_jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => props.removeGradient(item.data), onAdd: () => {
|
|
18
|
+
const items = useMemo(() => GradientsToListItems(gradients), [gradients]);
|
|
19
|
+
return (_jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item, index) => props.removeGradient(item.data, index), onAdd: () => {
|
|
19
20
|
if (items.length === 0) {
|
|
20
21
|
props.addGradient(); // Default
|
|
21
22
|
}
|
|
22
23
|
else {
|
|
23
24
|
props.addGradient(new FactorGradient(1, 1, 1));
|
|
24
25
|
}
|
|
25
|
-
}, renderItem: (item) => {
|
|
26
|
+
}, renderItem: (item, index) => {
|
|
26
27
|
return (_jsx(FactorGradientComponent, { value: item.data, onChange: (newGradient) => {
|
|
27
28
|
item.data.gradient = newGradient.gradient;
|
|
28
29
|
item.data.factor1 = newGradient.factor1;
|
|
29
30
|
item.data.factor2 = newGradient.factor2;
|
|
30
|
-
props.onChange(newGradient);
|
|
31
|
+
props.onChange(newGradient, index);
|
|
31
32
|
} }));
|
|
32
33
|
} }, "Factor"));
|
|
33
34
|
};
|
|
34
35
|
export const Color3GradientList = (props) => {
|
|
35
36
|
Color3GradientList.displayName = "Color3GradientList";
|
|
36
37
|
const { gradients } = props;
|
|
37
|
-
const items = GradientsToListItems(gradients);
|
|
38
|
-
return (_jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => props.removeGradient(item.data), onAdd: () => {
|
|
38
|
+
const items = useMemo(() => GradientsToListItems(gradients), [gradients]);
|
|
39
|
+
return (_jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item, index) => props.removeGradient(item.data, index), onAdd: () => {
|
|
39
40
|
if (items.length === 0) {
|
|
40
41
|
props.addGradient(); // Default
|
|
41
42
|
}
|
|
42
43
|
else {
|
|
43
44
|
props.addGradient(new Color3Gradient(1, Color3.White()));
|
|
44
45
|
}
|
|
45
|
-
}, renderItem: (item) => {
|
|
46
|
+
}, renderItem: (item, index) => {
|
|
46
47
|
return (_jsx(Color3GradientComponent, { value: item.data, onChange: (newGradient) => {
|
|
47
48
|
item.data.gradient = newGradient.gradient;
|
|
48
49
|
item.data.color = newGradient.color;
|
|
49
|
-
props.onChange(newGradient);
|
|
50
|
+
props.onChange(newGradient, index);
|
|
50
51
|
} }));
|
|
51
52
|
} }, "Color3"));
|
|
52
53
|
};
|
|
53
54
|
export const Color4GradientList = (props) => {
|
|
54
55
|
Color4GradientList.displayName = "Color4GradientList";
|
|
55
56
|
const { gradients } = props;
|
|
56
|
-
const items = GradientsToListItems(gradients);
|
|
57
|
-
return (_jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item) => props.removeGradient(item.data), onAdd: () => {
|
|
57
|
+
const items = useMemo(() => GradientsToListItems(gradients), [gradients]);
|
|
58
|
+
return (_jsx(List, { addButtonLabel: items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`, items: items, onDelete: (item, index) => props.removeGradient(item.data, index), onAdd: () => {
|
|
58
59
|
if (items.length === 0) {
|
|
59
60
|
props.addGradient(); // Default
|
|
60
61
|
}
|
|
61
62
|
else {
|
|
62
63
|
props.addGradient(new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1)));
|
|
63
64
|
}
|
|
64
|
-
}, renderItem: (item) => {
|
|
65
|
+
}, renderItem: (item, index) => {
|
|
65
66
|
return (_jsx(Color4GradientComponent, { value: item.data, onChange: (newGradient) => {
|
|
66
67
|
item.data.gradient = newGradient.gradient;
|
|
67
68
|
item.data.color1 = newGradient.color1;
|
|
68
69
|
item.data.color2 = newGradient.color2;
|
|
69
|
-
props.onChange(newGradient);
|
|
70
|
+
props.onChange(newGradient, index);
|
|
70
71
|
} }));
|
|
71
72
|
} }, "Color4"));
|
|
72
73
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gradientList.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/gradientList.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACnH,OAAO,EAAE,cAAc,EAAE,aAAa,IAAI,cAAc,EAAE,cAAc,EAAE,0CAA4B;AAGtG,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,4CAA8B;AAUvD,iEAAiE;AACjE,SAAS,oBAAoB,CAA2B,SAA6B;IACjF,OAAO,CACH,SAAS,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QACjC,EAAE,EAAE,KAAK;QACT,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,QAAQ,CAAC,QAAQ;KAC5B,CAAC,CAAC,IAAI,EAAE,CACZ,CAAC;AACN,CAAC;AACD,MAAM,CAAC,MAAM,kBAAkB,GAAyD,CAAC,KAAK,EAAE,EAAE;IAC9F,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;IACtD,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC5B,MAAM,KAAK,GAAG,oBAAoB,CAAiB,SAAS,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"gradientList.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hoc/gradientList.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\n\r\nimport { useMemo } from \"react\";\r\n\r\nimport { List } from \"../primitives/list\";\r\nimport { Color3GradientComponent, Color4GradientComponent, FactorGradientComponent } from \"../primitives/gradient\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport type { IValueGradient } from \"core/Misc/gradients\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\n\r\ntype GradientListProps<T extends FactorGradient | Color3Gradient | Color4Gradient> = {\r\n label: string;\r\n gradients: Nullable<Array<T>>;\r\n addGradient: (step?: T) => void;\r\n removeGradient: (step: T, index: number) => void;\r\n onChange: (newGradient: T, index: number) => void;\r\n};\r\n\r\n// Convert gradients to LineList items and sort by gradient value\r\nfunction GradientsToListItems<T extends IValueGradient>(gradients: Nullable<Array<T>>) {\r\n return (\r\n gradients?.map((gradient, index) => ({\r\n id: index,\r\n data: gradient,\r\n sortBy: gradient.gradient,\r\n })) ?? []\r\n );\r\n}\r\nexport const FactorGradientList: FunctionComponent<GradientListProps<FactorGradient>> = (props) => {\r\n FactorGradientList.displayName = \"FactorGradientList\";\r\n const { gradients } = props;\r\n const items = useMemo(() => GradientsToListItems<FactorGradient>(gradients), [gradients]);\r\n return (\r\n <List\r\n key=\"Factor\"\r\n addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n items={items}\r\n onDelete={(item, index) => props.removeGradient(item.data, index)}\r\n onAdd={() => {\r\n if (items.length === 0) {\r\n props.addGradient(); // Default\r\n } else {\r\n props.addGradient(new FactorGradient(1, 1, 1));\r\n }\r\n }}\r\n renderItem={(item, index) => {\r\n return (\r\n <FactorGradientComponent\r\n value={item.data}\r\n onChange={(newGradient: FactorGradient) => {\r\n item.data.gradient = newGradient.gradient;\r\n item.data.factor1 = newGradient.factor1;\r\n item.data.factor2 = newGradient.factor2;\r\n props.onChange(newGradient, index);\r\n }}\r\n />\r\n );\r\n }}\r\n />\r\n );\r\n};\r\n\r\nexport const Color3GradientList: FunctionComponent<GradientListProps<Color3Gradient>> = (props) => {\r\n Color3GradientList.displayName = \"Color3GradientList\";\r\n const { gradients } = props;\r\n const items = useMemo(() => GradientsToListItems<Color3Gradient>(gradients), [gradients]);\r\n return (\r\n <List\r\n key=\"Color3\"\r\n addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n items={items}\r\n onDelete={(item, index) => props.removeGradient(item.data, index)}\r\n onAdd={() => {\r\n if (items.length === 0) {\r\n props.addGradient(); // Default\r\n } else {\r\n props.addGradient(new Color3Gradient(1, Color3.White()));\r\n }\r\n }}\r\n renderItem={(item, index) => {\r\n return (\r\n <Color3GradientComponent\r\n value={item.data}\r\n onChange={(newGradient: Color3Gradient) => {\r\n item.data.gradient = newGradient.gradient;\r\n item.data.color = newGradient.color;\r\n props.onChange(newGradient, index);\r\n }}\r\n />\r\n );\r\n }}\r\n />\r\n );\r\n};\r\n\r\nexport const Color4GradientList: FunctionComponent<GradientListProps<Color4Gradient>> = (props) => {\r\n Color4GradientList.displayName = \"Color4GradientList\";\r\n const { gradients } = props;\r\n const items = useMemo(() => GradientsToListItems<Color4Gradient>(gradients), [gradients]);\r\n return (\r\n <List\r\n key=\"Color4\"\r\n addButtonLabel={items.length > 0 ? `Add new ${props.label}` : `Use ${props.label}s`}\r\n items={items}\r\n onDelete={(item, index) => props.removeGradient(item.data, index)}\r\n onAdd={() => {\r\n if (items.length === 0) {\r\n props.addGradient(); // Default\r\n } else {\r\n props.addGradient(new Color4Gradient(1, new Color4(1, 1, 1, 1), new Color4(1, 1, 1, 1)));\r\n }\r\n }}\r\n renderItem={(item, index) => {\r\n return (\r\n <Color4GradientComponent\r\n value={item.data}\r\n onChange={(newGradient: Color4Gradient) => {\r\n item.data.gradient = newGradient.gradient;\r\n item.data.color1 = newGradient.color1;\r\n item.data.color2 = newGradient.color2;\r\n props.onChange(newGradient, index);\r\n }}\r\n />\r\n );\r\n }}\r\n />\r\n );\r\n};\r\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { CopyRegular, DeleteRegular } from "@fluentui/react-icons";
|
|
3
|
-
import { ButtonLine } from "../hoc/buttonLine.js";
|
|
4
2
|
import { Body1Strong, makeStyles, tokens } from "@fluentui/react-components";
|
|
3
|
+
import { AddRegular, CopyRegular, DeleteRegular } from "@fluentui/react-icons";
|
|
4
|
+
import { useMemo } from "react";
|
|
5
|
+
import { ButtonLine } from "../hoc/buttonLine.js";
|
|
5
6
|
const useListStyles = makeStyles({
|
|
6
7
|
item: {
|
|
7
8
|
width: "100%",
|
|
@@ -36,8 +37,7 @@ const useListStyles = makeStyles({
|
|
|
36
37
|
export function List(props) {
|
|
37
38
|
const { items, renderItem, onDelete, onAdd, addButtonLabel = "Add new item" } = props;
|
|
38
39
|
const classes = useListStyles();
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
.map((item, index) => (_jsxs("div", { className: classes.item, children: [_jsxs(Body1Strong, { className: classes.itemId, children: ["#", index] }), _jsx("div", { className: classes.itemContent, children: renderItem(item, index) }), _jsxs("div", { className: classes.iconContainer, children: [_jsx(CopyRegular, { onClick: () => onAdd(item) }), _jsx(DeleteRegular, { onClick: () => onDelete(item, index) })] })] }, item.id))) })] }));
|
|
40
|
+
const sortedItems = useMemo(() => [...items].sort((a, b) => a.sortBy - b.sortBy), [items]);
|
|
41
|
+
return (_jsxs("div", { children: [_jsx(ButtonLine, { label: addButtonLabel, icon: AddRegular, onClick: () => props.onAdd() }), _jsx("div", { className: classes.list, children: sortedItems.map((item, index) => (_jsxs("div", { className: classes.item, children: [_jsxs(Body1Strong, { className: classes.itemId, children: ["#", index] }), _jsx("div", { className: classes.itemContent, children: renderItem(item, items.indexOf(sortedItems[index])) }), _jsxs("div", { className: classes.iconContainer, children: [_jsx(CopyRegular, { onClick: () => onAdd(item) }), _jsx(DeleteRegular, { onClick: () => onDelete(item, items.indexOf(sortedItems[index])) })] })] }, item.id))) })] }));
|
|
42
42
|
}
|
|
43
43
|
//# sourceMappingURL=list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/list.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/list.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,aAAa,GAAG,UAAU,CAAC;IAC7B,IAAI,EAAE;QACF,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK,EAAE,6BAA6B;QACnD,UAAU,EAAE,QAAQ,EAAE,0BAA0B;QAChD,GAAG,EAAE,MAAM,CAAC,kBAAkB,EAAE,6BAA6B;QAC7D,YAAY,EAAE,GAAG,MAAM,CAAC,eAAe,UAAU,MAAM,CAAC,mBAAmB,EAAE;KAChF;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC,kBAAkB;KACnC;IACD,WAAW,EAAE;QACT,IAAI,EAAE,CAAC,EAAE,0BAA0B;QACnC,QAAQ,EAAE,CAAC,EAAE,qCAAqC;KACrD;IACD,aAAa,EAAE;QACX,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM,CAAC,mBAAmB,EAAE,0BAA0B;QAC3D,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,CAAC,EAAE,oBAAoB;KACtC;IACD,IAAI,EAAE;QACF,OAAO,EAAE,MAAM,CAAC,gBAAgB;KACnC;CACJ,CAAC,CAAC;AAsBH;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAAI,KAAmB;IACvC,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,GAAG,cAAc,EAAE,GAAG,KAAK,CAAC;IACtF,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC;IAEhC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3F,OAAO,CACH,0BACI,KAAC,UAAU,IAAC,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,GAAI,EAErF,cAAK,SAAS,EAAE,OAAO,CAAC,IAAI,YACvB,WAAW,CAAC,GAAG,CAAC,CAAC,IAAiB,EAAE,KAAa,EAAE,EAAE,CAAC,CACnD,eAAmB,SAAS,EAAE,OAAO,CAAC,IAAI,aACtC,MAAC,WAAW,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,kBAAI,KAAK,IAAe,EAC9D,cAAK,SAAS,EAAE,OAAO,CAAC,WAAW,YAAG,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,GAAO,EAChG,eAAK,SAAS,EAAE,OAAO,CAAC,aAAa,aACjC,KAAC,WAAW,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAI,EAC3C,KAAC,aAAa,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,GAAI,IACjF,KANA,IAAI,CAAC,EAAE,CAOX,CACT,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC","sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\r\n\r\nimport { Body1Strong, makeStyles, tokens } from \"@fluentui/react-components\";\r\nimport { AddRegular, CopyRegular, DeleteRegular } from \"@fluentui/react-icons\";\r\nimport { useMemo } from \"react\";\r\n\r\nimport { ButtonLine } from \"../hoc/buttonLine\";\r\n\r\nconst useListStyles = makeStyles({\r\n item: {\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\", // Arrange items horizontally\r\n alignItems: \"center\", // Center items vertically\r\n gap: tokens.spacingHorizontalS, // Add space between elements\r\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\r\n },\r\n itemId: {\r\n width: tokens.spacingHorizontalM,\r\n },\r\n itemContent: {\r\n flex: 1, // Take up remaining space\r\n minWidth: 0, // Prevent flex item from overflowing\r\n },\r\n iconContainer: {\r\n display: \"flex\",\r\n gap: tokens.spacingHorizontalXS, // Small gap between icons\r\n alignItems: \"center\",\r\n flexShrink: 0, // Prevent shrinking\r\n },\r\n list: {\r\n padding: tokens.spacingVerticalS,\r\n },\r\n});\r\n\r\n/**\r\n * Represents an item in a list\r\n */\r\nexport type ListItem<T> = {\r\n /** Unique identifier for the item */\r\n id: number;\r\n /** The data associated with the item */\r\n data: T;\r\n /** Value to use for sorting the list */\r\n sortBy: number;\r\n};\r\n\r\ntype ListProps<T> = {\r\n items: ListItem<T>[];\r\n renderItem: (item: ListItem<T>, index: number) => ReactNode;\r\n onDelete: (item: ListItem<T>, index: number) => void;\r\n onAdd: (item?: ListItem<T>) => void;\r\n addButtonLabel?: string;\r\n};\r\n\r\n/**\r\n * For cases where you may want to add / remove items from a list via a trash can button / copy button, this HOC can be used\r\n * @returns A React component that renders a list of items with add/delete functionality\r\n * @param props - The properties for the List component\r\n */\r\nexport function List<T>(props: ListProps<T>): ReactElement {\r\n const { items, renderItem, onDelete, onAdd, addButtonLabel = \"Add new item\" } = props;\r\n const classes = useListStyles();\r\n\r\n const sortedItems = useMemo(() => [...items].sort((a, b) => a.sortBy - b.sortBy), [items]);\r\n\r\n return (\r\n <div>\r\n <ButtonLine label={addButtonLabel} icon={AddRegular} onClick={() => props.onAdd()} />\r\n\r\n <div className={classes.list}>\r\n {sortedItems.map((item: ListItem<T>, index: number) => (\r\n <div key={item.id} className={classes.item}>\r\n <Body1Strong className={classes.itemId}>#{index}</Body1Strong>\r\n <div className={classes.itemContent}>{renderItem(item, items.indexOf(sortedItems[index]))}</div>\r\n <div className={classes.iconContainer}>\r\n <CopyRegular onClick={() => onAdd(item)} />\r\n <DeleteRegular onClick={() => onDelete(item, items.indexOf(sortedItems[index]))} />\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n}\r\n"]}
|