@saas-ui/nprogress/dist/index.mjs.map

Nprogress Component

{"version":3,"sources":["../src/nprogress.tsx","../src/next-router.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  chakra,\n  forwardRef,\n  HTMLChakraProps,\n  ThemingProps,\n  omitThemingProps,\n  useColorModeValue,\n  useMultiStyleConfig,\n  SystemStyleObject,\n} from '@chakra-ui/react'\n\nimport { cx } from '@chakra-ui/utils'\n\nimport { useNProgress } from '@tanem/react-nprogress'\n\ninterface NProgressOptions {\n  /**\n   * Set to true to start the progress animation.\n   */\n  isAnimating: boolean\n}\n\nexport interface NProgressProps\n  extends NProgressOptions,\n    HTMLChakraProps<'div'>,\n    ThemingProps<'SuiNProgress'> {}\n/**\n * Show feedback when switching pages and content is loading in the background.\n *\n * @see Docs https://saas-ui.dev/docs/components/feedback/nprogress\n */\nexport const NProgress = forwardRef<NProgressProps, 'div'>((props, ref) => {\n  const styles = useMultiStyleConfig('SuiNProgress', props)\n\n  const { colorScheme: c } = props\n\n  const { children, isAnimating, ...containerProps } = omitThemingProps(props)\n\n  const { animationDuration, isFinished, progress } = useNProgress({\n    isAnimating,\n  })\n\n  const barStyles: SystemStyleObject = {\n    width: '100%',\n    height: '2px',\n    bg: useColorModeValue(`${c}.500`, `${c}.300`),\n    ...styles.bar,\n  }\n\n  return (\n    <chakra.div\n      ref={ref}\n      __css={styles.container}\n      position=\"fixed\"\n      top=\"0\"\n      left=\"0\"\n      width=\"100%\"\n      opacity={isFinished ? 0 : 1}\n      zIndex=\"overlay\"\n      transition={`opacity ${animationDuration}ms linear`}\n      {...containerProps}\n      className={cx('sui-nprogress', props.className)}\n    >\n      <chakra.div\n        __css={barStyles}\n        ml={`${(-1 + progress) * 100}%;`}\n        transition={`margin-left ${animationDuration}ms linear`}\n      ></chakra.div>\n    </chakra.div>\n  )\n})\n\nNProgress.displayName = 'NProgress'\n","import * as React from 'react'\nimport { useEffect, useState } from 'react'\n\nimport { NProgress } from './nprogress'\n\nexport const NProgressNextRouter = ({ router }: any) => {\n  const [state, setState] = useState({\n    isRouteChanging: false,\n    loadingKey: 0,\n  })\n\n  useEffect(() => {\n    const handleRouteChangeStart = () => {\n      setState((prevState) => ({\n        ...prevState,\n        isRouteChanging: true,\n        loadingKey: prevState.loadingKey ^ 1,\n      }))\n    }\n\n    const handleRouteChangeEnd = () => {\n      setState((prevState) => ({\n        ...prevState,\n        isRouteChanging: false,\n      }))\n    }\n\n    router.events.on('routeChangeStart', handleRouteChangeStart)\n    router.events.on('routeChangeComplete', handleRouteChangeEnd)\n    router.events.on('routeChangeError', handleRouteChangeEnd)\n\n    return () => {\n      router.events.off('routeChangeStart', handleRouteChangeStart)\n      router.events.off('routeChangeComplete', handleRouteChangeEnd)\n      router.events.off('routeChangeError', handleRouteChangeEnd)\n    }\n  }, [router.events])\n\n  const isAnimating = state.isRouteChanging\n\n  return (\n    <>\n      <NProgress isAnimating={isAnimating} key={state.loadingKey} />\n    </>\n  )\n}\n"],"mappings":";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,UAAU;AAEnB,SAAS,oBAAoB;AAkDvB;AAhCC,IAAM,YAAY,WAAkC,CAAC,OAAO,QAAQ;AACzE,QAAM,SAAS,oBAAoB,gBAAgB,KAAK;AAExD,QAAM,EAAE,aAAa,EAAE,IAAI;AAE3B,QAAM,EAAE,UAAU,aAAa,GAAG,eAAe,IAAI,iBAAiB,KAAK;AAE3E,QAAM,EAAE,mBAAmB,YAAY,SAAS,IAAI,aAAa;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,QAAM,YAA+B;AAAA,IACnC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,IAAI,kBAAkB,GAAG,CAAC,QAAQ,GAAG,CAAC,MAAM;AAAA,IAC5C,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,OAAO,OAAO;AAAA,MACd,UAAS;AAAA,MACT,KAAI;AAAA,MACJ,MAAK;AAAA,MACL,OAAM;AAAA,MACN,SAAS,aAAa,IAAI;AAAA,MAC1B,QAAO;AAAA,MACP,YAAY,WAAW,iBAAiB;AAAA,MACvC,GAAG;AAAA,MACJ,WAAW,GAAG,iBAAiB,MAAM,SAAS;AAAA,MAE9C;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UACC,OAAO;AAAA,UACP,IAAI,IAAI,KAAK,YAAY,GAAG;AAAA,UAC5B,YAAY,eAAe,iBAAiB;AAAA;AAAA,MAC7C;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,UAAU,cAAc;;;ACzExB,SAAS,WAAW,gBAAgB;AAwChC,mBACE,OAAAA,YADF;AApCG,IAAM,sBAAsB,CAAC,EAAE,OAAO,MAAW;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS;AAAA,IACjC,iBAAiB;AAAA,IACjB,YAAY;AAAA,EACd,CAAC;AAED,YAAU,MAAM;AACd,UAAM,yBAAyB,MAAM;AACnC,eAAS,CAAC,eAAe;AAAA,QACvB,GAAG;AAAA,QACH,iBAAiB;AAAA,QACjB,YAAY,UAAU,aAAa;AAAA,MACrC,EAAE;AAAA,IACJ;AAEA,UAAM,uBAAuB,MAAM;AACjC,eAAS,CAAC,eAAe;AAAA,QACvB,GAAG;AAAA,QACH,iBAAiB;AAAA,MACnB,EAAE;AAAA,IACJ;AAEA,WAAO,OAAO,GAAG,oBAAoB,sBAAsB;AAC3D,WAAO,OAAO,GAAG,uBAAuB,oBAAoB;AAC5D,WAAO,OAAO,GAAG,oBAAoB,oBAAoB;AAEzD,WAAO,MAAM;AACX,aAAO,OAAO,IAAI,oBAAoB,sBAAsB;AAC5D,aAAO,OAAO,IAAI,uBAAuB,oBAAoB;AAC7D,aAAO,OAAO,IAAI,oBAAoB,oBAAoB;AAAA,IAC5D;AAAA,EACF,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,cAAc,MAAM;AAE1B,SACE,gBAAAA,KAAA,YACE,0BAAAA,KAAC,aAAU,eAA+B,MAAM,UAAY,GAC9D;AAEJ;","names":["jsx"]}