41 lines
1.6 KiB
JavaScript
41 lines
1.6 KiB
JavaScript
'use client';
|
|
import * as React from 'react';
|
|
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
import { useOverflowContext } from './overflowContext';
|
|
/**
|
|
* @internal
|
|
* Registers an overflow item
|
|
* @param id - unique identifier for the item used by the overflow manager
|
|
* @param priority - higher priority means the item overflows later
|
|
* @param groupId - assigns the item to a group, group visibility can be watched
|
|
* @param pinned - if true, the item will never overflow and will always be visible
|
|
* @returns ref to assign to an intrinsic HTML element
|
|
*/ export function useOverflowItem(id, priority, groupId, pinned) {
|
|
const ref = React.useRef(null);
|
|
const registerItem = useOverflowContext((v)=>v.registerItem);
|
|
useIsomorphicLayoutEffect(()=>{
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
if (typeof pinned !== 'undefined' && typeof priority !== 'undefined' && pinned) {
|
|
// eslint-disable-next-line no-console
|
|
console.error(`useOverflowItem: Overflow item with id "${id}" has pinned=true and priority<0. ` + `Pinned items are always visible and should not have defined priority.`);
|
|
}
|
|
}
|
|
if (ref.current) {
|
|
return registerItem({
|
|
element: ref.current,
|
|
id,
|
|
priority: priority !== null && priority !== void 0 ? priority : 0,
|
|
groupId,
|
|
pinned
|
|
});
|
|
}
|
|
}, [
|
|
id,
|
|
priority,
|
|
registerItem,
|
|
groupId,
|
|
pinned
|
|
]);
|
|
return ref;
|
|
}
|