@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,iBAAiB;CAC/B,MAAM,sBAAA,GAAA,eAAA,mBAAuC;CAC7C,MAAM,eAAe,MAAM,uBAAuB,qBAAqB;CACvE,MAAM,CAAC,oBAAoB,0BAAA,GAAA,MAAA,UAAkC,eAAe,IAAI,SAAS;CACzF,MAAM,CAAC,kBAAkB,cAAA,GAAA,MAAA,UAAwC,UAAU,YAAY,SAAS;CAChG,MAAM,wBAAA,GAAA,MAAA,QAAsC,GAAG;CAC/C,MAAM,mBAAA,GAAA,MAAA,QAAiC,GAAG;CAC1C,MAAM,UAAA,GAAA,MAAA,QAAgB,GAAG;CAEzB,SAAS,mBAAmB;AAC1B,SAAO,aAAa,qBAAqB,QAAQ;AACjD,SAAO,aAAa,gBAAgB,QAAQ;AAC5C,uBAAqB,OAAO,QAAQ;;CAGtC,MAAM,qBAAqB,gBAAyB;AAClD,oBAAkB;EAClB,MAAM,aAAa,cAAc,UAAU;EAC3C,MAAM,UAAU,cAAc,YAAY;EAC1C,MAAM,wBAAwB,eAAe,IAAI,cAAc,WAAW;AAC1E,wBAAsB,sBAAsB;AAE5C,MAAI,0BAA0B,GAAG;AAC/B,UAAO,eAAe,cAAc,YAAY;AAChD,UAAO,YAAY,cAAc,SAAS;AAC1C,aAAU,cAAc,YAAY,SAAS;QAE7C,QAAO,UAAU,4BAA4B;AAC3C,aAAA,QAAS,gBAAgB;AACvB,cAAU,cAAc,iBAAiB,cAAc;KACvD;AACF,UAAO,UAAU,4BAA4B;AAC3C,WAAO,eAAe,cAAc,YAAY;AAChD,cAAU,cAAc,aAAa,UAAU;AAC/C,yBAAqB,UAAU,OAAO,iBAAiB;AACrD,YAAO,YAAY,cAAc,SAAS;AAC1C,eAAU,cAAc,YAAY,SAAS;OAC5C,sBAAsB;KACzB;IACF;;CAIN,MAAM,6BAA6B,gBAAyB;AAC1D,oBAAkB;AAElB,MAAI,QADU,cAAc,aAAa,eACpB,UAAU;AAC7B,qBAAkB,YAAY;AAC9B;;AAEF,kBAAgB,UAAU,OAAO,iBACzB;AACJ,qBAAkB,YAAY;KAEhC,cAAc,aAAa,UAC5B;;AAGH,EAAA,GAAA,eAAA,oBAAmB;AACjB,4BAA0B,QAAQ;IACjC,CAAC,QAAQ,CAAC;AAEb,EAAA,GAAA,MAAA,uBACc;AACV,oBAAkB;IAEpB,EAAE,CACH;AAED,QAAO;EACL;EACA;EACA,0BAA0B,kBAAkB;EAC7C"}