29 lines
971 B
JavaScript
29 lines
971 B
JavaScript
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
import { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';
|
|
/**
|
|
* A presence component for a MessageBar to enter and exit from a MessageBarGroup.
|
|
* It has an optional enter transition of a slide-in and fade-in,
|
|
* when the `animate` prop is set to `'both'`.
|
|
* It always has an exit transition of a fade-out.
|
|
*/ export const MessageBarMotion = createPresenceComponent(({ animate })=>{
|
|
const duration = motionTokens.durationGentle;
|
|
return {
|
|
enter: animate === 'both' ? [
|
|
fadeAtom({
|
|
direction: 'enter',
|
|
duration
|
|
}),
|
|
slideAtom({
|
|
direction: 'enter',
|
|
outY: '-100%',
|
|
duration
|
|
})
|
|
] : [],
|
|
// Always exit with a fade
|
|
exit: fadeAtom({
|
|
direction: 'exit',
|
|
duration
|
|
})
|
|
};
|
|
});
|