@mantine/core/cjs/components/Transition/use-transition.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"use-transition.cjs","names":["useMantineTheme"],"sources":["../../../src/components/Transition/use-transition.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useDidUpdate, useReducedMotion } from '@mantine/hooks';\nimport { useMantineTheme } from '../../core';\n\nexport type TransitionStatus =\n  | 'entered'\n  | 'exited'\n  | 'entering'\n  | 'exiting'\n  | 'pre-exiting'\n  | 'pre-entering';\n\ninterface UseTransition {\n  duration: number;\n  exitDuration: number;\n  timingFunction: string;\n  mounted: boolean;\n  onEnter?: () => void;\n  onExit?: () => void;\n  onEntered?: () => void;\n  onExited?: () => void;\n  enterDelay?: number;\n  exitDelay?: number;\n}\n\nexport function useTransition({\n  duration,\n  exitDuration,\n  timingFunction,\n  mounted,\n  onEnter,\n  onExit,\n  onEntered,\n  onExited,\n  enterDelay,\n  exitDelay,\n}: UseTransition) {\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const [transitionDuration, setTransitionDuration] = useState(reduceMotion ? 0 : duration);\n  const [transitionStatus, setStatus] = useState<TransitionStatus>(mounted ? 'entered' : 'exited');\n  const transitionTimeoutRef = useRef<number>(-1);\n  const delayTimeoutRef = useRef<number>(-1);\n  const rafRef = useRef(-1);\n\n  function clearAllTimeouts() {\n    window.clearTimeout(transitionTimeoutRef.current);\n    window.clearTimeout(delayTimeoutRef.current);\n    cancelAnimationFrame(rafRef.current);\n  }\n\n  const handleStateChange = (shouldMount: boolean) => {\n    clearAllTimeouts();\n    const preHandler = shouldMount ? onEnter : onExit;\n    const handler = shouldMount ? onEntered : onExited;\n    const newTransitionDuration = reduceMotion ? 0 : shouldMount ? duration : exitDuration;\n    setTransitionDuration(newTransitionDuration);\n\n    if (newTransitionDuration === 0) {\n      typeof preHandler === 'function' && preHandler();\n      typeof handler === 'function' && handler();\n      setStatus(shouldMount ? 'entered' : 'exited');\n    } else {\n      rafRef.current = requestAnimationFrame(() => {\n        ReactDOM.flushSync(() => {\n          setStatus(shouldMount ? 'pre-entering' : 'pre-exiting');\n        });\n        rafRef.current = requestAnimationFrame(() => {\n          typeof preHandler === 'function' && preHandler();\n          setStatus(shouldMount ? 'entering' : 'exiting');\n          transitionTimeoutRef.current = window.setTimeout(() => {\n            typeof handler === 'function' && handler();\n            setStatus(shouldMount ? 'entered' : 'exited');\n          }, newTransitionDuration);\n        });\n      });\n    }\n  };\n\n  const handleTransitionWithDelay = (shouldMount: boolean) => {\n    clearAllTimeouts();\n    const delay = shouldMount ? enterDelay : exitDelay;\n    if (typeof delay !== 'number') {\n      handleStateChange(shouldMount);\n      return;\n    }\n    delayTimeoutRef.current = window.setTimeout(\n      () => {\n        handleStateChange(shouldMount);\n      },\n      shouldMount ? enterDelay : exitDelay\n    );\n  };\n\n  useDidUpdate(() => {\n    handleTransitionWithDelay(mounted);\n  }, [mounted]);\n\n  useEffect(\n    () => () => {\n      clearAllTimeouts();\n    },\n    []\n  );\n\n  return {\n    transitionDuration,\n    transitionStatus,\n    transitionTimingFunction: timingFunction || 'ease',\n  };\n}\n"],"mappings":";;;;;;;;AA0BA,SAAgB,cAAc,EAC5B,UACA,cACA,gBACA,SACA,SACA,QACA,WACA,UACA,YACA,aACgB;CAChB,MAAM,QAAQA,6BAAAA,gBAAgB;CAC9B,MAAM,sBAAA,GAAA,eAAA,kBAAsC;CAC5C,MAAM,eAAe,MAAM,uBAAuB,qBAAqB;CACvE,MAAM,CAAC,oBAAoB,0BAAA,GAAA,MAAA,UAAkC,eAAe,IAAI,QAAQ;CACxF,MAAM,CAAC,kBAAkB,cAAA,GAAA,MAAA,UAAwC,UAAU,YAAY,QAAQ;CAC/F,MAAM,wBAAA,GAAA,MAAA,QAAsC,EAAE;CAC9C,MAAM,mBAAA,GAAA,MAAA,QAAiC,EAAE;CACzC,MAAM,UAAA,GAAA,MAAA,QAAgB,EAAE;CAExB,SAAS,mBAAmB;EAC1B,OAAO,aAAa,qBAAqB,OAAO;EAChD,OAAO,aAAa,gBAAgB,OAAO;EAC3C,qBAAqB,OAAO,OAAO;CACrC;CAEA,MAAM,qBAAqB,gBAAyB;EAClD,iBAAiB;EACjB,MAAM,aAAa,cAAc,UAAU;EAC3C,MAAM,UAAU,cAAc,YAAY;EAC1C,MAAM,wBAAwB,eAAe,IAAI,cAAc,WAAW;EAC1E,sBAAsB,qBAAqB;EAE3C,IAAI,0BAA0B,GAAG;GAC/B,OAAO,eAAe,cAAc,WAAW;GAC/C,OAAO,YAAY,cAAc,QAAQ;GACzC,UAAU,cAAc,YAAY,QAAQ;EAC9C,OACE,OAAO,UAAU,4BAA4B;GAC3C,UAAA,QAAS,gBAAgB;IACvB,UAAU,cAAc,iBAAiB,aAAa;GACxD,CAAC;GACD,OAAO,UAAU,4BAA4B;IAC3C,OAAO,eAAe,cAAc,WAAW;IAC/C,UAAU,cAAc,aAAa,SAAS;IAC9C,qBAAqB,UAAU,OAAO,iBAAiB;KACrD,OAAO,YAAY,cAAc,QAAQ;KACzC,UAAU,cAAc,YAAY,QAAQ;IAC9C,GAAG,qBAAqB;GAC1B,CAAC;EACH,CAAC;CAEL;CAEA,MAAM,6BAA6B,gBAAyB;EAC1D,iBAAiB;EAEjB,IAAI,QADU,cAAc,aAAa,eACpB,UAAU;GAC7B,kBAAkB,WAAW;GAC7B;EACF;EACA,gBAAgB,UAAU,OAAO,iBACzB;GACJ,kBAAkB,WAAW;EAC/B,GACA,cAAc,aAAa,SAC7B;CACF;CAEA,CAAA,GAAA,eAAA,oBAAmB;EACjB,0BAA0B,OAAO;CACnC,GAAG,CAAC,OAAO,CAAC;CAEZ,CAAA,GAAA,MAAA,uBACc;EACV,iBAAiB;CACnB,GACA,CAAC,CACH;CAEA,OAAO;EACL;EACA;EACA,0BAA0B,kBAAkB;CAC9C;AACF"}