react-alp-connection-state 6.1.0 → 6.1.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* **react-alp-connection-state:** remove console.log ([cf4af9e](https://github.com/christophehurpeau/alp/commit/cf4af9e31071039fe30ab16e9e7adb7cf967832c))
+
+
+
+
+
 # [6.1.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@6.0.1...react-alp-connection-state@6.1.0) (2022-03-05)
 
 

package/dist/index-browser.cjs.js

@@ -71,10 +71,6 @@ function ConnectionState(_ref) {
       forceHidden = _ref.forceHidden,
       state = _ref.state,
       children = _ref.children;
-  console.log({
-    state: state,
-    forceHidden: forceHidden
-  });
   var unloadingRef = react.useRef(false);
   var createCalc = useCreateCalc();
   var left = createCalc('50% - 100px', function (_ref2) {

package/dist/index-browser.cjs.js.map

@@ -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  console.log({ state, forceHidden });\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","console","log","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View"],"mappings":"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"}
+{"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

@@ -67,10 +67,6 @@ function ConnectionState(_ref) {
       forceHidden = _ref.forceHidden,
       state = _ref.state,
       children = _ref.children;
-  console.log({
-    state: state,
-    forceHidden: forceHidden
-  });
   var unloadingRef = useRef(false);
   var createCalc = useCreateCalc();
   var left = createCalc('50% - 100px', function (_ref2) {

package/dist/index-browser.es.js.map

@@ -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  console.log({ state, forceHidden });\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","console","log","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx"],"mappings":"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"}
+{"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

@@ -64,10 +64,6 @@ function ConnectionState({
   state,
   children
 }) {
-  console.log({
-    state,
-    forceHidden
-  });
   const unloadingRef = useRef(false);
   const createCalc = useCreateCalc();
   const left = createCalc('50% - 100px', ({

package/dist/index-browsermodern.es.js.map

@@ -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  console.log({ state, forceHidden });\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","console","log","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx"],"mappings":"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"}
+{"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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"}

package/dist/index-node14.cjs

@@ -68,10 +68,6 @@ function ConnectionState({
   state,
   children
 }) {
-  console.log({
-    state,
-    forceHidden
-  });
   const unloadingRef = react.useRef(false);
   const createCalc = useCreateCalc();
   const left = createCalc('50% - 100px', ({

package/dist/index-node14.cjs.map

@@ -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  console.log({ state, forceHidden });\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","console","log","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View"],"mappings":"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"}
+{"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

@@ -64,10 +64,6 @@ function ConnectionState({
   state,
   children
 }) {
-  console.log({
-    state,
-    forceHidden
-  });
   const unloadingRef = useRef(false);
   const createCalc = useCreateCalc();
   const left = createCalc('50% - 100px', ({

package/dist/index-node14.mjs.map

@@ -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  console.log({ state, forceHidden });\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","console","log","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx"],"mappings":"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"}
+{"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/dist/index.d.ts.map

@@ -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;AAKrD,QAAA,MAAM,YAAY;;;;;;;;;;;;CASjB,CAAC;AAEF,oBAAY,oBAAoB,GAAG,OAAO,YAAY,CAAC;AACvD,oBAAY,KAAK,GAAG,IAAI,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,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,CAiD5C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,QAAA,MAAM,YAAY;;;;;;;;;;;;CASjB,CAAC;AAEF,oBAAY,oBAAoB,GAAG,OAAO,YAAY,CAAC;AACvD,oBAAY,KAAK,GAAG,IAAI,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-alp-connection-state",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "connection state",
   "keywords": [],
   "author": "Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com)",
@@ -109,8 +109,8 @@
     "babel-preset-modern-browsers": "15.0.2",
     "pob-babel": "32.2.0",
     "react": "17.0.2",
-    "react-native": "0.67.3",
+    "react-native": "0.70.2",
     "typescript": "4.6.2"
   },
-  "gitHead": "b6ce6531ed3bd7f594c7e3068c730864776824a0"
+  "gitHead": "81644a1b75145fc792fadce0c04096aea046994b"
 }

package/src/index.tsx

@@ -82,7 +82,6 @@ export function ConnectionState({
   state,
   children,
 }: ConnectionStateProps): ReactElement | null {
-  console.log({ state, forceHidden });
   const unloadingRef = useRef<boolean>(false);
 
   const createCalc = useCreateCalc();