@wix/design-system
Version:
@wix/design-system
274 lines (270 loc) • 10.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var _ContentSt = require("./Content.st.css.js");
var _SelectorList = require("../SelectorList.helpers");
var _Selector = _interopRequireDefault(require("../../Selector"));
var _Loader = _interopRequireDefault(require("../../Loader"));
var _InfiniteScroll = _interopRequireDefault(require("../../utils/InfiniteScroll"));
var _Text = _interopRequireDefault(require("../../Text"));
var _useScrollKeyboardNavigation = _interopRequireDefault(require("./useScrollKeyboardNavigation"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SelectorList/Content/Content.jsx",
_this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var DEFAULT_EMPTY = /*#__PURE__*/_react["default"].createElement("div", {
className: _ContentSt.classes.defaultEmptyStateWrapper,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 3
}
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 5
}
}, "You don't have any items"));
var ListItems = function ListItems(_ref) {
var items = _ref.items,
checkIsSelected = _ref.checkIsSelected,
checkIndeterminate = _ref.checkIndeterminate,
_onToggle = _ref.onToggle,
size = _ref.size,
imageSize = _ref.imageSize,
imageShape = _ref.imageShape,
multiple = _ref.multiple,
showDivider = _ref.showDivider,
activeItemId = _ref.activeItemId,
getItemDomId = _ref.getItemDomId;
if (!items.length) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("ul", {
"data-hook": _SelectorList.dataHooks.list,
className: _ContentSt.classes.list,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 5
}
}, items.map(function (item, index) {
return /*#__PURE__*/_react["default"].createElement(_Selector["default"], {
id: getItemDomId(item.id),
key: item.id,
dataHook: _SelectorList.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 && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
secondary: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 35
}
}, item.extraText),
subtitleNode: item.subtitleNode,
belowNode: item.belowNode,
showBelowNodeOnSelect: item.showBelowNodeOnSelect,
isSelected: checkIsSelected(item),
indeterminate: checkIndeterminate == null ? void 0 : checkIndeterminate(item),
isDisabled: item.disabled,
isActive: item.id === activeItemId,
toggleTooltipProps: item.toggleTooltipProps,
onToggle: function onToggle() {
!item.disabled && _onToggle(item);
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 9
}
});
}));
};
var SelectorListContent = function SelectorListContent(_ref2) {
var _ref2$dataHook = _ref2.dataHook,
dataHook = _ref2$dataHook === void 0 ? _SelectorList.dataHooks.content : _ref2$dataHook,
items = _ref2.items,
topScrollableContent = _ref2.topScrollableContent,
onToggle = _ref2.onToggle,
_ref2$emptyState = _ref2.emptyState,
emptyState = _ref2$emptyState === void 0 ? DEFAULT_EMPTY : _ref2$emptyState,
_ref2$renderNoResults = _ref2.renderNoResults,
renderNoResults = _ref2$renderNoResults === void 0 ? function (searchValue) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: _ContentSt.classes.defaultNoResultsFoundStateWrapper,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 5
}
}, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 7
}
}, "No items matched your search ", "\"".concat(searchValue, "\"")));
} : _ref2$renderNoResults,
isLoading = _ref2.isLoading,
checkIsSelected = _ref2.checkIsSelected,
checkIndeterminate = _ref2.checkIndeterminate,
isEmpty = _ref2.isEmpty,
noResultsFound = _ref2.noResultsFound,
size = _ref2.size,
imageSize = _ref2.imageSize,
imageShape = _ref2.imageShape,
multiple = _ref2.multiple,
showDivider = _ref2.showDivider,
searchValue = _ref2.searchValue,
loadMore = _ref2.loadMore,
hasMore = _ref2.hasMore,
infiniteScrollRef = _ref2.infiniteScrollRef;
var containerRef = (0, _react.useRef)(null);
// Generate a unique instance ID for this SelectorList (stable across re-renders)
var listInstanceId = (0, _react.useMemo)(function () {
return (0, _uniqueId["default"])('selector-list-');
}, []);
// Function to get DOM id for an item - passed to hook for scrolling
var getItemDomId = (0, _react.useCallback)(function (itemId) {
return "".concat(listInstanceId, "-item-").concat(itemId);
}, [listInstanceId]);
var _useScrollKeyboardNav = (0, _useScrollKeyboardNavigation["default"])({
containerRef: containerRef,
items: items,
getItemDomId: getItemDomId,
multiple: multiple,
onToggle: onToggle
}),
handleKeyDown = _useScrollKeyboardNav.handleKeyDown,
handleFocus = _useScrollKeyboardNav.handleFocus,
handleBlur = _useScrollKeyboardNav.handleBlur,
handleMouseDown = _useScrollKeyboardNav.handleMouseDown,
activeItemId = _useScrollKeyboardNav.activeItemId;
// Get DOM id for aria-activedescendant
var activeDescendantId = activeItemId !== null ? getItemDomId(activeItemId) : undefined;
return /*#__PURE__*/_react["default"].createElement("div", {
ref: containerRef,
className: _ContentSt.classes.content,
"data-hook": dataHook,
tabIndex: 0,
role: "listbox",
"aria-activedescendant": activeDescendantId,
onKeyDown: handleKeyDown,
onFocus: handleFocus,
onBlur: handleBlur,
onMouseDown: handleMouseDown,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 5
}
}, isLoading && /*#__PURE__*/_react["default"].createElement("div", {
className: _ContentSt.classes.mainLoaderWrapper,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
size: "medium",
dataHook: _SelectorList.dataHooks.mainLoader,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 11
}
})), isEmpty && /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _SelectorList.dataHooks.emptyState,
className: _ContentSt.classes.emptyStateWrapper,
children: emptyState,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 9
}
}), items.length > 0 && /*#__PURE__*/_react["default"].createElement(_InfiniteScroll["default"], {
key: searchValue,
ref: infiniteScrollRef,
data: items,
loadMore: loadMore,
hasMore: hasMore,
useWindow: false,
initialLoad: false,
loader: /*#__PURE__*/_react["default"].createElement("div", {
className: _ContentSt.classes.nextPageLoaderWrapper,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
size: "small",
dataHook: _SelectorList.dataHooks.nextPageLoader,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 15
}
})),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 9
}
}, topScrollableContent, /*#__PURE__*/_react["default"].createElement(ListItems, {
items: items,
checkIsSelected: checkIsSelected,
checkIndeterminate: checkIndeterminate,
onToggle: onToggle,
size: size,
imageSize: imageSize,
imageShape: imageShape,
showDivider: showDivider,
multiple: multiple,
activeItemId: activeItemId,
getItemDomId: getItemDomId,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 11
}
})), noResultsFound && /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _SelectorList.dataHooks.noResultsFoundState,
className: _ContentSt.classes.noResultsFoundStateWrapper,
children: renderNoResults(searchValue),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 9
}
}));
};
var _default = exports["default"] = SelectorListContent;