UNPKG

@tanem/react-nprogress

Version:

A React primitive for building slim progress bars.

278 lines (266 loc) 8.17 kB
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose'; import _extends from '@babel/runtime/helpers/extends'; import * as React from 'react'; import { useEffect, useRef, useCallback, useState } from 'react'; import hoistNonReactStatics from 'hoist-non-react-statics'; var clamp = function clamp(num, lower, upper) { num = num <= upper ? num : upper; num = num >= lower ? num : lower; return num; }; var createQueue = function createQueue() { var isRunning = false; var pending = []; var _next = function next() { isRunning = true; var cb = pending.shift(); if (cb) { return cb(_next); } isRunning = false; }; var clear = function clear() { isRunning = false; pending = []; }; var enqueue = function enqueue(cb) { pending.push(cb); if (!isRunning && pending.length === 1) { _next(); } }; return { clear: clear, enqueue: enqueue }; }; var createTimeout = function createTimeout() { var handle; var cancel = function cancel() { if (handle) { window.cancelAnimationFrame(handle); } }; var schedule = function schedule(callback, delay) { var deltaTime; var start; var _frame = function frame(time) { start = start || time; deltaTime = time - start; if (deltaTime > delay) { callback(); return; } handle = window.requestAnimationFrame(_frame); }; handle = window.requestAnimationFrame(_frame); }; return { cancel: cancel, schedule: schedule }; }; var increment = function increment(progress) { var amount = 0; if (progress >= 0 && progress < 0.2) { amount = 0.1; } else if (progress >= 0.2 && progress < 0.5) { amount = 0.04; } else if (progress >= 0.5 && progress < 0.8) { amount = 0.02; } else if (progress >= 0.8 && progress < 0.99) { amount = 0.005; } return clamp(progress + amount, 0, 0.994); }; // Hat-tip: // https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts. // // `react-use` appears to be unmaintained, so moving the required code into // this project for now. var useEffectOnce = function useEffectOnce(effect) { // eslint-disable-next-line react-hooks/exhaustive-deps useEffect(effect, []); }; var incrementParameter = function incrementParameter(num) { return ++num % 1000000; }; var useUpdate = function useUpdate() { var _useState = useState(0), setState = _useState[1]; return useCallback(function () { return setState(incrementParameter); }, []); }; var useGetSetState = function useGetSetState(/* istanbul ignore next */ initialState) { if (initialState === undefined) { initialState = {}; } var update = useUpdate(); var state = useRef(_extends({}, initialState)); var get = useCallback(function () { return state.current; }, []); var set = useCallback(function (patch) { if (!patch) { return; } Object.assign(state.current, patch); update(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return [get, set]; }; // Hat-tip: // https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts. // // `react-use` appears to be unmaintained, so moving the required code into // this project for now. var useFirstMountState = function useFirstMountState() { var isFirst = useRef(true); if (isFirst.current) { isFirst.current = false; return true; } return isFirst.current; }; var useUpdateEffect = function useUpdateEffect(effect, deps) { var isFirstMount = useFirstMountState(); useEffect(function () { if (!isFirstMount) { return effect(); } // eslint-disable-next-line react-hooks/exhaustive-deps }, deps); }; /* istanbul ignore next */ var noop = function noop() { return undefined; }; var initialState = { isFinished: true, progress: 0, sideEffect: noop }; var useNProgress = function useNProgress(_temp) { var _ref = _temp === undefined ? {} : _temp, _ref$animationDuratio = _ref.animationDuration, animationDuration = _ref$animationDuratio === undefined ? 200 : _ref$animationDuratio, _ref$incrementDuratio = _ref.incrementDuration, incrementDuration = _ref$incrementDuratio === undefined ? 800 : _ref$incrementDuratio, _ref$isAnimating = _ref.isAnimating, isAnimating = _ref$isAnimating === undefined ? false : _ref$isAnimating, _ref$minimum = _ref.minimum, minimum = _ref$minimum === undefined ? 0.08 : _ref$minimum; var _useGetSetState = useGetSetState(initialState), get = _useGetSetState[0], setState = _useGetSetState[1]; var queue = useRef(null); var timeout = useRef(null); useEffectOnce(function () { queue.current = createQueue(); timeout.current = createTimeout(); }); var cleanup = useCallback(function () { var _timeout$current, _queue$current; (_timeout$current = timeout.current) == null || _timeout$current.cancel(); (_queue$current = queue.current) == null || _queue$current.clear(); }, []); var set = useCallback(function (n) { var _queue$current4; n = clamp(n, minimum, 1); if (n === 1) { var _queue$current2, _queue$current3; cleanup(); (_queue$current2 = queue.current) == null || _queue$current2.enqueue(function (next) { setState({ progress: n, sideEffect: function sideEffect() { var _timeout$current2; return (_timeout$current2 = timeout.current) == null ? undefined : _timeout$current2.schedule(next, animationDuration); } }); }); (_queue$current3 = queue.current) == null || _queue$current3.enqueue(function () { setState({ isFinished: true, sideEffect: cleanup }); }); return; } (_queue$current4 = queue.current) == null || _queue$current4.enqueue(function (next) { setState({ isFinished: false, progress: n, sideEffect: function sideEffect() { var _timeout$current3; return (_timeout$current3 = timeout.current) == null ? undefined : _timeout$current3.schedule(next, animationDuration); } }); }); }, [animationDuration, cleanup, minimum, queue, setState, timeout]); var trickle = useCallback(function () { set(increment(get().progress)); }, [get, set]); var start = useCallback(function () { var _work = function work() { var _queue$current5; trickle(); (_queue$current5 = queue.current) == null || _queue$current5.enqueue(function (next) { var _timeout$current4; (_timeout$current4 = timeout.current) == null || _timeout$current4.schedule(function () { _work(); next(); }, incrementDuration); }); }; _work(); }, [incrementDuration, queue, timeout, trickle]); var savedTrickle = useRef(noop); var sideEffect = get().sideEffect; useEffect(function () { savedTrickle.current = trickle; }); useEffectOnce(function () { if (isAnimating) { start(); } return cleanup; }); useUpdateEffect(function () { get().sideEffect(); }, [get, sideEffect]); useUpdateEffect(function () { if (!isAnimating) { set(1); } else { setState(_extends({}, initialState, { sideEffect: start })); } }, [isAnimating, set, setState, start]); return { animationDuration: animationDuration, isFinished: get().isFinished, progress: get().progress }; }; var _excluded = ["children"]; var NProgress = function NProgress(_ref) { var children = _ref.children, restProps = _objectWithoutPropertiesLoose(_ref, _excluded); var renderProps = useNProgress(restProps); return children(renderProps); }; function withNProgress(BaseComponent) { var WithNProgress = function WithNProgress(props) { var hookProps = useNProgress(props); return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, props, hookProps)); }; hoistNonReactStatics(WithNProgress, BaseComponent); return WithNProgress; } export { NProgress, useNProgress, withNProgress }; //# sourceMappingURL=react-nprogress.esm.js.map