@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
49 lines (48 loc) • 1.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useOverflowListItemMeasure = void 0;
const common_1 = require("@workday/canvas-kit-react/common");
const useOverflowListModel_1 = require("./useOverflowListModel");
const hiddenStyles = {
position: 'absolute',
left: -99999,
};
/**
* This elemProps hook measures a list item and reports it to an `OverflowListModel`. This is used
* in overflow detection.
*
* ```ts
* const useMyItem = composeHooks(
* useOverflowListItemMeasure,
* useListRegisterItem,
* )
* ```
*/
exports.useOverflowListItemMeasure = (0, common_1.createElemPropsHook)(useOverflowListModel_1.useOverflowListModel)((model, ref, elemProps = {}) => {
const { elementRef, localRef } = (0, common_1.useLocalRef)(ref);
const name = elemProps['data-id'] || '';
(0, common_1.useMountLayout)(() => {
if (localRef.current) {
const styles = getComputedStyle(localRef.current);
model.events.addItemSize({
id: name,
width: localRef.current.offsetWidth +
parseFloat(styles.marginLeft) +
parseFloat(styles.marginRight),
height: localRef.current.offsetHeight +
parseFloat(styles.marginTop) +
parseFloat(styles.marginBottom),
});
}
return () => {
model.events.removeItemSize({ id: name });
};
});
const hidden = model.state.hiddenIds.includes(name);
return {
ref: elementRef,
'aria-hidden': hidden || undefined,
style: hidden ? hiddenStyles : {},
inert: hidden ? '' : undefined,
};
});