@eisgs/checkbox

Компонент Checkbox

Чекбокс может быть как с контентом, так и без него

<Checkbox />
<Checkbox>Checkbox</Checkbox>
<Checkbox checked>Checkbox выбран</Checkbox>

Управляемый Checkbox

Для управления компонентом необходимо использовать checked и onChange

const [checked, setChecked] = React.useState();

<Checkbox checked={checked} onChange={setChecked}>
  Управляемый чекбокс
</Checkbox>;

disabled

disabled позволяет блокировать ввод данных

<Checkbox disabled>
  Checkbox заблокирован
</Checkbox>
<Checkbox checked disabled>
  Checkbox выбран и заблокирован
</Checkbox>

onConfirmChange

const [checked, setChecked] = React.useState();

const handleConfirm = (isChecked, onChange) => {
  const answer = confirm(`Вы уверены, что хотите ${isChecked ? 'согласиться' : 'отказаться'} ?`);

  onChange(isChecked === answer);
};

<Checkbox 
  checked={checked} 
  onChange={setChecked} 
  onConfirmChange={handleConfirm}
>
  Управляемый чекбокс
</Checkbox>

Ошибки (ЕИСЖС)

При наличии error текст ошибки отобразится под компонентом

const [checked, setChecked] = React.useState();

<div style={{ width: '300px' }}>
  <Checkbox
    checked={checked}
    error="Ошибка"
    onChange={setChecked}
  >
    Управляемый чекбокс с очень и очень длинным текстом
  </Checkbox>
</div>

Подсказка (ЕИСЖС)

При передаче hint отобразится подсказка

<div style={{ width: '300px' }}>
  <Checkbox hint="Подсказка">
    Чекбокс с подсказкой
  </Checkbox>
  <Checkbox hint="Подсказка">
    Чекбокс с длинным описанием и подсказкой
  </Checkbox>
</div>

indeterminate

import { useTheme } from "@eisgs/theme-provider";

const { value: theme } = useTheme();
const items = Array.from(Array(5)).map((_, index) => ({value: index, label: `Пункт ${index + 1}`}));
const defaultCheckedItems = items.map(({value}) => value % 2 === 0);

const [checkedList, setCheckedList] = React.useState(defaultCheckedItems);
const [indeterminate, setIndeterminate] = React.useState(true);
const [checkAll, setCheckAll] = React.useState(false);

const handleOptionChange = (val, event) => {
  const { name } = event.target;
    
  const newCheckedList = checkedList.map((item, index) => index === name ? val : item);
  const { length: newCheckedItemLength } = newCheckedList.filter(item => item);

  setCheckedList(newCheckedList);
  setCheckAll(newCheckedItemLength === defaultCheckedItems.length);
  setIndeterminate(newCheckedItemLength && newCheckedItemLength !== defaultCheckedItems.length);
}

const handleAllChange = (val) => {
  setCheckAll(val);
  setIndeterminate(false);
  setCheckedList(prev => prev.map(() => val));
}

<div className="w400">
  <Checkbox checked={checkAll} onChange={handleAllChange} indeterminate={indeterminate}>Выбрать все</Checkbox>
  <div style={{paddingTop: 20, paddingLeft: 20, borderTop: `2px solid ${theme.G3}`}}>
    {items.map(({value, label}, index) => (
      <Checkbox
        key={label}
        onChange={handleOptionChange}
        name={value}
        checked={checkedList[index]}
      >
        {label}
      </Checkbox>
    ))}
  </div>
</div>

view (ИЖС)

Доступные значения desktop и mobile. Значение по умолчанию desktop

const views = ['desktop', 'mobile'];

<div style={{display: 'flex'}}>
  {views.map(view => <Checkbox key={view} view={view} styles={{marginRight: 16}}>{view}</Checkbox>)}
</div>