wix-style-react
Version:
wix-style-react
32 lines • 1.55 kB
JavaScript
import React, { forwardRef, useEffect } from 'react';
import { ToastItem } from './components/ToastItem/ToastItem';
import { useToastContainer } from './hooks/useToastContainer';
import { st, classes } from './Toast.st.css';
import { motion, AnimatePresence } from 'framer-motion';
const Toast = forwardRef(({ offset = '26px', zIndex = 5500, ...propsWithNoDefaults }, ref) => {
const props = {
offset,
zIndex,
...propsWithNoDefaults,
};
const { toasts, containerRef } = useToastContainer(props);
useEffect(() => {
if (ref) {
ref.current =
containerRef.current;
}
// TODO: fix ESLint error
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const motionProps = {
initial: { y: 150, x: 0, opacity: 0 },
animate: { y: 0, x: 0, opacity: 1 },
exit: { opacity: 0 },
};
return (React.createElement("div", { ref: containerRef, className: st(classes.toastContainer, props.className), "data-hook": props.dataHook, style: { zIndex: props.zIndex, bottom: props.offset } },
React.createElement(AnimatePresence, null, toasts.map(({ content, props: toastProps }) => (React.createElement(motion.div, { key: `toast-${toastProps.key}`, layout: true, transition: { default: { ease: 'linear' } }, ...motionProps },
React.createElement(ToastItem, { ...toastProps, key: `toast-${toastProps.key}` }, content)))))));
});
Toast.displayName = 'Toast';
export default Toast;
//# sourceMappingURL=Toast.js.map