react-alp-connection-state 8.1.1 → 9.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.
Files changed (17) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +6 -6
  3. package/dist/definitions/index.d.ts +2 -2
  4. package/dist/definitions/index.d.ts.map +1 -1
  5. package/dist/index-browser.cjs.js +18 -16
  6. package/dist/index-browser.cjs.js.map +1 -1
  7. package/dist/index-browser.es.js +16 -16
  8. package/dist/index-browser.es.js.map +1 -1
  9. package/dist/{index-node18.cjs → index-node20.cjs} +19 -17
  10. package/dist/index-node20.cjs.map +1 -0
  11. package/dist/{index-node18.mjs → index-node20.mjs} +17 -17
  12. package/dist/index-node20.mjs.map +1 -0
  13. package/package.json +20 -20
  14. package/src/index.tsx +27 -27
  15. package/dist/index-node18.cjs.map +0 -1
  16. package/dist/index-node18.mjs.map +0 -1
  17. package/src/.eslintrc.json +0 -31
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
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
+ ## [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
+
8
+ ### ⚠ BREAKING CHANGES
9
+
10
+ * update dependencies and drop node 20
11
+ * update dev dependencies, replace parse-json-object-as-map with native JSON.parse, update koa
12
+
13
+ ### Features
14
+
15
+ * update babel ([a4bf455](https://github.com/christophehurpeau/alp/commit/a4bf455c715134973c56693b7425aa05de5b10f9))
16
+ * update dependencies and drop node 20 ([fc5b322](https://github.com/christophehurpeau/alp/commit/fc5b322e076e9a3c7c4a235d16734b89fd85e211))
17
+ * update dev dependencies, replace parse-json-object-as-map with native JSON.parse, update koa ([5ae7723](https://github.com/christophehurpeau/alp/commit/5ae77238cafc573fe72c5eb63b103802b8b2e537))
18
+
19
+ ### Bug Fixes
20
+
21
+ * **deps:** update react monorepo ([#611](https://github.com/christophehurpeau/alp/issues/611)) ([b9ece4d](https://github.com/christophehurpeau/alp/commit/b9ece4dc070bcd49fa6c4a40534162d10087405b))
22
+
6
23
  ## [8.1.1](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@8.1.0...react-alp-connection-state@8.1.1) (2024-01-06)
7
24
 
8
25
  Note: no notable changes
package/README.md CHANGED
@@ -1,16 +1,16 @@
1
- <h3 align="center">
1
+ <h1 align="center">
2
2
  react-alp-connection-state
3
- </h3>
3
+ </h1>
4
4
 
5
5
  <p align="center">
6
6
  connection state
7
7
  </p>
8
8
 
9
9
  <p align="center">
10
- <a href="https://npmjs.org/package/react-alp-connection-state"><img src="https://img.shields.io/npm/v/react-alp-connection-state.svg?style=flat-square"></a>
11
- <a href="https://npmjs.org/package/react-alp-connection-state"><img src="https://img.shields.io/npm/dw/react-alp-connection-state.svg?style=flat-square"></a>
12
- <a href="https://npmjs.org/package/react-alp-connection-state"><img src="https://img.shields.io/node/v/react-alp-connection-state.svg?style=flat-square"></a>
13
- <a href="https://npmjs.org/package/react-alp-connection-state"><img src="https://img.shields.io/npm/types/react-alp-connection-state.svg?style=flat-square"></a>
10
+ <a href="https://npmjs.org/package/react-alp-connection-state"><img src="https://img.shields.io/npm/v/react-alp-connection-state.svg?style=flat-square" alt="npm version"></a>
11
+ <a href="https://npmjs.org/package/react-alp-connection-state"><img src="https://img.shields.io/npm/dw/react-alp-connection-state.svg?style=flat-square" alt="npm downloads"></a>
12
+ <a href="https://npmjs.org/package/react-alp-connection-state"><img src="https://img.shields.io/node/v/react-alp-connection-state.svg?style=flat-square" alt="node version"></a>
13
+ <a href="https://npmjs.org/package/react-alp-connection-state"><img src="https://img.shields.io/npm/types/react-alp-connection-state.svg?style=flat-square" alt="types"></a>
14
14
  </p>
15
15
 
16
16
  ## Install
package/dist/definitions/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { ReactElement, ReactNode } from 'react';
1
+ import type { ReactElement, ReactNode } from "react";
2
2
  declare const defaultTheme: {
3
3
  container: {
4
4
  backgroundColor: string;
@@ -13,7 +13,7 @@ declare const defaultTheme: {
13
13
  backgroundColorConnected: string;
14
14
  };
15
15
  export type ConnectionStateTheme = typeof defaultTheme;
16
- export type State = 'connected' | 'connecting' | 'disconnected' | null;
16
+ export type State = "connected" | "connecting" | "disconnected" | null;
17
17
  export interface ConnectionStateProps {
18
18
  theme?: ConnectionStateTheme;
19
19
  forceHidden?: boolean;
package/dist/definitions/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYrD,QAAA,MAAM,YAAY;;;;;;;;;;;;CASjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,OAAO,YAAY,CAAC;AACvD,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC;AAEvE,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC;AAsDD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAgD5C"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWrD,QAAA,MAAM,YAAY;;;;;;;;;;;;CASjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,OAAO,YAAY,CAAC;AACvD,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,IAAI,CAAC;AAEvE,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC;AAuDD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAgD5C"}
package/dist/index-browser.cjs.js CHANGED
@@ -1,21 +1,22 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
3
5
  const react = require('react');
4
6
  const reactNative = require('react-native');
5
7
  const jsxRuntime = require('react/jsx-runtime');
6
8
 
7
9
  const defaultTheme = {
8
10
  container: {
9
- backgroundColor: 'rgba(247, 25, 0, 0.8)',
10
- color: '#fff',
11
- textShadowColor: '#111',
11
+ backgroundColor: "rgba(247, 25, 0, 0.8)",
12
+ color: "#fff",
12
13
  textShadowOffset: {
13
14
  width: 0,
14
15
  height: -1
15
16
  },
16
17
  textShadowRadius: 1
17
18
  },
18
- backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
19
+ backgroundColorConnected: "rgba(25, 200, 60, 0.8)"
19
20
  };
20
21
  const useCreateCalcNative = () => {
21
22
  const dimensions = reactNative.useWindowDimensions();
@@ -24,14 +25,14 @@ const useCreateCalcNative = () => {
24
25
  const useCreateCalcWeb = () => {
25
26
  return webCalc => `calc(${webCalc})`;
26
27
  };
27
- const useCreateCalc = reactNative.Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
28
+ const useCreateCalc = reactNative.Platform.OS === "web" ? useCreateCalcWeb : useCreateCalcNative;
28
29
 
29
30
  // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
30
31
 
31
32
  const styles = reactNative.StyleSheet.create({
32
33
  connectionStateContainer: {
33
34
  backgroundColor: defaultTheme.container.backgroundColor,
34
- position: 'absolute',
35
+ position: "absolute",
35
36
  top: 0,
36
37
  right: 0,
37
38
  left: 0,
@@ -41,22 +42,23 @@ const styles = reactNative.StyleSheet.create({
41
42
  textShadowRadius: defaultTheme.container.textShadowRadius,
42
43
  boxShadow: "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)",
43
44
  zIndex: 9,
44
- transition: 'top .8s, background-color .2s'
45
+ // @ts-expect-error -- transition is not a valid style
46
+ transition: "top .8s, background-color .2s"
45
47
  },
46
48
  hide: {
47
49
  top: -24
48
50
  },
49
51
  connectionStateText: {
50
52
  backgroundColor: defaultTheme.container.backgroundColor,
51
- position: 'absolute',
53
+ position: "absolute",
52
54
  width: 200,
53
55
  height: 22,
54
56
  lineHeight: 22,
55
57
  top: 2,
56
- textAlign: 'center',
58
+ textAlign: "center",
57
59
  borderBottomLeftRadius: 5,
58
60
  borderBottomRightRadius: 5,
59
- transition: 'background-color .2s'
61
+ transition: "background-color .2s"
60
62
  }
61
63
  });
62
64
  function ConnectionState({
@@ -67,28 +69,28 @@ function ConnectionState({
67
69
  }) {
68
70
  const unloadingRef = react.useRef(false);
69
71
  const createCalc = useCreateCalc();
70
- const left = createCalc('50% - 100px', ({
72
+ const left = createCalc("50% - 100px", ({
71
73
  width
72
74
  }) => width / 2 - 100); // TODO use calc() in web ?
73
75
 
74
76
  react.useEffect(() => {
75
- if (typeof window === 'undefined') return;
77
+ if (typeof globalThis === "undefined") return;
76
78
  const beforeUnloadHandler = () => {
77
79
  unloadingRef.current = true;
78
80
  };
79
- window.addEventListener('beforeunload', beforeUnloadHandler);
81
+ window.addEventListener("beforeunload", beforeUnloadHandler);
80
82
  return () => {
81
- window.removeEventListener('beforeunload', beforeUnloadHandler);
83
+ window.removeEventListener("beforeunload", beforeUnloadHandler);
82
84
  };
83
85
  }, []);
84
86
  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
85
- style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme == null ? void 0 : theme.container, state === 'connected' && {
87
+ style: [styles.connectionStateContainer, (forceHidden || !state || state === "connected") && styles.hide, theme?.container, state === "connected" && {
86
88
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
87
89
  }],
88
90
  children: !state ? null : /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
89
91
  style: [styles.connectionStateText, theme && {
90
92
  backgroundColor: theme.container.backgroundColor
91
- }, state === 'connected' && {
93
+ }, state === "connected" && {
92
94
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
93
95
  }, {
94
96
  left
package/dist/index-browser.cjs.js.map CHANGED
@@ -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 View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\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 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 window === '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","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
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":["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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"}
package/dist/index-browser.es.js CHANGED
@@ -4,16 +4,15 @@ import { jsx } from 'react/jsx-runtime';
4
4
 
5
5
  const defaultTheme = {
6
6
  container: {
7
- backgroundColor: 'rgba(247, 25, 0, 0.8)',
8
- color: '#fff',
9
- textShadowColor: '#111',
7
+ backgroundColor: "rgba(247, 25, 0, 0.8)",
8
+ color: "#fff",
10
9
  textShadowOffset: {
11
10
  width: 0,
12
11
  height: -1
13
12
  },
14
13
  textShadowRadius: 1
15
14
  },
16
- backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
15
+ backgroundColorConnected: "rgba(25, 200, 60, 0.8)"
17
16
  };
18
17
  const useCreateCalcNative = () => {
19
18
  const dimensions = useWindowDimensions();
@@ -22,14 +21,14 @@ const useCreateCalcNative = () => {
22
21
  const useCreateCalcWeb = () => {
23
22
  return webCalc => `calc(${webCalc})`;
24
23
  };
25
- const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
24
+ const useCreateCalc = Platform.OS === "web" ? useCreateCalcWeb : useCreateCalcNative;
26
25
 
27
26
  // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
28
27
 
29
28
  const styles = StyleSheet.create({
30
29
  connectionStateContainer: {
31
30
  backgroundColor: defaultTheme.container.backgroundColor,
32
- position: 'absolute',
31
+ position: "absolute",
33
32
  top: 0,
34
33
  right: 0,
35
34
  left: 0,
@@ -39,22 +38,23 @@ const styles = StyleSheet.create({
39
38
  textShadowRadius: defaultTheme.container.textShadowRadius,
40
39
  boxShadow: "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)",
41
40
  zIndex: 9,
42
- transition: 'top .8s, background-color .2s'
41
+ // @ts-expect-error -- transition is not a valid style
42
+ transition: "top .8s, background-color .2s"
43
43
  },
44
44
  hide: {
45
45
  top: -24
46
46
  },
47
47
  connectionStateText: {
48
48
  backgroundColor: defaultTheme.container.backgroundColor,
49
- position: 'absolute',
49
+ position: "absolute",
50
50
  width: 200,
51
51
  height: 22,
52
52
  lineHeight: 22,
53
53
  top: 2,
54
- textAlign: 'center',
54
+ textAlign: "center",
55
55
  borderBottomLeftRadius: 5,
56
56
  borderBottomRightRadius: 5,
57
- transition: 'background-color .2s'
57
+ transition: "background-color .2s"
58
58
  }
59
59
  });
60
60
  function ConnectionState({
@@ -65,28 +65,28 @@ function ConnectionState({
65
65
  }) {
66
66
  const unloadingRef = useRef(false);
67
67
  const createCalc = useCreateCalc();
68
- const left = createCalc('50% - 100px', ({
68
+ const left = createCalc("50% - 100px", ({
69
69
  width
70
70
  }) => width / 2 - 100); // TODO use calc() in web ?
71
71
 
72
72
  useEffect(() => {
73
- if (typeof window === 'undefined') return;
73
+ if (typeof globalThis === "undefined") return;
74
74
  const beforeUnloadHandler = () => {
75
75
  unloadingRef.current = true;
76
76
  };
77
- window.addEventListener('beforeunload', beforeUnloadHandler);
77
+ window.addEventListener("beforeunload", beforeUnloadHandler);
78
78
  return () => {
79
- window.removeEventListener('beforeunload', beforeUnloadHandler);
79
+ window.removeEventListener("beforeunload", beforeUnloadHandler);
80
80
  };
81
81
  }, []);
82
82
  return /*#__PURE__*/jsx(View, {
83
- style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme == null ? void 0 : theme.container, state === 'connected' && {
83
+ style: [styles.connectionStateContainer, (forceHidden || !state || state === "connected") && styles.hide, theme?.container, state === "connected" && {
84
84
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
85
85
  }],
86
86
  children: !state ? null : /*#__PURE__*/jsx(Text, {
87
87
  style: [styles.connectionStateText, theme && {
88
88
  backgroundColor: theme.container.backgroundColor
89
- }, state === 'connected' && {
89
+ }, state === "connected" && {
90
90
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
91
91
  }, {
92
92
  left
package/dist/index-browser.es.js.map CHANGED
@@ -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 View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\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 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 window === '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","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
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":["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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"}
package/dist/{index-node18.cjs → index-node20.cjs} RENAMED
@@ -1,21 +1,22 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
3
5
  const react = require('react');
4
6
  const reactNative = require('react-native');
5
7
  const jsxRuntime = require('react/jsx-runtime');
6
8
 
7
9
  const defaultTheme = {
8
10
  container: {
9
- backgroundColor: 'rgba(247, 25, 0, 0.8)',
10
- color: '#fff',
11
- textShadowColor: '#111',
11
+ backgroundColor: "rgba(247, 25, 0, 0.8)",
12
+ color: "#fff",
12
13
  textShadowOffset: {
13
14
  width: 0,
14
15
  height: -1
15
16
  },
16
17
  textShadowRadius: 1
17
18
  },
18
- backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
19
+ backgroundColorConnected: "rgba(25, 200, 60, 0.8)"
19
20
  };
20
21
  const useCreateCalcNative = () => {
21
22
  const dimensions = reactNative.useWindowDimensions();
@@ -24,14 +25,14 @@ const useCreateCalcNative = () => {
24
25
  const useCreateCalcWeb = () => {
25
26
  return webCalc => `calc(${webCalc})`;
26
27
  };
27
- const useCreateCalc = reactNative.Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
28
+ const useCreateCalc = reactNative.Platform.OS === "web" ? useCreateCalcWeb : useCreateCalcNative;
28
29
 
29
30
  // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
30
31
 
31
32
  const styles = reactNative.StyleSheet.create({
32
33
  connectionStateContainer: {
33
34
  backgroundColor: defaultTheme.container.backgroundColor,
34
- position: 'absolute',
35
+ position: "absolute",
35
36
  top: 0,
36
37
  right: 0,
37
38
  left: 0,
@@ -41,22 +42,23 @@ const styles = reactNative.StyleSheet.create({
41
42
  textShadowRadius: defaultTheme.container.textShadowRadius,
42
43
  boxShadow: "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)",
43
44
  zIndex: 9,
44
- transition: 'top .8s, background-color .2s'
45
+ // @ts-expect-error -- transition is not a valid style
46
+ transition: "top .8s, background-color .2s"
45
47
  },
46
48
  hide: {
47
49
  top: -24
48
50
  },
49
51
  connectionStateText: {
50
52
  backgroundColor: defaultTheme.container.backgroundColor,
51
- position: 'absolute',
53
+ position: "absolute",
52
54
  width: 200,
53
55
  height: 22,
54
56
  lineHeight: 22,
55
57
  top: 2,
56
- textAlign: 'center',
58
+ textAlign: "center",
57
59
  borderBottomLeftRadius: 5,
58
60
  borderBottomRightRadius: 5,
59
- transition: 'background-color .2s'
61
+ transition: "background-color .2s"
60
62
  }
61
63
  });
62
64
  function ConnectionState({
@@ -67,28 +69,28 @@ function ConnectionState({
67
69
  }) {
68
70
  const unloadingRef = react.useRef(false);
69
71
  const createCalc = useCreateCalc();
70
- const left = createCalc('50% - 100px', ({
72
+ const left = createCalc("50% - 100px", ({
71
73
  width
72
74
  }) => width / 2 - 100); // TODO use calc() in web ?
73
75
 
74
76
  react.useEffect(() => {
75
- if (typeof window === 'undefined') return;
77
+ if (typeof globalThis === "undefined") return;
76
78
  const beforeUnloadHandler = () => {
77
79
  unloadingRef.current = true;
78
80
  };
79
- window.addEventListener('beforeunload', beforeUnloadHandler);
81
+ window.addEventListener("beforeunload", beforeUnloadHandler);
80
82
  return () => {
81
- window.removeEventListener('beforeunload', beforeUnloadHandler);
83
+ window.removeEventListener("beforeunload", beforeUnloadHandler);
82
84
  };
83
85
  }, []);
84
86
  return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
85
- style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme?.container, state === 'connected' && {
87
+ style: [styles.connectionStateContainer, (forceHidden || !state || state === "connected") && styles.hide, theme?.container, state === "connected" && {
86
88
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
87
89
  }],
88
90
  children: !state ? null : /*#__PURE__*/jsxRuntime.jsx(reactNative.Text, {
89
91
  style: [styles.connectionStateText, theme && {
90
92
  backgroundColor: theme.container.backgroundColor
91
- }, state === 'connected' && {
93
+ }, state === "connected" && {
92
94
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
93
95
  }, {
94
96
  left
@@ -99,4 +101,4 @@ function ConnectionState({
99
101
  }
100
102
 
101
103
  exports.ConnectionState = ConnectionState;
102
- //# sourceMappingURL=index-node18.cjs.map
104
+ //# sourceMappingURL=index-node20.cjs.map
package/dist/index-node20.cjs.map ADDED
@@ -0,0 +1 @@
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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"}
package/dist/{index-node18.mjs → index-node20.mjs} RENAMED
@@ -4,16 +4,15 @@ import { jsx } from 'react/jsx-runtime';
4
4
 
5
5
  const defaultTheme = {
6
6
  container: {
7
- backgroundColor: 'rgba(247, 25, 0, 0.8)',
8
- color: '#fff',
9
- textShadowColor: '#111',
7
+ backgroundColor: "rgba(247, 25, 0, 0.8)",
8
+ color: "#fff",
10
9
  textShadowOffset: {
11
10
  width: 0,
12
11
  height: -1
13
12
  },
14
13
  textShadowRadius: 1
15
14
  },
16
- backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
15
+ backgroundColorConnected: "rgba(25, 200, 60, 0.8)"
17
16
  };
18
17
  const useCreateCalcNative = () => {
19
18
  const dimensions = useWindowDimensions();
@@ -22,14 +21,14 @@ const useCreateCalcNative = () => {
22
21
  const useCreateCalcWeb = () => {
23
22
  return webCalc => `calc(${webCalc})`;
24
23
  };
25
- const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
24
+ const useCreateCalc = Platform.OS === "web" ? useCreateCalcWeb : useCreateCalcNative;
26
25
 
27
26
  // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
28
27
 
29
28
  const styles = StyleSheet.create({
30
29
  connectionStateContainer: {
31
30
  backgroundColor: defaultTheme.container.backgroundColor,
32
- position: 'absolute',
31
+ position: "absolute",
33
32
  top: 0,
34
33
  right: 0,
35
34
  left: 0,
@@ -39,22 +38,23 @@ const styles = StyleSheet.create({
39
38
  textShadowRadius: defaultTheme.container.textShadowRadius,
40
39
  boxShadow: "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)",
41
40
  zIndex: 9,
42
- transition: 'top .8s, background-color .2s'
41
+ // @ts-expect-error -- transition is not a valid style
42
+ transition: "top .8s, background-color .2s"
43
43
  },
44
44
  hide: {
45
45
  top: -24
46
46
  },
47
47
  connectionStateText: {
48
48
  backgroundColor: defaultTheme.container.backgroundColor,
49
- position: 'absolute',
49
+ position: "absolute",
50
50
  width: 200,
51
51
  height: 22,
52
52
  lineHeight: 22,
53
53
  top: 2,
54
- textAlign: 'center',
54
+ textAlign: "center",
55
55
  borderBottomLeftRadius: 5,
56
56
  borderBottomRightRadius: 5,
57
- transition: 'background-color .2s'
57
+ transition: "background-color .2s"
58
58
  }
59
59
  });
60
60
  function ConnectionState({
@@ -65,28 +65,28 @@ function ConnectionState({
65
65
  }) {
66
66
  const unloadingRef = useRef(false);
67
67
  const createCalc = useCreateCalc();
68
- const left = createCalc('50% - 100px', ({
68
+ const left = createCalc("50% - 100px", ({
69
69
  width
70
70
  }) => width / 2 - 100); // TODO use calc() in web ?
71
71
 
72
72
  useEffect(() => {
73
- if (typeof window === 'undefined') return;
73
+ if (typeof globalThis === "undefined") return;
74
74
  const beforeUnloadHandler = () => {
75
75
  unloadingRef.current = true;
76
76
  };
77
- window.addEventListener('beforeunload', beforeUnloadHandler);
77
+ window.addEventListener("beforeunload", beforeUnloadHandler);
78
78
  return () => {
79
- window.removeEventListener('beforeunload', beforeUnloadHandler);
79
+ window.removeEventListener("beforeunload", beforeUnloadHandler);
80
80
  };
81
81
  }, []);
82
82
  return /*#__PURE__*/jsx(View, {
83
- style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme?.container, state === 'connected' && {
83
+ style: [styles.connectionStateContainer, (forceHidden || !state || state === "connected") && styles.hide, theme?.container, state === "connected" && {
84
84
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
85
85
  }],
86
86
  children: !state ? null : /*#__PURE__*/jsx(Text, {
87
87
  style: [styles.connectionStateText, theme && {
88
88
  backgroundColor: theme.container.backgroundColor
89
- }, state === 'connected' && {
89
+ }, state === "connected" && {
90
90
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
91
91
  }, {
92
92
  left
@@ -97,4 +97,4 @@ function ConnectionState({
97
97
  }
98
98
 
99
99
  export { ConnectionState };
100
- //# sourceMappingURL=index-node18.mjs.map
100
+ //# sourceMappingURL=index-node20.mjs.map
package/dist/index-node20.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index-node20.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":["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":";;;;AAWA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,eAAe,EAAE,uBAAuB;AACxCC,IAAAA,KAAK,EAAE,MAAM;AACbC,IACAC,gBAAgB,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,MAAM,EAAE;KAAI;AAC1CC,IAAAA,gBAAgB,EAAE;GACnB;AACDC,EAAAA,wBAAwB,EAAE;AAC5B,CAAC;AAoBD,MAAMC,mBAAmB,GAAGA,MAAkB;AAC5C,EAAA,MAAMC,UAAU,GAAGC,mBAAmB,EAAE;EACxC,OAAO,CAACC,OAAO,EAAEC,UAAU,KAAKA,UAAU,CAACH,UAAU,CAAC;AACxD,CAAC;AACD,MAAMI,gBAAgB,GAAGA,MAAkB;AACzC,EAAA,OAAQF,OAAO,IAAK,CAAA,KAAA,EAAQA,OAAO,CAAA,CAAA,CAAqB;AAC1D,CAAC;AACD,MAAMG,aAAa,GACjBC,QAAQ,CAACC,EAAE,KAAK,KAAK,GAAGH,gBAAgB,GAAGL,mBAAmB;;AAEhE;;AAEA,MAAMS,MAAM,GAAGC,UAAU,CAACC,MAAM,CAAC;AAC/BC,EAAAA,wBAAwB,EAAE;AACxBpB,IAAAA,eAAe,EAAEF,YAAY,CAACC,SAAS,CAACC,eAAe;AACvDqB,IAAAA,QAAQ,EAAE,UAAU;AACpBC,IAAAA,GAAG,EAAE,CAAC;AACNC,IAAAA,KAAK,EAAE,CAAC;AACRC,IAAAA,IAAI,EAAE,CAAC;AACPnB,IAAAA,MAAM,EAAE,CAAC;AACTJ,IAAAA,KAAK,EAAEH,YAAY,CAACC,SAAS,CAACE,KAAK;AACnCE,IAAAA,gBAAgB,EAAEL,YAAY,CAACC,SAAS,CAACI,gBAAgB;AACzDG,IAAAA,gBAAgB,EAAER,YAAY,CAACC,SAAS,CAACO,gBAAgB;AACzDmB,IAAAA,SAAS,EAAA,iEAAS;AAClBC,IAAAA,MAAM,EAAE,CAAC;AACT;AACAC,IAAAA,UAAU,EAAE;GACb;AACDC,EAAAA,IAAI,EAAE;AACJN,IAAAA,GAAG,EAAE;GACN;AACDO,EAAAA,mBAAmB,EAAE;AACnB7B,IAAAA,eAAe,EAAEF,YAAY,CAACC,SAAS,CAACC,eAAe;AACvDqB,IAAAA,QAAQ,EAAE,UAAU;AACpBjB,IAAAA,KAAK,EAAE,GAAG;AACVC,IAAAA,MAAM,EAAE,EAAE;AACVyB,IAAAA,UAAU,EAAE,EAAE;AACdR,IAAAA,GAAG,EAAE,CAAC;AACNS,IAAAA,SAAS,EAAE,QAAQ;AACnBC,IAAAA,sBAAsB,EAAE,CAAC;AACzBC,IAAAA,uBAAuB,EAAE,CAAC;AAC1BN,IAAAA,UAAU,EAAE;AACd;AACF,CAAC,CAAC;AAEK,SAASO,eAAeA,CAAC;EAC9BC,KAAK;EACLC,WAAW;EACXC,KAAK;AACLC,EAAAA;AACoB,CAAC,EAAuB;AAC5C,EAAA,MAAMC,YAAY,GAAGC,MAAM,CAAU,KAAK,CAAC;AAE3C,EAAA,MAAM5B,UAAU,GAAGE,aAAa,EAAE;AAClC,EAAA,MAAMU,IAAI,GAAGZ,UAAU,CAAC,aAAa,EAAE,CAAC;AAAER,IAAAA;GAAO,KAAKA,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;;AAEvEqC,EAAAA,SAAS,CAAC,MAAgC;AACxC,IAAA,IAAI,OAAOC,UAAU,KAAK,WAAW,EAAE;IAEvC,MAAMC,mBAAmB,GAAGA,MAAY;MACtCJ,YAAY,CAACK,OAAO,GAAG,IAAI;KAC5B;AACDC,IAAAA,MAAM,CAACC,gBAAgB,CAAC,cAAc,EAAEH,mBAAmB,CAAC;AAE5D,IAAA,OAAO,MAAY;AACjBE,MAAAA,MAAM,CAACE,mBAAmB,CAAC,cAAc,EAAEJ,mBAAmB,CAAC;KAChE;GACF,EAAE,EAAE,CAAC;EAIN,oBACEK,GAAA,CAACC,IAAI,EAAA;IACHC,KAAK,EAAE,CACLjC,MAAM,CAACG,wBAAwB,EAC/B,CANagB,WAAW,IAAI,CAACC,KAAK,IAAIA,KAAK,KAAK,WAAW,KAM7CpB,MAAM,CAACW,IAAI,EACzBO,KAAK,EAAEpC,SAAS,EAChBsC,KAAK,KAAK,WAAW,IAAI;AACvBrC,MAAAA,eAAe,EAAE,CAACmC,KAAK,IAAIrC,YAAY,EAAES;AAC3C,KAAC,CACD;IAAA+B,QAAA,EAED,CAACD,KAAK,GAAG,IAAI,gBACZW,GAAA,CAACG,IAAI,EAAA;AACHD,MAAAA,KAAK,EAAE,CACLjC,MAAM,CAACY,mBAAmB,EAC1BM,KAAK,IAAI;AAAEnC,QAAAA,eAAe,EAAEmC,KAAK,CAACpC,SAAS,CAACC;AAAgB,OAAC,EAC7DqC,KAAK,KAAK,WAAW,IAAI;AACvBrC,QAAAA,eAAe,EAAE,CAACmC,KAAK,IAAIrC,YAAY,EAAES;AAC3C,OAAC,EACD;AAAEiB,QAAAA;AAAK,OAAC,CACR;AAAAc,MAAAA,QAAA,EAEDA;KACG;AACP,GACG,CAAC;AAEX;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-alp-connection-state",
3
- "version": "8.1.1",
3
+ "version": "9.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": ">=18.12.0"
16
+ "node": ">=20.11.0"
17
17
  },
18
18
  "sideEffects": false,
19
- "main": "./dist/index-node18.mjs",
19
+ "main": "./dist/index-node20.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,8 @@
25
25
  ".": {
26
26
  "types": "./dist/definitions/index.d.ts",
27
27
  "node": {
28
- "import": "./dist/index-node18.mjs",
29
- "require": "./dist/index-node18.cjs"
28
+ "import": "./dist/index-node20.mjs",
29
+ "require": "./dist/index-node20.cjs"
30
30
  },
31
31
  "browser": {
32
32
  "import": "./dist/index-browser.es.js",
@@ -44,7 +44,7 @@
44
44
  "clean": "yarn clean:build",
45
45
  "clean:build": "pob-babel-clean-out dist",
46
46
  "lint": "yarn run lint:eslint",
47
- "lint:eslint": "yarn ../.. run eslint --report-unused-disable-directives --resolve-plugins-relative-to . --quiet packages/react-alp-connection-state",
47
+ "lint:eslint": "yarn ../.. run eslint --quiet packages/react-alp-connection-state",
48
48
  "watch": "yarn clean:build && rollup --config rollup.config.mjs --watch"
49
49
  },
50
50
  "browserslist": {
@@ -57,10 +57,14 @@
57
57
  ]
58
58
  },
59
59
  "pob": {
60
- "babelEnvs": [
60
+ "bundler": "rollup-babel",
61
+ "entries": [
62
+ "index"
63
+ ],
64
+ "envs": [
61
65
  {
62
66
  "target": "node",
63
- "version": "18",
67
+ "version": "20",
64
68
  "formats": [
65
69
  "cjs",
66
70
  "es"
@@ -74,14 +78,11 @@
74
78
  ]
75
79
  }
76
80
  ],
77
- "entries": [
78
- "index"
79
- ],
80
81
  "jsx": true
81
82
  },
82
83
  "prettier": "@pob/root/prettier-config",
83
84
  "peerDependencies": {
84
- "react": "^18.1.0",
85
+ "react": "^19.0.0",
85
86
  "react-native": "*"
86
87
  },
87
88
  "peerDependenciesMeta": {
@@ -90,15 +91,14 @@
90
91
  }
91
92
  },
92
93
  "dependencies": {
93
- "@babel/runtime": "^7.23.7"
94
+ "@babel/runtime": "^7.28.2"
94
95
  },
95
96
  "devDependencies": {
96
- "@babel/core": "7.23.7",
97
- "@babel/preset-env": "7.23.7",
98
- "@babel/preset-react": "7.23.3",
99
- "@types/react-native": "0.72.8",
100
- "pob-babel": "38.0.2",
101
- "react": "18.2.0",
102
- "typescript": "5.3.3"
97
+ "@babel/core": "7.28.0",
98
+ "@babel/preset-env": "7.28.0",
99
+ "@babel/preset-react": "7.27.1",
100
+ "pob-babel": "43.7.0",
101
+ "react": "19.1.1",
102
+ "typescript": "5.8.3"
103
103
  }
104
104
  }
package/src/index.tsx CHANGED
@@ -1,28 +1,27 @@
1
- import type { ReactElement, ReactNode } from 'react';
2
- import { useEffect, useRef } from 'react';
3
- import type { DimensionValue, ScaledSize } from 'react-native';
1
+ import type { ReactElement, ReactNode } from "react";
2
+ import { useEffect, useRef } from "react";
3
+ import type { DimensionValue, ScaledSize } from "react-native";
4
4
  import {
5
- View,
6
- Text,
7
- StyleSheet,
8
5
  Platform,
6
+ StyleSheet,
7
+ Text,
8
+ View,
9
9
  useWindowDimensions,
10
- // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native
11
- } from 'react-native';
10
+ } from "react-native";
12
11
 
13
12
  const defaultTheme = {
14
13
  container: {
15
- backgroundColor: 'rgba(247, 25, 0, 0.8)',
16
- color: '#fff',
17
- textShadowColor: '#111',
14
+ backgroundColor: "rgba(247, 25, 0, 0.8)",
15
+ color: "#fff",
16
+ textShadowColor: "#111",
18
17
  textShadowOffset: { width: 0, height: -1 },
19
18
  textShadowRadius: 1,
20
19
  },
21
- backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',
20
+ backgroundColorConnected: "rgba(25, 200, 60, 0.8)",
22
21
  };
23
22
 
24
23
  export type ConnectionStateTheme = typeof defaultTheme;
25
- export type State = 'connected' | 'connecting' | 'disconnected' | null;
24
+ export type State = "connected" | "connecting" | "disconnected" | null;
26
25
 
27
26
  export interface ConnectionStateProps {
28
27
  theme?: ConnectionStateTheme;
@@ -32,7 +31,7 @@ export interface ConnectionStateProps {
32
31
  }
33
32
 
34
33
  const zDepth1 =
35
- '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';
34
+ "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)";
36
35
 
37
36
  type CreateCalc = (
38
37
  webCalc: string,
@@ -47,14 +46,14 @@ const useCreateCalcWeb = (): CreateCalc => {
47
46
  return (webCalc) => `calc(${webCalc})` as DimensionValue;
48
47
  };
49
48
  const useCreateCalc =
50
- Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
49
+ Platform.OS === "web" ? useCreateCalcWeb : useCreateCalcNative;
51
50
 
52
51
  // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
53
52
 
54
53
  const styles = StyleSheet.create({
55
54
  connectionStateContainer: {
56
55
  backgroundColor: defaultTheme.container.backgroundColor,
57
- position: 'absolute',
56
+ position: "absolute",
58
57
  top: 0,
59
58
  right: 0,
60
59
  left: 0,
@@ -64,22 +63,23 @@ const styles = StyleSheet.create({
64
63
  textShadowRadius: defaultTheme.container.textShadowRadius,
65
64
  boxShadow: zDepth1,
66
65
  zIndex: 9,
67
- transition: 'top .8s, background-color .2s',
66
+ // @ts-expect-error -- transition is not a valid style
67
+ transition: "top .8s, background-color .2s",
68
68
  },
69
69
  hide: {
70
70
  top: -24,
71
71
  },
72
72
  connectionStateText: {
73
73
  backgroundColor: defaultTheme.container.backgroundColor,
74
- position: 'absolute',
74
+ position: "absolute",
75
75
  width: 200,
76
76
  height: 22,
77
77
  lineHeight: 22,
78
78
  top: 2,
79
- textAlign: 'center',
79
+ textAlign: "center",
80
80
  borderBottomLeftRadius: 5,
81
81
  borderBottomRightRadius: 5,
82
- transition: 'background-color .2s',
82
+ transition: "background-color .2s",
83
83
  },
84
84
  });
85
85
 
@@ -92,22 +92,22 @@ export function ConnectionState({
92
92
  const unloadingRef = useRef<boolean>(false);
93
93
 
94
94
  const createCalc = useCreateCalc();
95
- const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?
95
+ const left = createCalc("50% - 100px", ({ width }) => width / 2 - 100); // TODO use calc() in web ?
96
96
 
97
97
  useEffect((): (() => void) | undefined => {
98
- if (typeof window === 'undefined') return;
98
+ if (typeof globalThis === "undefined") return;
99
99
 
100
100
  const beforeUnloadHandler = (): void => {
101
101
  unloadingRef.current = true;
102
102
  };
103
- window.addEventListener('beforeunload', beforeUnloadHandler);
103
+ window.addEventListener("beforeunload", beforeUnloadHandler);
104
104
 
105
105
  return (): void => {
106
- window.removeEventListener('beforeunload', beforeUnloadHandler);
106
+ window.removeEventListener("beforeunload", beforeUnloadHandler);
107
107
  };
108
108
  }, []);
109
109
 
110
- const shouldHide = forceHidden || !state || state === 'connected';
110
+ const shouldHide = forceHidden || !state || state === "connected";
111
111
 
112
112
  return (
113
113
  <View
@@ -115,7 +115,7 @@ export function ConnectionState({
115
115
  styles.connectionStateContainer,
116
116
  shouldHide && styles.hide,
117
117
  theme?.container,
118
- state === 'connected' && {
118
+ state === "connected" && {
119
119
  backgroundColor: (theme || defaultTheme).backgroundColorConnected,
120
120
  },
121
121
  ]}
@@ -125,7 +125,7 @@ export function ConnectionState({
125
125
  style={[
126
126
  styles.connectionStateText,
127
127
  theme && { backgroundColor: theme.container.backgroundColor },
128
- state === 'connected' && {
128
+ state === "connected" && {
129
129
  backgroundColor: (theme || defaultTheme).backgroundColorConnected,
130
130
  },
131
131
  { left },
package/dist/index-node18.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index-node18.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 View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\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 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 window === '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","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
package/dist/index-node18.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index-node18.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 View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\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 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 window === '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","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
package/src/.eslintrc.json DELETED
@@ -1,31 +0,0 @@
1
- {
2
- "root": true,
3
- "parser": "@typescript-eslint/parser",
4
- "parserOptions": {
5
- "EXPERIMENTAL_useProjectService": true,
6
- "project": "packages/react-alp-connection-state/tsconfig.json"
7
- },
8
- "plugins": ["@typescript-eslint"],
9
- "extends": [
10
- "@pob/eslint-config-typescript",
11
- "@pob/eslint-config-typescript-react"
12
- ],
13
- "ignorePatterns": ["*.d.ts"],
14
- "overrides": [
15
- {
16
- "files": ["**/*.test.{ts,tsx}", "__tests__/**/*.{ts,tsx}"],
17
- "extends": ["@pob/eslint-config-typescript/test"],
18
- "env": {
19
- "jest": true
20
- },
21
- "rules": {
22
- "import/no-extraneous-dependencies": [
23
- "error",
24
- {
25
- "devDependencies": true
26
- }
27
- ]
28
- }
29
- }
30
- ]
31
- }