remix-progressbar/dist/index.js

Progress Bar for Remix Applications

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const react_1 = require("@remix-run/react");
const NProgress = __importStar(require("nprogress"));
const defaultConfig = {
    color: '#3366FF',
    startFrom: 20,
    delay: 0,
    height: 2,
    showSpinner: true,
    easing: 'linear',
    speed: 200,
    trickle: true,
    trickleSpeed: 200,
    customCSS: css => (0, jsx_runtime_1.jsx)("style", { children: css })
};
function Progress(props) {
    const navigation = (0, react_1.useTransition)();
    const config = {
        ...defaultConfig,
        ...props
    };
    React.useEffect(() => {
        let timeOut = null;
        if (navigation.state !== 'idle') {
            timeOut = setTimeout(() => NProgress.start(), config.delay);
        }
        else if (navigation.state === 'idle') {
            if (timeOut)
                clearTimeout(timeOut);
            NProgress.done();
        }
        return () => {
            if (timeOut)
                clearTimeout(timeOut);
        };
    }, [navigation.state]);
    React.useEffect(() => {
        NProgress.configure({
            minimum: config.startFrom / 100,
            showSpinner: config.showSpinner,
            easing: config.easing,
            speed: config.speed,
            trickle: config.trickle,
            trickleSpeed: config.trickleSpeed
        });
    }, []);
    // https://unpkg.com/nprogress@0.2.0/nprogress.css
    return config.customCSS(`
  #nprogress {
    pointer-events: none;
  }
  
  #nprogress .bar {
    background: ${config.color};
  
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
  
    width: 100%;
    height: ${config.height}px;
  }
  
  #nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px ${config.color}, 0 0 5px ${config.color};
    opacity: 1.0;
  
    -webkit-transform: rotate(3deg) translate(0px, -4px);
        -ms-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
  }
  
  #nprogress .spinner {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 15px;
    right: 15px;
  }
  
  #nprogress .spinner-icon {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
  
    border: solid 2px transparent;
    border-top-color: ${config.color};
    border-left-color: ${config.color};
    border-radius: 50%;
  
    -webkit-animation: nprogress-spinner 400ms linear infinite;
            animation: nprogress-spinner 400ms linear infinite;
  }
  
  .nprogress-custom-parent {
    overflow: hidden;
    position: relative;
  }
  
  .nprogress-custom-parent #nprogress .spinner,
  .nprogress-custom-parent #nprogress .bar {
    position: absolute;
  }
  
  @-webkit-keyframes nprogress-spinner {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes nprogress-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  `);
}
exports.default = Progress;