react-alp-connection-state 7.1.5 → 7.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.
- package/CHANGELOG.md +14 -0
- package/dist/definitions/index.d.ts.map +1 -1
- package/dist/index-browser.cjs.js.map +1 -1
- package/dist/index-browser.es.js.map +1 -1
- package/dist/index-browsermodern.es.js +1 -1
- package/dist/index-browsermodern.es.js.map +1 -1
- package/dist/index-node16.cjs.map +1 -1
- package/dist/index-node16.mjs.map +1 -1
- package/package.json +14 -14
- package/src/index.tsx +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,20 @@
|
|
|
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
|
+
## [7.2.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@7.1.5...react-alp-connection-state@7.2.0) (2023-03-19)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* update dev dependencies ([9d7e24f](https://github.com/christophehurpeau/alp/commit/9d7e24f8e504d47feae64ca618dc2b3a69babc38))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* lint ([fce8605](https://github.com/christophehurpeau/alp/commit/fce86056748c6c0cbbbca49e689218475e87456f))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
6
20
|
## [7.1.5](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@7.1.4...react-alp-connection-state@7.1.5) (2023-02-18)
|
|
7
21
|
|
|
8
22
|
**Note:** Version bump only for package react-alp-connection-state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYrD,QAAA,MAAM,YAAY;;;;;;;;;;;;CASjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,OAAO,YAAY,CAAC;AACvD,MAAM,MAAM,KAAK,GAAG,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"}
|
|
@@ -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 {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","Text"],"mappings":";;;;;;
|
|
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 {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","_ref","theme","forceHidden","state","children","unloadingRef","useRef","_ref2","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
|
|
@@ -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 {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx"],"mappings":";;;;
|
|
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 {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","_ref","theme","forceHidden","state","children","unloadingRef","useRef","_ref2","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
|
|
@@ -80,7 +80,7 @@ function ConnectionState({
|
|
|
80
80
|
};
|
|
81
81
|
}, []);
|
|
82
82
|
return /*#__PURE__*/jsx(View, {
|
|
83
|
-
style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme
|
|
83
|
+
style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme?.container, state === 'connected' && {
|
|
84
84
|
backgroundColor: (theme || defaultTheme).backgroundColorConnected
|
|
85
85
|
}],
|
|
86
86
|
children: !state ? null : /*#__PURE__*/jsx(Text, {
|
|
@@ -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 {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx"],"mappings":";;;;
|
|
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 {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-node16.cjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","Text"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"index-node16.cjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-node16.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"index-node16.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\nimport { useEffect, useRef } from 'react';\nimport type { ScaledSize } from 'react-native';\nimport {\n View,\n Text,\n StyleSheet,\n Platform,\n useWindowDimensions,\n // eslint-disable-next-line import/no-unresolved -- react-native-web or react-native\n} from 'react-native';\n\nconst defaultTheme = {\n container: {\n backgroundColor: 'rgba(247, 25, 0, 0.8)',\n color: '#fff',\n textShadowColor: '#111',\n textShadowOffset: { width: 0, height: -1 },\n textShadowRadius: 1,\n },\n backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',\n};\n\nexport type ConnectionStateTheme = typeof defaultTheme;\nexport type State = 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 <Text\n style={[\n styles.connectionStateText,\n theme && { backgroundColor: theme.container.backgroundColor },\n state === 'connected' && {\n backgroundColor: (theme || defaultTheme).backgroundColorConnected,\n },\n { left },\n ]}\n >\n {children}\n </Text>\n )}\n </View>\n );\n}\n"],"names":["defaultTheme","container","backgroundColor","color","textShadowColor","textShadowOffset","width","height","textShadowRadius","backgroundColorConnected","useCreateCalcNative","dimensions","useWindowDimensions","webCalc","createCalc","useCreateCalcWeb","useCreateCalc","Platform","OS","styles","StyleSheet","create","connectionStateContainer","position","top","right","left","boxShadow","zIndex","transition","hide","connectionStateText","lineHeight","textAlign","borderBottomLeftRadius","borderBottomRightRadius","ConnectionState","theme","forceHidden","state","children","unloadingRef","useRef","useEffect","window","beforeUnloadHandler","current","addEventListener","removeEventListener","_jsx","View","style","Text"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-alp-connection-state",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.2.0",
|
|
4
4
|
"description": "connection state",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com)",
|
|
@@ -15,13 +15,15 @@
|
|
|
15
15
|
"engines": {
|
|
16
16
|
"node": ">=16.0.0"
|
|
17
17
|
},
|
|
18
|
-
"browserslist":
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
"browserslist": {
|
|
19
|
+
"production": [
|
|
20
|
+
"defaults",
|
|
21
|
+
"> 0.2%",
|
|
22
|
+
"not ie < 12",
|
|
23
|
+
"not safari < 10",
|
|
24
|
+
"not ios_saf < 10"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
25
27
|
"main": "./dist/index-node16.mjs",
|
|
26
28
|
"types": "./dist/definitions/index.d.ts",
|
|
27
29
|
"module": "./dist/index-browser.es.js",
|
|
@@ -90,18 +92,16 @@
|
|
|
90
92
|
}
|
|
91
93
|
},
|
|
92
94
|
"dependencies": {
|
|
93
|
-
"@babel/runtime": "^7.
|
|
95
|
+
"@babel/runtime": "^7.21.0"
|
|
94
96
|
},
|
|
95
97
|
"devDependencies": {
|
|
96
|
-
"@babel/core": "7.
|
|
98
|
+
"@babel/core": "7.21.3",
|
|
97
99
|
"@babel/preset-env": "7.20.2",
|
|
98
100
|
"@babel/preset-react": "7.18.6",
|
|
99
101
|
"@types/react-native": "0.71.3",
|
|
100
|
-
"babel
|
|
101
|
-
"pob-babel": "35.5.0",
|
|
102
|
+
"pob-babel": "35.6.2",
|
|
102
103
|
"react": "18.2.0",
|
|
103
|
-
"react-native": "0.71.2",
|
|
104
104
|
"typescript": "4.9.5"
|
|
105
105
|
},
|
|
106
|
-
"gitHead": "
|
|
106
|
+
"gitHead": "f7dfa98e33968879e3b16541652a316e92782259"
|
|
107
107
|
}
|