@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
80 lines (79 loc) • 3.59 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");
/**
* 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)(({ state, events }, ref, elemProps = {}) => {
var _a, _b;
const [localId, setLocalId] = react_1.default.useState(elemProps['data-id'] || ((_a = elemProps.item) === null || _a === void 0 ? void 0 : _a.id) || '');
const { localRef, elementRef } = (0, common_1.useLocalRef)((0, common_1.useForkRef)(ref, (_b = elemProps.virtual) === null || _b === void 0 ? void 0 : _b.measureRef));
// if the list is virtual, force the correct styling. Without this, weird things happen...
const style = elemProps.virtual
? {
position: 'absolute',
top: 0,
left: 0,
transform: `translateY(${elemProps.virtual.start}px)`,
}
: {};
(0, common_1.useMountLayout)(() => {
var _a, _b;
if (((_a = elemProps.virtual) === null || _a === void 0 ? void 0 : _a.index) === 0 && ((_b = localRef.current) === null || _b === void 0 ? void 0 : _b.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 (elemProps.item) {
return;
}
const defaultId = state.indexRef.current;
const itemId = localId || 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;
}
events.registerItem({
item: {
id: itemId,
},
textValue: elemProps['data-text']
? elemProps['data-text']
: typeof elemProps.children === 'string'
? elemProps.children
: '',
});
setLocalId(itemId);
return () => {
events.unregisterItem({ id: itemId });
};
});
return {
ref: elementRef,
'data-id': localId,
disabled: elemProps.disabled || state.nonInteractiveIds.includes(localId) ? true : undefined,
item: null,
virtual: null,
'aria-setsize': elemProps.virtual ? state.UNSTABLE_virtual.totalSize : undefined,
'aria-posinset': elemProps.virtual ? elemProps.item.index + 1 : undefined,
style,
id: (0, common_1.slugify)(`${state.id}-${localId}`),
};
});