koval-ui/dist/src/internal/Transitions/Transition.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"Transition.cjs","sources":["../../../../src/internal/Transitions/Transition.tsx"],"sourcesContent":["import type {FC, MutableRefObject, ReactNode} from 'react';\nimport {useMemo} from 'react';\nimport {useState} from 'react';\n\nimport {useEventListener} from '@/internal/hooks/useEventListener.ts';\nimport {useIsFirstRender} from '@/internal/hooks/useIsFirstRender.tsx';\nimport {useSafeLayoutEffect} from '@/internal/hooks/useSafeLayoutEffect.ts';\n\nexport type Props = {\n    /** Control transition cycles. true starts enter cycle, false - exit. */\n    show?: boolean;\n    children?: ReactNode;\n    /**\n     * React reference to wrapper HTMLElement, transition CSS classes will be applied to\n     * @example\n     * const ref = useRef();\n     * <Transition nodeRef={ref}>\n     *     <div ref={ref}>{children}</div>\n     *  </Transition>\n     */\n    nodeRef: MutableRefObject<HTMLElement | null>;\n    /** CSS class to apply when exit transition starts */\n    exitClassName?: string;\n    /** CSS class to apply when exit transition is over */\n    exitDoneClassName?: string;\n    /** CSS class to apply when enter transition starts */\n    enterClassName?: string;\n    /** CSS class to apply when enter transition is over */\n    enterDoneClassName?: string;\n    /** Define if Transition component should unmount children according to show prop */\n    unmountNode?: boolean;\n    /** Callback triggers when exit transition is over */\n    onExit?: () => void;\n    /** Callback triggers when enter transition is over */\n    onEnter?: () => void;\n};\n\nexport const Transition: FC<Props> = ({\n    show = false,\n    children,\n    exitClassName = 'transition-exit',\n    exitDoneClassName = 'transition-exit-done',\n    enterClassName = 'transition-enter',\n    enterDoneClassName = 'transition-enter-done',\n    nodeRef,\n    unmountNode,\n    onExit = () => {},\n    onEnter = () => {},\n}) => {\n    const isFirstRender = useIsFirstRender();\n\n    const [shouldRender, setRender] = useState(show);\n\n    useSafeLayoutEffect(() => {\n        show && setRender(show);\n    }, [show]);\n\n    const classNames = useMemo(\n        () => ({\n            enter: enterClassName.split(' '),\n            exit: exitClassName.split(' '),\n            exitDone: exitDoneClassName.split(' '),\n            enterDone: enterDoneClassName.split(' '),\n        }),\n        [enterClassName, enterDoneClassName, exitClassName, exitDoneClassName]\n    );\n\n    useSafeLayoutEffect(() => {\n        if (show) {\n            nodeRef.current?.classList.add(...classNames.enter);\n            nodeRef.current?.classList.remove(...classNames.exit);\n            nodeRef.current?.classList.remove(...classNames.exitDone);\n        } else {\n            nodeRef.current?.classList.add(...classNames.exit);\n            nodeRef.current?.classList.remove(...classNames.enter);\n            nodeRef.current?.classList.remove(...classNames.enterDone);\n        }\n    }, [classNames, nodeRef, show, shouldRender, isFirstRender]);\n\n    const handleAnimationEnd = () => {\n        if (show && shouldRender) {\n            onEnter();\n            nodeRef.current?.classList.remove(...classNames.enter);\n            nodeRef.current?.classList.add(...classNames.enterDone);\n        } else if (shouldRender) {\n            onExit();\n            nodeRef.current?.classList.remove(...classNames.exit);\n            nodeRef.current?.classList.add(...classNames.exitDone);\n            setRender(false);\n        }\n    };\n\n    useEventListener('animationend', handleAnimationEnd, nodeRef.current);\n\n    return (shouldRender || !unmountNode) && children;\n};\n"],"names":["Transition","show","children","exitClassName","exitDoneClassName","enterClassName","enterDoneClassName","nodeRef","unmountNode","onExit","onEnter","isFirstRender","useIsFirstRender","shouldRender","setRender","useState","useSafeLayoutEffect","classNames","useMemo","handleAnimationEnd","useEventListener"],"mappings":"0PAqCaA,EAAwB,CAAC,CAClC,KAAAC,EAAO,GACP,SAAAC,EACA,cAAAC,EAAgB,kBAChB,kBAAAC,EAAoB,uBACpB,eAAAC,EAAiB,mBACjB,mBAAAC,EAAqB,wBACrB,QAAAC,EACA,YAAAC,EACA,OAAAC,EAAS,IAAM,CAAC,EAChB,QAAAC,EAAU,IAAM,CAAC,CACrB,IAAM,CACF,MAAMC,EAAgBC,EAAAA,iBAAA,EAEhB,CAACC,EAAcC,CAAS,EAAIC,EAAAA,SAASd,CAAI,EAE/Ce,EAAAA,oBAAoB,IAAM,CACtBf,GAAQa,EAAUb,CAAI,CAC1B,EAAG,CAACA,CAAI,CAAC,EAET,MAAMgB,EAAaC,EAAAA,QACf,KAAO,CACH,MAAOb,EAAe,MAAM,GAAG,EAC/B,KAAMF,EAAc,MAAM,GAAG,EAC7B,SAAUC,EAAkB,MAAM,GAAG,EACrC,UAAWE,EAAmB,MAAM,GAAG,CAAA,GAE3C,CAACD,EAAgBC,EAAoBH,EAAeC,CAAiB,CAAA,EAGzEY,EAAAA,oBAAoB,IAAM,CAClBf,GACAM,EAAQ,SAAS,UAAU,IAAI,GAAGU,EAAW,KAAK,EAClDV,EAAQ,SAAS,UAAU,OAAO,GAAGU,EAAW,IAAI,EACpDV,EAAQ,SAAS,UAAU,OAAO,GAAGU,EAAW,QAAQ,IAExDV,EAAQ,SAAS,UAAU,IAAI,GAAGU,EAAW,IAAI,EACjDV,EAAQ,SAAS,UAAU,OAAO,GAAGU,EAAW,KAAK,EACrDV,EAAQ,SAAS,UAAU,OAAO,GAAGU,EAAW,SAAS,EAEjE,EAAG,CAACA,EAAYV,EAASN,EAAMY,EAAcF,CAAa,CAAC,EAE3D,MAAMQ,EAAqB,IAAM,CACzBlB,GAAQY,GACRH,EAAA,EACAH,EAAQ,SAAS,UAAU,OAAO,GAAGU,EAAW,KAAK,EACrDV,EAAQ,SAAS,UAAU,IAAI,GAAGU,EAAW,SAAS,GAC/CJ,IACPJ,EAAA,EACAF,EAAQ,SAAS,UAAU,OAAO,GAAGU,EAAW,IAAI,EACpDV,EAAQ,SAAS,UAAU,IAAI,GAAGU,EAAW,QAAQ,EACrDH,EAAU,EAAK,EAEvB,EAEAM,OAAAA,EAAAA,iBAAiB,eAAgBD,EAAoBZ,EAAQ,OAAO,GAE5DM,GAAgB,CAACL,IAAgBN,CAC7C"}