@bprogress/react
Version:
Utility to create your own NProgress bar like with React
451 lines • 20.8 kB
JavaScript
// src/providers/progress-provider.tsx
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _object_spread(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function(key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function(sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function(key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _object_without_properties(source, excluded) {
if (source == null) return {};
var target = _object_without_properties_loose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for(i = 0; i < sourceSymbolKeys.length; i++){
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _object_without_properties_loose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for(i = 0; i < sourceKeys.length; i++){
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
import { BProgress, css } from "@bprogress/core";
import React, { createContext, useCallback, useContext, useMemo, useRef } from "react";
var ProgressContext = createContext(void 0);
var useProgress = function() {
var context = useContext(ProgressContext);
if (!context) {
throw new Error("useProgress must be used within a ProgressProvider");
}
return context;
};
var ProgressProvider = function(param) {
var children = param.children, _param_color = param.color, color = _param_color === void 0 ? "#0A2FFF" : _param_color, _param_height = param.height, height = _param_height === void 0 ? "2px" : _param_height, options = param.options, _param_spinnerPosition = param.spinnerPosition, spinnerPosition = _param_spinnerPosition === void 0 ? "top-right" : _param_spinnerPosition, style = param.style, _param_disableStyle = param.disableStyle, disableStyle = _param_disableStyle === void 0 ? false : _param_disableStyle, nonce = param.nonce, _param_shallowRouting = param.shallowRouting, shallowRouting = _param_shallowRouting === void 0 ? false : _param_shallowRouting, _param_disableSameURL = param.disableSameURL, disableSameURL = _param_disableSameURL === void 0 ? true : _param_disableSameURL, _param_startPosition = param.startPosition, startPosition = _param_startPosition === void 0 ? 0 : _param_startPosition, _param_delay = param.delay, delay = _param_delay === void 0 ? 0 : _param_delay, _param_stopDelay = param.stopDelay, stopDelay = _param_stopDelay === void 0 ? 0 : _param_stopDelay;
var timer = useRef(null);
var isAutoStopDisabled = useRef(false);
var disableAutoStop = useCallback(function() {
return isAutoStopDisabled.current = true;
}, []);
var enableAutoStop = useCallback(function() {
return isAutoStopDisabled.current = false;
}, []);
var start = useCallback(function() {
var startPosition2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0, delay2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, autoStopDisabled = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
if (autoStopDisabled) disableAutoStop();
timer.current = setTimeout(function() {
if (startPosition2 > 0) BProgress.set(startPosition2);
BProgress.start();
}, delay2);
}, [
disableAutoStop
]);
var stop = useCallback(function() {
var stopDelay2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0, forcedStopDelay = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
setTimeout(function() {
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(function() {
if (!BProgress.isStarted()) return;
BProgress.done();
if (isAutoStopDisabled.current) enableAutoStop();
}, stopDelay2);
}, forcedStopDelay);
}, [
enableAutoStop
]);
var inc = useCallback(function(amount) {
return BProgress.inc(amount);
}, []);
var dec = useCallback(function(amount) {
return BProgress.dec(amount);
}, []);
var set = useCallback(function(n) {
return BProgress.set(n);
}, []);
var pause = useCallback(function() {
return BProgress.pause();
}, []);
var resume = useCallback(function() {
return BProgress.resume();
}, []);
var getOptions = useCallback(function() {
return BProgress.settings;
}, []);
var setOptions = useCallback(function(newOptions) {
var currentOptions = getOptions();
var updates = typeof newOptions === "function" ? newOptions(currentOptions) : newOptions;
var nextOptions = _object_spread({}, currentOptions, updates);
BProgress.configure(nextOptions);
}, [
getOptions
]);
var styles = useMemo(function() {
return /* @__PURE__ */ React.createElement("style", {
nonce: nonce
}, style || css({
color: color,
height: height,
spinnerPosition: spinnerPosition
}));
}, [
color,
height,
nonce,
spinnerPosition,
style
]);
BProgress.configure(options || {});
return /* @__PURE__ */ React.createElement(ProgressContext.Provider, {
value: {
start: start,
stop: stop,
inc: inc,
dec: dec,
set: set,
pause: pause,
resume: resume,
setOptions: setOptions,
getOptions: getOptions,
isAutoStopDisabled: isAutoStopDisabled,
disableAutoStop: disableAutoStop,
enableAutoStop: enableAutoStop,
shallowRouting: shallowRouting,
disableSameURL: disableSameURL,
startPosition: startPosition,
delay: delay,
stopDelay: stopDelay
}
}, !disableStyle ? styles : null, children);
};
// src/hooks/use-anchor-progress.tsx
import { useEffect, useRef as useRef2 } from "react";
import { isSameURL, isSameURLWithoutSearch, getAnchorProperty } from "@bprogress/core";
function useAnchorProgress(param) {
var _param_shallowRouting = param.shallowRouting, shallowRouting = _param_shallowRouting === void 0 ? false : _param_shallowRouting, _param_disableSameURL = param.disableSameURL, disableSameURL = _param_disableSameURL === void 0 ? true : _param_disableSameURL, _param_startPosition = param.startPosition, startPosition = _param_startPosition === void 0 ? 0 : _param_startPosition, _param_delay = param.delay, delay = _param_delay === void 0 ? 0 : _param_delay, _param_stopDelay = param.stopDelay, stopDelay = _param_stopDelay === void 0 ? 0 : _param_stopDelay, targetPreprocessor = param.targetPreprocessor, _param_disableAnchorClick = param.disableAnchorClick, disableAnchorClick = _param_disableAnchorClick === void 0 ? false : _param_disableAnchorClick, _param_startOnLoad = param.startOnLoad, startOnLoad = _param_startOnLoad === void 0 ? false : _param_startOnLoad, _param_forcedStopDelay = param.forcedStopDelay, forcedStopDelay = _param_forcedStopDelay === void 0 ? 0 : _param_forcedStopDelay, deps = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
var elementsWithAttachedHandlers = useRef2([]);
var timerRef = useRef2(null);
var _useProgress = useProgress(), start = _useProgress.start, stop = _useProgress.stop, isAutoStopDisabled = _useProgress.isAutoStopDisabled;
useEffect(function() {
if (startOnLoad) start(startPosition, delay);
}, []);
useEffect(function() {
if (timerRef.current) clearTimeout(timerRef.current);
timerRef.current = setTimeout(function() {
if (!isAutoStopDisabled.current) stop();
}, stopDelay);
return function() {
if (timerRef.current) clearTimeout(timerRef.current);
};
}, deps);
useEffect(function() {
if (disableAnchorClick) return;
var handleAnchorClick = function(event) {
if (event.defaultPrevented) return;
var anchorElement = event.currentTarget;
if (anchorElement.hasAttribute("download")) return;
var target = event.target;
var preventProgress = (target === null || target === void 0 ? void 0 : target.getAttribute("data-prevent-progress")) === "true" || (anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.getAttribute("data-prevent-progress")) === "true";
if (!preventProgress) {
var element = target;
while(element && element.tagName.toLowerCase() !== "a"){
var _element_parentElement;
if (((_element_parentElement = element.parentElement) === null || _element_parentElement === void 0 ? void 0 : _element_parentElement.getAttribute("data-prevent-progress")) === "true") {
preventProgress = true;
break;
}
element = element.parentElement;
}
}
if (preventProgress) return;
var anchorTarget = getAnchorProperty(anchorElement, "target");
if (anchorTarget === "_blank") return;
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
var targetHref = getAnchorProperty(anchorElement, "href");
var targetUrl = targetPreprocessor ? targetPreprocessor(new URL(targetHref)) : new URL(targetHref);
var currentUrl = new URL(location.href);
if (shallowRouting && isSameURLWithoutSearch(targetUrl, currentUrl) && disableSameURL) return;
if (isSameURL(targetUrl, currentUrl) && disableSameURL) return;
start(startPosition, delay);
};
var handleMutation = function() {
var anchorElements = Array.from(document.querySelectorAll("a"));
var validAnchorElements = anchorElements.filter(function(anchor) {
var href = getAnchorProperty(anchor, "href");
var isBProgressDisabled = anchor.getAttribute("data-disable-progress") === "true";
var isNotTelOrMailto = href && !href.startsWith("tel:") && !href.startsWith("mailto:") && !href.startsWith("blob:") && !href.startsWith("javascript:");
return !isBProgressDisabled && isNotTelOrMailto && getAnchorProperty(anchor, "target") !== "_blank";
});
validAnchorElements.forEach(function(anchor) {
anchor.addEventListener("click", handleAnchorClick, true);
});
elementsWithAttachedHandlers.current = validAnchorElements;
};
var mutationObserver = new MutationObserver(handleMutation);
mutationObserver.observe(document, {
childList: true,
subtree: true
});
var originalWindowHistoryPushState = window.history.pushState;
window.history.pushState = new Proxy(window.history.pushState, {
apply: function(target, thisArg, argArray) {
if (!isAutoStopDisabled.current) stop(stopDelay, forcedStopDelay);
return target.apply(thisArg, argArray);
}
});
return function() {
mutationObserver.disconnect();
elementsWithAttachedHandlers.current.forEach(function(anchor) {
anchor.removeEventListener("click", handleAnchorClick, true);
});
elementsWithAttachedHandlers.current = [];
window.history.pushState = originalWindowHistoryPushState;
};
}, [
disableAnchorClick,
targetPreprocessor,
shallowRouting,
disableSameURL,
delay,
stopDelay,
startPosition,
start,
stop,
forcedStopDelay,
isAutoStopDisabled
]);
}
// src/components/progress.tsx
import React6 from "react";
// src/utils/classnames.ts
function classNames() {
for(var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++){
classes[_key] = arguments[_key];
}
return classes.filter(Boolean).join(" ");
}
// src/components/bar.tsx
import React2 from "react";
function BarInner(_param, ref) {
var as = _param.as, children = _param.children, className = _param.className, _param_classSelector = _param.classSelector, classSelector = _param_classSelector === void 0 ? "bar" : _param_classSelector, rest = _object_without_properties(_param, [
"as",
"children",
"className",
"classSelector"
]);
var Component = as !== null && as !== void 0 ? as : "div";
return React2.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), children);
}
var Bar = React2.forwardRef(BarInner);
// src/components/peg.tsx
import React3 from "react";
function PegInner(_param, ref) {
var as = _param.as, children = _param.children, className = _param.className, _param_classSelector = _param.classSelector, classSelector = _param_classSelector === void 0 ? "peg" : _param_classSelector, rest = _object_without_properties(_param, [
"as",
"children",
"className",
"classSelector"
]);
var Component = as !== null && as !== void 0 ? as : "div";
return React3.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), children);
}
var Peg = React3.forwardRef(PegInner);
// src/components/spinner.tsx
import React4 from "react";
function SpinnerInner(_param, ref) {
var as = _param.as, children = _param.children, className = _param.className, _param_classSelector = _param.classSelector, classSelector = _param_classSelector === void 0 ? "spinner" : _param_classSelector, rest = _object_without_properties(_param, [
"as",
"children",
"className",
"classSelector"
]);
var Component = as !== null && as !== void 0 ? as : "div";
return React4.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), children);
}
var Spinner = React4.forwardRef(SpinnerInner);
// src/components/spinner-icon.tsx
import React5 from "react";
function SpinnerIconInner(_param, ref) {
var as = _param.as, children = _param.children, className = _param.className, _param_classSelector = _param.classSelector, classSelector = _param_classSelector === void 0 ? "spinner-icon" : _param_classSelector, rest = _object_without_properties(_param, [
"as",
"children",
"className",
"classSelector"
]);
var Component = as !== null && as !== void 0 ? as : "div";
return React5.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), children);
}
var SpinnerIcon = React5.forwardRef(SpinnerIconInner);
// src/components/progress.tsx
function ProgressInner(_param, ref) {
var as = _param.as, children = _param.children, className = _param.className, style = _param.style, rest = _object_without_properties(_param, [
"as",
"children",
"className",
"style"
]);
var Component = as !== null && as !== void 0 ? as : "div";
return React6.createElement(Component, _object_spread({
ref: ref,
className: classNames("bprogress", className),
style: _object_spread_props(_object_spread({}, style), {
display: "none"
})
}, rest), children || /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(Bar, null, /* @__PURE__ */ React6.createElement(Peg, null)), /* @__PURE__ */ React6.createElement(Spinner, null, /* @__PURE__ */ React6.createElement(SpinnerIcon, null))));
}
var Progress = React6.forwardRef(ProgressInner);
// src/components/indeterminate.tsx
import React7 from "react";
function IndeterminateInner(_param, ref) {
var as = _param.as, className = _param.className, _param_classSelector = _param.classSelector, classSelector = _param_classSelector === void 0 ? "indeterminate" : _param_classSelector, rest = _object_without_properties(_param, [
"as",
"className",
"classSelector"
]);
var Component = as !== null && as !== void 0 ? as : "div";
return React7.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), React7.createElement("div", {
className: "inc"
}), React7.createElement("div", {
className: "dec"
}));
}
var Indeterminate = React7.forwardRef(IndeterminateInner);
// src/utils/with-suspense.tsx
import React8, { Suspense } from "react";
function withSuspense(Component) {
return function WithSuspenseComponent(props) {
return /* @__PURE__ */ React8.createElement(Suspense, null, /* @__PURE__ */ React8.createElement(Component, _object_spread({}, props)));
};
}
// src/utils/with-memo.tsx
import { memo } from "react";
function shallowCompareProps(prevProps, nextProps) {
var ignoreKeys = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : [];
var prevKeys = Object.keys(prevProps).filter(function(key) {
return !ignoreKeys.includes(key);
});
var nextKeys = Object.keys(nextProps).filter(function(key) {
return !ignoreKeys.includes(key);
});
if (prevKeys.length !== nextKeys.length) {
return false;
}
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
try {
for(var _iterator = prevKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
var key = _step.value;
if (prevProps[key] !== nextProps[key]) {
return false;
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally{
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally{
if (_didIteratorError) {
throw _iteratorError;
}
}
}
return true;
}
function withMemo(Component) {
var ignoreKeys = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [
"memo",
"shouldCompareComplexProps"
];
return memo(Component, function(prevProps, nextProps) {
if (nextProps.memo === false) return false;
if (!nextProps.shouldCompareComplexProps) return true;
return shallowCompareProps(prevProps, nextProps, ignoreKeys);
});
}
export { Bar, Indeterminate, Peg, Progress, ProgressProvider, Spinner, SpinnerIcon, useAnchorProgress, useProgress, withMemo, withSuspense };
//# sourceMappingURL=index.js.map