58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
import * as React from 'react';
|
|
import { presenceMotionSlot } from '@fluentui/react-motion';
|
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
import { InlineDrawerMotion } from '../../shared/drawerMotions';
|
|
import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
|
|
const STATIC_MOTION = {
|
|
active: true,
|
|
canRender: true,
|
|
ref: React.createRef(),
|
|
type: 'idle'
|
|
};
|
|
/**
|
|
* Create the state required to render InlineDrawer.
|
|
*
|
|
* The returned state can be modified with hooks such as useInlineDrawerStyles_unstable,
|
|
* before being passed to renderInlineDrawer_unstable.
|
|
*
|
|
* @param props - props from this instance of InlineDrawer
|
|
* @param ref - reference to root HTMLElement of InlineDrawer
|
|
*/ export const useInlineDrawer_unstable = (props, ref)=>{
|
|
const { size, position, open } = useDrawerDefaultProps(props);
|
|
const { separator = false, surfaceMotion } = props;
|
|
const { dir } = useFluent();
|
|
const state = {
|
|
components: {
|
|
root: 'div',
|
|
// casting from internal type that has required properties
|
|
// to external type that only has optional properties
|
|
// converting to unknown first as both Function component signatures are not compatible
|
|
surfaceMotion: InlineDrawerMotion
|
|
},
|
|
root: slot.always(getIntrinsicElementProps('div', {
|
|
...props,
|
|
ref
|
|
}), {
|
|
elementType: 'div'
|
|
}),
|
|
open,
|
|
position,
|
|
size,
|
|
separator,
|
|
surfaceMotion: presenceMotionSlot(surfaceMotion, {
|
|
elementType: InlineDrawerMotion,
|
|
defaultProps: {
|
|
position,
|
|
size,
|
|
dir,
|
|
visible: open,
|
|
unmountOnExit: true
|
|
}
|
|
}),
|
|
// Deprecated props
|
|
motion: STATIC_MOTION
|
|
};
|
|
return state;
|
|
};
|