@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
80 lines (79 loc) • 3.74 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useListItemRegister = void 0;
const react_1 = __importDefault(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const useListModel_1 = require("./useListModel");
const useListRenderItem_1 = require("./useListRenderItem");
/**
* This elemProps hook is the base of all item component hooks. It registers an item with a
* collection and sets the `data-id` that is used by other hooks. It should always be the last
* defined hook when using `composeHooks` (`composeHooks` executes hooks right to left and merges
* props left to right). It is used by `ListBox.Item` and all `*.Item` subcomponents.
*
* ```ts
* const useMyItem = composeHooks(
* useListItemSelect, // additional hooks go here
* useListItemRegister // always last
* );
* ```
*/
exports.useListItemRegister = (0, common_1.createElemPropsHook)(useListModel_1.useListModel)((model, ref, elemProps = {}) => {
const { state, events } = model;
const { item, virtual } = react_1.default.useContext(useListRenderItem_1.ListRenderItemContext);
const [localId, setLocalId] = react_1.default.useState(elemProps['data-id'] || (item === null || item === void 0 ? void 0 : item.id) || '');
const { localRef, elementRef } = (0, common_1.useLocalRef)((0, common_1.useForkRef)(ref, virtual ? model.state.UNSTABLE_virtual.measureElement : null));
// if the list is virtual, force the correct styling. Without this, weird things happen...
const style = virtual
? {
position: 'absolute',
top: 0,
left: 0,
transform: `translateY(${virtual.start}px)`,
}
: {};
(0, common_1.useMountLayout)(() => {
var _a;
if ((virtual === null || virtual === void 0 ? void 0 : virtual.index) === 0 && ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) {
// TODO: This update doesn't seem to be working correctly
// events.updateItemHeight?.(localRef.current!.clientHeight);
}
// if an item is already provided, there's nothing left to do
if (item) {
return;
}
const defaultId = state.indexRef.current;
const itemId = localId || (elemProps['data-has-children'] ? `${state.id}-` : '') + String(defaultId);
// TODO: Better lookup that using `items.find`. We need a more generic collection to handle seeing if an item already exists
// bail early if item already exists. This happens if items were already provided.
if (state.items.find(item => item.id === itemId)) {
return;
}
const registeredItem = {
id: itemId,
textValue: elemProps['data-text']
? elemProps['data-text']
: typeof elemProps.children === 'string'
? elemProps.children
: '',
};
events.registerItem(registeredItem);
setLocalId(itemId);
return () => {
events.unregisterItem({ id: itemId });
};
});
return {
ref: elementRef,
'data-id': localId,
disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
'aria-setsize': virtual ? state.UNSTABLE_virtual.options.count : undefined,
'aria-posinset': virtual ? item.index + 1 : undefined,
'data-index': virtual ? item.index : undefined,
style,
id: (0, common_1.slugify)(`${state.id}-${localId}`),
};
});