users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/date-display.jsx

d06784958d73159b5e4abafe5114804662114ed7 · 3.2 KB · 118 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 * as Utils from "../../utils";
6 import useWidgetRefresh from "../../hooks/use-widget-refresh";
7 import useServerSocket from "../../hooks/use-server-socket";
8 import { useSimpleBarContext } from "../simple-bar-context.jsx";
9
10 export { dateStyles as styles } from "../../styles/components/data/date-display";
11
12 const { React } = Uebersicht;
13
14 const DEFAULT_REFRESH_FREQUENCY = 30000;
15
16 /**
17 * Date display widget component.
18 * @returns {JSX.Element} The date display widget.
19 */
20 export const Widget = React.memo(() => {
21 const { displayIndex, settings } = useSimpleBarContext();
22 const { widgets, dateWidgetOptions } = settings;
23 const { dateWidget } = widgets;
24 const {
25 refreshFrequency,
26 shortDateFormat,
27 locale,
28 calendarApp,
29 showOnDisplay,
30 showIcon,
31 } = dateWidgetOptions;
32
33 // Determine if the widget should be visible based on display settings
34 const visible =
35 Utils.isVisibleOnDisplay(displayIndex, showOnDisplay) && dateWidget;
36
37 // Calculate the refresh frequency for the widget
38 const refresh = React.useMemo(
39 () =>
40 Utils.getRefreshFrequency(refreshFrequency, DEFAULT_REFRESH_FREQUENCY),
41 [refreshFrequency],
42 );
43
44 const [state, setState] = React.useState();
45 const [loading, setLoading] = React.useState(visible);
46
47 const formatOptions = shortDateFormat ? "short" : "long";
48
49 // Memoize the date format options
50 const options = React.useMemo(
51 () => ({
52 weekday: formatOptions,
53 month: formatOptions,
54 day: "numeric",
55 }),
56 [formatOptions],
57 );
58
59 // Ensure locale is valid, default to "en-UK" if not
60 const _locale = locale.length > 4 ? locale : "en-UK";
61
62 /**
63 * Reset the widget state.
64 */
65 const resetWidget = () => {
66 setState(undefined);
67 setLoading(false);
68 };
69
70 /**
71 * Get the current date and update the state.
72 */
73 const getDate = React.useCallback(() => {
74 if (!visible) return;
75 const now = new Date().toLocaleDateString(_locale, options);
76 setState({ now });
77 setLoading(false);
78 }, [_locale, options, visible]);
79
80 // Use server socket to get date updates
81 useServerSocket("date-display", visible, getDate, resetWidget, setLoading);
82 // Refresh the widget at the specified interval
83 useWidgetRefresh(visible, getDate, refresh);
84
85 if (loading) return <DataWidgetLoader.Widget className="date-display" />;
86 if (!state) return null;
87 const { now } = state;
88
89 /**
90 * Handle click event to open the calendar application.
91 * @param {Event} e - The click event.
92 */
93 const onClick = (e) => {
94 Utils.clickEffect(e);
95 openCalendarApp(calendarApp);
96 };
97
98 return (
99 <DataWidget.Widget
100 classes="date-display"
101 Icon={showIcon ? Icons.Date : null}
102 onClick={onClick}
103 >
104 {now}
105 </DataWidget.Widget>
106 );
107 });
108
109 Widget.displayName = "DateDisplay";
110
111 /**
112 * Open the specified calendar application.
113 * @param {string} calendarApp - The name of the calendar application to open.
114 */
115 function openCalendarApp(calendarApp) {
116 const appName = calendarApp || "Calendar";
117 Uebersicht.run(`open -a "${appName}"`);
118 }