@bprogress/react
Version:
Utility to create your own NProgress bar like with React
565 lines • 25.5 kB
JavaScript
;
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;
}
function _type_of(obj) {
"@swc/helpers - typeof";
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = function(target, all) {
for(var name in all)__defProp(target, name, {
get: all[name],
enumerable: true
});
};
var __copyProps = function(to, from, except, desc) {
if (from && (typeof from === "undefined" ? "undefined" : _type_of(from)) === "object" || typeof from === "function") {
var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
try {
var _loop = function() {
var key = _step.value;
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: function() {
return from[key];
},
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
};
for(var _iterator = __getOwnPropNames(from)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true)_loop();
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally{
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally{
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return to;
};
var __toESM = function(mod, isNodeMode, target) {
return target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod);
};
var __toCommonJS = function(mod) {
return __copyProps(__defProp({}, "__esModule", {
value: true
}), mod);
};
// src/index.tsx
var index_exports = {};
__export(index_exports, {
Bar: function() {
return Bar;
},
Indeterminate: function() {
return Indeterminate;
},
Peg: function() {
return Peg;
},
Progress: function() {
return Progress;
},
ProgressProvider: function() {
return ProgressProvider;
},
Spinner: function() {
return Spinner;
},
SpinnerIcon: function() {
return SpinnerIcon;
},
useAnchorProgress: function() {
return useAnchorProgress;
},
useProgress: function() {
return useProgress;
},
withMemo: function() {
return withMemo;
},
withSuspense: function() {
return withSuspense;
}
});
module.exports = __toCommonJS(index_exports);
// src/providers/progress-provider.tsx
var import_core = require("@bprogress/core");
var import_react = __toESM(require("react"), 1);
var ProgressContext = (0, import_react.createContext)(void 0);
var useProgress = function() {
var context = (0, import_react.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 = (0, import_react.useRef)(null);
var isAutoStopDisabled = (0, import_react.useRef)(false);
var disableAutoStop = (0, import_react.useCallback)(function() {
return isAutoStopDisabled.current = true;
}, []);
var enableAutoStop = (0, import_react.useCallback)(function() {
return isAutoStopDisabled.current = false;
}, []);
var start = (0, import_react.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) import_core.BProgress.set(startPosition2);
import_core.BProgress.start();
}, delay2);
}, [
disableAutoStop
]);
var stop = (0, import_react.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 (!import_core.BProgress.isStarted()) return;
import_core.BProgress.done();
if (isAutoStopDisabled.current) enableAutoStop();
}, stopDelay2);
}, forcedStopDelay);
}, [
enableAutoStop
]);
var inc = (0, import_react.useCallback)(function(amount) {
return import_core.BProgress.inc(amount);
}, []);
var dec = (0, import_react.useCallback)(function(amount) {
return import_core.BProgress.dec(amount);
}, []);
var set = (0, import_react.useCallback)(function(n) {
return import_core.BProgress.set(n);
}, []);
var pause = (0, import_react.useCallback)(function() {
return import_core.BProgress.pause();
}, []);
var resume = (0, import_react.useCallback)(function() {
return import_core.BProgress.resume();
}, []);
var getOptions = (0, import_react.useCallback)(function() {
return import_core.BProgress.settings;
}, []);
var setOptions = (0, import_react.useCallback)(function(newOptions) {
var currentOptions = getOptions();
var updates = typeof newOptions === "function" ? newOptions(currentOptions) : newOptions;
var nextOptions = _object_spread({}, currentOptions, updates);
import_core.BProgress.configure(nextOptions);
}, [
getOptions
]);
var styles = (0, import_react.useMemo)(function() {
return /* @__PURE__ */ import_react.default.createElement("style", {
nonce: nonce
}, style || (0, import_core.css)({
color: color,
height: height,
spinnerPosition: spinnerPosition
}));
}, [
color,
height,
nonce,
spinnerPosition,
style
]);
import_core.BProgress.configure(options || {});
return /* @__PURE__ */ import_react.default.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
var import_react2 = require("react");
var import_core2 = require("@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 = (0, import_react2.useRef)([]);
var timerRef = (0, import_react2.useRef)(null);
var _useProgress = useProgress(), start = _useProgress.start, stop = _useProgress.stop, isAutoStopDisabled = _useProgress.isAutoStopDisabled;
(0, import_react2.useEffect)(function() {
if (startOnLoad) start(startPosition, delay);
}, []);
(0, import_react2.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);
(0, import_react2.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 = (0, import_core2.getAnchorProperty)(anchorElement, "target");
if (anchorTarget === "_blank") return;
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
var targetHref = (0, import_core2.getAnchorProperty)(anchorElement, "href");
var targetUrl = targetPreprocessor ? targetPreprocessor(new URL(targetHref)) : new URL(targetHref);
var currentUrl = new URL(location.href);
if (shallowRouting && (0, import_core2.isSameURLWithoutSearch)(targetUrl, currentUrl) && disableSameURL) return;
if ((0, import_core2.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 = (0, import_core2.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 && (0, import_core2.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
var import_react7 = __toESM(require("react"), 1);
// 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
var import_react3 = __toESM(require("react"), 1);
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 import_react3.default.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), children);
}
var Bar = import_react3.default.forwardRef(BarInner);
// src/components/peg.tsx
var import_react4 = __toESM(require("react"), 1);
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 import_react4.default.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), children);
}
var Peg = import_react4.default.forwardRef(PegInner);
// src/components/spinner.tsx
var import_react5 = __toESM(require("react"), 1);
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 import_react5.default.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), children);
}
var Spinner = import_react5.default.forwardRef(SpinnerInner);
// src/components/spinner-icon.tsx
var import_react6 = __toESM(require("react"), 1);
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 import_react6.default.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), children);
}
var SpinnerIcon = import_react6.default.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 import_react7.default.createElement(Component, _object_spread({
ref: ref,
className: classNames("bprogress", className),
style: _object_spread_props(_object_spread({}, style), {
display: "none"
})
}, rest), children || /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(Bar, null, /* @__PURE__ */ import_react7.default.createElement(Peg, null)), /* @__PURE__ */ import_react7.default.createElement(Spinner, null, /* @__PURE__ */ import_react7.default.createElement(SpinnerIcon, null))));
}
var Progress = import_react7.default.forwardRef(ProgressInner);
// src/components/indeterminate.tsx
var import_react8 = __toESM(require("react"), 1);
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 import_react8.default.createElement(Component, _object_spread({
ref: ref,
className: classNames(classSelector, className)
}, rest), import_react8.default.createElement("div", {
className: "inc"
}), import_react8.default.createElement("div", {
className: "dec"
}));
}
var Indeterminate = import_react8.default.forwardRef(IndeterminateInner);
// src/utils/with-suspense.tsx
var import_react9 = __toESM(require("react"), 1);
function withSuspense(Component) {
return function WithSuspenseComponent(props) {
return /* @__PURE__ */ import_react9.default.createElement(import_react9.Suspense, null, /* @__PURE__ */ import_react9.default.createElement(Component, _object_spread({}, props)));
};
}
// src/utils/with-memo.tsx
var import_react10 = require("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 (0, import_react10.memo)(Component, function(prevProps, nextProps) {
if (nextProps.memo === false) return false;
if (!nextProps.shouldCompareComplexProps) return true;
return shallowCompareProps(prevProps, nextProps, ignoreKeys);
});
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Bar: Bar,
Indeterminate: Indeterminate,
Peg: Peg,
Progress: Progress,
ProgressProvider: ProgressProvider,
Spinner: Spinner,
SpinnerIcon: SpinnerIcon,
useAnchorProgress: useAnchorProgress,
useProgress: useProgress,
withMemo: withMemo,
withSuspense: withSuspense
});
//# sourceMappingURL=index.cjs.map