UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

39 lines (38 loc) 1.56 kB
import React from 'react'; import { createElemPropsHook, useMountLayout, useLocalRef } from '@workday/canvas-kit-react/common'; import { useOverflowListModel } from './useOverflowListModel'; // use a hidden style instead of `hidden` attribute for measurement purposes. `hidden` elements have no dimensions const hiddenStyle = { position: 'absolute', left: -99999, }; /** * This elemProps hook measures an overflow list target and reports it to an `OverflowListModel`. * This is used in overflow detection. */ export const useOverflowListTarget = createElemPropsHook(useOverflowListModel)((model, ref) => { const { elementRef, localRef } = useLocalRef(ref); // track first render to force correct size calculations const firstRender = React.useRef(true); useMountLayout(() => { firstRender.current = false; if (localRef.current) { const styles = getComputedStyle(localRef.current); model.events.setOverflowTargetSize({ width: localRef.current.offsetWidth + parseFloat(styles.marginLeft) + parseFloat(styles.marginRight), height: localRef.current.offsetHeight + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom), }); } }); const isHidden = !model.state.hiddenIds.length; return { ref: elementRef, 'aria-hidden': isHidden, tabIndex: isHidden ? -1 : 0, style: isHidden ? hiddenStyle : undefined, }; });