UNPKG

one

Version:

One is a React framework for web, iOS, and Android apps.

github.com/onejs/one

onejs/one

1 lines • 4.89 kB
1
{"version":3,"file":"LoadProgressBar.js","names":[],"sources":["esm/views/LoadProgressBar.js"],"sourcesContent":["import * as React from \"react\";\nimport { router } from \"../router/imperative-api\";\nimport { jsx } from \"react/jsx-runtime\";\nconst LoadProgressBar = ({\n startDelay = 500,\n finishDelay = 50,\n initialPercent = 20,\n updateInterval = 300,\n sporadicness = 3,\n style,\n onLayout,\n ...props\n}) => {\n const [loaded, setLoaded] = React.useState(0);\n const [width, setWidth] = React.useState(0);\n const elementRef = React.useRef(null);\n React.useEffect(() => {\n let loadInterval;\n const dispose = router.onLoadState((state) => {\n clearTimeout(loadInterval);\n switch (state) {\n case \"loading\": {\n loadInterval = setTimeout(() => {\n setLoaded(initialPercent);\n let intervalCount = 0;\n loadInterval = setInterval(() => {\n intervalCount++;\n if (intervalCount % sporadicness === 0) {\n return;\n }\n setLoaded((previous) => {\n const increment = (100 - previous) * (previous > 80 ? 0.05 : 0.1) * Math.random();\n return Math.min(previous + increment, 100);\n });\n }, updateInterval);\n }, startDelay);\n break;\n }\n case \"loaded\": {\n setLoaded(100);\n clearInterval(loadInterval);\n setTimeout(() => {\n setLoaded(0);\n }, finishDelay);\n break;\n }\n }\n });\n return () => {\n dispose();\n clearInterval(loadInterval);\n };\n }, [finishDelay, initialPercent, sporadicness, startDelay, updateInterval]);\n React.useEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n const updateLayout = () => {\n const rect = element.getBoundingClientRect();\n setWidth(rect.width);\n onLayout?.({\n nativeEvent: {\n layout: { x: rect.x, y: rect.y, width: rect.width, height: rect.height }\n }\n });\n };\n updateLayout();\n const observer = new ResizeObserver(updateLayout);\n observer.observe(element);\n return () => observer.disconnect();\n }, [onLayout]);\n const flattenedStyle = React.useMemo(() => {\n const styleValue = style;\n const styleValues = Array.isArray(styleValue) ? styleValue.flat(Number.POSITIVE_INFINITY) : [styleValue];\n return styleValues.reduce(\n (result, value) => value && typeof value === \"object\" ? Object.assign(result, value) : result,\n {}\n );\n }, [style]);\n return /* @__PURE__ */ jsx(\n \"div\",\n {\n ...props,\n ref: elementRef,\n style: {\n display: loaded === 0 ? \"none\" : \"flex\",\n height: 1,\n position: \"fixed\",\n top: 0,\n left: 0,\n right: 0,\n backgroundColor: \"rgba(60, 100, 200, 0.65)\",\n width: \"100%\",\n transform: `translateX(${-(1 - loaded * 0.01) * width}px)`,\n zIndex: Number.MAX_SAFE_INTEGER,\n ...flattenedStyle\n }\n }\n );\n};\nexport {\n LoadProgressBar\n};\n//# sourceMappingURL=LoadProgressBar.web.js.map\n"],"mappings":";;;;;AAGA,MAAM,mBAAmB,EACvB,aAAa,KACb,cAAc,IACd,iBAAiB,IACjB,iBAAiB,KACjB,eAAe,GACf,OACA,UACA,GAAG,YACC;CACJ,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAS,CAAC;CAC5C,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,CAAC;CAC1C,MAAM,aAAa,MAAM,OAAO,IAAI;CACpC,MAAM,gBAAgB;EACpB,IAAI;EACJ,MAAM,UAAU,OAAO,aAAa,UAAU;GAC5C,aAAa,YAAY;GACzB,QAAQ,OAAR;IACE,KAAK,WAAW;KACd,eAAe,iBAAiB;MAC9B,UAAU,cAAc;MACxB,IAAI,gBAAgB;MACpB,eAAe,kBAAkB;OAC/B;OACA,IAAI,gBAAgB,iBAAiB,GAAG;QACtC;OACF;OACA,WAAW,aAAa;QACtB,MAAM,aAAa,MAAM,aAAa,WAAW,KAAK,MAAO,MAAO,KAAK,OAAO;QAChF,OAAO,KAAK,IAAI,WAAW,WAAW,GAAG;OAC3C,CAAC;MACH,GAAG,cAAc;KACnB,GAAG,UAAU;KACb;IACF;IACA,KAAK,UAAU;KACb,UAAU,GAAG;KACb,cAAc,YAAY;KAC1B,iBAAiB;MACf,UAAU,CAAC;KACb,GAAG,WAAW;KACd;IACF;GACF;EACF,CAAC;EACD,aAAa;GACX,QAAQ;GACR,cAAc,YAAY;EAC5B;CACF,GAAG;EAAC;EAAa;EAAgB;EAAc;EAAY;CAAc,CAAC;CAC1E,MAAM,gBAAgB;EACpB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,MAAM,qBAAqB;GACzB,MAAM,OAAO,QAAQ,sBAAsB;GAC3C,SAAS,KAAK,KAAK;GACnB,WAAW,EACT,aAAa,EACX,QAAQ;IAAE,GAAG,KAAK;IAAG,GAAG,KAAK;IAAG,OAAO,KAAK;IAAO,QAAQ,KAAK;GAAO,EACzE,EACF,CAAC;EACH;EACA,aAAa;EACb,MAAM,WAAW,IAAI,eAAe,YAAY;EAChD,SAAS,QAAQ,OAAO;EACxB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,QAAQ,CAAC;CACb,MAAM,iBAAiB,MAAM,cAAc;EACzC,MAAM,aAAa;EACnB,MAAM,cAAc,MAAM,QAAQ,UAAU,IAAI,WAAW,KAAK,OAAO,iBAAiB,IAAI,CAAC,UAAU;EACvG,OAAO,YAAY,QAChB,QAAQ,UAAU,SAAS,OAAO,UAAU,WAAW,OAAO,OAAO,QAAQ,KAAK,IAAI,QACvF,CAAC,CACH;CACF,GAAG,CAAC,KAAK,CAAC;CACV,OAAuB,oBACrB,OACA;EACE,GAAG;EACH,KAAK;EACL,OAAO;GACL,SAAS,WAAW,IAAI,SAAS;GACjC,QAAQ;GACR,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,iBAAiB;GACjB,OAAO;GACP,WAAW,cAAc,EAAE,IAAI,SAAS,OAAQ,MAAM;GACtD,QAAQ,OAAO;GACf,GAAG;EACL;CACF,CACF;AACF"}