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","_a","_b","_c","_d","_e","_f","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,CAAA,CACpB,IAAM,CACF,MAAMC,EAAgBC,EAAAA,iBAAiB,EAEjC,CAACC,EAAcC,CAAS,EAAIC,EAAAA,SAASd,CAAI,EAE/Ce,EAAAA,oBAAoB,IAAM,CACtBf,GAAQa,EAAUb,CAAI,CAAA,EACvB,CAACA,CAAI,CAAC,EAET,MAAMgB,EAAaC,EAAA,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,CACzE,EAEAY,EAAAA,oBAAoB,IAAM,iBAClBf,IACAkB,EAAAZ,EAAQ,UAAR,MAAAY,EAAiB,UAAU,IAAI,GAAGF,EAAW,QAC7CG,EAAAb,EAAQ,UAAR,MAAAa,EAAiB,UAAU,OAAO,GAAGH,EAAW,OAChDI,EAAAd,EAAQ,UAAR,MAAAc,EAAiB,UAAU,OAAO,GAAGJ,EAAW,aAEhDK,EAAAf,EAAQ,UAAR,MAAAe,EAAiB,UAAU,IAAI,GAAGL,EAAW,OAC7CM,EAAAhB,EAAQ,UAAR,MAAAgB,EAAiB,UAAU,OAAO,GAAGN,EAAW,QAChDO,EAAAjB,EAAQ,UAAR,MAAAiB,EAAiB,UAAU,OAAO,GAAGP,EAAW,WACpD,EACD,CAACA,EAAYV,EAASN,EAAMY,EAAcF,CAAa,CAAC,EAE3D,MAAMc,EAAqB,IAAM,aACzBxB,GAAQY,GACAH,EAAA,GACRS,EAAAZ,EAAQ,UAAR,MAAAY,EAAiB,UAAU,OAAO,GAAGF,EAAW,QAChDG,EAAAb,EAAQ,UAAR,MAAAa,EAAiB,UAAU,IAAI,GAAGH,EAAW,YACtCJ,IACAJ,EAAA,GACPY,EAAAd,EAAQ,UAAR,MAAAc,EAAiB,UAAU,OAAO,GAAGJ,EAAW,OAChDK,EAAAf,EAAQ,UAAR,MAAAe,EAAiB,UAAU,IAAI,GAAGL,EAAW,UAC7CH,EAAU,EAAK,EAEvB,EAEiBY,OAAAA,EAAAA,iBAAA,eAAgBD,EAAoBlB,EAAQ,OAAO,GAE5DM,GAAgB,CAACL,IAAgBN,CAC7C"}