UNPKG

8.82 kBJavaScriptView Raw
1'use strict';
2
3var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
4var _extends = require('@babel/runtime/helpers/extends');
5var React = require('react');
6var hoistNonReactStatics = require('hoist-non-react-statics');
7
8function _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
25var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
26
27var clamp = function clamp(num, lower, upper) {
28 num = num <= upper ? num : upper;
29 num = num >= lower ? num : lower;
30 return num;
31};
32
33var 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
60var 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
87var 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// Hat-tip:
102// https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts.
103//
104// `react-use` appears to be unmaintained, so moving the required code into
105// this project for now.
106var useEffectOnce = function useEffectOnce(effect) {
107 // eslint-disable-next-line react-hooks/exhaustive-deps
108 React.useEffect(effect, []);
109};
110
111var incrementParameter = function incrementParameter(num) {
112 return ++num % 1000000;
113};
114var useUpdate = function useUpdate() {
115 var _useState = React.useState(0),
116 setState = _useState[1];
117 return React.useCallback(function () {
118 return setState(incrementParameter);
119 }, []);
120};
121var useGetSetState = function useGetSetState( /* istanbul ignore next */
122initialState) {
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 // eslint-disable-next-line react-hooks/exhaustive-deps
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.
147var 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};
155var useUpdateEffect = function useUpdateEffect(effect, deps) {
156 var isFirstMount = useFirstMountState();
157 React.useEffect(function () {
158 if (!isFirstMount) {
159 return effect();
160 }
161 // eslint-disable-next-line react-hooks/exhaustive-deps
162 }, deps);
163};
164
165/* istanbul ignore next */
166var noop = function noop() {
167 return undefined;
168};
169var initialState = {
170 isFinished: true,
171 progress: 0,
172 sideEffect: noop
173};
174var 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
279var _excluded = ["children"];
280var 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
287function withNProgress(BaseComponent) {
288 var WithNProgress = function WithNProgress(props) {
289 var hookProps = useNProgress(props);
290 return /*#__PURE__*/React__namespace.createElement(BaseComponent, _extends({}, props, hookProps));
291 };
292 hoistNonReactStatics(WithNProgress, BaseComponent);
293 return WithNProgress;
294}
295
296exports.NProgress = NProgress;
297exports.useNProgress = useNProgress;
298exports.withNProgress = withNProgress;
299//# sourceMappingURL=react-nprogress.cjs.development.js.map