@korsolutions/ui 0.0.95 → 0.0.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module/components/full-screen-spinner/index.js +6 -0
- package/dist/module/components/full-screen-spinner/index.js.map +1 -0
- package/dist/module/components/full-screen-spinner/manager.js +91 -0
- package/dist/module/components/full-screen-spinner/manager.js.map +1 -0
- package/dist/module/components/index.js +1 -0
- package/dist/module/components/index.js.map +1 -1
- package/dist/module/index.js +2 -1
- package/dist/module/index.js.map +1 -1
- package/dist/module/utils/hsla-utils.js +10 -0
- package/dist/module/utils/hsla-utils.js.map +1 -1
- package/dist/typescript/src/components/full-screen-spinner/index.d.ts +7 -0
- package/dist/typescript/src/components/full-screen-spinner/index.d.ts.map +1 -0
- package/dist/typescript/src/components/full-screen-spinner/manager.d.ts +14 -0
- package/dist/typescript/src/components/full-screen-spinner/manager.d.ts.map +1 -0
- package/dist/typescript/src/components/index.d.ts +1 -0
- package/dist/typescript/src/components/index.d.ts.map +1 -1
- package/dist/typescript/src/index.d.ts.map +1 -1
- package/dist/typescript/src/utils/hsla-utils.d.ts +1 -0
- package/dist/typescript/src/utils/hsla-utils.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/full-screen-spinner/index.ts +5 -0
- package/src/components/full-screen-spinner/manager.tsx +98 -0
- package/src/components/index.ts +1 -0
- package/src/index.tsx +2 -0
- package/src/utils/hsla-utils.ts +11 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["FullScreenSpinnerAPI","FullScreenSpinner","FullScreenSpinnerContainer"],"sourceRoot":"../../../../src","sources":["components/full-screen-spinner/index.ts"],"mappings":";;AAAA,SAASA,oBAAoB,QAAQ,cAAW;AAEhD,OAAO,MAAMC,iBAAiB,GAAGD,oBAAoB;AACrD,SAASE,0BAA0B,QAAQ,cAAW","ignoreList":[]}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { useSyncExternalStore } from "react";
|
|
4
|
+
import { StyleSheet, Text, View } from "react-native";
|
|
5
|
+
import { setHSLAOpacity } from "../../utils/hsla-utils.js";
|
|
6
|
+
import { useThemedStyles } from "../../utils/use-themed-styles.js";
|
|
7
|
+
import { Portal } from "../portal/index.js";
|
|
8
|
+
import { Spinner } from "../spinner/index.js";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
const store = {
|
|
11
|
+
state: null,
|
|
12
|
+
listeners: new Set()
|
|
13
|
+
};
|
|
14
|
+
function emit() {
|
|
15
|
+
for (const cb of store.listeners) cb();
|
|
16
|
+
}
|
|
17
|
+
function getSnapshot() {
|
|
18
|
+
return store.state;
|
|
19
|
+
}
|
|
20
|
+
function subscribe(cb) {
|
|
21
|
+
store.listeners.add(cb);
|
|
22
|
+
return () => {
|
|
23
|
+
store.listeners.delete(cb);
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
function show(config = {}) {
|
|
27
|
+
store.state = config;
|
|
28
|
+
emit();
|
|
29
|
+
}
|
|
30
|
+
function hide() {
|
|
31
|
+
store.state = null;
|
|
32
|
+
emit();
|
|
33
|
+
}
|
|
34
|
+
export const FullScreenSpinnerAPI = {
|
|
35
|
+
show,
|
|
36
|
+
hide
|
|
37
|
+
};
|
|
38
|
+
export const FULL_SCREEN_SPINNER_PORTAL_NAME = "full-screen-spinner-portal";
|
|
39
|
+
export function FullScreenSpinnerContainer() {
|
|
40
|
+
const state = useSyncExternalStore(subscribe, getSnapshot);
|
|
41
|
+
const styles = useFullScreenSpinnerStyles();
|
|
42
|
+
if (!state) return null;
|
|
43
|
+
return /*#__PURE__*/_jsx(Portal, {
|
|
44
|
+
name: FULL_SCREEN_SPINNER_PORTAL_NAME,
|
|
45
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
46
|
+
style: styles.overlay,
|
|
47
|
+
children: /*#__PURE__*/_jsxs(View, {
|
|
48
|
+
style: styles.content,
|
|
49
|
+
children: [/*#__PURE__*/_jsx(Spinner, {}), !!state.description && /*#__PURE__*/_jsx(Text, {
|
|
50
|
+
style: styles.description,
|
|
51
|
+
children: state.description
|
|
52
|
+
})]
|
|
53
|
+
})
|
|
54
|
+
})
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
const useFullScreenSpinnerStyles = () => {
|
|
58
|
+
return useThemedStyles(({
|
|
59
|
+
colors,
|
|
60
|
+
fontSize,
|
|
61
|
+
fontFamily,
|
|
62
|
+
spacing,
|
|
63
|
+
letterSpacing,
|
|
64
|
+
radius
|
|
65
|
+
}) => ({
|
|
66
|
+
overlay: {
|
|
67
|
+
...StyleSheet.absoluteFillObject,
|
|
68
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
69
|
+
justifyContent: "center",
|
|
70
|
+
alignItems: "center",
|
|
71
|
+
zIndex: 9999
|
|
72
|
+
},
|
|
73
|
+
content: {
|
|
74
|
+
alignItems: "center",
|
|
75
|
+
gap: spacing * 2,
|
|
76
|
+
padding: spacing * 4,
|
|
77
|
+
backgroundColor: setHSLAOpacity(colors.surface, 0.75),
|
|
78
|
+
borderRadius: radius
|
|
79
|
+
},
|
|
80
|
+
spinner: {
|
|
81
|
+
color: colors.primary
|
|
82
|
+
},
|
|
83
|
+
description: {
|
|
84
|
+
color: colors.primary,
|
|
85
|
+
fontSize: fontSize,
|
|
86
|
+
fontFamily: fontFamily,
|
|
87
|
+
letterSpacing: letterSpacing
|
|
88
|
+
}
|
|
89
|
+
}));
|
|
90
|
+
};
|
|
91
|
+
//# sourceMappingURL=manager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useSyncExternalStore","StyleSheet","Text","View","setHSLAOpacity","useThemedStyles","Portal","Spinner","jsx","_jsx","jsxs","_jsxs","store","state","listeners","Set","emit","cb","getSnapshot","subscribe","add","delete","show","config","hide","FullScreenSpinnerAPI","FULL_SCREEN_SPINNER_PORTAL_NAME","FullScreenSpinnerContainer","styles","useFullScreenSpinnerStyles","name","children","style","overlay","content","description","colors","fontSize","fontFamily","spacing","letterSpacing","radius","absoluteFillObject","backgroundColor","justifyContent","alignItems","zIndex","gap","padding","surface","borderRadius","spinner","color","primary"],"sourceRoot":"../../../../src","sources":["components/full-screen-spinner/manager.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,6 +11,7 @@ export * from "./checkbox/index.js";
|
|
|
11
11
|
export * from "./combobox/index.js";
|
|
12
12
|
export * from "./empty/index.js";
|
|
13
13
|
export * from "./field/index.js";
|
|
14
|
+
export * from "./full-screen-spinner/index.js";
|
|
14
15
|
export * from "./icon/index.js";
|
|
15
16
|
export * from "./icon-button/index.js";
|
|
16
17
|
export * from "./input/index.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,kBAAS;AACvB,cAAc,yBAAgB;AAC9B,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,qBAAY;AAC1B,cAAc,kBAAS;AACvB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,wBAAe;AAC7B,cAAc,uBAAc;AAC5B,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,uBAAc","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,kBAAS;AACvB,cAAc,yBAAgB;AAC9B,cAAc,mBAAU;AACxB,cAAc,kBAAS;AACvB,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,qBAAY;AAC1B,cAAc,kBAAS;AACvB,cAAc,kBAAS;AACvB,cAAc,gCAAuB;AACrC,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,iBAAQ;AACtB,cAAc,wBAAe;AAC7B,cAAc,oBAAW;AACzB,cAAc,mBAAU;AACxB,cAAc,qBAAY;AAC1B,cAAc,wBAAe;AAC7B,cAAc,uBAAc;AAC5B,cAAc,mBAAU;AACxB,cAAc,sBAAa;AAC3B,cAAc,oBAAW;AACzB,cAAc,oBAAW;AACzB,cAAc,kBAAS;AACvB,cAAc,iBAAQ;AACtB,cAAc,qBAAY;AAC1B,cAAc,kBAAS;AACvB,cAAc,sBAAa;AAC3B,cAAc,uBAAc","ignoreList":[]}
|
package/dist/module/index.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import { ScrollBar } from "./components/index.js";
|
|
4
4
|
import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-dialog.js";
|
|
5
5
|
import { PortalHost } from "./components/portal/index.js";
|
|
6
|
+
import { FullScreenSpinnerContainer } from "./components/full-screen-spinner/manager.js";
|
|
6
7
|
import { ToastContainer } from "./components/toast/manager.js";
|
|
7
8
|
import { useInitializeNavigationContainerRef } from "./hooks/use-is-react-navigation-modal.js";
|
|
8
9
|
import { SafeAreaProvider } from "./safe-area/index.js";
|
|
@@ -22,7 +23,7 @@ export const UIProvider = ({
|
|
|
22
23
|
children: /*#__PURE__*/_jsxs(ThemeProvider, {
|
|
23
24
|
theme: theme,
|
|
24
25
|
components: components,
|
|
25
|
-
children: [/*#__PURE__*/_jsx(ScrollBar, {}), /*#__PURE__*/_jsx(ToastContainer, {}), children, /*#__PURE__*/_jsx(PortalHost, {
|
|
26
|
+
children: [/*#__PURE__*/_jsx(ScrollBar, {}), /*#__PURE__*/_jsx(ToastContainer, {}), /*#__PURE__*/_jsx(FullScreenSpinnerContainer, {}), children, /*#__PURE__*/_jsx(PortalHost, {
|
|
26
27
|
container: portalContainer
|
|
27
28
|
}), /*#__PURE__*/_jsx(AsyncAlertDialogManager, {})]
|
|
28
29
|
})
|
package/dist/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ScrollBar","AsyncAlertDialogManager","PortalHost","ToastContainer","useInitializeNavigationContainerRef","SafeAreaProvider","ThemeProvider","jsx","_jsx","jsxs","_jsxs","UIProvider","children","portalContainer","theme","safeAreaInsets","components","insets","container","useTheme"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,uBAAc;AACxC,SAASC,uBAAuB,QAAQ,iDAA8C;AACtF,SAASC,UAAU,QAAQ,8BAAqB;AAEhD,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,SAASC,mCAAmC,QAAQ,0CAAuC;AAC3F,SAASC,gBAAgB,QAA6B,sBAAa;AACnE,SAASC,aAAa,QAAiC,sBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW3E,OAAO,MAAMC,UAAU,GAAGA,CAAC;EACzBC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,cAAc;EACdC;AACa,CAAC,KAAK;EACnB;EACAZ,mCAAmC,CAAC,CAAC;EAErC,oBACEI,IAAA,CAACH,gBAAgB;IAACY,MAAM,EAAEF,cAAe;IAAAH,QAAA,eACvCF,KAAA,CAACJ,aAAa;MAACQ,KAAK,EAAEA,KAAM;MAACE,UAAU,EAAEA,UAAW;MAAAJ,QAAA,gBAClDJ,IAAA,
|
|
1
|
+
{"version":3,"names":["ScrollBar","AsyncAlertDialogManager","PortalHost","FullScreenSpinnerContainer","ToastContainer","useInitializeNavigationContainerRef","SafeAreaProvider","ThemeProvider","jsx","_jsx","jsxs","_jsxs","UIProvider","children","portalContainer","theme","safeAreaInsets","components","insets","container","useTheme"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,uBAAc;AACxC,SAASC,uBAAuB,QAAQ,iDAA8C;AACtF,SAASC,UAAU,QAAQ,8BAAqB;AAEhD,SAASC,0BAA0B,QAAQ,6CAA0C;AACrF,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,SAASC,mCAAmC,QAAQ,0CAAuC;AAC3F,SAASC,gBAAgB,QAA6B,sBAAa;AACnE,SAASC,aAAa,QAAiC,sBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW3E,OAAO,MAAMC,UAAU,GAAGA,CAAC;EACzBC,QAAQ;EACRC,eAAe;EACfC,KAAK;EACLC,cAAc;EACdC;AACa,CAAC,KAAK;EACnB;EACAZ,mCAAmC,CAAC,CAAC;EAErC,oBACEI,IAAA,CAACH,gBAAgB;IAACY,MAAM,EAAEF,cAAe;IAAAH,QAAA,eACvCF,KAAA,CAACJ,aAAa;MAACQ,KAAK,EAAEA,KAAM;MAACE,UAAU,EAAEA,UAAW;MAAAJ,QAAA,gBAClDJ,IAAA,CAACT,SAAS,IAAE,CAAC,eACbS,IAAA,CAACL,cAAc,IAAE,CAAC,eAClBK,IAAA,CAACN,0BAA0B,IAAE,CAAC,EAC7BU,QAAQ,eACTJ,IAAA,CAACP,UAAU;QAACiB,SAAS,EAAEL;MAAgB,CAAE,CAAC,eAC1CL,IAAA,CAACR,uBAAuB,IAAE,CAAC;IAAA,CACd;EAAC,CACA,CAAC;AAEvB,CAAC;AAED,cAAc,4BAAyB;AAEvC,cAAc,4BAAmB;AACjC,cAAc,2BAAkB;AAChC,SAASmB,QAAQ,QAAQ,sBAAmB;AAC5C,cAAc,mBAAgB;AAE9B,cAAc,uBAAc;AAE5B,cAAc,sBAAa","ignoreList":[]}
|
|
@@ -20,4 +20,14 @@ export const hslaSetRelativeLightness = (hsla, delta) => {
|
|
|
20
20
|
if (newLightness < 0) newLightness = 0;
|
|
21
21
|
return hslaSetLightness(hsla, newLightness);
|
|
22
22
|
};
|
|
23
|
+
export const setHSLAOpacity = (hsla, opacity) => {
|
|
24
|
+
const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
|
|
25
|
+
if (parts[0] === undefined) return hsla;
|
|
26
|
+
if (parts[1] === undefined) return hsla;
|
|
27
|
+
if (parts[2] === undefined) return hsla;
|
|
28
|
+
const h = parseInt(parts[0], 10);
|
|
29
|
+
const s = parseInt(parts[1], 10);
|
|
30
|
+
const l = parseInt(parts[2], 10);
|
|
31
|
+
return `hsla(${h}, ${s}%, ${l}%, ${opacity})`;
|
|
32
|
+
};
|
|
23
33
|
//# sourceMappingURL=hsla-utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["hslaSetLightness","hsla","lightness","parts","replace","split","undefined","Error","h","parseInt","s","parseFloat","hslaGetLightness","hslaSetRelativeLightness","delta","currentLightness","newLightness"],"sourceRoot":"../../../src","sources":["utils/hsla-utils.ts"],"mappings":";;AAAA,OAAO,MAAMA,gBAAgB,GAAGA,CAACC,IAAY,EAAEC,SAAiB,KAAa;EAC3E,MAAMC,KAAK,GAAGF,IAAI,CAACG,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;EAC9D,IAAIF,KAAK,CAAC,CAAC,CAAC,KAAKG,SAAS,EAAE,MAAM,IAAIC,KAAK,CAAC,2BAA2B,CAAC;EACxE,IAAIJ,KAAK,CAAC,CAAC,CAAC,KAAKG,SAAS,EAAE,MAAM,IAAIC,KAAK,CAAC,2BAA2B,CAAC;EACxE,MAAMC,CAAC,GAAGC,QAAQ,CAACN,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAChC,MAAMO,CAAC,GAAGD,QAAQ,CAACN,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAChC,OAAO,QAAQK,CAAC,KAAKE,CAAC,MAAMR,SAAS,MAAMC,KAAK,CAAC,CAAC,CAAC,GAAGQ,UAAU,CAACR,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG;AACnF,CAAC;AAED,OAAO,MAAMS,gBAAgB,GAAIX,IAAY,IAAa;EACxD,MAAME,KAAK,GAAGF,IAAI,CAACG,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;EAC9D,IAAIF,KAAK,CAAC,CAAC,CAAC,KAAKG,SAAS,EAAE,MAAM,IAAIC,KAAK,CAAC,2BAA2B,CAAC;EACxE,OAAOE,QAAQ,CAACN,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC/B,CAAC;AAED,OAAO,MAAMU,wBAAwB,GAAGA,CAACZ,IAAY,EAAEa,KAAa,KAAa;EAC/E,MAAMC,gBAAgB,GAAGH,gBAAgB,CAACX,IAAI,CAAC;EAC/C,IAAIe,YAAY,GAAGD,gBAAgB,GAAGD,KAAK;EAC3C,IAAIE,YAAY,GAAG,GAAG,EAAEA,YAAY,GAAG,GAAG;EAC1C,IAAIA,YAAY,GAAG,CAAC,EAAEA,YAAY,GAAG,CAAC;EACtC,OAAOhB,gBAAgB,CAACC,IAAI,EAAEe,YAAY,CAAC;AAC7C,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["hslaSetLightness","hsla","lightness","parts","replace","split","undefined","Error","h","parseInt","s","parseFloat","hslaGetLightness","hslaSetRelativeLightness","delta","currentLightness","newLightness","setHSLAOpacity","opacity","l"],"sourceRoot":"../../../src","sources":["utils/hsla-utils.ts"],"mappings":";;AAAA,OAAO,MAAMA,gBAAgB,GAAGA,CAACC,IAAY,EAAEC,SAAiB,KAAa;EAC3E,MAAMC,KAAK,GAAGF,IAAI,CAACG,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;EAC9D,IAAIF,KAAK,CAAC,CAAC,CAAC,KAAKG,SAAS,EAAE,MAAM,IAAIC,KAAK,CAAC,2BAA2B,CAAC;EACxE,IAAIJ,KAAK,CAAC,CAAC,CAAC,KAAKG,SAAS,EAAE,MAAM,IAAIC,KAAK,CAAC,2BAA2B,CAAC;EACxE,MAAMC,CAAC,GAAGC,QAAQ,CAACN,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAChC,MAAMO,CAAC,GAAGD,QAAQ,CAACN,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAChC,OAAO,QAAQK,CAAC,KAAKE,CAAC,MAAMR,SAAS,MAAMC,KAAK,CAAC,CAAC,CAAC,GAAGQ,UAAU,CAACR,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG;AACnF,CAAC;AAED,OAAO,MAAMS,gBAAgB,GAAIX,IAAY,IAAa;EACxD,MAAME,KAAK,GAAGF,IAAI,CAACG,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;EAC9D,IAAIF,KAAK,CAAC,CAAC,CAAC,KAAKG,SAAS,EAAE,MAAM,IAAIC,KAAK,CAAC,2BAA2B,CAAC;EACxE,OAAOE,QAAQ,CAACN,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAC/B,CAAC;AAED,OAAO,MAAMU,wBAAwB,GAAGA,CAACZ,IAAY,EAAEa,KAAa,KAAa;EAC/E,MAAMC,gBAAgB,GAAGH,gBAAgB,CAACX,IAAI,CAAC;EAC/C,IAAIe,YAAY,GAAGD,gBAAgB,GAAGD,KAAK;EAC3C,IAAIE,YAAY,GAAG,GAAG,EAAEA,YAAY,GAAG,GAAG;EAC1C,IAAIA,YAAY,GAAG,CAAC,EAAEA,YAAY,GAAG,CAAC;EACtC,OAAOhB,gBAAgB,CAACC,IAAI,EAAEe,YAAY,CAAC;AAC7C,CAAC;AAED,OAAO,MAAMC,cAAc,GAAGA,CAAChB,IAAY,EAAEiB,OAAe,KAAa;EACvE,MAAMf,KAAK,GAAGF,IAAI,CAACG,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;EAC9D,IAAIF,KAAK,CAAC,CAAC,CAAC,KAAKG,SAAS,EAAE,OAAOL,IAAI;EACvC,IAAIE,KAAK,CAAC,CAAC,CAAC,KAAKG,SAAS,EAAE,OAAOL,IAAI;EACvC,IAAIE,KAAK,CAAC,CAAC,CAAC,KAAKG,SAAS,EAAE,OAAOL,IAAI;EACvC,MAAMO,CAAC,GAAGC,QAAQ,CAACN,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAChC,MAAMO,CAAC,GAAGD,QAAQ,CAACN,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAChC,MAAMgB,CAAC,GAAGV,QAAQ,CAACN,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAChC,OAAO,QAAQK,CAAC,KAAKE,CAAC,MAAMS,CAAC,MAAMD,OAAO,GAAG;AAC/C,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const FullScreenSpinner: {
|
|
2
|
+
show: (config?: import("./manager").FullScreenSpinnerConfig) => void;
|
|
3
|
+
hide: () => void;
|
|
4
|
+
};
|
|
5
|
+
export { FullScreenSpinnerContainer } from "./manager";
|
|
6
|
+
export type { FullScreenSpinnerConfig } from "./manager";
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/full-screen-spinner/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;CAAuB,CAAC;AACtD,OAAO,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC;AACvD,YAAY,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface FullScreenSpinnerConfig {
|
|
3
|
+
description?: string;
|
|
4
|
+
}
|
|
5
|
+
declare function show(config?: FullScreenSpinnerConfig): void;
|
|
6
|
+
declare function hide(): void;
|
|
7
|
+
export declare const FullScreenSpinnerAPI: {
|
|
8
|
+
show: typeof show;
|
|
9
|
+
hide: typeof hide;
|
|
10
|
+
};
|
|
11
|
+
export declare const FULL_SCREEN_SPINNER_PORTAL_NAME = "full-screen-spinner-portal";
|
|
12
|
+
export declare function FullScreenSpinnerContainer(): React.JSX.Element | null;
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=manager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"manager.d.ts","sourceRoot":"","sources":["../../../../../src/components/full-screen-spinner/manager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,MAAM,WAAW,uBAAuB;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA2BD,iBAAS,IAAI,CAAC,MAAM,GAAE,uBAA4B,GAAG,IAAI,CAGxD;AAED,iBAAS,IAAI,IAAI,IAAI,CAGpB;AAED,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF,eAAO,MAAM,+BAA+B,+BAA+B,CAAC;AAE5E,wBAAgB,0BAA0B,6BAgBzC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAI5E,OAAO,EAAoB,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,GAAI,mEAMxB,aAAa,gCAgBf,CAAC;AAEF,cAAc,yBAAyB,CAAC;AAExC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,cAAc,gBAAgB,CAAC;AAE/B,cAAc,cAAc,CAAC;AAE7B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export declare const hslaSetLightness: (hsla: string, lightness: number) => string;
|
|
2
2
|
export declare const hslaGetLightness: (hsla: string) => number;
|
|
3
3
|
export declare const hslaSetRelativeLightness: (hsla: string, delta: number) => string;
|
|
4
|
+
export declare const setHSLAOpacity: (hsla: string, opacity: number) => string;
|
|
4
5
|
//# sourceMappingURL=hsla-utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hsla-utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/hsla-utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,EAAE,WAAW,MAAM,KAAG,MAOlE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,KAAG,MAI/C,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,KAAG,MAMtE,CAAC"}
|
|
1
|
+
{"version":3,"file":"hsla-utils.d.ts","sourceRoot":"","sources":["../../../../src/utils/hsla-utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,EAAE,WAAW,MAAM,KAAG,MAOlE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,KAAG,MAI/C,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,KAAG,MAMtE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,SAAS,MAAM,KAAG,MAS9D,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import React, { useSyncExternalStore } from "react";
|
|
2
|
+
import { StyleSheet, Text, View } from "react-native";
|
|
3
|
+
import { setHSLAOpacity } from "../../utils/hsla-utils";
|
|
4
|
+
import { useThemedStyles } from "../../utils/use-themed-styles";
|
|
5
|
+
import { Portal } from "../portal";
|
|
6
|
+
import { Spinner } from "../spinner";
|
|
7
|
+
|
|
8
|
+
export interface FullScreenSpinnerConfig {
|
|
9
|
+
description?: string;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
type FullScreenSpinnerStore = {
|
|
13
|
+
state: FullScreenSpinnerConfig | null;
|
|
14
|
+
listeners: Set<() => void>;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
const store: FullScreenSpinnerStore = {
|
|
18
|
+
state: null,
|
|
19
|
+
listeners: new Set(),
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
function emit() {
|
|
23
|
+
for (const cb of store.listeners) cb();
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function getSnapshot() {
|
|
27
|
+
return store.state;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function subscribe(cb: () => void) {
|
|
31
|
+
store.listeners.add(cb);
|
|
32
|
+
return () => {
|
|
33
|
+
store.listeners.delete(cb);
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function show(config: FullScreenSpinnerConfig = {}): void {
|
|
38
|
+
store.state = config;
|
|
39
|
+
emit();
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
function hide(): void {
|
|
43
|
+
store.state = null;
|
|
44
|
+
emit();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export const FullScreenSpinnerAPI = {
|
|
48
|
+
show,
|
|
49
|
+
hide,
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export const FULL_SCREEN_SPINNER_PORTAL_NAME = "full-screen-spinner-portal";
|
|
53
|
+
|
|
54
|
+
export function FullScreenSpinnerContainer() {
|
|
55
|
+
const state = useSyncExternalStore(subscribe, getSnapshot);
|
|
56
|
+
const styles = useFullScreenSpinnerStyles();
|
|
57
|
+
|
|
58
|
+
if (!state) return null;
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<Portal name={FULL_SCREEN_SPINNER_PORTAL_NAME}>
|
|
62
|
+
<View style={styles.overlay}>
|
|
63
|
+
<View style={styles.content}>
|
|
64
|
+
<Spinner />
|
|
65
|
+
{!!state.description && <Text style={styles.description}>{state.description}</Text>}
|
|
66
|
+
</View>
|
|
67
|
+
</View>
|
|
68
|
+
</Portal>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const useFullScreenSpinnerStyles = () => {
|
|
73
|
+
return useThemedStyles(({ colors, fontSize, fontFamily, spacing, letterSpacing, radius }) => ({
|
|
74
|
+
overlay: {
|
|
75
|
+
...StyleSheet.absoluteFillObject,
|
|
76
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
77
|
+
justifyContent: "center" as const,
|
|
78
|
+
alignItems: "center" as const,
|
|
79
|
+
zIndex: 9999,
|
|
80
|
+
},
|
|
81
|
+
content: {
|
|
82
|
+
alignItems: "center" as const,
|
|
83
|
+
gap: spacing * 2,
|
|
84
|
+
padding: spacing * 4,
|
|
85
|
+
backgroundColor: setHSLAOpacity(colors.surface, 0.75),
|
|
86
|
+
borderRadius: radius,
|
|
87
|
+
},
|
|
88
|
+
spinner: {
|
|
89
|
+
color: colors.primary,
|
|
90
|
+
},
|
|
91
|
+
description: {
|
|
92
|
+
color: colors.primary,
|
|
93
|
+
fontSize: fontSize,
|
|
94
|
+
fontFamily: fontFamily,
|
|
95
|
+
letterSpacing: letterSpacing,
|
|
96
|
+
},
|
|
97
|
+
}));
|
|
98
|
+
};
|
package/src/components/index.ts
CHANGED
package/src/index.tsx
CHANGED
|
@@ -2,6 +2,7 @@ import { ScrollBar } from "./components";
|
|
|
2
2
|
import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-dialog";
|
|
3
3
|
import { PortalHost } from "./components/portal";
|
|
4
4
|
import { type PortalHostProps } from "./components/portal/portal.constants";
|
|
5
|
+
import { FullScreenSpinnerContainer } from "./components/full-screen-spinner/manager";
|
|
5
6
|
import { ToastContainer } from "./components/toast/manager";
|
|
6
7
|
import { useInitializeNavigationContainerRef } from "./hooks/use-is-react-navigation-modal";
|
|
7
8
|
import { SafeAreaProvider, type SafeAreaInsets } from "./safe-area";
|
|
@@ -31,6 +32,7 @@ export const UIProvider = ({
|
|
|
31
32
|
<ThemeProvider theme={theme} components={components}>
|
|
32
33
|
<ScrollBar />
|
|
33
34
|
<ToastContainer />
|
|
35
|
+
<FullScreenSpinnerContainer />
|
|
34
36
|
{children}
|
|
35
37
|
<PortalHost container={portalContainer} />
|
|
36
38
|
<AsyncAlertDialogManager />
|
package/src/utils/hsla-utils.ts
CHANGED
|
@@ -20,3 +20,14 @@ export const hslaSetRelativeLightness = (hsla: string, delta: number): string =>
|
|
|
20
20
|
if (newLightness < 0) newLightness = 0;
|
|
21
21
|
return hslaSetLightness(hsla, newLightness);
|
|
22
22
|
};
|
|
23
|
+
|
|
24
|
+
export const setHSLAOpacity = (hsla: string, opacity: number): string => {
|
|
25
|
+
const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
|
|
26
|
+
if (parts[0] === undefined) return hsla;
|
|
27
|
+
if (parts[1] === undefined) return hsla;
|
|
28
|
+
if (parts[2] === undefined) return hsla;
|
|
29
|
+
const h = parseInt(parts[0], 10);
|
|
30
|
+
const s = parseInt(parts[1], 10);
|
|
31
|
+
const l = parseInt(parts[2], 10);
|
|
32
|
+
return `hsla(${h}, ${s}%, ${l}%, ${opacity})`;
|
|
33
|
+
};
|