@snack-uikit/list v0.29.3
List
Installation
npm i @snack-uikit/list
kindFlattenItems
Props
name | type | default value | description |
---|---|---|---|
items* | Item[] | - | |
prefix | ItemId | - | |
parentId | ItemId | - |
isAccordionItem
Props
name | type | default value | description |
---|
isBaseItem
Props
name | type | default value | description |
---|
isGroupItem
Props
name | type | default value | description |
---|
isNextListItem
Props
name | type | default value | description |
---|
isGroupSelectItem
Props
name | type | default value | description |
---|
useGroupItemSelection
Props
name | type | default value | description |
---|---|---|---|
id* | ItemId | - | |
items* | ItemId[] | - | |
allChildIds* | ItemId[] | - | |
disabled | boolean | - |
isSelectionSingleProps
Props
name | type | default value | description |
---|
isSelectionMultipleProps
Props
name | type | default value | description |
---|
Droplist
Props
name | type | default value | description |
---|---|---|---|
items* | Item[] | - | Основные элементы списка |
children* | ReactNode \| ({onKeyDown}) => ReactNode * Рендер функция принимает аргументы onKeyDown- хендлер ввода, для поддержки управления с клавиатуры | - | Триггер для дроплиста |
triggerElemRef | RefObject<HTMLElement> | - | Ссылка на элемент-триггер для дроплиста |
listRef | RefObject<HTMLElement> | - | Ссылка на элемент выпадающего списка |
closeDroplistOnItemClick | boolean | - | Закрывать выпадающий список после клика на базовый айтем. Работает в режимах selection: 'none' | 'single' |
triggerClassName | string | - | CSS-класс триггера |
open | boolean | - | Управляет состоянием показан/не показан. |
onOpenChange | (isOpen: boolean) => void | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
widthStrategy | enum PopoverWidthStrategy: "auto" , "gte" , "eq" | auto | Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета. |
trigger | enum Trigger: "click" , "hover" , "focusVisible" , "focus" , "hoverAndFocusVisible" , "hoverAndFocus" , "clickAndFocusVisible" | - | Условие отображения поповера: - click - открывать по клику - hover - открывать по ховеру - focusVisible - открывать по focus-visible - focus - открывать по фокусу - hoverAndFocusVisible - открывать по ховеру и focus-visible - hoverAndFocus - открывать по ховеру и фокусу - clickAndFocusVisible - открывать по клику и focus-visible |
placement | enum Placement: "left" , "left-start" , "left-end" , "right" , "right-start" , "right-end" , "top" , "top-start" , "top-end" , "bottom" , "bottom-start" , "bottom-end" | top | Положение поповера относительно своего триггера (children). |
className | string | - | CSS-класс |
pinTop | Item[] | - | Элементы списка, закрепленные сверху |
pinBottom | Item[] | - | Элементы списка, закрепленные снизу |
footer | ReactNode ; | - | Кастомизируемый элемент в конце списка |
footerActiveElementsRefs | RefObject<HTMLElement>[] | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
search | SearchState | - | Настройки поисковой строки |
collapse | CollapseState | {} | Настройки раскрытия элементов |
loading | boolean | - | Флаг, отвещающий за состояние загрузки списка |
selection | SelectionSingleState \| SelectionMultipleState | - | |
size | "s" | "m" | "l" | s | Размер списка |
marker | boolean | true | Отображать ли маркер у выбранного жлемента списка |
contentRender | (props: ContentRenderProps) => ReactNode | - | Рендер функция основного контента айтема |
scroll | boolean | - | Включить ли скролл для основной части списка |
scrollRef | RefObject<HTMLElement> | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
scrollContainerRef | RefObject<HTMLElement> | - | Ссылка на контейнер, который скроллится |
untouchableScrollbars | boolean | - | Отключает возможность взаимодействовать со скролбарами мышью. |
onScroll | (event?: Event) => void | - | Колбек на скролл прокручиваемого списка |
dataFiltered | boolean | - | |
dataError | boolean | - | |
noDataState | EmptyStateProps | - | Экран при отстутствии данных |
noResultsState | EmptyStateProps | - | Экран при отстутствии результатов поиска или фильтров |
errorDataState | EmptyStateProps | - | Экран при ошибке запроса |
List
Props
name | type | default value | description |
---|---|---|---|
items* | Item[] | - | Основные элементы списка |
pinTop | Item[] | - | Элементы списка, закрепленные сверху |
pinBottom | Item[] | - | Элементы списка, закрепленные снизу |
footer | ReactNode ; | - | Кастомизируемый элемент в конце списка |
footerActiveElementsRefs | RefObject<HTMLElement>[] | - | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
search | SearchState | - | Настройки поисковой строки |
tabIndex | number | - | Tab Index |
collapse | CollapseState | {} | Настройки раскрытия элементов |
className | string | - | CSS-класс |
onKeyDown | (e: KeyboardEvent<HTMLElement>) => void | - | |
loading | boolean | - | Флаг, отвещающий за состояние загрузки списка |
selection | SelectionSingleState \| SelectionMultipleState | - | |
size | "s" | "m" | "l" | s | Размер списка |
marker | boolean | true | Отображать ли маркер у выбранного жлемента списка |
contentRender | (props: ContentRenderProps) => ReactNode | - | Рендер функция основного контента айтема |
scroll | boolean | - | Включить ли скролл для основной части списка |
scrollRef | RefObject<HTMLElement> | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
scrollContainerRef | RefObject<HTMLElement> | - | Ссылка на контейнер, который скроллится |
untouchableScrollbars | boolean | - | Отключает возможность взаимодействовать со скролбарами мышью. |
onScroll | (event?: Event) => void | - | Колбек на скролл прокручиваемого списка |
dataFiltered | boolean | - | |
dataError | boolean | - | |
noDataState | EmptyStateProps | - | Экран при отстутствии данных |
noResultsState | EmptyStateProps | - | Экран при отстутствии результатов поиска или фильтров |
errorDataState | EmptyStateProps | - | Экран при ошибке запроса |
ref | Ref<HTMLElement> | - | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
key | Key | - |
ItemContent
Props
name | type | default value | description |
---|---|---|---|
option* | string \| number | - | |
caption | string | - | |
description | string | - | |
truncate | TruncateProps | - | |
disabled | boolean | - | |
className | string | - | CSS-класс |
4 months ago
6 months ago
7 months ago
5 months ago
6 months ago
3 months ago
2 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
2 months ago
2 months ago
2 months ago
7 months ago
7 months ago
5 months ago
1 month ago
8 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
8 months ago
6 months ago
8 months ago
4 months ago
7 months ago
7 months ago
7 months ago
3 months ago
4 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
2 months ago
4 months ago
8 months ago
6 months ago
5 months ago
2 months ago
3 months ago
3 months ago
1 month ago
5 months ago
3 months ago
8 months ago
4 months ago
8 months ago
6 months ago
1 month ago
7 months ago
6 months ago
5 months ago
2 months ago
5 months ago
4 months ago
6 months ago
5 months ago
7 months ago
8 months ago
3 months ago
1 month ago
3 months ago
4 months ago
4 months ago
2 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
4 months ago
7 months ago
6 months ago
5 months ago
7 months ago
7 months ago
4 months ago
7 months ago
7 months ago
1 month ago
6 months ago
6 months ago
4 months ago
7 months ago
4 months ago
2 months ago
6 months ago
7 months ago
5 months ago
5 months ago
7 months ago
5 months ago
4 months ago
5 months ago
5 months ago
7 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
9 months ago
10 months ago
9 months ago
9 months ago
10 months 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
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
11 months ago
12 months ago
12 months ago
1 year ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
10 months ago
11 months ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
11 months ago
1 year ago
11 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year 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