0.13.14 • Published 1 month ago

@snack-uikit/toggles v0.13.14

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 month ago

Checkbox, Radio, Switch и Favorite

Компоненты, реализующие переключатели.

Installation

npm i @snack-uikit/toggles

Changelog

хук useToggleGroup

Хук для элементов внутри группы переключателей.

Аргументы

value: string

Уникальное значение для элемента в группе

  function ToggleCard(props: ToggleCardProps) {
    const { isChecked, handleClick, multipleSelection } = useToggleGroup(props.id);

    return (
      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
    );
  }

Примеры:

ToggleGroup

  const [value, setValue] = useState<string | undefined>(undefined);

  function ToggleCard(props: ToggleCardProps) {
    const { isChecked, handleClick, multipleSelection } = useToggleGroup(id);

    return (
      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
    );
  }

  // ITEMS -some array with ToggleCardProps
  
  // ...

  return (
    <ToggleGroup selectionMode='single' value={value} onChange={setValue}>
      {ITEMS.map(props => (
        <ToggleCard key={props.id} {...props} />
      ))}
    </ToggleGroup>
  );

// ...

return (
  <>
    {items.map(({ checked, setChecked, data }) =>
      <CustomRadioButton
        // повторяет нативное поведение радиогруппы: по клику можно выбрать, но нельзя снять выбор
        onClick={() => setChecked(true)}
        checked={checked}
        data={data}
      />
    )}
  </>
);

Checkbox

Props

nametypedefault valuedescription
idstring-HTML-аттрибут id
namestring-HTML-аттрибут name
valuestring-HTML-аттрибут value
tabIndexnumber-HTML-аттрибут tab-index
autofocusboolean-HTML-аттрибут autofocus
checkedboolean-HTML-аттрибут checked
defaultCheckedboolean-HTML-аттрибут checked по-умолчанию
disabledboolean-HTML-аттрибут disabled
onChange(checked: boolean) => void-Колбек смены значения
onClickMouseEventHandler<HTMLInputElement>-Колбек клика
onBlurFocusEventHandler<HTMLInputElement>-Колбек потери фокуса
onFocusFocusEventHandler<HTMLInputElement>-Колбек приобретения фокуса
classNamestring-CSS-класс
sizeenum Size: "s", "m"mРазмер
inputRefRefObject<HTMLInputElement>-
indeterminateboolean-Состояние частичного выбора
indeterminateDefaultboolean-Состояние частичного выбора по-умолчанию

Switch

Props

nametypedefault valuedescription
idstring-HTML-аттрибут id
namestring-HTML-аттрибут name
valuestring-HTML-аттрибут value
tabIndexnumber-HTML-аттрибут tab-index
autofocusboolean-HTML-аттрибут autofocus
checkedboolean-HTML-аттрибут checked
defaultCheckedboolean-HTML-аттрибут checked по-умолчанию
disabledboolean-HTML-аттрибут disabled
onChange(checked: boolean) => void-Колбек смены значения
onClickMouseEventHandler<HTMLInputElement>-Колбек клика
onBlurFocusEventHandler<HTMLInputElement>-Колбек потери фокуса
onFocusFocusEventHandler<HTMLInputElement>-Колбек приобретения фокуса
classNamestring-CSS-класс
sizeenum Size: "s", "m"mРазмер
inputRefRefObject<HTMLInputElement>-
showIconboolean-Показывать ли иконку в переключателе
loadingboolean-

Radio

Props

nametypedefault valuedescription
idstring-HTML-аттрибут id
namestring-HTML-аттрибут name
valuestring-HTML-аттрибут value
tabIndexnumber-HTML-аттрибут tab-index
autofocusboolean-HTML-аттрибут autofocus
checkedboolean-HTML-аттрибут checked
defaultCheckedboolean-HTML-аттрибут checked по-умолчанию
disabledboolean-HTML-аттрибут disabled
onChange(checked: boolean) => void-Колбек смены значения
onClickMouseEventHandler<HTMLInputElement>-Колбек клика
onBlurFocusEventHandler<HTMLInputElement>-Колбек потери фокуса
onFocusFocusEventHandler<HTMLInputElement>-Колбек приобретения фокуса
classNamestring-CSS-класс
sizeenum Size: "s", "m"-Размер
inputRefRefObject<HTMLInputElement>-

Favorite

Props

nametypedefault valuedescription
idstring-HTML-аттрибут id
namestring-HTML-аттрибут name
valuestring-HTML-аттрибут value
tabIndexnumber-HTML-аттрибут tab-index
autofocusboolean-HTML-аттрибут autofocus
checkedboolean-HTML-аттрибут checked
defaultCheckedboolean-HTML-аттрибут checked по-умолчанию
disabledboolean-HTML-аттрибут disabled
onChange(checked: boolean) => void-Колбек смены значения
onClickMouseEventHandler<HTMLInputElement>-Колбек клика
onBlurFocusEventHandler<HTMLInputElement>-Колбек потери фокуса
onFocusFocusEventHandler<HTMLInputElement>-Колбек приобретения фокуса
classNamestring-CSS-класс
sizeenum Size: "s", "m"mРазмер
inputRefRefObject<HTMLInputElement>-
iconenum FavoriteIcon: "star", "heart"heartИконка

ToggleGroup

Props

nametypedefault valuedescription
defaultValuestring \| string[]-Начальное состояние
valuestring \| string[]-Controlled состояние
onChange((value: string) => void) \| ((value: string[]) => void)-Controlled обработчик измения состояния
selectionMode"single" | "multiple"singleРежим выбора

useToggleGroup

Props

nametypedefault valuedescription
value*string-
0.13.6

4 months ago

0.13.7

4 months ago

0.13.8

4 months ago

0.13.9

4 months ago

0.13.0

8 months ago

0.13.1

8 months ago

0.13.2

7 months ago

0.13.3

7 months ago

0.13.4

6 months ago

0.13.5

6 months ago

0.13.12

4 months ago

0.13.11

4 months ago

0.13.10

4 months ago

0.13.14

2 months ago

0.13.13

4 months ago

0.11.0

9 months ago

0.12.0

9 months ago

0.9.10

1 year ago

0.10.1

12 months ago

0.10.2

12 months ago

0.10.3

11 months ago

0.10.4

10 months ago

0.10.0

1 year ago

0.9.9

1 year ago

0.9.8

1 year ago

0.9.7

1 year ago

0.9.6

1 year ago

0.9.5

1 year ago

0.9.4

1 year ago

0.9.3

2 years ago

0.9.2

2 years ago

0.9.1

2 years ago

0.9.0

2 years ago

0.8.1

2 years ago

0.8.0

2 years ago