@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
36 lines (35 loc) • 1.95 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useListRenderItems = exports.ListRenderItemContext = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
exports.ListRenderItemContext = react_1.default.createContext({});
/**
* This hook is meant to be used inside the render function of `List` style components. It is used
* by `ListBox`. This hook gives list-based components their static and dynamic APIs to handle list
* items. This hook should only be used if you want to implement your own List. For example,
* `Tabs.List` uses this hook, but `Menu.List` uses `ListBox` which uses this hook.
*
* ```tsx
* const MyList = createContainer('ul')({
* modelHook: useListModel,
* })((elemProps, Element, model) => {
* return <Element {...elemProps}>{useListRenderItems(model, elemProps.children)}</Element>;
* });
```
*/
function useListRenderItems(model, children) {
const items = typeof children === 'function' ? (model.state.isVirtualized ? (model.state.UNSTABLE_virtual.getVirtualItems().map(virtual => {
const item = model.state.items[virtual.index];
const child = children(item.value, virtual.index);
return ((0, jsx_runtime_1.jsx)(exports.ListRenderItemContext.Provider, { value: { item, virtual }, children: child }, item.id || item.index));
})) : (model.state.items.map(item => {
const child = children(item.value, item.index);
return ((0, jsx_runtime_1.jsx)(exports.ListRenderItemContext.Provider, { value: { item }, children: child }, item.id || item.index));
}))) : ((0, jsx_runtime_1.jsx)(exports.ListRenderItemContext.Provider, { value: {}, children: children }));
return items;
}
exports.useListRenderItems = useListRenderItems;