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
|
import * as Uebersicht from "uebersicht";
import * as AppIcons from "../../app-icons";
import { SuspenseIcon } from "../icons/icon.jsx";
import { useSimpleBarContext } from "../simple-bar-context.jsx";
import * as Utils from "../../utils";
import * as Aerospace from "../../aerospace";
const { React } = Uebersicht;
/**
* Window component to display a window in the process bar.
* @param {Object} props - The component props.
* @param {Object} props.window - The window object.
* @returns {JSX.Element|null} The rendered component.
*/
export default function Window({ window }) {
// Get settings from context
const { settings } = useSimpleBarContext();
// Create a ref for the button element
const ref = React.useRef();
// Destructure settings
const {
displayOnlyCurrent,
hideWindowTitle,
displayOnlyIcon,
expandAllProcesses,
} = settings.process;
// Destructure window properties
const {
focused,
"app-name": appName,
"window-title": title,
"window-id": id,
} = window;
// If displayOnlyCurrent is true and the window is not focused, return null
if (displayOnlyCurrent && !focused) {
return null;
}
// Get the icon for the app or use the default icon
const Icon = AppIcons.apps[appName] || AppIcons.apps.Default;
/**
* Handle click event on the window button.
* @param {Event} e - The click event.
*/
const onClick = (e) => {
!displayOnlyCurrent && Utils.clickEffect(e);
Aerospace.focusWindow(id);
};
/**
* Handle mouse enter event on the window button.
*/
const onMouseEnter = () => {
Utils.startSliding(ref.current, ".process__inner", ".process__name");
};
/**
* Handle mouse leave event on the window button.
*/
const onMouseLeave = () => {
Utils.stopSliding(ref.current, ".process__name");
};
// Generate class names based on settings and window state
const classes = Utils.classNames("process__window", {
"process__window--expanded": expandAllProcesses,
"process__window--focused": !displayOnlyCurrent && focused,
"process__window--only-current": displayOnlyCurrent,
"process__window--only-icon": displayOnlyIcon,
});
// Clean up the window title
const cleanedUpName =
appName !== title && title.length ? `${appName} / ${title}` : appName;
const processName = hideWindowTitle ? appName : cleanedUpName;
// Render the window button
return (
<button
ref={ref}
className={classes}
onClick={onClick}
onMouseEnter={displayOnlyIcon ? undefined : onMouseEnter}
onMouseLeave={displayOnlyIcon ? undefined : onMouseLeave}
>
<SuspenseIcon>
<Icon className="process__icon" />
</SuspenseIcon>
{!displayOnlyIcon && (
<span className="process__inner">
<span className="process__name">{processName}</span>
</span>
)}
</button>
);
}
|
