HEX

File: /var/www/design.system/src/molecules/Inputs/Switch/Switch.tsx
import React, { forwardRef, useId } from 'react';
import styles from './Switch.module.scss';
import cn from 'classnames';
import Body from '../../../atoms/Typography/Body/Body.tsx';

interface ISwitchProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
  checked: boolean;
  label: string;
  description?: string;
  disabled?: boolean;
  className?: string;
  onChange: (checked: boolean) => void;
}

/**
 * Поддерживает все стандартные пропсы HTMLInputElement.
 *
 * Полную документацию смотрите сайте: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
 */

const Switch = forwardRef<HTMLInputElement, ISwitchProps>(
  ({ checked, label, description, disabled, onChange, className, ...rest }: ISwitchProps, ref) => {
    const id = useId();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      onChange(e.target.checked);
    };

    return (
      <div
        className={cn(
          styles.root,
          {
            [styles.disabled]: disabled,
          },
          className
        )}
      >
        <input
          id={id}
          ref={ref}
          type="checkbox"
          className={styles.input}
          checked={checked}
          onChange={handleChange}
          disabled={disabled}
          {...rest}
        />
        <div className={styles.wrapper}>
          <span className={styles.switch}></span>
          <label htmlFor={id}>
            <Body className={styles.label}>{label}</Body>
          </label>
        </div>
        {description && <Body className={styles.description}>{description}</Body>}
      </div>
    );
  }
);

export default Switch;