aboutsummaryrefslogtreecommitdiff
path: root/users/ryan/modules/simple-bar/simple-bar-source/lib/components/yabai/space-options.jsx
blob: 9c54d8beb549359f78197644627cb0f350b6e8a1 (plain)
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
import * as Uebersicht from "uebersicht";
import * as Icons from "../icons/icons.jsx";
import { SuspenseIcon } from "../icons/icon.jsx";
import { useSimpleBarContext } from "../simple-bar-context.jsx";
import * as Utils from "../../utils.js";
import * as Yabai from "../../yabai.js";

const { React } = Uebersicht;

/**
 * SpaceOptions component provides options to manipulate spaces (move left, move right, remove).
 * @param {Object} props - The component props.
 * @param {number} props.index - The index of the space.
 * @param {Function} props.setHovered - Function to set the hovered state.
 * @returns {JSX.Element} The SpaceOptions component.
 */
export default function SpaceOptions({ index, setHovered }) {
  // Get displayIndex from the context
  const { displayIndex } = useSimpleBarContext();

  /**
   * Handles the click event to remove a space.
   * @param {Event} e - The click event.
   */
  const remove = async (e) => {
    e.stopPropagation();
    Utils.clickEffect(e);
    setHovered(false);
    await Yabai.removeSpace(index, displayIndex);
  };

  /**
   * Returns a function to handle the click event to swap a space.
   * @param {string} direction - The direction to swap the space ("left" or "right").
   * @returns {Function} The click event handler.
   */
  const moveTo = (direction) => async (e) => {
    Utils.clickEffect(e);
    setHovered(false);
    await Yabai.swapSpace(index, direction);
  };

  /**
   * Prevents the default behavior of the mouse down event.
   * @param {Event} e - The mouse down event.
   */
  const onMouseDown = (e) => e.preventDefault();

  /**
   * Handles the mouse leave event to unset the hovered state.
   */
  const onMouseLeave = () => setHovered(false);

  return (
    <span className="space-options" onMouseLeave={onMouseLeave}>
      <div
        className="space-options__option space-options__option--move-prev"
        onMouseDown={onMouseDown}
        onClick={moveTo("left")}
      >
        <SuspenseIcon>
          <Icons.ChevronLeft />
        </SuspenseIcon>
      </div>
      <div
        className="space-options__option space-options__option--move-next"
        onMouseDown={onMouseDown}
        onClick={moveTo("right")}
      >
        <SuspenseIcon>
          <Icons.ChevronRight />
        </SuspenseIcon>
      </div>
      <div
        className="space-options__option space-options__option--remove"
        onClick={remove}
      >
        <SuspenseIcon>
          <Icons.Remove />
        </SuspenseIcon>
      </div>
    </span>
  );
}