diff options
Diffstat (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/window.jsx')
| -rwxr-xr-x | users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/window.jsx | 99 |
1 files changed, 99 insertions, 0 deletions
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/window.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/window.jsx new file mode 100755 index 0000000..04b54d6 --- /dev/null +++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/aerospace/window.jsx | |||
| @@ -0,0 +1,99 @@ | |||
| 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 | } | ||
