users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/window.jsx

0c8fa3a2a270747f3dbb54fe8792f3f0aec997e3 · 2.8 KB · 99 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as AppIcons from "../../app-icons";
3 import { SuspenseIcon } from "../icons/icon.jsx";
4 import { useSimpleBarContext } from "../simple-bar-context.jsx";
5 import * as Utils from "../../utils";
6 import * as Aerospace from "../../aerospace";
7
8 const { React } = Uebersicht;
9
10 /**
11 * Window component to display a window in the process bar.
12 * @param {Object} props - The component props.
13 * @param {Object} props.window - The window object.
14 * @returns {JSX.Element|null} The rendered component.
15 */
16 export default function Window({ window }) {
17 // Get settings from context
18 const { settings } = useSimpleBarContext();
19 // Create a ref for the button element
20 const ref = React.useRef();
21 // Destructure settings
22 const {
23 displayOnlyCurrent,
24 hideWindowTitle,
25 displayOnlyIcon,
26 expandAllProcesses,
27 } = settings.process;
28 // Destructure window properties
29 const {
30 focused,
31 "app-name": appName,
32 "window-title": title,
33 "window-id": id,
34 } = window;
35
36 // If displayOnlyCurrent is true and the window is not focused, return null
37 if (displayOnlyCurrent && !focused) {
38 return null;
39 }
40
41 // Get the icon for the app or use the default icon
42 const Icon = AppIcons.apps[appName] || AppIcons.apps.Default;
43
44 /**
45 * Handle click event on the window button.
46 * @param {Event} e - The click event.
47 */
48 const onClick = (e) => {
49 !displayOnlyCurrent && Utils.clickEffect(e);
50 Aerospace.focusWindow(id);
51 };
52
53 /**
54 * Handle mouse enter event on the window button.
55 */
56 const onMouseEnter = () => {
57 Utils.startSliding(ref.current, ".process__inner", ".process__name");
58 };
59
60 /**
61 * Handle mouse leave event on the window button.
62 */
63 const onMouseLeave = () => {
64 Utils.stopSliding(ref.current, ".process__name");
65 };
66
67 // Generate class names based on settings and window state
68 const classes = Utils.classNames("process__window", {
69 "process__window--expanded": expandAllProcesses,
70 "process__window--focused": !displayOnlyCurrent && focused,
71 "process__window--only-current": displayOnlyCurrent,
72 "process__window--only-icon": displayOnlyIcon,
73 });
74
75 // Clean up the window title
76 const cleanedUpName =
77 appName !== title && title.length ? `${appName} / ${title}` : appName;
78 const processName = hideWindowTitle ? appName : cleanedUpName;
79
80 // Render the window button
81 return (
82 <button
83 ref={ref}
84 className={classes}
85 onClick={onClick}
86 onMouseEnter={displayOnlyIcon ? undefined : onMouseEnter}
87 onMouseLeave={displayOnlyIcon ? undefined : onMouseLeave}
88 >
89 <SuspenseIcon>
90 <Icon className="process__icon" />
91 </SuspenseIcon>
92 {!displayOnlyIcon && (
93 <span className="process__inner">
94 <span className="process__name">{processName}</span>
95 </span>
96 )}
97 </button>
98 );
99 }