0.29.3 • Published 1 month ago

@snack-uikit/list v0.29.3

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

List

Installation

npm i @snack-uikit/list

Changelog

kindFlattenItems

Props

nametypedefault valuedescription
items*Item[]-
prefixItemId-
parentIdItemId-

isAccordionItem

Props

nametypedefault valuedescription

isBaseItem

Props

nametypedefault valuedescription

isGroupItem

Props

nametypedefault valuedescription

isNextListItem

Props

nametypedefault valuedescription

isGroupSelectItem

Props

nametypedefault valuedescription

useGroupItemSelection

Props

nametypedefault valuedescription
id*ItemId-
items*ItemId[]-
allChildIds*ItemId[]-
disabledboolean-

isSelectionSingleProps

Props

nametypedefault valuedescription

isSelectionMultipleProps

Props

nametypedefault valuedescription

Droplist

Props

nametypedefault valuedescription
items*Item[]-Основные элементы списка
children*ReactNode \| ({onKeyDown}) => ReactNode * Рендер функция принимает аргументыonKeyDown- хендлер ввода, для поддержки управления с клавиатуры-Триггер для дроплиста
triggerElemRefRefObject<HTMLElement>-Ссылка на элемент-триггер для дроплиста
listRefRefObject<HTMLElement>-Ссылка на элемент выпадающего списка
closeDroplistOnItemClickboolean-Закрывать выпадающий список после клика на базовый айтем. Работает в режимах selection: 'none' | 'single'
triggerClassNamestring-CSS-класс триггера
openboolean-Управляет состоянием показан/не показан.
onOpenChange(isOpen: boolean) => void-Колбек отображения компонента. Срабатывает при изменении состояния open.
widthStrategyenum PopoverWidthStrategy: "auto", "gte", "eq"autoСтратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета.
triggerenum Trigger: "click", "hover", "focusVisible", "focus", "hoverAndFocusVisible", "hoverAndFocus", "clickAndFocusVisible"-Условие отображения поповера: - click - открывать по клику - hover - открывать по ховеру - focusVisible - открывать по focus-visible - focus - открывать по фокусу - hoverAndFocusVisible - открывать по ховеру и focus-visible - hoverAndFocus - открывать по ховеру и фокусу - clickAndFocusVisible - открывать по клику и focus-visible
placementenum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"topПоложение поповера относительно своего триггера (children).
classNamestring-CSS-класс
pinTopItem[]-Элементы списка, закрепленные сверху
pinBottomItem[]-Элементы списка, закрепленные снизу
footerReactNode ;-Кастомизируемый элемент в конце списка
footerActiveElementsRefsRefObject<HTMLElement>[]-Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка
searchSearchState-Настройки поисковой строки
collapseCollapseState{}Настройки раскрытия элементов
loadingboolean-Флаг, отвещающий за состояние загрузки списка
selectionSelectionSingleState \| SelectionMultipleState-
size"s" | "m" | "l"sРазмер списка
markerbooleantrueОтображать ли маркер у выбранного жлемента списка
contentRender(props: ContentRenderProps) => ReactNode-Рендер функция основного контента айтема
scrollboolean-Включить ли скролл для основной части списка
scrollRefRefObject<HTMLElement>-Ссылка на элемент, обозначающий самый конец прокручиваемого списка
scrollContainerRefRefObject<HTMLElement>-Ссылка на контейнер, который скроллится
untouchableScrollbarsboolean-Отключает возможность взаимодействовать со скролбарами мышью.
onScroll(event?: Event) => void-Колбек на скролл прокручиваемого списка
dataFilteredboolean-
dataErrorboolean-
noDataStateEmptyStateProps-Экран при отстутствии данных
noResultsStateEmptyStateProps-Экран при отстутствии результатов поиска или фильтров
errorDataStateEmptyStateProps-Экран при ошибке запроса

List

Props

nametypedefault valuedescription
items*Item[]-Основные элементы списка
pinTopItem[]-Элементы списка, закрепленные сверху
pinBottomItem[]-Элементы списка, закрепленные снизу
footerReactNode ;-Кастомизируемый элемент в конце списка
footerActiveElementsRefsRefObject<HTMLElement>[]-Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка
searchSearchState-Настройки поисковой строки
tabIndexnumber-Tab Index
collapseCollapseState{}Настройки раскрытия элементов
classNamestring-CSS-класс
onKeyDown(e: KeyboardEvent<HTMLElement>) => void-
loadingboolean-Флаг, отвещающий за состояние загрузки списка
selectionSelectionSingleState \| SelectionMultipleState-
size"s" | "m" | "l"sРазмер списка
markerbooleantrueОтображать ли маркер у выбранного жлемента списка
contentRender(props: ContentRenderProps) => ReactNode-Рендер функция основного контента айтема
scrollboolean-Включить ли скролл для основной части списка
scrollRefRefObject<HTMLElement>-Ссылка на элемент, обозначающий самый конец прокручиваемого списка
scrollContainerRefRefObject<HTMLElement>-Ссылка на контейнер, который скроллится
untouchableScrollbarsboolean-Отключает возможность взаимодействовать со скролбарами мышью.
onScroll(event?: Event) => void-Колбек на скролл прокручиваемого списка
dataFilteredboolean-
dataErrorboolean-
noDataStateEmptyStateProps-Экран при отстутствии данных
noResultsStateEmptyStateProps-Экран при отстутствии результатов поиска или фильтров
errorDataStateEmptyStateProps-Экран при ошибке запроса
refRef<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
keyKey-

ItemContent

Props

nametypedefault valuedescription
option*string \| number-
captionstring-
descriptionstring-
truncateTruncateProps-
disabledboolean-
classNamestring-CSS-класс
0.29.0

2 months ago

0.21.8

8 months ago

0.21.7

8 months ago

0.21.6

8 months ago

0.21.5

8 months ago

0.21.4

8 months ago

0.21.3

8 months ago

0.21.2

8 months ago

0.21.1

8 months ago

0.29.3

2 months ago

0.29.2

2 months ago

0.29.1

2 months ago

0.21.9

7 months ago

0.22.3

6 months ago

0.22.2

7 months ago

0.22.1

7 months ago

0.22.0

7 months ago

0.27.2

4 months ago

0.27.1

4 months ago

0.27.0

4 months ago

0.27.7

4 months ago

0.27.6

4 months ago

0.27.5

4 months ago

0.27.4

4 months ago

0.27.3

4 months ago

0.28.1

2 months ago

0.28.0

3 months ago

0.25.0

5 months ago

0.26.3

4 months ago

0.26.2

4 months ago

0.26.1

4 months ago

0.26.0

5 months ago

0.26.4

4 months ago

0.21.10

7 months ago

0.21.11

7 months ago

0.23.1

6 months ago

0.23.0

6 months ago

0.24.3

5 months ago

0.24.2

5 months ago

0.24.1

5 months ago

0.24.0

5 months ago

0.20.0

9 months ago

0.21.0

9 months ago

0.19.0

9 months ago

0.18.0

9 months ago

0.17.2

9 months ago

0.17.1

9 months ago

0.17.0

10 months ago

0.16.4

10 months ago

0.16.3

10 months ago

0.13.6

1 year ago

0.13.7

1 year ago

0.13.8

1 year ago

0.13.9

1 year ago

0.13.1

1 year ago

0.13.2

1 year ago

0.13.3

1 year ago

0.13.4

1 year ago

0.13.5

1 year ago

0.14.0

12 months ago

0.14.1

12 months ago

0.14.2

12 months ago

0.14.3

11 months ago

0.15.0

11 months ago

0.15.1

11 months ago

0.15.2

11 months ago

0.15.3

11 months ago

0.13.10

1 year ago

0.16.0

11 months ago

0.16.1

10 months ago

0.16.2

10 months ago

0.13.0

1 year ago

0.11.5

1 year ago

0.12.0

1 year ago

0.11.3

1 year ago

0.11.4

1 year ago

0.11.2

1 year ago

0.11.1

1 year ago

0.11.0

1 year ago

0.10.0

1 year ago

0.9.1

1 year ago

0.9.0

1 year ago

0.8.1

1 year ago

0.8.0

1 year ago

0.7.2

1 year ago

0.7.1

1 year ago

0.7.0

1 year ago

0.6.1

1 year ago

0.5.0

1 year ago

0.4.1

1 year ago

0.6.0

1 year ago

0.3.5

1 year ago

0.4.0

1 year ago

0.3.4

1 year ago

0.3.3

1 year ago

0.3.2

1 year ago

0.3.1

1 year ago

0.3.0

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago