users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/aerospace-display-manager.jsx

6c2bdcffebb4a0851d0f0288aa8cbe9c443b6860 · 2.7 KB · 83 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as Utils from "../../utils";
3 import * as Icons from "../icons/icons.jsx";
4
5 const { React } = Uebersicht;
6
7 /**
8 * UserWidgetsCreator component allows users to create and manage custom widgets.
9 * @param {Object} props - The component props.
10 * @param {Object} props.defaultValue - The default value for the widgets.
11 * @param {Function} props.onChange - The function to call when the widgets change.
12 * @returns {JSX.Element} The UserWidgetsCreator component.
13 */
14 export default function AerospaceDisplayManager({ defaultValue, onChange }) {
15 const [indexes, setIndexes] = React.useState(defaultValue || {});
16 const [displays, setDisplays] = React.useState(Object.keys(defaultValue));
17
18 const addDisplay = () => {
19 setDisplays((current) => {
20 const highest = Math.max(...current, 0);
21 const newIndex = highest + 1;
22 setIndexes((current) => {
23 return { ...current, [newIndex]: Number(current[newIndex]) || 1 };
24 });
25 return [...current, newIndex];
26 });
27 };
28
29 const removeDisplay = (index) => {
30 setDisplays((current) => {
31 const newDisplays = current.filter((display) => display !== index);
32 setIndexes((current) => {
33 const newIndexes = { ...current };
34 delete newIndexes[index];
35 return newIndexes;
36 });
37 return newDisplays;
38 });
39 };
40
41 React.useEffect(() => {
42 const diffs = Utils.compareObjects(defaultValue, indexes);
43 const hasDiffs = Object.keys(diffs).length > 0;
44 if (hasDiffs) onChange({ target: { value: indexes } });
45 }, [defaultValue, onChange, indexes]);
46
47 return (
48 <div className="aerospace-display-manager">
49 <div className="aerospace-display-manager__label">
50 <em>AeroSpace</em> Custom display indexes
51 </div>
52 <div className="aerospace-display-manager__displays">
53 {displays.map((display) => {
54 const index = indexes[display] || 1;
55
56 const updateIndex = (e) => {
57 const value = e.target.value;
58 setIndexes((current) => {
59 return { ...current, [display]: Number(value) };
60 });
61 };
62
63 return (
64 <div key={display} className="aerospace-display-manager__display">
65 <span>{display}</span>:
66 <input type="number" value={index} onChange={updateIndex} />
67 <button
68 className="aerospace-display-manager__remove-display"
69 onClick={() => removeDisplay(display)}
70 >
71 <Icons.Close />
72 </button>
73 </div>
74 );
75 })}
76 </div>
77 <button className="aerospace-display-manager__add" onClick={addDisplay}>
78 <Icons.Add />
79 Add a display
80 </button>
81 </div>
82 );
83 }