UNPKG

5.04 kBJavaScriptView Raw
1import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
2import _extends from '@babel/runtime/helpers/extends';
3import { useCallback, useRef, useEffect, createElement } from 'react';
4import { useGetSetState, useEffectOnce, useUpdateEffect } from 'react-use';
5import hoistNonReactStatics from 'hoist-non-react-statics';
6
7var clamp = function clamp(num, lower, upper) {
8 num = num <= upper ? num : upper;
9 num = num >= lower ? num : lower;
10 return num;
11};
12
13var increment = function increment(progress) {
14 var amount = 0;
15
16 if (progress >= 0 && progress < 0.2) {
17 amount = 0.1;
18 } else if (progress >= 0.2 && progress < 0.5) {
19 amount = 0.04;
20 } else if (progress >= 0.5 && progress < 0.8) {
21 amount = 0.02;
22 } else if (progress >= 0.8 && progress < 0.99) {
23 amount = 0.005;
24 }
25
26 return clamp(progress + amount, 0, 0.994);
27};
28
29var isRunning = false;
30var pending = [];
31
32var next = function next() {
33 isRunning = true;
34 var cb = pending.shift();
35
36 if (cb) {
37 return cb(next);
38 }
39
40 isRunning = false;
41};
42
43var clear = function clear() {
44 isRunning = false;
45 pending = [];
46};
47var queue = function queue(cb) {
48 pending.push(cb);
49
50 if (!isRunning && pending.length === 1) {
51 next();
52 }
53};
54
55var handle;
56var cancel = function cancel() {
57 if (handle) {
58 window.cancelAnimationFrame(handle);
59 }
60};
61var timeout = function timeout(callback, delay) {
62 var deltaTime;
63 var start;
64
65 var frame = function frame(time) {
66 start = start || time;
67 deltaTime = time - start;
68
69 if (deltaTime > delay) {
70 callback();
71 return;
72 }
73
74 handle = window.requestAnimationFrame(frame);
75 };
76
77 handle = window.requestAnimationFrame(frame);
78};
79
80/* istanbul ignore next */
81
82var noop = function noop() {
83 return undefined;
84};
85
86var initialState = {
87 isFinished: false,
88 progress: 0,
89 sideEffect: noop
90};
91
92var cleanup = function cleanup() {
93 cancel();
94 clear();
95};
96
97var useNProgress = function useNProgress(_temp) {
98 var _ref = _temp === void 0 ? {} : _temp,
99 _ref$animationDuratio = _ref.animationDuration,
100 animationDuration = _ref$animationDuratio === void 0 ? 200 : _ref$animationDuratio,
101 _ref$incrementDuratio = _ref.incrementDuration,
102 incrementDuration = _ref$incrementDuratio === void 0 ? 800 : _ref$incrementDuratio,
103 _ref$isAnimating = _ref.isAnimating,
104 isAnimating = _ref$isAnimating === void 0 ? false : _ref$isAnimating,
105 _ref$minimum = _ref.minimum,
106 minimum = _ref$minimum === void 0 ? 0.08 : _ref$minimum;
107
108 var _useGetSetState = useGetSetState(initialState),
109 get = _useGetSetState[0],
110 setState = _useGetSetState[1];
111
112 var set = useCallback(function (n) {
113 n = clamp(n, minimum, 1);
114
115 if (n === 1) {
116 cleanup();
117 queue(function (next) {
118 setState({
119 progress: n,
120 sideEffect: function sideEffect() {
121 return timeout(next, animationDuration);
122 }
123 });
124 });
125 queue(function () {
126 setState({
127 isFinished: true,
128 sideEffect: cleanup
129 });
130 });
131 return;
132 }
133
134 queue(function (next) {
135 setState({
136 progress: n,
137 sideEffect: function sideEffect() {
138 return timeout(next, animationDuration);
139 }
140 });
141 });
142 }, [animationDuration, minimum, setState]);
143 var trickle = useCallback(function () {
144 set(increment(get().progress));
145 }, [get, set]);
146 var start = useCallback(function () {
147 var work = function work() {
148 trickle();
149 queue(function (next) {
150 timeout(function () {
151 work();
152 next();
153 }, incrementDuration);
154 });
155 };
156
157 work();
158 }, [incrementDuration, trickle]);
159 var savedTrickle = useRef(noop);
160 var sideEffect = get().sideEffect;
161 useEffect(function () {
162 savedTrickle.current = trickle;
163 });
164 useEffectOnce(function () {
165 if (isAnimating) {
166 start();
167 }
168
169 return cleanup;
170 });
171 useUpdateEffect(function () {
172 get().sideEffect();
173 }, [get, sideEffect]);
174 useUpdateEffect(function () {
175 if (!isAnimating) {
176 set(1);
177 } else {
178 setState(_extends({}, initialState, {
179 sideEffect: start
180 }));
181 }
182 }, [isAnimating, set, setState, start]);
183 return {
184 animationDuration: animationDuration,
185 isFinished: get().isFinished,
186 progress: get().progress
187 };
188};
189
190var NProgress = function NProgress(_ref) {
191 var children = _ref.children,
192 restProps = _objectWithoutPropertiesLoose(_ref, ["children"]);
193
194 var renderProps = useNProgress(restProps);
195 return children(renderProps);
196};
197
198function withNProgress(BaseComponent) {
199 var WithNProgress = function WithNProgress(props) {
200 var hookProps = useNProgress(props);
201 return /*#__PURE__*/createElement(BaseComponent, Object.assign({}, props, hookProps));
202 };
203
204 hoistNonReactStatics(WithNProgress, BaseComponent);
205 return WithNProgress;
206}
207
208export { NProgress, useNProgress, withNProgress };
209//# sourceMappingURL=react-nprogress.esm.js.map