@wix/design-system
Version:
@wix/design-system
69 lines • 2.52 kB
JavaScript
import React, { forwardRef, isValidElement } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { ToastContext } from '../Toast/ToastContext';
import { st, classes } from './ToastContainer.st.css.js';
const toastTransition = {
duration: 0.3,
ease: [0, 0, 0.2, 1],
};
const noTransition = {
duration: 0,
};
const initialState = {
opacity: 0,
transition: {
duration: 0.3,
ease: [0.4, 0, 1, 1],
},
};
const multiToastInitialState = {
translateY: '100%',
...initialState,
};
const toastVisibleState = {
translateY: '0%',
opacity: 1,
transition: {
duration: 0.3,
ease: [0.4, 0, 1, 1],
},
};
const toastHiddenState = {
translateY: '0%',
opacity: 0,
};
const multiToastExitedState = {
translateY: '0%',
opacity: 0,
transition: {
duration: 0.3,
ease: [0.4, 0, 1, 1],
},
};
const toastExitState = {
opacity: 0,
};
const ToastContainer = forwardRef(({ offset, zIndex, dataHook, position, maxToasts = 1, className, children }, ref) => {
const toasts = React.Children.toArray(children).reverse();
const getAnimationState = () => {
const transition = maxToasts === 1 ? noTransition : toastTransition;
const initial = maxToasts === 1 ? initialState : multiToastInitialState;
const exit = maxToasts === 1 ? toastExitState : multiToastExitedState;
return { transition, initial, exit };
};
return (React.createElement("div", { ref: ref, className: st(classes.root, className), "data-hook": dataHook, style: { bottom: offset, zIndex, position: position || 'fixed' } },
React.createElement(AnimatePresence, null, toasts.map((toast, index) => {
if (!isValidElement(toast)) {
return null;
}
const hidden = index >= maxToasts;
const containerKey = `toast-container-${toast.key}`;
const { transition, initial, exit } = getAnimationState();
return (React.createElement(motion.div, { key: containerKey, "data-hook": containerKey, "data-hidden": hidden, layout: true, transition: transition, initial: initial, animate: hidden ? toastHiddenState : toastVisibleState, exit: exit, style: {
pointerEvents: hidden ? 'none' : undefined,
} },
React.createElement(ToastContext.Provider, { value: { hidden } }, toast)));
}))));
});
export default ToastContainer;
//# sourceMappingURL=ToastContainer.js.map