react-alp-connection-state 9.0.0 → 10.0.0
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/CHANGELOG.md +10 -0
- package/dist/index-browser.cjs.js +38 -33
- package/dist/index-browser.cjs.js.map +1 -1
- package/dist/index-browser.es.js +35 -30
- package/dist/index-browser.es.js.map +1 -1
- package/dist/{index-node20.mjs → index-node22.mjs} +35 -30
- package/dist/{index-node20.mjs.map → index-node22.mjs.map} +1 -1
- package/package.json +11 -21
- package/dist/index-node20.cjs +0 -104
- package/dist/index-node20.cjs.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [10.0.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@9.0.0...react-alp-connection-state@10.0.0) (2025-10-27)
|
|
7
|
+
|
|
8
|
+
### ⚠ BREAKING CHANGES
|
|
9
|
+
|
|
10
|
+
* drop node 20 and build using esbuild
|
|
11
|
+
|
|
12
|
+
### Features
|
|
13
|
+
|
|
14
|
+
* drop node 20 and build using esbuild ([812c4c1](https://github.com/christophehurpeau/alp/commit/812c4c1b0ad19984e389af4382a8d1e60643e4f1))
|
|
15
|
+
|
|
6
16
|
## [9.0.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@8.1.1...react-alp-connection-state@9.0.0) (2025-08-02)
|
|
7
17
|
|
|
8
18
|
### ⚠ BREAKING CHANGES
|
|
@@ -2,34 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const react = require('react');
|
|
6
|
-
const reactNative = require('react-native');
|
|
7
5
|
const jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
const react = require('react');
|
|
7
|
+
const reactNativeWeb = require('react-native-web');
|
|
8
8
|
|
|
9
9
|
const defaultTheme = {
|
|
10
10
|
container: {
|
|
11
11
|
backgroundColor: "rgba(247, 25, 0, 0.8)",
|
|
12
12
|
color: "#fff",
|
|
13
|
-
textShadowOffset: {
|
|
14
|
-
width: 0,
|
|
15
|
-
height: -1
|
|
16
|
-
},
|
|
13
|
+
textShadowOffset: { width: 0, height: -1 },
|
|
17
14
|
textShadowRadius: 1
|
|
18
15
|
},
|
|
19
16
|
backgroundColorConnected: "rgba(25, 200, 60, 0.8)"
|
|
20
17
|
};
|
|
18
|
+
const zDepth1 = "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)";
|
|
21
19
|
const useCreateCalcNative = () => {
|
|
22
|
-
const dimensions =
|
|
20
|
+
const dimensions = reactNativeWeb.useWindowDimensions();
|
|
23
21
|
return (webCalc, createCalc) => createCalc(dimensions);
|
|
24
22
|
};
|
|
25
23
|
const useCreateCalcWeb = () => {
|
|
26
|
-
return webCalc => `calc(${webCalc})`;
|
|
24
|
+
return (webCalc) => `calc(${webCalc})`;
|
|
27
25
|
};
|
|
28
|
-
const useCreateCalc =
|
|
29
|
-
|
|
30
|
-
// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
|
|
31
|
-
|
|
32
|
-
const styles = reactNative.StyleSheet.create({
|
|
26
|
+
const useCreateCalc = reactNativeWeb.Platform.OS === "web" ? useCreateCalcWeb : useCreateCalcNative;
|
|
27
|
+
const styles = reactNativeWeb.StyleSheet.create({
|
|
33
28
|
connectionStateContainer: {
|
|
34
29
|
backgroundColor: defaultTheme.container.backgroundColor,
|
|
35
30
|
position: "absolute",
|
|
@@ -40,7 +35,7 @@ const styles = reactNative.StyleSheet.create({
|
|
|
40
35
|
color: defaultTheme.container.color,
|
|
41
36
|
textShadowOffset: defaultTheme.container.textShadowOffset,
|
|
42
37
|
textShadowRadius: defaultTheme.container.textShadowRadius,
|
|
43
|
-
boxShadow:
|
|
38
|
+
boxShadow: zDepth1,
|
|
44
39
|
zIndex: 9,
|
|
45
40
|
// @ts-expect-error -- transition is not a valid style
|
|
46
41
|
transition: "top .8s, background-color .2s"
|
|
@@ -69,10 +64,7 @@ function ConnectionState({
|
|
|
69
64
|
}) {
|
|
70
65
|
const unloadingRef = react.useRef(false);
|
|
71
66
|
const createCalc = useCreateCalc();
|
|
72
|
-
const left = createCalc("50% - 100px", ({
|
|
73
|
-
width
|
|
74
|
-
}) => width / 2 - 100); // TODO use calc() in web ?
|
|
75
|
-
|
|
67
|
+
const left = createCalc("50% - 100px", ({ width }) => width / 2 - 100);
|
|
76
68
|
react.useEffect(() => {
|
|
77
69
|
if (typeof globalThis === "undefined") return;
|
|
78
70
|
const beforeUnloadHandler = () => {
|
|
@@ -83,21 +75,34 @@ function ConnectionState({
|
|
|
83
75
|
window.removeEventListener("beforeunload", beforeUnloadHandler);
|
|
84
76
|
};
|
|
85
77
|
}, []);
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
children:
|
|
99
|
-
|
|
100
|
-
|
|
78
|
+
const shouldHide = forceHidden || !state || state === "connected";
|
|
79
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
80
|
+
reactNativeWeb.View,
|
|
81
|
+
{
|
|
82
|
+
style: [
|
|
83
|
+
styles.connectionStateContainer,
|
|
84
|
+
shouldHide && styles.hide,
|
|
85
|
+
theme?.container,
|
|
86
|
+
state === "connected" && {
|
|
87
|
+
backgroundColor: (theme || defaultTheme).backgroundColorConnected
|
|
88
|
+
}
|
|
89
|
+
],
|
|
90
|
+
children: !state ? null : /* @__PURE__ */ jsxRuntime.jsx(
|
|
91
|
+
reactNativeWeb.Text,
|
|
92
|
+
{
|
|
93
|
+
style: [
|
|
94
|
+
styles.connectionStateText,
|
|
95
|
+
theme && { backgroundColor: theme.container.backgroundColor },
|
|
96
|
+
state === "connected" && {
|
|
97
|
+
backgroundColor: (theme || defaultTheme).backgroundColorConnected
|
|
98
|
+
},
|
|
99
|
+
{ left }
|
|
100
|
+
],
|
|
101
|
+
children
|
|
102
|
+
}
|
|
103
|
+
)
|
|
104
|
+
}
|
|
105
|
+
);
|
|
101
106
|
}
|
|
102
107
|
|
|
103
108
|
exports.ConnectionState = ConnectionState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-browser.cjs.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type { DimensionValue, ScaledSize } from \"react-native\";\nimport {\n Platform,\n StyleSheet,\n Text,\n View,\n useWindowDimensions,\n} from \"react-native\";\n\nconst defaultTheme = {\n container: {\n backgroundColor: \"rgba(247, 25, 0, 0.8)\",\n color: \"#fff\",\n textShadowColor: \"#111\",\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: \"rgba(25, 200, 60, 0.8)\",\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = \"connected\" | \"connecting\" | \"disconnected\" | null;\n\nexport interface ConnectionStateProps {\n theme?: ConnectionStateTheme;\n forceHidden?: boolean;\n state: State;\n children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n \"0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)\";\n\ntype CreateCalc = (\n webCalc: string,\n createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n Platform.OS === \"web\" ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n connectionStateContainer: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n top: 0,\n right: 0,\n left: 0,\n height: 2,\n color: defaultTheme.container.color,\n textShadowOffset: defaultTheme.container.textShadowOffset,\n textShadowRadius: defaultTheme.container.textShadowRadius,\n boxShadow: zDepth1,\n zIndex: 9,\n // @ts-expect-error -- transition is not a valid style\n transition: \"top .8s, background-color .2s\",\n },\n hide: {\n top: -24,\n },\n connectionStateText: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n width: 200,\n height: 22,\n lineHeight: 22,\n top: 2,\n textAlign: \"center\",\n borderBottomLeftRadius: 5,\n borderBottomRightRadius: 5,\n transition: \"background-color .2s\",\n },\n});\n\nexport function ConnectionState({\n theme,\n forceHidden,\n state,\n children,\n}: ConnectionStateProps): ReactElement | null {\n const unloadingRef = useRef<boolean>(false);\n\n const createCalc = useCreateCalc();\n const left = createCalc(\"50% - 100px\", ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n useEffect((): (() => void) | undefined => {\n if (typeof globalThis === \"undefined\") return;\n\n const beforeUnloadHandler = (): void => {\n unloadingRef.current = true;\n };\n window.addEventListener(\"beforeunload\", beforeUnloadHandler);\n\n return (): void => {\n window.removeEventListener(\"beforeunload\", beforeUnloadHandler);\n };\n }, []);\n\n const shouldHide = forceHidden || !state || state === \"connected\";\n\n return (\n <View\n style={[\n styles.connectionStateContainer,\n shouldHide && styles.hide,\n theme?.container,\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n ]}\n >\n {!state ? null : (\n <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["
|
|
1
|
+
{"version":3,"file":"index-browser.cjs.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type { DimensionValue, ScaledSize } from \"react-native\";\nimport {\n Platform,\n StyleSheet,\n Text,\n View,\n useWindowDimensions,\n} from \"react-native\";\n\nconst defaultTheme = {\n container: {\n backgroundColor: \"rgba(247, 25, 0, 0.8)\",\n color: \"#fff\",\n textShadowColor: \"#111\",\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: \"rgba(25, 200, 60, 0.8)\",\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = \"connected\" | \"connecting\" | \"disconnected\" | null;\n\nexport interface ConnectionStateProps {\n theme?: ConnectionStateTheme;\n forceHidden?: boolean;\n state: State;\n children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n \"0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)\";\n\ntype CreateCalc = (\n webCalc: string,\n createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n Platform.OS === \"web\" ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n connectionStateContainer: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n top: 0,\n right: 0,\n left: 0,\n height: 2,\n color: defaultTheme.container.color,\n textShadowOffset: defaultTheme.container.textShadowOffset,\n textShadowRadius: defaultTheme.container.textShadowRadius,\n boxShadow: zDepth1,\n zIndex: 9,\n // @ts-expect-error -- transition is not a valid style\n transition: \"top .8s, background-color .2s\",\n },\n hide: {\n top: -24,\n },\n connectionStateText: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n width: 200,\n height: 22,\n lineHeight: 22,\n top: 2,\n textAlign: \"center\",\n borderBottomLeftRadius: 5,\n borderBottomRightRadius: 5,\n transition: \"background-color .2s\",\n },\n});\n\nexport function ConnectionState({\n theme,\n forceHidden,\n state,\n children,\n}: ConnectionStateProps): ReactElement | null {\n const unloadingRef = useRef<boolean>(false);\n\n const createCalc = useCreateCalc();\n const left = createCalc(\"50% - 100px\", ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n useEffect((): (() => void) | undefined => {\n if (typeof globalThis === \"undefined\") return;\n\n const beforeUnloadHandler = (): void => {\n unloadingRef.current = true;\n };\n window.addEventListener(\"beforeunload\", beforeUnloadHandler);\n\n return (): void => {\n window.removeEventListener(\"beforeunload\", beforeUnloadHandler);\n };\n }, []);\n\n const shouldHide = forceHidden || !state || state === \"connected\";\n\n return (\n <View\n style={[\n styles.connectionStateContainer,\n shouldHide && styles.hide,\n theme?.container,\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n ]}\n >\n {!state ? null : (\n <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["useWindowDimensions","Platform","StyleSheet","useRef","useEffect","jsx","View","Text"],"mappings":"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"}
|
package/dist/index-browser.es.js
CHANGED
|
@@ -1,30 +1,25 @@
|
|
|
1
|
-
import { useRef, useEffect } from 'react';
|
|
2
|
-
import { Platform, StyleSheet, useWindowDimensions, View, Text } from 'react-native';
|
|
3
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef, useEffect } from 'react';
|
|
3
|
+
import { Platform, StyleSheet, useWindowDimensions, View, Text } from 'react-native-web';
|
|
4
4
|
|
|
5
5
|
const defaultTheme = {
|
|
6
6
|
container: {
|
|
7
7
|
backgroundColor: "rgba(247, 25, 0, 0.8)",
|
|
8
8
|
color: "#fff",
|
|
9
|
-
textShadowOffset: {
|
|
10
|
-
width: 0,
|
|
11
|
-
height: -1
|
|
12
|
-
},
|
|
9
|
+
textShadowOffset: { width: 0, height: -1 },
|
|
13
10
|
textShadowRadius: 1
|
|
14
11
|
},
|
|
15
12
|
backgroundColorConnected: "rgba(25, 200, 60, 0.8)"
|
|
16
13
|
};
|
|
14
|
+
const zDepth1 = "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)";
|
|
17
15
|
const useCreateCalcNative = () => {
|
|
18
16
|
const dimensions = useWindowDimensions();
|
|
19
17
|
return (webCalc, createCalc) => createCalc(dimensions);
|
|
20
18
|
};
|
|
21
19
|
const useCreateCalcWeb = () => {
|
|
22
|
-
return webCalc => `calc(${webCalc})`;
|
|
20
|
+
return (webCalc) => `calc(${webCalc})`;
|
|
23
21
|
};
|
|
24
22
|
const useCreateCalc = Platform.OS === "web" ? useCreateCalcWeb : useCreateCalcNative;
|
|
25
|
-
|
|
26
|
-
// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
|
|
27
|
-
|
|
28
23
|
const styles = StyleSheet.create({
|
|
29
24
|
connectionStateContainer: {
|
|
30
25
|
backgroundColor: defaultTheme.container.backgroundColor,
|
|
@@ -36,7 +31,7 @@ const styles = StyleSheet.create({
|
|
|
36
31
|
color: defaultTheme.container.color,
|
|
37
32
|
textShadowOffset: defaultTheme.container.textShadowOffset,
|
|
38
33
|
textShadowRadius: defaultTheme.container.textShadowRadius,
|
|
39
|
-
boxShadow:
|
|
34
|
+
boxShadow: zDepth1,
|
|
40
35
|
zIndex: 9,
|
|
41
36
|
// @ts-expect-error -- transition is not a valid style
|
|
42
37
|
transition: "top .8s, background-color .2s"
|
|
@@ -65,10 +60,7 @@ function ConnectionState({
|
|
|
65
60
|
}) {
|
|
66
61
|
const unloadingRef = useRef(false);
|
|
67
62
|
const createCalc = useCreateCalc();
|
|
68
|
-
const left = createCalc("50% - 100px", ({
|
|
69
|
-
width
|
|
70
|
-
}) => width / 2 - 100); // TODO use calc() in web ?
|
|
71
|
-
|
|
63
|
+
const left = createCalc("50% - 100px", ({ width }) => width / 2 - 100);
|
|
72
64
|
useEffect(() => {
|
|
73
65
|
if (typeof globalThis === "undefined") return;
|
|
74
66
|
const beforeUnloadHandler = () => {
|
|
@@ -79,21 +71,34 @@ function ConnectionState({
|
|
|
79
71
|
window.removeEventListener("beforeunload", beforeUnloadHandler);
|
|
80
72
|
};
|
|
81
73
|
}, []);
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
children:
|
|
95
|
-
|
|
96
|
-
|
|
74
|
+
const shouldHide = forceHidden || !state || state === "connected";
|
|
75
|
+
return /* @__PURE__ */ jsx(
|
|
76
|
+
View,
|
|
77
|
+
{
|
|
78
|
+
style: [
|
|
79
|
+
styles.connectionStateContainer,
|
|
80
|
+
shouldHide && styles.hide,
|
|
81
|
+
theme?.container,
|
|
82
|
+
state === "connected" && {
|
|
83
|
+
backgroundColor: (theme || defaultTheme).backgroundColorConnected
|
|
84
|
+
}
|
|
85
|
+
],
|
|
86
|
+
children: !state ? null : /* @__PURE__ */ jsx(
|
|
87
|
+
Text,
|
|
88
|
+
{
|
|
89
|
+
style: [
|
|
90
|
+
styles.connectionStateText,
|
|
91
|
+
theme && { backgroundColor: theme.container.backgroundColor },
|
|
92
|
+
state === "connected" && {
|
|
93
|
+
backgroundColor: (theme || defaultTheme).backgroundColorConnected
|
|
94
|
+
},
|
|
95
|
+
{ left }
|
|
96
|
+
],
|
|
97
|
+
children
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
);
|
|
97
102
|
}
|
|
98
103
|
|
|
99
104
|
export { ConnectionState };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-browser.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type { DimensionValue, ScaledSize } from \"react-native\";\nimport {\n Platform,\n StyleSheet,\n Text,\n View,\n useWindowDimensions,\n} from \"react-native\";\n\nconst defaultTheme = {\n container: {\n backgroundColor: \"rgba(247, 25, 0, 0.8)\",\n color: \"#fff\",\n textShadowColor: \"#111\",\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: \"rgba(25, 200, 60, 0.8)\",\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = \"connected\" | \"connecting\" | \"disconnected\" | null;\n\nexport interface ConnectionStateProps {\n theme?: ConnectionStateTheme;\n forceHidden?: boolean;\n state: State;\n children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n \"0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)\";\n\ntype CreateCalc = (\n webCalc: string,\n createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n Platform.OS === \"web\" ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n connectionStateContainer: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n top: 0,\n right: 0,\n left: 0,\n height: 2,\n color: defaultTheme.container.color,\n textShadowOffset: defaultTheme.container.textShadowOffset,\n textShadowRadius: defaultTheme.container.textShadowRadius,\n boxShadow: zDepth1,\n zIndex: 9,\n // @ts-expect-error -- transition is not a valid style\n transition: \"top .8s, background-color .2s\",\n },\n hide: {\n top: -24,\n },\n connectionStateText: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n width: 200,\n height: 22,\n lineHeight: 22,\n top: 2,\n textAlign: \"center\",\n borderBottomLeftRadius: 5,\n borderBottomRightRadius: 5,\n transition: \"background-color .2s\",\n },\n});\n\nexport function ConnectionState({\n theme,\n forceHidden,\n state,\n children,\n}: ConnectionStateProps): ReactElement | null {\n const unloadingRef = useRef<boolean>(false);\n\n const createCalc = useCreateCalc();\n const left = createCalc(\"50% - 100px\", ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n useEffect((): (() => void) | undefined => {\n if (typeof globalThis === \"undefined\") return;\n\n const beforeUnloadHandler = (): void => {\n unloadingRef.current = true;\n };\n window.addEventListener(\"beforeunload\", beforeUnloadHandler);\n\n return (): void => {\n window.removeEventListener(\"beforeunload\", beforeUnloadHandler);\n };\n }, []);\n\n const shouldHide = forceHidden || !state || state === \"connected\";\n\n return (\n <View\n style={[\n styles.connectionStateContainer,\n shouldHide && styles.hide,\n theme?.container,\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n ]}\n >\n {!state ? null : (\n <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index-browser.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type { DimensionValue, ScaledSize } from \"react-native\";\nimport {\n Platform,\n StyleSheet,\n Text,\n View,\n useWindowDimensions,\n} from \"react-native\";\n\nconst defaultTheme = {\n container: {\n backgroundColor: \"rgba(247, 25, 0, 0.8)\",\n color: \"#fff\",\n textShadowColor: \"#111\",\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: \"rgba(25, 200, 60, 0.8)\",\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = \"connected\" | \"connecting\" | \"disconnected\" | null;\n\nexport interface ConnectionStateProps {\n theme?: ConnectionStateTheme;\n forceHidden?: boolean;\n state: State;\n children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n \"0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)\";\n\ntype CreateCalc = (\n webCalc: string,\n createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n Platform.OS === \"web\" ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n connectionStateContainer: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n top: 0,\n right: 0,\n left: 0,\n height: 2,\n color: defaultTheme.container.color,\n textShadowOffset: defaultTheme.container.textShadowOffset,\n textShadowRadius: defaultTheme.container.textShadowRadius,\n boxShadow: zDepth1,\n zIndex: 9,\n // @ts-expect-error -- transition is not a valid style\n transition: \"top .8s, background-color .2s\",\n },\n hide: {\n top: -24,\n },\n connectionStateText: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n width: 200,\n height: 22,\n lineHeight: 22,\n top: 2,\n textAlign: \"center\",\n borderBottomLeftRadius: 5,\n borderBottomRightRadius: 5,\n transition: \"background-color .2s\",\n },\n});\n\nexport function ConnectionState({\n theme,\n forceHidden,\n state,\n children,\n}: ConnectionStateProps): ReactElement | null {\n const unloadingRef = useRef<boolean>(false);\n\n const createCalc = useCreateCalc();\n const left = createCalc(\"50% - 100px\", ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n useEffect((): (() => void) | undefined => {\n if (typeof globalThis === \"undefined\") return;\n\n const beforeUnloadHandler = (): void => {\n unloadingRef.current = true;\n };\n window.addEventListener(\"beforeunload\", beforeUnloadHandler);\n\n return (): void => {\n window.removeEventListener(\"beforeunload\", beforeUnloadHandler);\n };\n }, []);\n\n const shouldHide = forceHidden || !state || state === \"connected\";\n\n return (\n <View\n style={[\n styles.connectionStateContainer,\n shouldHide && styles.hide,\n theme?.container,\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n ]}\n >\n {!state ? null : (\n <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,30 +1,25 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
1
2
|
import { useRef, useEffect } from 'react';
|
|
2
3
|
import { Platform, StyleSheet, useWindowDimensions, View, Text } from 'react-native';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
const defaultTheme = {
|
|
6
6
|
container: {
|
|
7
7
|
backgroundColor: "rgba(247, 25, 0, 0.8)",
|
|
8
8
|
color: "#fff",
|
|
9
|
-
textShadowOffset: {
|
|
10
|
-
width: 0,
|
|
11
|
-
height: -1
|
|
12
|
-
},
|
|
9
|
+
textShadowOffset: { width: 0, height: -1 },
|
|
13
10
|
textShadowRadius: 1
|
|
14
11
|
},
|
|
15
12
|
backgroundColorConnected: "rgba(25, 200, 60, 0.8)"
|
|
16
13
|
};
|
|
14
|
+
const zDepth1 = "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)";
|
|
17
15
|
const useCreateCalcNative = () => {
|
|
18
16
|
const dimensions = useWindowDimensions();
|
|
19
17
|
return (webCalc, createCalc) => createCalc(dimensions);
|
|
20
18
|
};
|
|
21
19
|
const useCreateCalcWeb = () => {
|
|
22
|
-
return webCalc => `calc(${webCalc})`;
|
|
20
|
+
return (webCalc) => `calc(${webCalc})`;
|
|
23
21
|
};
|
|
24
22
|
const useCreateCalc = Platform.OS === "web" ? useCreateCalcWeb : useCreateCalcNative;
|
|
25
|
-
|
|
26
|
-
// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
|
|
27
|
-
|
|
28
23
|
const styles = StyleSheet.create({
|
|
29
24
|
connectionStateContainer: {
|
|
30
25
|
backgroundColor: defaultTheme.container.backgroundColor,
|
|
@@ -36,7 +31,7 @@ const styles = StyleSheet.create({
|
|
|
36
31
|
color: defaultTheme.container.color,
|
|
37
32
|
textShadowOffset: defaultTheme.container.textShadowOffset,
|
|
38
33
|
textShadowRadius: defaultTheme.container.textShadowRadius,
|
|
39
|
-
boxShadow:
|
|
34
|
+
boxShadow: zDepth1,
|
|
40
35
|
zIndex: 9,
|
|
41
36
|
// @ts-expect-error -- transition is not a valid style
|
|
42
37
|
transition: "top .8s, background-color .2s"
|
|
@@ -65,10 +60,7 @@ function ConnectionState({
|
|
|
65
60
|
}) {
|
|
66
61
|
const unloadingRef = useRef(false);
|
|
67
62
|
const createCalc = useCreateCalc();
|
|
68
|
-
const left = createCalc("50% - 100px", ({
|
|
69
|
-
width
|
|
70
|
-
}) => width / 2 - 100); // TODO use calc() in web ?
|
|
71
|
-
|
|
63
|
+
const left = createCalc("50% - 100px", ({ width }) => width / 2 - 100);
|
|
72
64
|
useEffect(() => {
|
|
73
65
|
if (typeof globalThis === "undefined") return;
|
|
74
66
|
const beforeUnloadHandler = () => {
|
|
@@ -79,22 +71,35 @@ function ConnectionState({
|
|
|
79
71
|
window.removeEventListener("beforeunload", beforeUnloadHandler);
|
|
80
72
|
};
|
|
81
73
|
}, []);
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
children:
|
|
95
|
-
|
|
96
|
-
|
|
74
|
+
const shouldHide = forceHidden || !state || state === "connected";
|
|
75
|
+
return /* @__PURE__ */ jsx(
|
|
76
|
+
View,
|
|
77
|
+
{
|
|
78
|
+
style: [
|
|
79
|
+
styles.connectionStateContainer,
|
|
80
|
+
shouldHide && styles.hide,
|
|
81
|
+
theme?.container,
|
|
82
|
+
state === "connected" && {
|
|
83
|
+
backgroundColor: (theme || defaultTheme).backgroundColorConnected
|
|
84
|
+
}
|
|
85
|
+
],
|
|
86
|
+
children: !state ? null : /* @__PURE__ */ jsx(
|
|
87
|
+
Text,
|
|
88
|
+
{
|
|
89
|
+
style: [
|
|
90
|
+
styles.connectionStateText,
|
|
91
|
+
theme && { backgroundColor: theme.container.backgroundColor },
|
|
92
|
+
state === "connected" && {
|
|
93
|
+
backgroundColor: (theme || defaultTheme).backgroundColorConnected
|
|
94
|
+
},
|
|
95
|
+
{ left }
|
|
96
|
+
],
|
|
97
|
+
children
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
);
|
|
97
102
|
}
|
|
98
103
|
|
|
99
104
|
export { ConnectionState };
|
|
100
|
-
//# sourceMappingURL=index-
|
|
105
|
+
//# sourceMappingURL=index-node22.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-node22.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type { DimensionValue, ScaledSize } from \"react-native\";\nimport {\n Platform,\n StyleSheet,\n Text,\n View,\n useWindowDimensions,\n} from \"react-native\";\n\nconst defaultTheme = {\n container: {\n backgroundColor: \"rgba(247, 25, 0, 0.8)\",\n color: \"#fff\",\n textShadowColor: \"#111\",\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: \"rgba(25, 200, 60, 0.8)\",\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = \"connected\" | \"connecting\" | \"disconnected\" | null;\n\nexport interface ConnectionStateProps {\n theme?: ConnectionStateTheme;\n forceHidden?: boolean;\n state: State;\n children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n \"0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)\";\n\ntype CreateCalc = (\n webCalc: string,\n createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n Platform.OS === \"web\" ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n connectionStateContainer: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n top: 0,\n right: 0,\n left: 0,\n height: 2,\n color: defaultTheme.container.color,\n textShadowOffset: defaultTheme.container.textShadowOffset,\n textShadowRadius: defaultTheme.container.textShadowRadius,\n boxShadow: zDepth1,\n zIndex: 9,\n // @ts-expect-error -- transition is not a valid style\n transition: \"top .8s, background-color .2s\",\n },\n hide: {\n top: -24,\n },\n connectionStateText: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n width: 200,\n height: 22,\n lineHeight: 22,\n top: 2,\n textAlign: \"center\",\n borderBottomLeftRadius: 5,\n borderBottomRightRadius: 5,\n transition: \"background-color .2s\",\n },\n});\n\nexport function ConnectionState({\n theme,\n forceHidden,\n state,\n children,\n}: ConnectionStateProps): ReactElement | null {\n const unloadingRef = useRef<boolean>(false);\n\n const createCalc = useCreateCalc();\n const left = createCalc(\"50% - 100px\", ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n useEffect((): (() => void) | undefined => {\n if (typeof globalThis === \"undefined\") return;\n\n const beforeUnloadHandler = (): void => {\n unloadingRef.current = true;\n };\n window.addEventListener(\"beforeunload\", beforeUnloadHandler);\n\n return (): void => {\n window.removeEventListener(\"beforeunload\", beforeUnloadHandler);\n };\n }, []);\n\n const shouldHide = forceHidden || !state || state === \"connected\";\n\n return (\n <View\n style={[\n styles.connectionStateContainer,\n shouldHide && styles.hide,\n theme?.container,\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n ]}\n >\n {!state ? null : (\n <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-alp-connection-state",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.0",
|
|
4
4
|
"description": "connection state",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com)",
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
"homepage": "https://github.com/christophehurpeau/alp",
|
|
14
14
|
"type": "module",
|
|
15
15
|
"engines": {
|
|
16
|
-
"node": ">=
|
|
16
|
+
"node": ">=22.18.0"
|
|
17
17
|
},
|
|
18
18
|
"sideEffects": false,
|
|
19
|
-
"main": "./dist/index-
|
|
19
|
+
"main": "./dist/index-node22.mjs",
|
|
20
20
|
"types": "./dist/definitions/index.d.ts",
|
|
21
21
|
"module": "./dist/index-browser.es.js",
|
|
22
22
|
"browser": "./dist/index-browser.es.js",
|
|
@@ -25,8 +25,7 @@
|
|
|
25
25
|
".": {
|
|
26
26
|
"types": "./dist/definitions/index.d.ts",
|
|
27
27
|
"node": {
|
|
28
|
-
"import": "./dist/index-
|
|
29
|
-
"require": "./dist/index-node20.cjs"
|
|
28
|
+
"import": "./dist/index-node22.mjs"
|
|
30
29
|
},
|
|
31
30
|
"browser": {
|
|
32
31
|
"import": "./dist/index-browser.es.js",
|
|
@@ -42,7 +41,7 @@
|
|
|
42
41
|
"build": "yarn clean:build && rollup --config rollup.config.mjs && yarn run build:definitions",
|
|
43
42
|
"build:definitions": "tsc -p tsconfig.json",
|
|
44
43
|
"clean": "yarn clean:build",
|
|
45
|
-
"clean:build": "pob-
|
|
44
|
+
"clean:build": "pob-esbuild-clean-out dist",
|
|
46
45
|
"lint": "yarn run lint:eslint",
|
|
47
46
|
"lint:eslint": "yarn ../.. run eslint --quiet packages/react-alp-connection-state",
|
|
48
47
|
"watch": "yarn clean:build && rollup --config rollup.config.mjs --watch"
|
|
@@ -57,18 +56,14 @@
|
|
|
57
56
|
]
|
|
58
57
|
},
|
|
59
58
|
"pob": {
|
|
60
|
-
"bundler": "rollup-
|
|
59
|
+
"bundler": "rollup-esbuild",
|
|
61
60
|
"entries": [
|
|
62
61
|
"index"
|
|
63
62
|
],
|
|
64
63
|
"envs": [
|
|
65
64
|
{
|
|
66
65
|
"target": "node",
|
|
67
|
-
"version": "
|
|
68
|
-
"formats": [
|
|
69
|
-
"cjs",
|
|
70
|
-
"es"
|
|
71
|
-
]
|
|
66
|
+
"version": "22"
|
|
72
67
|
},
|
|
73
68
|
{
|
|
74
69
|
"target": "browser",
|
|
@@ -78,7 +73,8 @@
|
|
|
78
73
|
]
|
|
79
74
|
}
|
|
80
75
|
],
|
|
81
|
-
"jsx": true
|
|
76
|
+
"jsx": true,
|
|
77
|
+
"typescript": true
|
|
82
78
|
},
|
|
83
79
|
"prettier": "@pob/root/prettier-config",
|
|
84
80
|
"peerDependencies": {
|
|
@@ -90,15 +86,9 @@
|
|
|
90
86
|
"optional": true
|
|
91
87
|
}
|
|
92
88
|
},
|
|
93
|
-
"dependencies": {
|
|
94
|
-
"@babel/runtime": "^7.28.2"
|
|
95
|
-
},
|
|
96
89
|
"devDependencies": {
|
|
97
|
-
"@
|
|
98
|
-
"@babel/preset-env": "7.28.0",
|
|
99
|
-
"@babel/preset-react": "7.27.1",
|
|
100
|
-
"pob-babel": "43.7.0",
|
|
90
|
+
"@pob/rollup-esbuild": "6.7.0",
|
|
101
91
|
"react": "19.1.1",
|
|
102
|
-
"typescript": "5.
|
|
92
|
+
"typescript": "5.9.2"
|
|
103
93
|
}
|
|
104
94
|
}
|
package/dist/index-node20.cjs
DELETED
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
-
|
|
5
|
-
const react = require('react');
|
|
6
|
-
const reactNative = require('react-native');
|
|
7
|
-
const jsxRuntime = require('react/jsx-runtime');
|
|
8
|
-
|
|
9
|
-
const defaultTheme = {
|
|
10
|
-
container: {
|
|
11
|
-
backgroundColor: "rgba(247, 25, 0, 0.8)",
|
|
12
|
-
color: "#fff",
|
|
13
|
-
textShadowOffset: {
|
|
14
|
-
width: 0,
|
|
15
|
-
height: -1
|
|
16
|
-
},
|
|
17
|
-
textShadowRadius: 1
|
|
18
|
-
},
|
|
19
|
-
backgroundColorConnected: "rgba(25, 200, 60, 0.8)"
|
|
20
|
-
};
|
|
21
|
-
const useCreateCalcNative = () => {
|
|
22
|
-
const dimensions = reactNative.useWindowDimensions();
|
|
23
|
-
return (webCalc, createCalc) => createCalc(dimensions);
|
|
24
|
-
};
|
|
25
|
-
const useCreateCalcWeb = () => {
|
|
26
|
-
return webCalc => `calc(${webCalc})`;
|
|
27
|
-
};
|
|
28
|
-
const useCreateCalc = reactNative.Platform.OS === "web" ? useCreateCalcWeb : useCreateCalcNative;
|
|
29
|
-
|
|
30
|
-
// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
|
|
31
|
-
|
|
32
|
-
const styles = reactNative.StyleSheet.create({
|
|
33
|
-
connectionStateContainer: {
|
|
34
|
-
backgroundColor: defaultTheme.container.backgroundColor,
|
|
35
|
-
position: "absolute",
|
|
36
|
-
top: 0,
|
|
37
|
-
right: 0,
|
|
38
|
-
left: 0,
|
|
39
|
-
height: 2,
|
|
40
|
-
color: defaultTheme.container.color,
|
|
41
|
-
textShadowOffset: defaultTheme.container.textShadowOffset,
|
|
42
|
-
textShadowRadius: defaultTheme.container.textShadowRadius,
|
|
43
|
-
boxShadow: "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)",
|
|
44
|
-
zIndex: 9,
|
|
45
|
-
// @ts-expect-error -- transition is not a valid style
|
|
46
|
-
transition: "top .8s, background-color .2s"
|
|
47
|
-
},
|
|
48
|
-
hide: {
|
|
49
|
-
top: -24
|
|
50
|
-
},
|
|
51
|
-
connectionStateText: {
|
|
52
|
-
backgroundColor: defaultTheme.container.backgroundColor,
|
|
53
|
-
position: "absolute",
|
|
54
|
-
width: 200,
|
|
55
|
-
height: 22,
|
|
56
|
-
lineHeight: 22,
|
|
57
|
-
top: 2,
|
|
58
|
-
textAlign: "center",
|
|
59
|
-
borderBottomLeftRadius: 5,
|
|
60
|
-
borderBottomRightRadius: 5,
|
|
61
|
-
transition: "background-color .2s"
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
function ConnectionState({
|
|
65
|
-
theme,
|
|
66
|
-
forceHidden,
|
|
67
|
-
state,
|
|
68
|
-
children
|
|
69
|
-
}) {
|
|
70
|
-
const unloadingRef = react.useRef(false);
|
|
71
|
-
const createCalc = useCreateCalc();
|
|
72
|
-
const left = createCalc("50% - 100px", ({
|
|
73
|
-
width
|
|
74
|
-
}) => width / 2 - 100); // TODO use calc() in web ?
|
|
75
|
-
|
|
76
|
-
react.useEffect(() => {
|
|
77
|
-
if (typeof globalThis === "undefined") return;
|
|
78
|
-
const beforeUnloadHandler = () => {
|
|
79
|
-
unloadingRef.current = true;
|
|
80
|
-
};
|
|
81
|
-
window.addEventListener("beforeunload", beforeUnloadHandler);
|
|
82
|
-
return () => {
|
|
83
|
-
window.removeEventListener("beforeunload", beforeUnloadHandler);
|
|
84
|
-
};
|
|
85
|
-
}, []);
|
|
86
|
-
return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
|
|
87
|
-
style: [styles.connectionStateContainer, (forceHidden || !state || state === "connected") && styles.hide, theme?.container, state === "connected" && {
|
|
88
|
-
backgroundColor: (theme || defaultTheme).backgroundColorConnected
|
|
89
|
-
}],
|
|
90
|
-
children: !state ? null : /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
|
|
91
|
-
style: [styles.connectionStateText, theme && {
|
|
92
|
-
backgroundColor: theme.container.backgroundColor
|
|
93
|
-
}, state === "connected" && {
|
|
94
|
-
backgroundColor: (theme || defaultTheme).backgroundColorConnected
|
|
95
|
-
}, {
|
|
96
|
-
left
|
|
97
|
-
}],
|
|
98
|
-
children: children
|
|
99
|
-
})
|
|
100
|
-
});
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
exports.ConnectionState = ConnectionState;
|
|
104
|
-
//# sourceMappingURL=index-node20.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index-node20.cjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type { DimensionValue, ScaledSize } from \"react-native\";\nimport {\n Platform,\n StyleSheet,\n Text,\n View,\n useWindowDimensions,\n} from \"react-native\";\n\nconst defaultTheme = {\n container: {\n backgroundColor: \"rgba(247, 25, 0, 0.8)\",\n color: \"#fff\",\n textShadowColor: \"#111\",\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: \"rgba(25, 200, 60, 0.8)\",\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = \"connected\" | \"connecting\" | \"disconnected\" | null;\n\nexport interface ConnectionStateProps {\n theme?: ConnectionStateTheme;\n forceHidden?: boolean;\n state: State;\n children: NonNullable<ReactNode>;\n}\n\nconst zDepth1 =\n \"0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)\";\n\ntype CreateCalc = (\n webCalc: string,\n createCalc: (dimensions: ScaledSize) => DimensionValue,\n) => DimensionValue;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})` as DimensionValue;\n};\nconst useCreateCalc =\n Platform.OS === \"web\" ? useCreateCalcWeb : useCreateCalcNative;\n\n// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);\n\nconst styles = StyleSheet.create({\n connectionStateContainer: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n top: 0,\n right: 0,\n left: 0,\n height: 2,\n color: defaultTheme.container.color,\n textShadowOffset: defaultTheme.container.textShadowOffset,\n textShadowRadius: defaultTheme.container.textShadowRadius,\n boxShadow: zDepth1,\n zIndex: 9,\n // @ts-expect-error -- transition is not a valid style\n transition: \"top .8s, background-color .2s\",\n },\n hide: {\n top: -24,\n },\n connectionStateText: {\n backgroundColor: defaultTheme.container.backgroundColor,\n position: \"absolute\",\n width: 200,\n height: 22,\n lineHeight: 22,\n top: 2,\n textAlign: \"center\",\n borderBottomLeftRadius: 5,\n borderBottomRightRadius: 5,\n transition: \"background-color .2s\",\n },\n});\n\nexport function ConnectionState({\n theme,\n forceHidden,\n state,\n children,\n}: ConnectionStateProps): ReactElement | null {\n const unloadingRef = useRef<boolean>(false);\n\n const createCalc = useCreateCalc();\n const left = createCalc(\"50% - 100px\", ({ width }) => width / 2 - 100); // TODO use calc() in web ?\n\n useEffect((): (() => void) | undefined => {\n if (typeof globalThis === \"undefined\") return;\n\n const beforeUnloadHandler = (): void => {\n unloadingRef.current = true;\n };\n window.addEventListener(\"beforeunload\", beforeUnloadHandler);\n\n return (): void => {\n window.removeEventListener(\"beforeunload\", beforeUnloadHandler);\n };\n }, []);\n\n const shouldHide = forceHidden || !state || state === \"connected\";\n\n return (\n <View\n style={[\n styles.connectionStateContainer,\n shouldHide && styles.hide,\n theme?.container,\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n ]}\n >\n {!state ? null : (\n <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === \"connected\" && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","globalThis","beforeUnloadHandler","current","window","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
|