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

8c57a511a35702ddf354f3cb52e04228a36bee82 · 5.0 KB · 159 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as Utils from "../../utils";
3 import SettingsInner from "./settings-inner.jsx";
4 import SettingsWidgets from "./settings-widgets.jsx";
5 import * as Settings from "../../settings";
6
7 const { React } = Uebersicht;
8
9 const TABS_STORAGE_KEY = "simple-bar-last-current-settings-tab";
10 const TABS = [
11 "global",
12 "themes",
13 "process",
14 "spacesDisplay",
15 "widgets",
16 "customStyles",
17 ];
18
19 /**
20 * Main settings component.
21 * @param {Object} props - Component properties.
22 * @param {Function} props.closeSettings - Function to close the settings.
23 */
24 export default function Component({ closeSettings }) {
25 // State to keep track of the current tab
26 const [currentTab, setCurrentTab] = React.useState(getLastCurrentTab());
27 // State to keep track of pending changes
28 const [pendingChanges, setPendingChanges] = React.useState(0);
29 // Get current settings
30 const settings = Settings.get();
31 // State to keep track of new settings
32 const [newSettings, setNewSettings] = React.useState(settings);
33
34 /**
35 * Update the current tab and store it in session storage.
36 * @param {number} tab - The index of the tab to switch to.
37 */
38 const updateTab = (tab) => {
39 setCurrentTab(tab);
40 window.sessionStorage.setItem(TABS_STORAGE_KEY, tab);
41 };
42
43 /**
44 * Refresh the simple-bar with new settings.
45 * @param {Event} e - The event object.
46 */
47 const refreshSimpleBar = async (e) => {
48 Utils.clickEffect(e);
49 setPendingChanges(0);
50 await Settings.set(newSettings);
51 Utils.hardRefresh();
52 };
53
54 // Effect to calculate the number of pending changes
55 React.useEffect(() => {
56 const diffs = Utils.compareObjects(settings, newSettings);
57 const deepDiffs = Object.keys(diffs).reduce(
58 (acc, key) => [...acc, ...Object.keys(diffs[key])],
59 [],
60 );
61 setPendingChanges(deepDiffs.length);
62 }, [newSettings, settings]);
63
64 return (
65 <div className="settings">
66 <div className="settings__overlay" onClick={closeSettings} />
67 <div className="settings__outer">
68 <div className="settings__header">
69 <button
70 className="settings__header-dot settings__header-dot--close"
71 onClick={closeSettings}
72 />
73 <span className="settings__header-dot settings__header-dot--disabled" />
74 <span className="settings__header-dot settings__header-dot--disabled" />
75 Settings
76 </div>
77 <div className="settings__tabs">
78 {Object.keys(Settings.defaultSettings).map((key) => {
79 const setting = Settings.data[key];
80 const hideTab = !TABS.includes(key);
81
82 if (!setting || hideTab) return null;
83
84 const { label } = setting;
85 const i = TABS.indexOf(key);
86 const classes = Utils.classNames("settings__tab", {
87 "settings__tab--current": i === currentTab,
88 });
89 return (
90 <button key={i} className={classes} onClick={() => updateTab(i)}>
91 {label}
92 </button>
93 );
94 })}
95 </div>
96 <div className="settings__inner">
97 {Object.keys(Settings.defaultSettings).map((key) => {
98 const setting = Settings.data[key];
99 const hideContent = !TABS.includes(key);
100
101 if (!setting || hideContent) return null;
102
103 const isWidgetsTab = key === "widgets";
104
105 const { label } = setting;
106 return (
107 <div
108 key={key}
109 className="settings__category"
110 style={{ transform: `translateX(-${100 * currentTab}%)` }}
111 >
112 {isWidgetsTab ? (
113 <SettingsWidgets
114 newSettings={newSettings}
115 setNewSettings={setNewSettings}
116 />
117 ) : (
118 <React.Fragment>
119 <div className="settings__inner-title">{label}</div>
120 <SettingsInner
121 settingKey={key}
122 setting={setting}
123 newSettings={newSettings}
124 setNewSettings={setNewSettings}
125 />
126 </React.Fragment>
127 )}
128 </div>
129 );
130 })}
131 </div>
132 <div className="settings__bottom">
133 {pendingChanges !== 0 && (
134 <div className="settings__pending-changes">
135 <b>{pendingChanges}</b> pending change{pendingChanges > 1 && "s"}
136 </div>
137 )}
138 <button
139 className="settings__refresh-button"
140 onClick={refreshSimpleBar}
141 disabled={!pendingChanges}
142 >
143 Confirm changes and refresh simple-bar
144 </button>
145 </div>
146 </div>
147 </div>
148 );
149 }
150
151 /**
152 * Get the last current tab from session storage.
153 * @returns {number} The index of the last current tab.
154 */
155 function getLastCurrentTab() {
156 const storedLastCurrentTab = window.sessionStorage.getItem(TABS_STORAGE_KEY);
157 if (storedLastCurrentTab) return parseInt(storedLastCurrentTab, 10);
158 return 0;
159 }