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

22e588d2f7dc164806f01511b46a52d6e6852505 · 5.2 KB · 181 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as DataWidget from "./data-widget.jsx";
3 import * as DataWidgetLoader from "./data-widget-loader.jsx";
4 import * as Icons from "../icons/icons.jsx";
5 import useWidgetRefresh from "../../hooks/use-widget-refresh";
6 import useServerSocket from "../../hooks/use-server-socket";
7 import { useSimpleBarContext } from "../simple-bar-context.jsx";
8 import * as Settings from "../../settings";
9 import * as Utils from "../../utils";
10
11 const { React } = Uebersicht;
12
13 export default React.memo(UserWidgets);
14
15 /**
16 * UserWidgets component that renders a list of user-defined widgets.
17 * @returns {JSX.Element[]} Array of UserWidget components.
18 */
19 function UserWidgets() {
20 const { settings } = useSimpleBarContext();
21 const { userWidgetsList } = settings.userWidgets;
22
23 // Get the keys of the userWidgetsList object
24 const keys = Object.keys(userWidgetsList);
25
26 // Map over the keys and render a UserWidget for each key
27 return keys.map((key) => (
28 <UserWidget key={key} index={key} widget={userWidgetsList[key]} />
29 ));
30 }
31
32 UserWidgets.displayName = "UserWidgets";
33
34 /**
35 * UserWidget component that renders an individual user-defined widget.
36 * @param {Object} props - The component props.
37 * @param {string} props.index - The index of the widget.
38 * @param {Object} props.widget - The widget configuration object.
39 * @returns {JSX.Element|null} The rendered UserWidget component or null if not visible.
40 */
41 const UserWidget = React.memo(({ index, widget }) => {
42 const { displayIndex, settings } = useSimpleBarContext();
43 const [state, setState] = React.useState();
44 const [loading, setLoading] = React.useState(true);
45 const [isWidgetActive, setIsWidgetActive] = React.useState(true);
46 const {
47 icon,
48 backgroundColor,
49 output,
50 onClickAction,
51 onRightClickAction,
52 onMiddleClickAction,
53 refreshFrequency,
54 active,
55 noIcon,
56 hideWhenNoOutput = true,
57 showOnDisplay = "",
58 } = widget;
59
60 // Determine if the widget should be visible based on display settings and active status
61 const visible =
62 Utils.isVisibleOnDisplay(displayIndex, showOnDisplay) && active;
63
64 /**
65 * Resets the widget state and loading status.
66 */
67 const resetWidget = () => {
68 setState(undefined);
69 setLoading(false);
70 setIsWidgetActive(true);
71 };
72
73 /**
74 * Fetches the widget output and updates the state.
75 */
76 const getUserWidget = React.useCallback(async () => {
77 if (!visible) return;
78 const widgetOutput = await Utils.cachedRun(output, refreshFrequency);
79 const cleanedOutput = Utils.cleanupOutput(widgetOutput);
80
81 // Hide widget if script returns empty output and hideWhenNoOutput is enabled
82 if (
83 hideWhenNoOutput &&
84 (!cleanedOutput.length || cleanedOutput.trim() === "")
85 ) {
86 setLoading(false);
87 setIsWidgetActive(false);
88 setState(undefined);
89 return;
90 }
91
92 setState(widgetOutput);
93 setIsWidgetActive(true);
94 setLoading(false);
95 }, [visible, output, hideWhenNoOutput, refreshFrequency]);
96
97 // Use server socket to listen for widget updates
98 useServerSocket(
99 "user-widget",
100 visible,
101 getUserWidget,
102 resetWidget,
103 setLoading,
104 index,
105 );
106
107 // Refresh the widget at the specified frequency
108 useWidgetRefresh(visible, getUserWidget, refreshFrequency);
109
110 // Hide widget if not visible or if script indicates it should be inactive (only when hideWhenNoOutput is enabled)
111 if (!visible || (hideWhenNoOutput && !isWidgetActive)) return null;
112
113 const isCustomColor = !Settings.userWidgetColors.includes(backgroundColor);
114
115 const property = settings.global.widgetsBackgroundColorAsForeground
116 ? "color"
117 : "backgroundColor";
118
119 const style = settings.global.noColorInData
120 ? undefined
121 : {
122 [property]: isCustomColor ? backgroundColor : `var(${backgroundColor})`,
123 };
124
125 if (loading) return <DataWidgetLoader.Widget style={style} />;
126
127 const Icon = !noIcon ? Icons[icon] : null;
128
129 const hasOnClickAction = onClickAction?.trim().length > 0;
130 const hasRightClickAction = onRightClickAction?.trim().length > 0;
131 const hasMiddleClickAction = onMiddleClickAction?.trim().length > 0;
132
133 /**
134 * Handles the click event for the widget.
135 * @param {Event} e - The click event.
136 */
137 const onClick = async (e) => {
138 Utils.clickEffect(e);
139 await Uebersicht.run(onClickAction);
140 getUserWidget();
141 };
142
143 /**
144 * Handles the right-click event for the widget.
145 * @param {Event} e - The right-click event.
146 */
147 const onRightClick = async (e) => {
148 Utils.clickEffect(e);
149 await Uebersicht.run(onRightClickAction);
150 getUserWidget();
151 };
152
153 /**
154 * Handles the middle-click event for the widget.
155 * @param {Event} e - The middle-click event.
156 */
157 const onMiddleClick = async (e) => {
158 Utils.clickEffect(e);
159 await Uebersicht.run(onMiddleClickAction);
160 getUserWidget();
161 };
162
163 const onClickProps = {
164 onClick: hasOnClickAction ? onClick : undefined,
165 onRightClick: hasRightClickAction ? onRightClick : undefined,
166 onMiddleClick: hasMiddleClickAction ? onMiddleClick : undefined,
167 };
168
169 return (
170 <DataWidget.Widget
171 classes={`user-widget user-widget--${index}`}
172 Icon={Icon}
173 style={style}
174 {...onClickProps}
175 >
176 {state}
177 </DataWidget.Widget>
178 );
179 });
180
181 UserWidget.displayName = "UserWidget";