@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
54 lines (53 loc) • 2.36 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useListRenderItems = void 0;
const react_1 = __importDefault(require("react"));
/**
* 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.virtualItems.map(virtual => {
const item = model.state.items[virtual.index];
const child = children(item.value, virtual.index);
if (react_1.default.isValidElement(child)) {
return react_1.default.cloneElement(child, {
// We call this `virtual` instead of `virtualItem` to avoid a React render warning
// about capital letters in attributes. React thinks this will be applied to the DOM
// element even though we remove it later...
virtual,
key: item.id || item.index,
item,
});
}
return child;
})
: model.state.items.map(item => {
const child = children(item.value, item.index);
if (react_1.default.isValidElement(child)) {
return react_1.default.cloneElement(child, {
key: item.id || item.index,
item,
});
}
return child;
})
: children;
return items;
}
exports.useListRenderItems = useListRenderItems;