users/ryan/modules/simple-bar/simple-bar-source/lib/components/settings/settings-widgets.jsx

cd1edb8102b069072cafb8b7e399ab252472b995 · 5.7 KB · 180 lines raw

1	import * as Uebersicht from "uebersicht";
2	import * as Icons from "../icons/icons.jsx";
3	import * as Utils from "../../utils";
4	import * as Settings from "../../settings";
5	import SettingsInner from "./settings-inner.jsx";
6
7	const { React } = Uebersicht;
8
9	const settingsKeys = {
10	batteryWidget: "batteryWidgetOptions",
11	browserTrackWidget: "browserTrackWidgetOptions",
12	cpuWidget: "cpuWidgetOptions",
13	cryptoWidget: "cryptoWidgetOptions",
14	dateWidget: "dateWidgetOptions",
15	gpuWidget: "gpuWidgetOptions",
16	memoryWidget: "memoryWidgetOptions",
17	keyboardWidget: "keyboardWidgetOptions",
18	micWidget: "micWidgetOptions",
19	mpdWidget: "mpdWidgetOptions",
20	musicWidget: "musicWidgetOptions",
21	netstatsWidget: "netstatsWidgetOptions",
22	nextMeetingWidget: "nextMeetingWidgetOptions",
23	notificationsWidget: "notificationsWidgetOptions",
24	soundWidget: "soundWidgetOptions",
25	spotifyWidget: "spotifyWidgetOptions",
26	stockWidget: "stockWidgetOptions",
27	timeWidget: "timeWidgetOptions",
28	vpnWidget: "vpnWidgetOptions",
29	githubWidget: "githubWidgetOptions",
30	weatherWidget: "weatherWidgetOptions",
31	wifiWidget: "networkWidgetOptions",
32	youtubeMusicWidget: "youtubeMusicWidgetOptions",
33	zoomWidget: "zoomWidgetOptions",
34	userWidgets: "userWidgets",
35	};
36
37	/**
38	* SettingsWidgets component to render widgets setting category.
39	* @param {Object} props - Component properties.
40	* @param {Object} props.newSettings - Object containing current modified settings.
41	* @param {Function} props.setNewSettings - Function allowing to save newly modified settings.
42	*/
43	export default function SettingsWidgets({ newSettings, setNewSettings }) {
44	const [currentWidget, setCurrentWidget] = React.useState(null);
45	const currentSetting = Settings.data[currentWidget];
46
47	/**
48	* Removes the current widget setting,
49	*/
50	const removeCurrentWidget = () => {
51	setCurrentWidget(null);
52	};
53
54	/**
55	* Prevent checkbox click from propagating to the parent element,
56	* allowing to avoid triggering the widget selection.
57	*/
58	const handleCheckboxClick = (e) => {
59	e.stopPropagation();
60	Utils.clickEffect(e);
61	};
62
63	/**
64	* Updates the current widget based on the clicked element.
65	* @param {string} widget - The key of the widget to update.
66	*/
67	const updateCurrentWidget = (widget) => (e) => {
68	if (widget === "processWidget") return;
69
70	Utils.clickEffect(e);
71	const widgetKey = settingsKeys[widget];
72	setCurrentWidget(currentWidget === widgetKey ? null : widgetKey);
73	};
74
75	return (
76	<div className="settings__widgets">
77	<Breadcrumb
78	currentSetting={currentSetting}
79	removeCurrentWidget={removeCurrentWidget}
80	/>
81	{!currentWidget ? (
82	<div className="settings__widgets-list">
83	<div
84	className="settings__widgets-item"
85	onClick={updateCurrentWidget("userWidgets")}
86	>
87	Custom widgets
88	<Icons.ChevronRight className="settings__widgets-item-icon" />
89	</div>
90	{Object.keys(Settings.defaultSettings.widgets).map((subKey) => {
91	const subSetting = Settings.data[subKey];
92	if (!subSetting) return null;
93	const { label } = subSetting;
94	const defaultValue = newSettings.widgets[subKey];
95	const isProcess = subKey === "processWidget";
96
97	const classes = Utils.classNames("settings__widgets-item", {
98	"settings__widgets-item--process": isProcess,
99	});
100
101	const onChange = (e) => {
102	const value = e.target.checked;
103
104	const updatedSettings = {
105	...newSettings,
106	widgets: { ...newSettings.widgets, [subKey]: value },
107	};
108	setNewSettings(updatedSettings);
109	};
110
111	return (
112	<div
113	key={subKey}
114	className={classes}
115	onClick={updateCurrentWidget(subKey)}
116	>
117	<input
118	type="checkbox"
119	defaultChecked={defaultValue}
120	onChange={onChange}
121	onClick={handleCheckboxClick}
122	/>
123	{label}
124	{!isProcess && (
125	<Icons.ChevronRight className="settings__widgets-item-icon" />
126	)}
127	</div>
128	);
129	})}
130	</div>
131	) : (
132	<div className="settings__widget-settings">
133	<SettingsInner
134	settingKey={currentWidget}
135	setting={currentSetting}
136	newSettings={newSettings}
137	setNewSettings={setNewSettings}
138	/>
139	</div>
140	)}
141	</div>
142	);
143	}
144
145	/**
146	* SettingsWidgets component to render widgets setting category.
147	* @param {Object} props - Component properties.
148	* @param {Object} props.currentSetting - Object containing the current setting.
149	* @param {Function} props.removeCurrentWidget - Function removing the current setting allowing to go back to widget list.
150	*/
151	function Breadcrumb({ currentSetting, removeCurrentWidget }) {
152	if (!currentSetting) {
153	return (
154	<div className="settings__widgets-breadcrumb">
155	<div className="settings__widgets-breadcrumb-title">Widgets</div>
156	</div>
157	);
158	}
159	const { label } = currentSetting;
160	return (
161	<div className="settings__widgets-breadcrumb">
162	<button
163	className="settings__widgets-breadcrumb-title"
164	onClick={removeCurrentWidget}
165	>
166	Widgets
167	</button>
168	<span className="settings__widgets-breadcrumb-current">
169	{">"} {label}
170	</span>
171	<button
172	className="settings__widgets-breadcrumb-back"
173	onClick={removeCurrentWidget}
174	>
175	<Icons.ChevronLeft className="settings__widgets-breadcrumb-back-icon" />
176	Back
177	</button>
178	</div>
179	);
180	}