57 lines
2.4 KiB
JavaScript
57 lines
2.4 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import { mergeClasses } from '@griffel/react';
|
||
|
|
import { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
|
||
|
|
import { OverflowContext } from '../overflowContext';
|
||
|
|
import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
|
||
|
|
import { useOverflowStyles } from './useOverflowStyles.styles';
|
||
|
|
/**
|
||
|
|
* Provides an OverflowContext for OverflowItem descendants.
|
||
|
|
*/ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
||
|
|
const styles = useOverflowStyles();
|
||
|
|
const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;
|
||
|
|
const [overflowState, setOverflowState] = React.useState({
|
||
|
|
hasOverflow: false,
|
||
|
|
itemVisibility: {},
|
||
|
|
groupVisibility: {}
|
||
|
|
});
|
||
|
|
// useOverflowContainer wraps this method in a useEventCallback.
|
||
|
|
const update = (data)=>{
|
||
|
|
const { visibleItems, invisibleItems, groupVisibility } = data;
|
||
|
|
const itemVisibility = {};
|
||
|
|
visibleItems.forEach((item)=>{
|
||
|
|
itemVisibility[item.id] = true;
|
||
|
|
});
|
||
|
|
invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
|
||
|
|
setOverflowState(()=>{
|
||
|
|
return {
|
||
|
|
hasOverflow: data.invisibleItems.length > 0,
|
||
|
|
itemVisibility,
|
||
|
|
groupVisibility
|
||
|
|
};
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(update, {
|
||
|
|
overflowDirection,
|
||
|
|
overflowAxis,
|
||
|
|
padding,
|
||
|
|
minimumVisible,
|
||
|
|
onUpdateItemVisibility: updateVisibilityAttribute
|
||
|
|
});
|
||
|
|
const child = getTriggerChild(children);
|
||
|
|
const clonedChild = applyTriggerPropsToChildren(children, {
|
||
|
|
ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),
|
||
|
|
className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)
|
||
|
|
});
|
||
|
|
return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {
|
||
|
|
value: {
|
||
|
|
itemVisibility: overflowState.itemVisibility,
|
||
|
|
groupVisibility: overflowState.groupVisibility,
|
||
|
|
hasOverflow: overflowState.hasOverflow,
|
||
|
|
registerItem,
|
||
|
|
updateOverflow,
|
||
|
|
registerOverflowMenu,
|
||
|
|
registerDivider
|
||
|
|
}
|
||
|
|
}, clonedChild);
|
||
|
|
});
|