@wix/design-system
Version:
@wix/design-system
61 lines • 4.72 kB
JavaScript
import React, { useCallback, useRef, useMemo } from 'react';
import uniqueId from 'lodash/uniqueId';
import { classes } from './Content.st.css.js';
import { dataHooks } from '../SelectorList.helpers';
import Selector from '../../Selector';
import Loader from '../../Loader';
import InfiniteScroll from '../../utils/InfiniteScroll';
import Text from '../../Text';
import useScrollKeyboardNavigation from './useScrollKeyboardNavigation';
const DEFAULT_EMPTY = (React.createElement("div", { className: classes.defaultEmptyStateWrapper },
React.createElement(Text, null, "You don't have any items")));
const ListItems = ({ items, checkIsSelected, checkIndeterminate, onToggle, size, imageSize, imageShape, multiple, showDivider, activeItemId, getItemDomId, }) => {
if (!items.length) {
return null;
}
return (React.createElement("ul", { "data-hook": dataHooks.list, className: classes.list }, items.map((item, index) => (React.createElement(Selector, { id: getItemDomId(item.id), key: item.id, dataHook: dataHooks.selector, size: size, imageSize: imageSize, imageShape: imageShape, showDivider: showDivider && index + 1 < items.length, toggleType: multiple ? 'checkbox' : 'radio', image: item.image, title: item.title, subtitle: item.subtitle, extraNode: item.extraNode
? item.extraNode
: item.extraText && React.createElement(Text, { secondary: true }, item.extraText), subtitleNode: item.subtitleNode, belowNode: item.belowNode, showBelowNodeOnSelect: item.showBelowNodeOnSelect, isSelected: checkIsSelected(item), indeterminate: checkIndeterminate?.(item), isDisabled: item.disabled, isActive: item.id === activeItemId, toggleTooltipProps: item.toggleTooltipProps, onToggle: () => {
!item.disabled && onToggle(item);
} })))));
};
const SelectorListContent = ({ dataHook = dataHooks.content, items, topScrollableContent, onToggle, emptyState = DEFAULT_EMPTY, renderNoResults = searchValue => (React.createElement("div", { className: classes.defaultNoResultsFoundStateWrapper },
React.createElement(Text, null,
"No items matched your search ",
`"${searchValue}"`))), isLoading, checkIsSelected, checkIndeterminate, isEmpty, noResultsFound, size, imageSize, imageShape, multiple, showDivider, searchValue, loadMore, hasMore, infiniteScrollRef, }) => {
const containerRef = useRef(null);
// Generate a unique instance ID for this SelectorList (stable across re-renders)
const listInstanceId = useMemo(() => uniqueId('selector-list-'), []);
// Function to get DOM id for an item - passed to hook for scrolling
const getItemDomId = useCallback(itemId => `${listInstanceId}-item-${itemId}`, [listInstanceId]);
const { handleKeyDown, handleFocus, handleBlur, handleMouseDown, activeItemId, } = useScrollKeyboardNavigation({
containerRef,
items,
getItemDomId,
multiple,
onToggle,
});
// Get DOM id for aria-activedescendant
const activeDescendantId = activeItemId !== null ? getItemDomId(activeItemId) : undefined;
return (React.createElement("div", { ref: containerRef, className: classes.content, "data-hook": dataHook, tabIndex: 0, role: "listbox", "aria-activedescendant": activeDescendantId, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown },
isLoading && (React.createElement("div", { className: classes.mainLoaderWrapper },
React.createElement(Loader, { size: "medium", dataHook: dataHooks.mainLoader }))),
isEmpty && (React.createElement("div", { "data-hook": dataHooks.emptyState, className: classes.emptyStateWrapper, children: emptyState })),
items.length > 0 && (React.createElement(InfiniteScroll, { key: searchValue, ref: infiniteScrollRef, data: items, loadMore: loadMore, hasMore: hasMore, useWindow: false, initialLoad: false, loader: React.createElement("div", { className: classes.nextPageLoaderWrapper },
React.createElement(Loader, { size: "small", dataHook: dataHooks.nextPageLoader })) },
topScrollableContent,
React.createElement(ListItems, { items,
checkIsSelected,
checkIndeterminate,
onToggle,
size,
imageSize,
imageShape,
showDivider,
multiple,
activeItemId,
getItemDomId }))),
noResultsFound && (React.createElement("div", { "data-hook": dataHooks.noResultsFoundState, className: classes.noResultsFoundStateWrapper, children: renderNoResults(searchValue) }))));
};
export default SelectorListContent;
//# sourceMappingURL=Content.js.map