@wix/design-system
Version:
@wix/design-system
40 lines • 1.6 kB
JavaScript
import { useTransitionStyles, } from '@floating-ui/react';
const getDuration = (transition = 0, type) => typeof transition === 'number' ? transition : (transition?.[type] ?? 0);
/**
* PopoverNext Content transition hook.
*/
export const useTransition = ({ context, openDelay = 0, closeDelay = 0, duration = 0, opacity, transformOrigin, transform, }) => {
const openDuration = getDuration(duration, 'open');
const closeDuration = getDuration(duration, 'close');
const transitionStyles = {
duration: {
open: openDuration + openDelay,
close: closeDuration + closeDelay,
},
common: ({ side }) => ({
transitionProperty: 'opacity',
transformOrigin: typeof transformOrigin === 'string'
? transformOrigin
: transformOrigin?.(side),
}),
initial: ({ side }) => ({
opacity: 0,
...(opacity ? { opacity: opacity.close } : {}),
transform: typeof transform === 'string' ? transform : transform?.(side),
}),
open: {
opacity: 1,
...(opacity ? { opacity: opacity.open } : {}),
transitionDelay: `${openDelay}ms`,
transitionDuration: `${openDuration}ms`,
},
close: {
opacity: 0,
...(opacity ? { opacity: opacity.close } : {}),
transitionDelay: `${closeDelay}ms`,
transitionDuration: `${closeDuration}ms`,
},
};
return useTransitionStyles(context, transitionStyles);
};
//# sourceMappingURL=useTransition.js.map