packages/excalidraw/components/Switch.tsx


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

import clsx from "clsx";

import "./Switch.scss";

export type SwitchProps = {
  name: string;
  checked: boolean;
  title?: string;
  onChange: (value: boolean) => void;
  disabled?: boolean;
};

export const Switch = ({
  title,
  name,
  checked,
  onChange,
  disabled = false,
}: SwitchProps) => {
  return (
    <div className={clsx("Switch", { toggled: checked, disabled })}>
      <input
        name={name}
        id={name}
        title={title}
        type="checkbox"
        checked={checked}
        disabled={disabled}
        onChange={() => onChange(!checked)}
        onKeyDown={(event) => {
          if (event.key === " ") {
            onChange(!checked);
          }
        }}
      />
    </div>
  );
};