wix-style-react
Version:
wix-style-react
293 lines (292 loc) • 9.97 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ContentSt = require("./Content.st.css");
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 _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SelectorList/Content/Content.js";
var DEFAULT_EMPTY = /*#__PURE__*/_react.default.createElement("div", {
className: _ContentSt.classes.defaultEmptyStateWrapper,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 3
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 5
}
}, "You don't have any items"));
var ListItems = _ref => {
var {
items,
checkIsSelected,
checkIndeterminate,
onToggle: _onToggle,
size,
imageSize,
imageShape,
multiple,
showDivider
} = _ref;
if (!items.length) {
return null;
}
return /*#__PURE__*/_react.default.createElement("ul", {
"data-hook": _SelectorList.dataHooks.list,
className: _ContentSt.classes.list,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 5
}
}, items.map((item, index) => /*#__PURE__*/_react.default.createElement(_Selector.default, {
id: item.id,
key: item.id,
dataHook: _SelectorList.dataHooks.selector,
size: size,
imageSize: imageSize,
imageShape: imageShape,
hasDivider: 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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 49,
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,
onToggle: () => {
!item.disabled && _onToggle(item);
},
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 9
}
})));
};
var SelectorListContent = _ref2 => {
var {
dataHook = _SelectorList.dataHooks.content,
items,
topScrollableContent,
onToggle,
emptyState = DEFAULT_EMPTY,
renderNoResults = searchValue => /*#__PURE__*/_react.default.createElement("div", {
className: _ContentSt.classes.defaultNoResultsFoundStateWrapper,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 7
}
}, "No items matched your search ", "\"".concat(searchValue, "\""))),
isLoading,
checkIsSelected,
checkIndeterminate,
isEmpty,
noResultsFound,
size,
imageSize,
imageShape,
multiple,
showDivider,
searchValue,
loadMore,
hasMore,
infiniteScrollRef
} = _ref2;
return /*#__PURE__*/_react.default.createElement("div", {
className: _ContentSt.classes.content,
"data-hook": dataHook,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 5
}
}, isLoading && /*#__PURE__*/_react.default.createElement("div", {
className: _ContentSt.classes.mainLoaderWrapper,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Loader.default, {
size: "medium",
dataHook: _SelectorList.dataHooks.mainLoader,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 11
}
})), isEmpty && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _SelectorList.dataHooks.emptyState,
className: _ContentSt.classes.emptyStateWrapper,
children: emptyState,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 101,
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: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_Loader.default, {
size: "small",
dataHook: _SelectorList.dataHooks.nextPageLoader,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 15
}
})),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 9
}
}, topScrollableContent, /*#__PURE__*/_react.default.createElement(ListItems, {
items,
checkIsSelected,
checkIndeterminate,
onToggle,
size,
imageSize,
imageShape,
showDivider,
multiple,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 11
}
})), noResultsFound && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _SelectorList.dataHooks.noResultsFoundState,
className: _ContentSt.classes.noResultsFoundStateWrapper,
children: renderNoResults(searchValue),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 9
}
}));
};
SelectorListContent.propTypes = {
/** applied as data-hook HTML attribute that can be used to create driver in testing */
dataHook: _propTypes.default.string,
/** array of selector items to show */
items: _propTypes.default.arrayOf(_propTypes.default.shape({
id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
title: _propTypes.default.node.isRequired,
subtitle: _propTypes.default.string,
extraText: _propTypes.default.string,
extraNode: _propTypes.default.node,
disabled: _propTypes.default.bool,
// show item as disabled, dont count it in "select all", exclude from `onOk`
selected: _propTypes.default.bool,
// force item as selected
image: _propTypes.default.node,
subtitleNode: _propTypes.default.node,
belowNode: _propTypes.default.node,
showBelowNodeOnSelect: _propTypes.default.bool
})),
/** Component/element that will be rendered above the list that will not be sticky, but scrollable */
topScrollableContent: _propTypes.default.node,
/** callback to trigger when toggling a selector, receives SelectorList item */
onToggle: _propTypes.default.func,
/**
* Component/element that will be rendered when there is nothing to display,
* i.e. empty `{items:[], totalCount: 0}` was returned on the first call to `dataSource`
* */
emptyState: _propTypes.default.node,
/**
* Function that will get the current `searchQuery` and should return the component/element
* that will be rendered when there are no items that suffice the entered search query
* */
renderNoResults: _propTypes.default.func,
/** whether list is loading */
isLoading: _propTypes.default.bool,
/** a function that receives an item and checks if it is selected */
checkIsSelected: _propTypes.default.func.isRequired,
/** a function that receives an item and checks if it is in indeterminate mode */
checkIndeterminate: _propTypes.default.func,
/** whether list is empty */
isEmpty: _propTypes.default.bool,
/** whether list search found no matching items */
noResultsFound: _propTypes.default.bool,
/** Controls the size of the selector list. Mostly has an effect on padding of the list and its items. */
size: _propTypes.default.oneOf(['small', 'medium']),
/** Image icon size */
imageSize: _propTypes.default.oneOf(['tiny', 'small', 'portrait', 'large', 'cinema']),
/**
* Image icon shape, `rectangular` or `circle`.<br>
* NOTE: `circle` is not compatible with `imageSize` of `portrait` or `cinema`
* */
imageShape: (props, propName, componentName) => {
if (['portrait', 'cinema'].includes(props.imageSize) && props[propName] === 'circle') {
return new Error("".concat(componentName, ": prop \"imageSize\" with value of \"").concat(props.imageSize, "\" is incompatible with prop imageShape with value of \"circle\" \u2014 use \"rectangular\" instead."));
}
},
/** display checkbox and allow multi selection */
multiple: _propTypes.default.bool,
/** search input value */
searchValue: _propTypes.default.string.isRequired,
/** A callback called when more items are requested to be rendered. */
loadMore: _propTypes.default.func.isRequired,
/** Whether there are more items to be loaded. */
hasMore: _propTypes.default.bool
};
var _default = exports.default = SelectorListContent;
//# sourceMappingURL=Content.js.map