redwood-nprogress/dist/redwood-nprogress.esm.js

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

import React, { useEffect } from 'react';
import NProgress from 'nprogress';
import { Global } from '@emotion/core';
import { usePageLoadingContext } from '@redwoodjs/router';

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

var NProgressContainer = function NProgressContainer(_ref) {
  var color = _ref.color,
      withSpinner = _ref.withSpinner,
      options = _ref.options;
  // configure nprogress with the passed in options on mount and updates
  useEffect(function () {
    if (options) {
      NProgress.configure(options);
    }
  }, [options]); // obtain page loading state from router

  var _usePageLoadingContex = usePageLoadingContext(),
      loading = _usePageLoadingContex.loading; // Start or end NProgress depending on loading state


  useEffect(function () {
    if (loading) {
      NProgress.start();
    } else {
      NProgress.done();
    }

    return function () {
      NProgress.done();
    };
  }, [loading]);
  return React.createElement(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 || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? 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: withSpinner ? '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'
};

export default NProgressContainer;
//# sourceMappingURL=redwood-nprogress.esm.js.map