@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' | Текст кнопки очистки |
2 months ago
8 months ago
8 months ago
1 month ago
5 months ago
7 months ago
4 months ago
3 months ago
5 months ago
2 months ago
1 month ago
8 months ago
8 months ago
7 months ago
5 months ago
8 months ago
4 months ago
4 months ago
6 months ago
3 months ago
5 months ago
5 months ago
7 months ago
3 months ago
7 months ago
7 months ago
2 months ago
7 months ago
8 months ago
8 months ago
8 months ago
4 months ago
7 months ago
5 months ago
1 month ago
3 months ago
6 months ago
7 months ago
2 months ago
2 months ago
2 months ago
3 months ago
2 months ago
2 months ago
2 months ago
4 months ago
7 months ago
6 months ago
7 months ago
1 month ago
8 months ago
4 months ago
6 months ago
8 months ago
8 months ago
5 months ago
7 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
5 months ago
4 months ago
4 months ago
4 months ago
3 months ago
1 month ago
7 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
8 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
6 months ago
4 months ago
4 months ago
8 months ago
8 months ago
7 months ago
8 months ago
4 months ago
4 months ago
7 months ago
4 months ago
6 months ago
6 months ago
7 months ago
7 months ago
4 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
5 months ago
7 months ago
6 months ago
8 months ago
5 months ago
5 months ago
7 months ago
3 months ago
7 months ago
7 months ago
3 months ago
5 months ago
5 months ago
6 months ago
6 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
12 months ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
10 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
12 months ago
11 months ago
1 year ago
1 year ago
11 months ago
11 months ago
10 months ago
10 months ago
1 year ago
12 months ago
12 months ago
11 months ago
11 months ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
12 months ago
11 months ago
11 months ago
1 year ago
10 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
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