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