react-alp-connection-state 6.1.1 → 6.2.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 (12) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/index-browser.cjs.js +8 -11
  3. package/dist/index-browser.cjs.js.map +1 -1
  4. package/dist/index-browser.es.js +6 -9
  5. package/dist/index-browser.es.js.map +1 -1
  6. package/dist/index-browsermodern.es.js +3 -6
  7. package/dist/index-browsermodern.es.js.map +1 -1
  8. package/dist/index-node14.cjs +5 -8
  9. package/dist/index-node14.cjs.map +1 -1
  10. package/dist/index-node14.mjs +3 -6
  11. package/dist/index-node14.mjs.map +1 -1
  12. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+ # [6.2.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@6.1.1...react-alp-connection-state@6.2.0) (2022-10-16)
7
+
8
+
9
+ ### Features
10
+
11
+ * update to react 18 ([6ac42b8](https://github.com/christophehurpeau/alp/commit/6ac42b84b80bf76853773f3b93819666684327d1))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [6.1.1](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@6.1.0...react-alp-connection-state@6.1.1) (2022-10-13)
7
18
 
8
19
 
package/dist/index-browser.cjs.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var react = require('react');
6
6
  var reactNative = require('react-native');
7
- var jsxRuntime_js = require('react/jsx-runtime.js');
7
+ var jsxRuntime = require('react/jsx-runtime');
8
8
 
9
9
  var defaultTheme = {
10
10
  container: {
@@ -19,21 +19,20 @@ var defaultTheme = {
19
19
  },
20
20
  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
21
21
  };
22
-
23
22
  var useCreateCalcNative = function useCreateCalcNative() {
24
23
  var dimensions = reactNative.useWindowDimensions();
25
24
  return function (webCalc, createCalc) {
26
25
  return createCalc(dimensions);
27
26
  };
28
27
  };
29
-
30
28
  var useCreateCalcWeb = function useCreateCalcWeb() {
31
29
  return function (webCalc) {
32
30
  return "calc(" + webCalc + ")";
33
31
  };
34
32
  };
33
+ var useCreateCalc = reactNative.Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
35
34
 
36
- var useCreateCalc = reactNative.Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative; // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
35
+ // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
37
36
 
38
37
  var styles = reactNative.StyleSheet.create({
39
38
  connectionStateContainer: {
@@ -68,9 +67,9 @@ var styles = reactNative.StyleSheet.create({
68
67
  });
69
68
  function ConnectionState(_ref) {
70
69
  var theme = _ref.theme,
71
- forceHidden = _ref.forceHidden,
72
- state = _ref.state,
73
- children = _ref.children;
70
+ forceHidden = _ref.forceHidden,
71
+ state = _ref.state,
72
+ children = _ref.children;
74
73
  var unloadingRef = react.useRef(false);
75
74
  var createCalc = useCreateCalc();
76
75
  var left = createCalc('50% - 100px', function (_ref2) {
@@ -80,21 +79,19 @@ function ConnectionState(_ref) {
80
79
 
81
80
  react.useEffect(function () {
82
81
  if (typeof window === 'undefined') return;
83
-
84
82
  var beforeUnloadHandler = function beforeUnloadHandler() {
85
83
  unloadingRef.current = true;
86
84
  };
87
-
88
85
  window.addEventListener('beforeunload', beforeUnloadHandler);
89
86
  return function () {
90
87
  window.removeEventListener('beforeunload', beforeUnloadHandler);
91
88
  };
92
89
  }, []);
93
- return /*#__PURE__*/jsxRuntime_js.jsx(reactNative.View, {
90
+ return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
94
91
  style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme == null ? void 0 : theme.container, state === 'connected' && {
95
92
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
96
93
  }],
97
- children: !state ? null : /*#__PURE__*/jsxRuntime_js.jsx(reactNative.View, {
94
+ children: !state ? null : /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
98
95
  style: [styles.connectionStateText, theme && {
99
96
  backgroundColor: theme.container.backgroundColor
100
97
  }, state === 'connected' && {
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 { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"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 { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"mappings":"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"}
package/dist/index-browser.es.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useRef, useEffect } from 'react';
2
2
  import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
3
- import { jsx } from 'react/jsx-runtime.js';
3
+ import { jsx } from 'react/jsx-runtime';
4
4
 
5
5
  var defaultTheme = {
6
6
  container: {
@@ -15,21 +15,20 @@ var defaultTheme = {
15
15
  },
16
16
  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
17
17
  };
18
-
19
18
  var useCreateCalcNative = function useCreateCalcNative() {
20
19
  var dimensions = useWindowDimensions();
21
20
  return function (webCalc, createCalc) {
22
21
  return createCalc(dimensions);
23
22
  };
24
23
  };
25
-
26
24
  var useCreateCalcWeb = function useCreateCalcWeb() {
27
25
  return function (webCalc) {
28
26
  return "calc(" + webCalc + ")";
29
27
  };
30
28
  };
29
+ var useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
31
30
 
32
- var useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative; // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
31
+ // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
33
32
 
34
33
  var styles = StyleSheet.create({
35
34
  connectionStateContainer: {
@@ -64,9 +63,9 @@ var styles = StyleSheet.create({
64
63
  });
65
64
  function ConnectionState(_ref) {
66
65
  var theme = _ref.theme,
67
- forceHidden = _ref.forceHidden,
68
- state = _ref.state,
69
- children = _ref.children;
66
+ forceHidden = _ref.forceHidden,
67
+ state = _ref.state,
68
+ children = _ref.children;
70
69
  var unloadingRef = useRef(false);
71
70
  var createCalc = useCreateCalc();
72
71
  var left = createCalc('50% - 100px', function (_ref2) {
@@ -76,11 +75,9 @@ function ConnectionState(_ref) {
76
75
 
77
76
  useEffect(function () {
78
77
  if (typeof window === 'undefined') return;
79
-
80
78
  var beforeUnloadHandler = function beforeUnloadHandler() {
81
79
  unloadingRef.current = true;
82
80
  };
83
-
84
81
  window.addEventListener('beforeunload', beforeUnloadHandler);
85
82
  return function () {
86
83
  window.removeEventListener('beforeunload', beforeUnloadHandler);
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 { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"mappings":";;;;AAKA,IAAMA,YAAY,GAAG;EACnBC,SAAS,EAAE;IACTC,eAAe,EAAE,uBADR;IAETC,KAAK,EAAE,MAFE;IAGTC,eAAe,EAAE,MAHR;IAITC,gBAAgB,EAAE;MAAEC,KAAK,EAAE,CAAT;MAAYC,MAAM,EAAE,CAAC;KAJ9B;IAKTC,gBAAgB,EAAE;GAND;EAQnBC,wBAAwB,EAAE;AARP,CAArB;;AA6BA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAkB;EAC5C,IAAMC,UAAU,GAAGC,mBAAmB,EAAtC;EACA,OAAO,UAACC,OAAD,EAAUC,UAAV;IAAA,OAAyBA,UAAU,CAACH,UAAD,CAAnC;GAAP;AACD,CAHD;;AAIA,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAmB,GAAkB;EACzC,OAAO,UAACF,OAAD;IAAA,iBAAqBA,OAArB;GAAP;AACD,CAFD;;AAGA,IAAMG,aAAa,GACjBC,QAAQ,CAACC,EAAT,KAAgB,KAAhB,GAAwBH,gBAAxB,GAA2CL,mBAD7C;;AAKA,IAAMS,MAAM,GAAGC,UAAU,CAACC,MAAX,CAAkB;EAC/BC,wBAAwB,EAAE;IACxBpB,eAAe,EAAEF,YAAY,CAACC,SAAb,CAAuBC,eADhB;IAExBqB,QAAQ,EAAE,UAFc;IAGxBC,GAAG,EAAE,CAHmB;IAIxBC,KAAK,EAAE,CAJiB;IAKxBC,IAAI,EAAE,CALkB;IAMxBnB,MAAM,EAAE,CANgB;IAOxBJ,KAAK,EAAEH,YAAY,CAACC,SAAb,CAAuBE,KAPN;IAQxBE,gBAAgB,EAAEL,YAAY,CAACC,SAAb,CAAuBI,gBARjB;IASxBG,gBAAgB,EAAER,YAAY,CAACC,SAAb,CAAuBO,gBATjB;IAUxBmB,SAAS,mEAVe;IAWxBC,MAAM,EAAE,CAXgB;IAYxBC,UAAU,EAAE;GAbiB;EAe/BC,IAAI,EAAE;IACJN,GAAG,EAAE,CAAC;GAhBuB;EAkB/BO,mBAAmB,EAAE;IACnB7B,eAAe,EAAEF,YAAY,CAACC,SAAb,CAAuBC,eADrB;IAEnBqB,QAAQ,EAAE,UAFS;IAGnBjB,KAAK,EAAE,GAHY;IAInBC,MAAM,EAAE,EAJW;IAKnByB,UAAU,EAAE,EALO;IAMnBR,GAAG,EAAE,CANc;IAOnBS,SAAS,EAAE,QAPQ;IAQnBC,sBAAsB,EAAE,CARL;IASnBC,uBAAuB,EAAE,CATN;IAUnBN,UAAU,EAAE;;AA5BiB,CAAlB,CAAf;AAgCO,SAASO,eAAT,OAKuC;EAAA,IAJ5CC,KAI4C,QAJ5CA,KAI4C;MAH5CC,WAG4C,QAH5CA,WAG4C;MAF5CC,KAE4C,QAF5CA,KAE4C;MAD5CC,QAC4C,QAD5CA,QAC4C;EAC5C,IAAMC,YAAY,GAAGC,MAAM,CAAU,KAAV,CAA3B;EAEA,IAAM5B,UAAU,GAAGE,aAAa,EAAhC;EACA,IAAMU,IAAI,GAAGZ,UAAU,CAAC,aAAD,EAAgB;IAAA,IAAGR,KAAH,SAAGA,KAAH;IAAA,OAAeA,KAAK,GAAG,CAAR,GAAY,GAA3B;GAAhB,CAAvB,CAJ4C;;EAM5CqC,SAAS,CAAC,YAAgC;IACxC,IAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;;IAEnC,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAY;MACtCJ,YAAY,CAACK,OAAb,GAAuB,IAAvB;KADF;;IAGAF,MAAM,CAACG,gBAAP,CAAwB,cAAxB,EAAwCF,mBAAxC;IAEA,OAAO,YAAY;MACjBD,MAAM,CAACI,mBAAP,CAA2B,cAA3B,EAA2CH,mBAA3C;KADF;GARO,EAWN,EAXM,CAAT;EAeA,oBACEI,IAAC,IAAD;IACE,KAAK,EAAE,CACL9B,MAAM,CAACG,wBADF,EAEL,CANagB,WAAW,IAAI,CAACC,KAAhB,IAAyBA,KAAK,KAAK,WAMhD,KAAcpB,MAAM,CAACW,IAFhB,EAGLO,KAHK,oBAGLA,KAAK,CAAEpC,SAHF,EAILsC,KAAK,KAAK,WAAV,IAAyB;MACvBrC,eAAe,EAAE,CAACmC,KAAK,IAAIrC,YAAV,EAAwBS;KALtC,CADT;IAAA,UAUG,CAAC8B,KAAD,GAAS,IAAT,gBACCU,IAAC,IAAD;MACE,KAAK,EAAE,CACL9B,MAAM,CAACY,mBADF,EAELM,KAAK,IAAI;QAAEnC,eAAe,EAAEmC,KAAK,CAACpC,SAAN,CAAgBC;OAFvC,EAGLqC,KAAK,KAAK,WAAV,IAAyB;QACvBrC,eAAe,EAAE,CAACmC,KAAK,IAAIrC,YAAV,EAAwBS;OAJtC,EAML;QAAEiB,IAAI,EAAJA;OANG,CADT;MAAA,UAUGc;;IAtBT;AA2BD;;;;"}
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 { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"mappings":"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"}
package/dist/index-browsermodern.es.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useRef, useEffect } from 'react';
2
2
  import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
3
- import { jsx } from 'react/jsx-runtime.js';
3
+ import { jsx } from 'react/jsx-runtime';
4
4
 
5
5
  const defaultTheme = {
6
6
  container: {
@@ -15,17 +15,16 @@ const defaultTheme = {
15
15
  },
16
16
  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
17
17
  };
18
-
19
18
  const useCreateCalcNative = () => {
20
19
  const dimensions = useWindowDimensions();
21
20
  return (webCalc, createCalc) => createCalc(dimensions);
22
21
  };
23
-
24
22
  const useCreateCalcWeb = () => {
25
23
  return webCalc => `calc(${webCalc})`;
26
24
  };
25
+ const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
27
26
 
28
- const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative; // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
27
+ // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
29
28
 
30
29
  const styles = StyleSheet.create({
31
30
  connectionStateContainer: {
@@ -72,11 +71,9 @@ function ConnectionState({
72
71
 
73
72
  useEffect(() => {
74
73
  if (typeof window === 'undefined') return;
75
-
76
74
  const beforeUnloadHandler = () => {
77
75
  unloadingRef.current = true;
78
76
  };
79
-
80
77
  window.addEventListener('beforeunload', beforeUnloadHandler);
81
78
  return () => {
82
79
  window.removeEventListener('beforeunload', beforeUnloadHandler);
package/dist/index-browsermodern.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index-browsermodern.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"mappings":"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"}
1
+ {"version":3,"file":"index-browsermodern.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"mappings":";;;;AAKA,MAAMA,YAAY,GAAG;AACnBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,eAAe,EAAE,uBAAuB;AACxCC,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,eAAe,EAAE,MAAM;AACvBC,IAAAA,gBAAgB,EAAE;AAAEC,MAAAA,KAAK,EAAE,CAAC;AAAEC,MAAAA,MAAM,EAAE,CAAC,CAAA;KAAG;AAC1CC,IAAAA,gBAAgB,EAAE,CAAA;GACnB;AACDC,EAAAA,wBAAwB,EAAE,wBAAA;AAC5B,CAAC,CAAA;AAoBD,MAAMC,mBAAmB,GAAG,MAAkB;EAC5C,MAAMC,UAAU,GAAGC,mBAAmB,EAAE,CAAA;EACxC,OAAO,CAACC,OAAO,EAAEC,UAAU,KAAKA,UAAU,CAACH,UAAU,CAAC,CAAA;AACxD,CAAC,CAAA;AACD,MAAMI,gBAAgB,GAAG,MAAkB;AACzC,EAAA,OAAQF,OAAO,IAAM,CAAOA,KAAAA,EAAAA,OAAQ,CAAE,CAAA,CAAA,CAAA;AACxC,CAAC,CAAA;AACD,MAAMG,aAAa,GACjBC,QAAQ,CAACC,EAAE,KAAK,KAAK,GAAGH,gBAAgB,GAAGL,mBAAmB,CAAA;;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,EAAS,iEAAA;AAClBC,IAAAA,MAAM,EAAE,CAAC;AACTC,IAAAA,UAAU,EAAE,+BAAA;GACb;AACDC,EAAAA,IAAI,EAAE;AACJN,IAAAA,GAAG,EAAE,CAAC,EAAA;GACP;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,sBAAA;AACd,GAAA;AACF,CAAC,CAAC,CAAA;AAEK,SAASO,eAAe,CAAC;EAC9BC,KAAK;EACLC,WAAW;EACXC,KAAK;AACLC,EAAAA,QAAAA;AACoB,CAAC,EAAuB;AAC5C,EAAA,MAAMC,YAAY,GAAGC,MAAM,CAAU,KAAK,CAAC,CAAA;EAE3C,MAAM5B,UAAU,GAAGE,aAAa,EAAE,CAAA;AAClC,EAAA,MAAMU,IAAI,GAAGZ,UAAU,CAAC,aAAa,EAAE,CAAC;AAAER,IAAAA,KAAAA;GAAO,KAAKA,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;;AAEvEqC,EAAAA,SAAS,CAAC,MAAgC;AACxC,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE,OAAA;IAEnC,MAAMC,mBAAmB,GAAG,MAAY;MACtCJ,YAAY,CAACK,OAAO,GAAG,IAAI,CAAA;KAC5B,CAAA;AACDF,IAAAA,MAAM,CAACG,gBAAgB,CAAC,cAAc,EAAEF,mBAAmB,CAAC,CAAA;AAE5D,IAAA,OAAO,MAAY;AACjBD,MAAAA,MAAM,CAACI,mBAAmB,CAAC,cAAc,EAAEH,mBAAmB,CAAC,CAAA;KAChE,CAAA;GACF,EAAE,EAAE,CAAC,CAAA;AAIN,EAAA,oBACEI,IAAC,IAAI,EAAA;AACH,IAAA,KAAK,EAAE,CACL9B,MAAM,CAACG,wBAAwB,EAC/B,CANagB,WAAW,IAAI,CAACC,KAAK,IAAIA,KAAK,KAAK,WAAW,KAM7CpB,MAAM,CAACW,IAAI,EACzBO,KAAK,aAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAALA,KAAK,CAAEpC,SAAS,EAChBsC,KAAK,KAAK,WAAW,IAAI;AACvBrC,MAAAA,eAAe,EAAE,CAACmC,KAAK,IAAIrC,YAAY,EAAES,wBAAAA;AAC3C,KAAC,CACD;AAAA,IAAA,QAAA,EAED,CAAC8B,KAAK,GAAG,IAAI,gBACZU,IAAC,IAAI,EAAA;AACH,MAAA,KAAK,EAAE,CACL9B,MAAM,CAACY,mBAAmB,EAC1BM,KAAK,IAAI;AAAEnC,QAAAA,eAAe,EAAEmC,KAAK,CAACpC,SAAS,CAACC,eAAAA;AAAgB,OAAC,EAC7DqC,KAAK,KAAK,WAAW,IAAI;AACvBrC,QAAAA,eAAe,EAAE,CAACmC,KAAK,IAAIrC,YAAY,EAAES,wBAAAA;AAC3C,OAAC,EACD;AAAEiB,QAAAA,IAAAA;AAAK,OAAC,CACR;MAAA,QAEDc,EAAAA,QAAAA;AAAQ,KAAA,CAAA;GAGR,CAAA,CAAA;AAEX;;;;"}
package/dist/index-node14.cjs CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const react = require('react');
6
6
  const reactNative = require('react-native');
7
- const jsxRuntime_js = require('react/jsx-runtime.js');
7
+ const jsxRuntime = require('react/jsx-runtime');
8
8
 
9
9
  const defaultTheme = {
10
10
  container: {
@@ -19,17 +19,16 @@ const defaultTheme = {
19
19
  },
20
20
  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
21
21
  };
22
-
23
22
  const useCreateCalcNative = () => {
24
23
  const dimensions = reactNative.useWindowDimensions();
25
24
  return (webCalc, createCalc) => createCalc(dimensions);
26
25
  };
27
-
28
26
  const useCreateCalcWeb = () => {
29
27
  return webCalc => `calc(${webCalc})`;
30
28
  };
29
+ const useCreateCalc = reactNative.Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
31
30
 
32
- const useCreateCalc = reactNative.Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative; // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
31
+ // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
33
32
 
34
33
  const styles = reactNative.StyleSheet.create({
35
34
  connectionStateContainer: {
@@ -76,21 +75,19 @@ function ConnectionState({
76
75
 
77
76
  react.useEffect(() => {
78
77
  if (typeof window === 'undefined') return;
79
-
80
78
  const beforeUnloadHandler = () => {
81
79
  unloadingRef.current = true;
82
80
  };
83
-
84
81
  window.addEventListener('beforeunload', beforeUnloadHandler);
85
82
  return () => {
86
83
  window.removeEventListener('beforeunload', beforeUnloadHandler);
87
84
  };
88
85
  }, []);
89
- return /*#__PURE__*/jsxRuntime_js.jsx(reactNative.View, {
86
+ return /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
90
87
  style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme?.container, state === 'connected' && {
91
88
  backgroundColor: (theme || defaultTheme).backgroundColorConnected
92
89
  }],
93
- children: !state ? null : /*#__PURE__*/jsxRuntime_js.jsx(reactNative.View, {
90
+ children: !state ? null : /*#__PURE__*/jsxRuntime.jsx(reactNative.View, {
94
91
  style: [styles.connectionStateText, theme && {
95
92
  backgroundColor: theme.container.backgroundColor
96
93
  }, state === 'connected' && {
package/dist/index-node14.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index-node14.cjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"mappings":"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"}
1
+ {"version":3,"file":"index-node14.cjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"mappings":"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"}
package/dist/index-node14.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useRef, useEffect } from 'react';
2
2
  import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
3
- import { jsx } from 'react/jsx-runtime.js';
3
+ import { jsx } from 'react/jsx-runtime';
4
4
 
5
5
  const defaultTheme = {
6
6
  container: {
@@ -15,17 +15,16 @@ const defaultTheme = {
15
15
  },
16
16
  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
17
17
  };
18
-
19
18
  const useCreateCalcNative = () => {
20
19
  const dimensions = useWindowDimensions();
21
20
  return (webCalc, createCalc) => createCalc(dimensions);
22
21
  };
23
-
24
22
  const useCreateCalcWeb = () => {
25
23
  return webCalc => `calc(${webCalc})`;
26
24
  };
25
+ const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
27
26
 
28
- const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative; // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
27
+ // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
29
28
 
30
29
  const styles = StyleSheet.create({
31
30
  connectionStateContainer: {
@@ -72,11 +71,9 @@ function ConnectionState({
72
71
 
73
72
  useEffect(() => {
74
73
  if (typeof window === 'undefined') return;
75
-
76
74
  const beforeUnloadHandler = () => {
77
75
  unloadingRef.current = true;
78
76
  };
79
-
80
77
  window.addEventListener('beforeunload', beforeUnloadHandler);
81
78
  return () => {
82
79
  window.removeEventListener('beforeunload', beforeUnloadHandler);
package/dist/index-node14.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index-node14.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"mappings":"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"}
1
+ {"version":3,"file":"index-node14.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport { View, StyleSheet, Platform, useWindowDimensions } 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 = null | 'connecting' | 'connected' | 'disconnected';\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) => number,\n) => string | number;\n\nconst useCreateCalcNative = (): CreateCalc => {\n const dimensions = useWindowDimensions();\n return (webCalc, createCalc) => createCalc(dimensions);\n};\nconst useCreateCalcWeb = (): CreateCalc => {\n return (webCalc) => `calc(${webCalc})`;\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 <View\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 </View>\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"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-alp-connection-state",
3
- "version": "6.1.1",
3
+ "version": "6.2.0",
4
4
  "description": "connection state",
5
5
  "keywords": [],
6
6
  "author": "Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com)",
@@ -90,7 +90,7 @@
90
90
  "jsx": true
91
91
  },
92
92
  "peerDependencies": {
93
- "react": "^17.0.2",
93
+ "react": "^18.1.0",
94
94
  "react-native": "*"
95
95
  },
96
96
  "peerDependenciesMeta": {
@@ -102,15 +102,15 @@
102
102
  "@babel/runtime": "^7.17.2"
103
103
  },
104
104
  "devDependencies": {
105
- "@babel/core": "7.17.5",
105
+ "@babel/core": "7.17.10",
106
106
  "@babel/preset-env": "7.16.11",
107
107
  "@babel/preset-react": "7.16.7",
108
- "@types/react-native": "0.66.16",
108
+ "@types/react-native": "0.70.4",
109
109
  "babel-preset-modern-browsers": "15.0.2",
110
- "pob-babel": "32.2.0",
111
- "react": "17.0.2",
110
+ "pob-babel": "34.2.0",
111
+ "react": "18.1.0",
112
112
  "react-native": "0.70.2",
113
113
  "typescript": "4.6.2"
114
114
  },
115
- "gitHead": "81644a1b75145fc792fadce0c04096aea046994b"
115
+ "gitHead": "de936d28d0779f271849b412d8a40ade84f22012"
116
116
  }