next-nprogress-emotion/dist/next-nprogress-emotion.cjs.development.js

Theme aware NProgress component to use in Next.js apps using Emotion or ThemeUI.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var NProgress = _interopDefault(require('nprogress'));
var Router = _interopDefault(require('next/router'));
var react = require('@emotion/react');

/**
 * Theme aware drop in NProgress component.
 */

var NProgressContainer = function NProgressContainer(_ref) {
  var color = _ref.color,
      spinner = _ref.spinner,
      showAfterMs = _ref.showAfterMs,
      options = _ref.options;
  var timer = React.useRef();

  var routeChangeStart = function routeChangeStart() {
    window.clearTimeout(timer.current);
    timer.current = window.setTimeout(NProgress.start, showAfterMs);
  };

  var routeChangeEnd = function routeChangeEnd() {
    window.clearTimeout(timer.current);
    NProgress.done();
  };

  React.useEffect(function () {
    if (options) {
      NProgress.configure(options);
    }

    Router.events.on('routeChangeStart', routeChangeStart);
    Router.events.on('routeChangeComplete', routeChangeEnd);
    Router.events.on('routeChangeError', routeChangeEnd);
    return function () {
      clearTimeout(timer.current);
      Router.events.off('routeChangeStart', routeChangeStart);
      Router.events.off('routeChangeComplete', routeChangeEnd);
      Router.events.off('routeChangeError', routeChangeEnd);
    };
  });
  return React__default.createElement(react.Global, {
    styles: function styles(theme) {
      var _theme$colors;

      // tries to find a corresponding color in the theme but falls back
      // to whatever color is supplied
      var themeColor = (theme == null ? void 0 : (_theme$colors = theme.colors) == null ? void 0 : _theme$colors[color]) || color;
      return {
        '#nprogress': {
          pointerEvents: 'none'
        },
        '#nprogress .bar': {
          background: themeColor,
          position: 'fixed',
          zIndex: 1031,
          top: 0,
          left: 0,
          width: '100%',
          height: '2px'
        },
        '#nprogress .peg': {
          display: 'block',
          position: 'absolute',
          right: '0px',
          width: '100px',
          height: '100%',
          boxShadow: "0 0 10px " + themeColor + ", 0 0 5px " + themeColor,
          opacity: 1,
          transform: 'rotate(3deg) translate(0px, -4px)'
        },
        '#nprogress .spinner': {
          display: spinner ? 'block' : 'none',
          position: 'fixed',
          zIndex: 1031,
          top: '15px',
          right: '15px'
        },
        '#nprogress .spinner-icon': {
          width: '18px',
          height: '18px',
          boxSizing: 'border-box',
          border: 'solid 2px transparent',
          borderTopColor: themeColor,
          borderLeftColor: themeColor,
          borderRadius: '50%',
          animation: 'nprogress-spinner 400ms linear infinite'
        },
        '.nprogress-custom-parent': {
          overflow: 'hidden',
          position: 'relative'
        },
        '.nprogress-custom-parent #nprogress .spinner': {
          position: 'absolute'
        },
        '.nprogress-custom-parent #nprogress .bar': {
          position: 'absolute'
        },
        '@keyframes nprogress-spinner': {
          '0%': {
            transform: 'rotate(0deg)'
          },
          '100%': {
            transform: 'rotate(360deg)'
          }
        }
      };
    }
  });
};

NProgressContainer.defaultProps = {
  color: 'primary',
  showAfterMs: 300,
  spinner: true
};

exports.default = NProgressContainer;
//# sourceMappingURL=next-nprogress-emotion.cjs.development.js.map