one
Version:
One is a React framework for web, iOS, and Android apps.
77 lines (74 loc) • 2.11 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { View } from "react-native";
import { router } from "../router/imperative-api.native.js";
var LoadProgressBar = function LoadProgressBar2(param) {
var { startDelay = 500, finishDelay = 50, initialPercent = 20, updateInterval = 300, sporadicness = 3, ...props } = param;
var [loaded, setLoaded] = useState(0);
var [width, setWidth] = useState(0);
useEffect(function() {
var loadInterval;
var dispose = router.onLoadState(function(state) {
clearTimeout(loadInterval);
switch (state) {
case "loading": {
loadInterval = setTimeout(function() {
setLoaded(initialPercent);
var intervalCount = 0;
loadInterval = setInterval(function() {
intervalCount++;
if (intervalCount % sporadicness === 0) {
return;
}
setLoaded(function(prev) {
var increment = (100 - prev) * (prev > 80 ? .05 : .1) * Math.random();
return Math.min(prev + increment, 100);
});
}, updateInterval);
}, startDelay);
break;
}
case "loaded": {
setLoaded(100);
clearInterval(loadInterval);
setTimeout(function() {
setLoaded(0);
}, finishDelay);
break;
}
}
});
return function() {
dispose();
clearInterval(loadInterval);
};
}, [
finishDelay,
initialPercent,
sporadicness,
startDelay,
updateInterval
]);
return /* @__PURE__ */ jsx(View, {
...props,
onLayout: function onLayout(e) {
var _props_onLayout;
setWidth(e.nativeEvent.layout.width);
(_props_onLayout = props.onLayout) === null || _props_onLayout === void 0 ? void 0 : _props_onLayout.call(props, e);
},
style: [{
display: loaded === 0 ? "none" : "flex",
height: 1,
position: "absolute",
top: 0,
left: 0,
right: 0,
backgroundColor: "rgba(60, 100, 200, 0.65)",
width: "100%",
transform: [{ translateX: -(1 - loaded * .01) * width }],
zIndex: Number.MAX_SAFE_INTEGER
}, props.style]
});
};
export { LoadProgressBar };
//# sourceMappingURL=LoadProgressBar.native.js.map