/** @jsx jsx */ import {useState, useEffect} from 'react'; import {jsx} from 'theme-ui'; import {useDeck, deckModes} from '@mdxp/core'; import {Place} from '@mdxp/components'; // Pop-up message that comes after Xms of inactivity on a certain step. // USE SPARINGLY as it is quite annoying const Popup = ({children, time = 5000, step = 0}) => { const {stepIndex, mode} = useDeck(); const [showPopup, setPopup] = useState(false); const style = (showPopup && (step === stepIndex) && (mode === deckModes.NORMAL)) ? { opacity: 1, transition: 'all 0.3s ease-out', width: '75%' } : { opacity: 0, transform: 'translate(-50%, 25%)', width: '75%' }; useEffect(() => { if (step === stepIndex) { const timer = setTimeout(() => setPopup(true), time); return () => clearTimeout(timer); } setPopup(false); }); return ( <Place bottom="15px" sx={{ ...style, bg: t => t.colors.MDXPYellow.slice(0, -1) + '22)', padding: 2, paddingLeft: t => t.space[3] - t.space[1], borderLeftWidth: t => t.space[1], borderLeftStyle: 'solid', borderLeftColor: 'MDXPYellow', borderRadius: '10px', '& p': {my: 0}, fontSize: 'xsmall', lineHeight: '140%' }} > {children} </Place> ); }; export default Popup;