1 | 'use strict';
|
2 |
|
3 | var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
4 | var _extends = require('@babel/runtime/helpers/extends');
|
5 | var React = require('react');
|
6 | var hoistNonReactStatics = require('hoist-non-react-statics');
|
7 |
|
8 | function _interopNamespaceDefault(e) {
|
9 | var n = Object.create(null);
|
10 | if (e) {
|
11 | Object.keys(e).forEach(function (k) {
|
12 | if (k !== 'default') {
|
13 | var d = Object.getOwnPropertyDescriptor(e, k);
|
14 | Object.defineProperty(n, k, d.get ? d : {
|
15 | enumerable: true,
|
16 | get: function () { return e[k]; }
|
17 | });
|
18 | }
|
19 | });
|
20 | }
|
21 | n.default = e;
|
22 | return Object.freeze(n);
|
23 | }
|
24 |
|
25 | var React__namespace = _interopNamespaceDefault(React);
|
26 |
|
27 | var clamp = function clamp(num, lower, upper) {
|
28 | num = num <= upper ? num : upper;
|
29 | num = num >= lower ? num : lower;
|
30 | return num;
|
31 | };
|
32 |
|
33 | var createQueue = function createQueue() {
|
34 | var isRunning = false;
|
35 | var pending = [];
|
36 | var next = function next() {
|
37 | isRunning = true;
|
38 | var cb = pending.shift();
|
39 | if (cb) {
|
40 | return cb(next);
|
41 | }
|
42 | isRunning = false;
|
43 | };
|
44 | var clear = function clear() {
|
45 | isRunning = false;
|
46 | pending = [];
|
47 | };
|
48 | var enqueue = function enqueue(cb) {
|
49 | pending.push(cb);
|
50 | if (!isRunning && pending.length === 1) {
|
51 | next();
|
52 | }
|
53 | };
|
54 | return {
|
55 | clear: clear,
|
56 | enqueue: enqueue
|
57 | };
|
58 | };
|
59 |
|
60 | var createTimeout = function createTimeout() {
|
61 | var handle;
|
62 | var cancel = function cancel() {
|
63 | if (handle) {
|
64 | window.cancelAnimationFrame(handle);
|
65 | }
|
66 | };
|
67 | var schedule = function schedule(callback, delay) {
|
68 | var deltaTime;
|
69 | var start;
|
70 | var frame = function frame(time) {
|
71 | start = start || time;
|
72 | deltaTime = time - start;
|
73 | if (deltaTime > delay) {
|
74 | callback();
|
75 | return;
|
76 | }
|
77 | handle = window.requestAnimationFrame(frame);
|
78 | };
|
79 | handle = window.requestAnimationFrame(frame);
|
80 | };
|
81 | return {
|
82 | cancel: cancel,
|
83 | schedule: schedule
|
84 | };
|
85 | };
|
86 |
|
87 | var increment = function increment(progress) {
|
88 | var amount = 0;
|
89 | if (progress >= 0 && progress < 0.2) {
|
90 | amount = 0.1;
|
91 | } else if (progress >= 0.2 && progress < 0.5) {
|
92 | amount = 0.04;
|
93 | } else if (progress >= 0.5 && progress < 0.8) {
|
94 | amount = 0.02;
|
95 | } else if (progress >= 0.8 && progress < 0.99) {
|
96 | amount = 0.005;
|
97 | }
|
98 | return clamp(progress + amount, 0, 0.994);
|
99 | };
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 | var useEffectOnce = function useEffectOnce(effect) {
|
107 |
|
108 | React.useEffect(effect, []);
|
109 | };
|
110 |
|
111 | var incrementParameter = function incrementParameter(num) {
|
112 | return ++num % 1000000;
|
113 | };
|
114 | var useUpdate = function useUpdate() {
|
115 | var _useState = React.useState(0),
|
116 | setState = _useState[1];
|
117 | return React.useCallback(function () {
|
118 | return setState(incrementParameter);
|
119 | }, []);
|
120 | };
|
121 | var useGetSetState = function useGetSetState( /* istanbul ignore next */
|
122 | initialState) {
|
123 | if (initialState === void 0) {
|
124 | initialState = {};
|
125 | }
|
126 | var update = useUpdate();
|
127 | var state = React.useRef(_extends({}, initialState));
|
128 | var get = React.useCallback(function () {
|
129 | return state.current;
|
130 | }, []);
|
131 | var set = React.useCallback(function (patch) {
|
132 | if (!patch) {
|
133 | return;
|
134 | }
|
135 | Object.assign(state.current, patch);
|
136 | update();
|
137 |
|
138 | }, []);
|
139 | return [get, set];
|
140 | };
|
141 |
|
142 | // Hat-tip:
|
143 | // https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts.
|
144 | //
|
145 | // `react-use` appears to be unmaintained, so moving the required code into
|
146 | // this project for now.
|
147 | var useFirstMountState = function useFirstMountState() {
|
148 | var isFirst = React.useRef(true);
|
149 | if (isFirst.current) {
|
150 | isFirst.current = false;
|
151 | return true;
|
152 | }
|
153 | return isFirst.current;
|
154 | };
|
155 | var useUpdateEffect = function useUpdateEffect(effect, deps) {
|
156 | var isFirstMount = useFirstMountState();
|
157 | React.useEffect(function () {
|
158 | if (!isFirstMount) {
|
159 | return effect();
|
160 | }
|
161 |
|
162 | }, deps);
|
163 | };
|
164 |
|
165 |
|
166 | var noop = function noop() {
|
167 | return undefined;
|
168 | };
|
169 | var initialState = {
|
170 | isFinished: true,
|
171 | progress: 0,
|
172 | sideEffect: noop
|
173 | };
|
174 | var useNProgress = function useNProgress(_temp) {
|
175 | var _ref = _temp === void 0 ? {} : _temp,
|
176 | _ref$animationDuratio = _ref.animationDuration,
|
177 | animationDuration = _ref$animationDuratio === void 0 ? 200 : _ref$animationDuratio,
|
178 | _ref$incrementDuratio = _ref.incrementDuration,
|
179 | incrementDuration = _ref$incrementDuratio === void 0 ? 800 : _ref$incrementDuratio,
|
180 | _ref$isAnimating = _ref.isAnimating,
|
181 | isAnimating = _ref$isAnimating === void 0 ? false : _ref$isAnimating,
|
182 | _ref$minimum = _ref.minimum,
|
183 | minimum = _ref$minimum === void 0 ? 0.08 : _ref$minimum;
|
184 | var _useGetSetState = useGetSetState(initialState),
|
185 | get = _useGetSetState[0],
|
186 | setState = _useGetSetState[1];
|
187 | var queue = React.useRef(null);
|
188 | var timeout = React.useRef(null);
|
189 | useEffectOnce(function () {
|
190 | queue.current = createQueue();
|
191 | timeout.current = createTimeout();
|
192 | });
|
193 | var cleanup = React.useCallback(function () {
|
194 | var _timeout$current, _queue$current;
|
195 | (_timeout$current = timeout.current) == null || _timeout$current.cancel();
|
196 | (_queue$current = queue.current) == null || _queue$current.clear();
|
197 | }, []);
|
198 | var set = React.useCallback(function (n) {
|
199 | var _queue$current4;
|
200 | n = clamp(n, minimum, 1);
|
201 | if (n === 1) {
|
202 | var _queue$current2, _queue$current3;
|
203 | cleanup();
|
204 | (_queue$current2 = queue.current) == null || _queue$current2.enqueue(function (next) {
|
205 | setState({
|
206 | progress: n,
|
207 | sideEffect: function sideEffect() {
|
208 | var _timeout$current2;
|
209 | return (_timeout$current2 = timeout.current) == null ? void 0 : _timeout$current2.schedule(next, animationDuration);
|
210 | }
|
211 | });
|
212 | });
|
213 | (_queue$current3 = queue.current) == null || _queue$current3.enqueue(function () {
|
214 | setState({
|
215 | isFinished: true,
|
216 | sideEffect: cleanup
|
217 | });
|
218 | });
|
219 | return;
|
220 | }
|
221 | (_queue$current4 = queue.current) == null || _queue$current4.enqueue(function (next) {
|
222 | setState({
|
223 | isFinished: false,
|
224 | progress: n,
|
225 | sideEffect: function sideEffect() {
|
226 | var _timeout$current3;
|
227 | return (_timeout$current3 = timeout.current) == null ? void 0 : _timeout$current3.schedule(next, animationDuration);
|
228 | }
|
229 | });
|
230 | });
|
231 | }, [animationDuration, cleanup, minimum, queue, setState, timeout]);
|
232 | var trickle = React.useCallback(function () {
|
233 | set(increment(get().progress));
|
234 | }, [get, set]);
|
235 | var start = React.useCallback(function () {
|
236 | var work = function work() {
|
237 | var _queue$current5;
|
238 | trickle();
|
239 | (_queue$current5 = queue.current) == null || _queue$current5.enqueue(function (next) {
|
240 | var _timeout$current4;
|
241 | (_timeout$current4 = timeout.current) == null || _timeout$current4.schedule(function () {
|
242 | work();
|
243 | next();
|
244 | }, incrementDuration);
|
245 | });
|
246 | };
|
247 | work();
|
248 | }, [incrementDuration, queue, timeout, trickle]);
|
249 | var savedTrickle = React.useRef(noop);
|
250 | var sideEffect = get().sideEffect;
|
251 | React.useEffect(function () {
|
252 | savedTrickle.current = trickle;
|
253 | });
|
254 | useEffectOnce(function () {
|
255 | if (isAnimating) {
|
256 | start();
|
257 | }
|
258 | return cleanup;
|
259 | });
|
260 | useUpdateEffect(function () {
|
261 | get().sideEffect();
|
262 | }, [get, sideEffect]);
|
263 | useUpdateEffect(function () {
|
264 | if (!isAnimating) {
|
265 | set(1);
|
266 | } else {
|
267 | setState(_extends({}, initialState, {
|
268 | sideEffect: start
|
269 | }));
|
270 | }
|
271 | }, [isAnimating, set, setState, start]);
|
272 | return {
|
273 | animationDuration: animationDuration,
|
274 | isFinished: get().isFinished,
|
275 | progress: get().progress
|
276 | };
|
277 | };
|
278 |
|
279 | var _excluded = ["children"];
|
280 | var NProgress = function NProgress(_ref) {
|
281 | var children = _ref.children,
|
282 | restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
|
283 | var renderProps = useNProgress(restProps);
|
284 | return children(renderProps);
|
285 | };
|
286 |
|
287 | function withNProgress(BaseComponent) {
|
288 | var WithNProgress = function WithNProgress(props) {
|
289 | var hookProps = useNProgress(props);
|
290 | return React__namespace.createElement(BaseComponent, _extends({}, props, hookProps));
|
291 | };
|
292 | hoistNonReactStatics(WithNProgress, BaseComponent);
|
293 | return WithNProgress;
|
294 | }
|
295 |
|
296 | exports.NProgress = NProgress;
|
297 | exports.useNProgress = useNProgress;
|
298 | exports.withNProgress = withNProgress;
|
299 |
|