Line data    Source code

       1              : import * as React from 'react';
       2              : import * as styles from './toggle_switch.module.css';
       3              : 
       4              : import { classNames } from '../../utils/classnames.js';
       5              : 
       6              : interface ToggleSwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
       7              :     checked: boolean;
       8              :     size?: 'small' | 'medium';
       9              : }
      10              : 
      11            1 : export const ToggleSwitch = React.forwardRef<HTMLButtonElement, ToggleSwitchProps>((props: ToggleSwitchProps, ref) => {
      12            1 :     const { checked, className, disabled, size = 'medium', type, ...rest } = props;
      13            1 :     return (
      14            1 :         <button
      15            1 :             {...rest}
      16            1 :             ref={ref}
      17            1 :             type={type ?? 'button'}
      18            1 :             role="switch"
      19            1 :             aria-checked={checked}
      20            1 :             disabled={disabled}
      21            1 :             className={classNames(styles.root, {
      22            1 :                 [styles.checked]: checked,
      23            1 :                 [styles.disabled]: disabled,
      24            1 :                 [styles.small]: size === 'small',
      25            1 :                 [styles.medium]: size === 'medium',
      26            1 :             }, className)}
      27              :         >
      28            1 :             <span className={styles.handle} />
      29            1 :         </button>
      30              :     );
      31            1 : });