@snack-uikit/chips v0.27.5
Chips
Installation
npm i @snack-uikit/chips
TODO
droplistи выбор значений вFilterChip
Example
import { ChipAssist, ChipChoice, ChipToggle } from '@snack-uikit/chips';
import { PlaceholderSVG } from '@snack-uikit/icons';
<ChipAssist
label='Label'
icon={<PlaceholderSVG />}
size='s'
disabled={false}
loading={false}
onClick={doSomething}
className='className'
tabIndex={1}
/>
<ChipToggle
label='Label'
icon={<PlaceholderSVG />}
size='s'
selected={false}
disabled={false}
loading={false}
onChange={handleChange}
className='className'
tabIndex={1}
/>
<ChipChoice.Single
label='Label'
value='value'
icon={<PlaceholderSVG />}
size='s'
disabled={false}
loading={false}
options={[]}
onClick={doSomething}
/>
<ChipChoice.Multi
label='Label'
value={['value1', 'value2']}
onChangeValue={onChange}
size='m'
options={[]}
valueFormatter={formatter}
/>
<ChipChoice.Date
label='Label'
value={new Date()}
onChangeValue={onChange}
size='m'
valueFormatter={formatter}
/>
<ChipChoice.DateRange
label='Label'
value={[new Date(), new Date()]}
onChangeValue={onChange}
size='m'
valueFormatter={formatter}
/>
<ChipChoice.Custom
label='Label'
value='value'
valueToRender='Selected'
size='m'
/>ChipAssist
Чип с лейблом
Props
| name | type | default value | description |
|---|---|---|---|
| onClick* | MouseEventHandler<HTMLButtonElement> | - | Колбек обработки клика |
| label* | string | - | Лейбл |
| disabled | boolean | - | Деактивирован ли компонент |
| loading | boolean | - | Состояние загрузки |
| icon | ReactElement<any, string \| JSXElementConstructor<any>> | - | Иконка |
| className | string | - | CSS-класс |
| tabIndex | number | - | HTML tab index |
| size | enum Size: "xs", "s", "m", "l" | s | Размер |
ChipToggle
Чип с состоянием выбран/не выбран
Props
| name | type | default value | description |
|---|---|---|---|
| onChange* | (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void | - | Колбек смены значения |
| checked* | boolean | - | Отмечен ли компонент |
| label* | string | - | Лейбл |
| disabled | boolean | - | Деактивирован ли компонент |
| loading | boolean | - | Состояние загрузки |
| icon | ReactElement<any, string \| JSXElementConstructor<any>> | - | Иконка |
| className | string | - | CSS-класс |
| tabIndex | number | - | HTML tab index |
| size | enum Size: "xs", "s", "m", "l" | s | Размер |
ChipChoice.Custom
Props
| name | type | default value | description |
|---|---|---|---|
| label | string | - | Лейбл |
| disabled | boolean | - | Деактивирован ли компонент |
| loading | boolean | - | Состояние загрузки |
| icon | ReactElement<any, string \| JSXElementConstructor<any>> | - | Иконка |
| className | string | - | CSS-класс |
| tabIndex | number | - | HTML tab index |
| size | enum Size: "xs", "s", "m", "l" | - | Размер |
| onClick | MouseEventHandler<HTMLButtonElement \| HTMLDivElement> | - | Колбек обработки клика |
| showClearButton | boolean | true | Отображение кнопки очистки значения |
| placement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | - | Расположение выпадающего меню |
| widthStrategy | enum PopoverWidthStrategy: "auto", "gte", "eq" | gte | Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета. |
| dropDownClassName | string | - | |
| valueRender | (value: any) => ReactNode | - | Отображаемое значение |
| value | any | - | Фактическое значение. Используется для отображения кнопки очистки, если свойство showClearButton=true |
| onChange | (value: any) => void | - | |
| content | (props: CustomContentRenderProps<any>) => ReactNode | - | Контент выпадающего меню Принимает ReactNode Или функцию с аргументами: handleDroplistItemKeyDown: Обработчик нажатия клавиши на элемент выпадающего меню closeDroplist: Метод для закрытия выпадающего меню |
ChipChoice.Single
Props
| name | type | default value | description |
|---|---|---|---|
| options* | FilterOption<T>[] | - | Массив опций |
| label | string | - | Лейбл |
| disabled | boolean | - | Деактивирован ли компонент |
| loading | boolean | - | Состояние загрузки Флаг, отвещающий за состояние загрузки списка |
| icon | ReactElement<any, string \| JSXElementConstructor<any>> | - | Иконка |
| className | string | - | CSS-класс |
| tabIndex | number | - | HTML tab index |
| size | enum Size: "xs", "s", "m", "l" | - | Размер |
| onClick | MouseEventHandler<HTMLButtonElement \| HTMLDivElement> | - | Колбек обработки клика |
| showClearButton | boolean | true | Отображение кнопки очистки значения |
| placement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | - | Расположение выпадающего меню |
| widthStrategy | enum PopoverWidthStrategy: "auto", "gte", "eq" | gte | Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета. |
| dropDownClassName | string | - | |
| contentRender | (option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode | - | |
| filterFn | (option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean | - | |
| searchable | boolean | - | |
| footer | ReactNode ; | - | Кастомизируемый элемент в конце списка |
| footerActiveElementsRefs | RefObject<HTMLElement>[] | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
| selection | SelectionSingleState \| SelectionMultipleState | - | |
| scrollRef | RefObject<HTMLElement> | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
| scrollContainerRef | RefObject<HTMLElement> | - | Ссылка на контейнер, который скроллится |
| dataFiltered | boolean | - | |
| dataError | boolean | - | |
| noDataState | EmptyStateProps | - | Экран при отстутствии данных |
| noResultsState | EmptyStateProps | - | Экран при отстутствии результатов поиска или фильтров |
| errorDataState | EmptyStateProps | - | Экран при ошибке запроса |
| onChange | OnChangeHandler<any> | - | Controlled обработчик измения состояния |
| value | ItemId | - | Controlled состояние |
| defaultValue | ItemId | - | Начальное состояние |
| valueRender | (option?: BaseOption<T>) => ReactNode | - | Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label |
ChipChoice.Multiple
Props
| name | type | default value | description |
|---|---|---|---|
| options* | FilterOption<T>[] | - | Массив опций |
| label | string | - | Лейбл |
| disabled | boolean | - | Деактивирован ли компонент |
| loading | boolean | - | Состояние загрузки Флаг, отвещающий за состояние загрузки списка |
| icon | ReactElement<any, string \| JSXElementConstructor<any>> | - | Иконка |
| className | string | - | CSS-класс |
| tabIndex | number | - | HTML tab index |
| size | enum Size: "xs", "s", "m", "l" | - | Размер |
| onClick | MouseEventHandler<HTMLButtonElement \| HTMLDivElement> | - | Колбек обработки клика |
| showClearButton | boolean | true | Отображение кнопки очистки значения |
| placement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | - | Расположение выпадающего меню |
| widthStrategy | enum PopoverWidthStrategy: "auto", "gte", "eq" | gte | Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета. |
| dropDownClassName | string | - | |
| contentRender | (option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => ReactNode | - | |
| filterFn | (option: { label: ItemId; value?: ItemId; contentRenderProps?: T; }) => boolean | - | |
| searchable | boolean | - | |
| footer | ReactNode ; | - | Кастомизируемый элемент в конце списка |
| footerActiveElementsRefs | RefObject<HTMLElement>[] | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
| selection | SelectionSingleState \| SelectionMultipleState | - | |
| scrollRef | RefObject<HTMLElement> | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
| scrollContainerRef | RefObject<HTMLElement> | - | Ссылка на контейнер, который скроллится |
| dataFiltered | boolean | - | |
| dataError | boolean | - | |
| noDataState | EmptyStateProps | - | Экран при отстутствии данных |
| noResultsState | EmptyStateProps | - | Экран при отстутствии результатов поиска или фильтров |
| errorDataState | EmptyStateProps | - | Экран при ошибке запроса |
| onChange | OnChangeHandler<any> | - | Controlled обработчик измения состояния |
| value | ItemId[] | - | Controlled состояние |
| defaultValue | ItemId[] | - | Начальное состояние |
| valueRender | (option?: BaseOption<T>[]) => ReactNode | - | Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label |
| resetSearchOnOptionSelection | boolean | - | Поведение строки поиска при выборе опции из списка |
ChipChoice.Date
Props
| name | type | default value | description |
|---|---|---|---|
| label | string | - | Лейбл |
| disabled | boolean | - | Деактивирован ли компонент |
| loading | boolean | - | Состояние загрузки |
| icon | ReactElement<any, string \| JSXElementConstructor<any>> | - | Иконка |
| className | string | - | CSS-класс |
| tabIndex | number | - | HTML tab index |
| size | enum Size: "xs", "s", "m", "l" | - | Размер |
| onClick | MouseEventHandler<HTMLButtonElement \| HTMLDivElement> | - | Колбек обработки клика |
| showClearButton | boolean | true | Отображение кнопки очистки значения |
| placement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | - | Расположение выпадающего меню |
| widthStrategy | enum PopoverWidthStrategy: "auto", "gte", "eq" | gte | Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета. |
| dropDownClassName | string | - | |
| value | Date | - | Значение компонента |
| defaultValue | Date | - | Значение компонента по-умолчанию |
| onChange | (value: Date) => void | - | Колбек смены значения |
| valueRender | (value?: Date) => ReactNode | - | Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение |
| mode | "date" | "month" | - |
ChipChoice.DateRange
Props
| name | type | default value | description |
|---|---|---|---|
| label | string | - | Лейбл |
| disabled | boolean | - | Деактивирован ли компонент |
| loading | boolean | - | Состояние загрузки |
| icon | ReactElement<any, string \| JSXElementConstructor<any>> | - | Иконка |
| className | string | - | CSS-класс |
| tabIndex | number | - | HTML tab index |
| size | enum Size: "xs", "s", "m", "l" | - | Размер |
| onClick | MouseEventHandler<HTMLButtonElement \| HTMLDivElement> | - | Колбек обработки клика |
| showClearButton | boolean | true | Отображение кнопки очистки значения |
| placement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | - | Расположение выпадающего меню |
| widthStrategy | enum PopoverWidthStrategy: "auto", "gte", "eq" | gte | Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета. |
| dropDownClassName | string | - | |
| value | Range | - | Значение компонента |
| defaultValue | Range | - | Значение компонента по умолчанию |
| onChange | (value: Range) => void | - | Колбек смены значения |
| valueRender | (value?: Range) => ReactNode | - | Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений |
isAccordionOption
Props
| name | type | default value | description |
|---|
isBaseOption
Props
| name | type | default value | description |
|---|
isGroupOption
Props
| name | type | default value | description |
|---|
isGroupSelectOption
Props
| name | type | default value | description |
|---|
isNextListOption
Props
| name | type | default value | description |
|---|
ChipChoiceRow
Props
| name | type | default value | description |
|---|---|---|---|
| filters* | OmitBetter<ChipChoiceProps, "size" \| "onChange" \| "value" \| "defaultValue">[] | - | Массив чипов |
| value | FiltersState | - | Состояние фильтров |
| defaultValue | Partial<TState> | - | Начальное состояние фильтров |
| onChange | (filters: TState) => void | - | Колбек изменения состояния фильтров |
| size | enum ChipChoiceRowSize: "xs", "s", "m" | s | Размер |
| className | string | - | CSS-класс |
| showClearAllButton | boolean | true | Скрыть/показать кнопку очиски |
| clearAllButtonLabel | string | 'Clear all' | Текст кнопки очистки |
6 months ago
12 months ago
12 months ago
5 months ago
9 months ago
11 months ago
8 months ago
6 months ago
8 months ago
6 months ago
5 months ago
12 months ago
12 months ago
10 months ago
9 months ago
12 months ago
8 months ago
8 months ago
9 months ago
6 months ago
8 months ago
9 months ago
11 months ago
7 months ago
11 months ago
11 months ago
5 months ago
11 months ago
11 months ago
12 months ago
11 months ago
8 months ago
11 months ago
8 months ago
5 months ago
7 months ago
10 months ago
11 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
8 months ago
10 months ago
9 months ago
11 months ago
5 months ago
12 months ago
8 months ago
10 months ago
12 months ago
12 months ago
8 months ago
11 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
6 months ago
5 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
12 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
8 months ago
8 months ago
12 months ago
12 months ago
11 months ago
12 months ago
8 months ago
8 months ago
10 months ago
8 months ago
9 months ago
9 months ago
11 months ago
11 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
10 months ago
8 months ago
11 months ago
10 months ago
12 months ago
8 months ago
8 months ago
11 months ago
6 months ago
11 months ago
10 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago