@patreon/studio/module/components/Toast/Toast.jsx

Patreon Studio Design System

'use client';
import React, { useEffect, useMemo, useState } from 'react';
import { useTimeout } from '../../hooks/useTimeout';
import { report } from '../../utilities/deprecation';
import { CLOSE_DELAY, ENTRY_DELAY } from './constants';
import { StyledToast } from './styled-components';
export const Toast = ({ action, contentBuilder, 'data-tag': dataTag, duration, isClosing, testMode, onClose, }) => {
    if (action) {
        report(`The "action" property for toasts is deprecated. Actions should be implemented by adding buttons/links/etc. to the toast contents in JSX form.`);
    }
    const [state, setState] = useState(testMode ? 'visible' : 'entering');
    const [paused, setPaused] = useState(false);
    // If isClosing changes, update the state
    useEffect(() => {
        if (isClosing) {
            setState('leaving');
        }
    }, [isClosing]);
    // TODO (legacied consistent-return)
    // This failure is legacied in and should be updated. DO NOT COPY.
    // eslint-disable-next-line consistent-return
    const delay = useMemo(() => {
        switch (state) {
            case 'entering':
                return ENTRY_DELAY;
            case 'visible':
                if (duration === 'infinite' || paused) {
                    return null;
                }
                return duration;
            case 'leaving':
                return CLOSE_DELAY;
        }
    }, [duration, paused, state]);
    useTimeout(() => {
        switch (state) {
            case 'entering':
                setState('visible');
                break;
            case 'visible':
                setState('leaving');
                break;
            case 'leaving':
                onClose();
                break;
        }
    }, delay, [state]);
    const children = useMemo(() => contentBuilder(setState), [contentBuilder, setState]);
    return (<StyledToast data-tag={dataTag} onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)} visible={state === 'visible'}>
      {children}
    </StyledToast>);
};
//# sourceMappingURL=Toast.jsx.map