1 | import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
|
2 | import _extends from '@babel/runtime/helpers/extends';
|
3 | import { useCallback, useRef, useEffect, createElement } from 'react';
|
4 | import { useGetSetState, useEffectOnce, useUpdateEffect } from 'react-use';
|
5 | import hoistNonReactStatics from 'hoist-non-react-statics';
|
6 |
|
7 | var clamp = function clamp(num, lower, upper) {
|
8 | num = num <= upper ? num : upper;
|
9 | num = num >= lower ? num : lower;
|
10 | return num;
|
11 | };
|
12 |
|
13 | var 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 |
|
29 | var isRunning = false;
|
30 | var pending = [];
|
31 |
|
32 | var 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 |
|
43 | var clear = function clear() {
|
44 | isRunning = false;
|
45 | pending = [];
|
46 | };
|
47 | var queue = function queue(cb) {
|
48 | pending.push(cb);
|
49 |
|
50 | if (!isRunning && pending.length === 1) {
|
51 | next();
|
52 | }
|
53 | };
|
54 |
|
55 | var handle;
|
56 | var cancel = function cancel() {
|
57 | if (handle) {
|
58 | window.cancelAnimationFrame(handle);
|
59 | }
|
60 | };
|
61 | var 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 |
|
81 |
|
82 | var noop = function noop() {
|
83 | return undefined;
|
84 | };
|
85 |
|
86 | var initialState = {
|
87 | isFinished: false,
|
88 | progress: 0,
|
89 | sideEffect: noop
|
90 | };
|
91 |
|
92 | var cleanup = function cleanup() {
|
93 | cancel();
|
94 | clear();
|
95 | };
|
96 |
|
97 | var 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 |
|
190 | var 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 |
|
198 | function withNProgress(BaseComponent) {
|
199 | var WithNProgress = function WithNProgress(props) {
|
200 | var hookProps = useNProgress(props);
|
201 | return createElement(BaseComponent, Object.assign({}, props, hookProps));
|
202 | };
|
203 |
|
204 | hoistNonReactStatics(WithNProgress, BaseComponent);
|
205 | return WithNProgress;
|
206 | }
|
207 |
|
208 | export { NProgress, useNProgress, withNProgress };
|
209 |
|