react-alp-connection-state 5.0.2 → 6.0.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@5.0.2...react-alp-connection-state@6.0.0) (2022-02-13)
+
+
+### Bug Fixes
+
+* dont override react/react-in-jsx-scope ([5d21c9e](https://github.com/christophehurpeau/alp/commit/5d21c9ece092cd3397d1794211dae17cea6649f8))
+
+
+### Features
+
+* **react-alp-connection-state:** rewrite with react-native ([4e81a48](https://github.com/christophehurpeau/alp/commit/4e81a48fa2a701794971576236ea4f68bd16a475))
+
+
+### BREAKING CHANGES
+
+* **react-alp-connection-state:** new api, react-native or react-native-web, children with text required
+
+
+
+
+
 ## [5.0.2](https://github.com/christophehurpeau/alp/compare/react-alp-connection-state@5.0.1...react-alp-connection-state@5.0.2) (2022-02-06)
 
 **Note:** Version bump only for package react-alp-connection-state

package/dist/index-browser.es.js

@@ -1,21 +1,86 @@
-import React, { useContext, useRef, useEffect } from 'react';
-import ReactAlpContext from 'react-alp-context';
-import { T } from 'react-alp-translate';
-import '../ConnectionState.global.scss';
+import { useRef, useEffect } from 'react';
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { jsx } from 'react/jsx-runtime.js';
 
-function ConnectionState(_ref) {
-  var state = _ref.state;
-  var ctx = useContext(ReactAlpContext);
-  var notLoggedIn = !ctx.sanitizedState.user;
-  var unloadingRef = useRef(false);
-  var currentStateRef = useRef(state);
+var defaultTheme = {
+  container: {
+    backgroundColor: 'rgba(247, 25, 0, 0.8)',
+    color: '#fff',
+    textShadowColor: '#111',
+    textShadowOffset: {
+      width: 0,
+      height: -1
+    },
+    textShadowRadius: 1
+  },
+  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
+};
+
+var useCreateCalcNative = function useCreateCalcNative() {
+  var dimensions = useWindowDimensions();
+  return function (webCalc, createCalc) {
+    return createCalc(dimensions);
+  };
+};
+
+var useCreateCalcWeb = function useCreateCalcWeb() {
+  return function (webCalc) {
+    return "calc(" + webCalc + ")";
+  };
+};
 
-  if (!unloadingRef.current) {
-    currentStateRef.current = state;
+var useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative; // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
+
+var styles = StyleSheet.create({
+  connectionStateContainer: {
+    backgroundColor: defaultTheme.container.backgroundColor,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    height: 2,
+    color: defaultTheme.container.color,
+    textShadowOffset: defaultTheme.container.textShadowOffset,
+    textShadowRadius: defaultTheme.container.textShadowRadius,
+    boxShadow: "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)",
+    zIndex: 9,
+    transition: 'top .8s, background-color .2s'
+  },
+  hide: {
+    top: -24
+  },
+  connectionStateText: {
+    backgroundColor: defaultTheme.container.backgroundColor,
+    position: 'absolute',
+    width: 200,
+    height: 22,
+    lineHeight: 22,
+    top: 2,
+    textAlign: 'center',
+    borderBottomLeftRadius: 5,
+    borderBottomRightRadius: 5,
+    transition: 'background-color .2s'
   }
+});
+function ConnectionState(_ref) {
+  var theme = _ref.theme,
+      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) {
+    var width = _ref2.width;
+    return width / 2 - 100;
+  }); // TODO use calc() in web ?
 
-  var currentState = currentStateRef.current;
   useEffect(function () {
+    if (typeof window === 'undefined') return;
+
     var beforeUnloadHandler = function beforeUnloadHandler() {
       unloadingRef.current = true;
     };
@@ -25,13 +90,22 @@ function ConnectionState(_ref) {
       window.removeEventListener('beforeunload', beforeUnloadHandler);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    hidden: !state || notLoggedIn || currentState === 'connected',
-    className: "alp-connection-state"
-  }, !state || notLoggedIn ? null : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(T, {
-    id: "connectionState." + currentState
-  })));
+  return /*#__PURE__*/jsx(View, {
+    style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme == null ? void 0 : theme.container, state === 'connected' && {
+      backgroundColor: (theme || defaultTheme).backgroundColorConnected
+    }],
+    children: !state ? null : /*#__PURE__*/jsx(View, {
+      style: [styles.connectionStateText, theme && {
+        backgroundColor: theme.container.backgroundColor
+      }, state === 'connected' && {
+        backgroundColor: (theme || defaultTheme).backgroundColorConnected
+      }, {
+        left: left
+      }],
+      children: children
+    })
+  });
 }
 
-export { ConnectionState as default };
+export { ConnectionState };
 //# sourceMappingURL=index-browser.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index-browser.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useRef } from 'react';\nimport ReactAlpContext from 'react-alp-context';\nimport { T } from 'react-alp-translate';\nimport '../ConnectionState.global.scss';\n\ntype State = null | 'connecting' | 'connected' | 'disconnected';\n\ninterface ConnectionStateProps {\n  state: State;\n}\n\nexport default function ConnectionState({\n  state,\n}: ConnectionStateProps): ReactElement {\n  const ctx = useContext(ReactAlpContext);\n  const notLoggedIn = !(ctx.sanitizedState as { user?: unknown }).user;\n\n  const unloadingRef = useRef<boolean>(false);\n  const currentStateRef = useRef(state);\n  if (!unloadingRef.current) {\n    currentStateRef.current = state;\n  }\n  const currentState = currentStateRef.current;\n\n  useEffect((): (() => void) => {\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  return (\n    <div\n      hidden={!state || notLoggedIn || currentState === 'connected'}\n      className=\"alp-connection-state\"\n    >\n      {!state || notLoggedIn ? null : (\n        <div>\n          <T id={`connectionState.${currentState as string}`} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["ConnectionState","state","ctx","useContext","ReactAlpContext","notLoggedIn","sanitizedState","user","unloadingRef","useRef","currentStateRef","current","currentState","useEffect","beforeUnloadHandler","window","addEventListener","removeEventListener"],"mappings":";;;;;AAYe,SAASA,eAAT,OAEwB;AAAA,MADrCC,KACqC,QADrCA,KACqC;AACrC,MAAMC,GAAG,GAAGC,UAAU,CAACC,eAAD,CAAtB;AACA,MAAMC,WAAW,GAAG,CAAEH,GAAG,CAACI,cAAL,CAA2CC,IAAhE;AAEA,MAAMC,YAAY,GAAGC,MAAM,CAAU,KAAV,CAA3B;AACA,MAAMC,eAAe,GAAGD,MAAM,CAACR,KAAD,CAA9B;;AACA,MAAI,CAACO,YAAY,CAACG,OAAlB,EAA2B;AACzBD,IAAAA,eAAe,CAACC,OAAhB,GAA0BV,KAA1B;AACD;;AACD,MAAMW,YAAY,GAAGF,eAAe,CAACC,OAArC;AAEAE,EAAAA,SAAS,CAAC,YAAoB;AAC5B,QAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAY;AACtCN,MAAAA,YAAY,CAACG,OAAb,GAAuB,IAAvB;AACD,KAFD;;AAGAI,IAAAA,MAAM,CAACC,gBAAP,CAAwB,cAAxB,EAAwCF,mBAAxC;AAEA,WAAO,YAAY;AACjBC,MAAAA,MAAM,CAACE,mBAAP,CAA2B,cAA3B,EAA2CH,mBAA3C;AACD,KAFD;AAGD,GATQ,EASN,EATM,CAAT;AAWA,sBACE;AACE,IAAA,MAAM,EAAE,CAACb,KAAD,IAAUI,WAAV,IAAyBO,YAAY,KAAK,WADpD;AAEE,IAAA,SAAS,EAAC;AAFZ,KAIG,CAACX,KAAD,IAAUI,WAAV,GAAwB,IAAxB,gBACC,8CACE,oBAAC,CAAD;AAAG,IAAA,EAAE,uBAAqBO;AAA1B,IADF,CALJ,CADF;AAYD;;;;"}
+{"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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"}

package/dist/index-browsermodern.es.js

@@ -1,22 +1,82 @@
-import React, { useContext, useRef, useEffect } from 'react';
-import ReactAlpContext from 'react-alp-context';
-import { T } from 'react-alp-translate';
-import '../ConnectionState.global.scss';
+import { useRef, useEffect } from 'react';
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { jsx } from 'react/jsx-runtime.js';
 
+const defaultTheme = {
+  container: {
+    backgroundColor: 'rgba(247, 25, 0, 0.8)',
+    color: '#fff',
+    textShadowColor: '#111',
+    textShadowOffset: {
+      width: 0,
+      height: -1
+    },
+    textShadowRadius: 1
+  },
+  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
+};
+
+const useCreateCalcNative = () => {
+  const dimensions = useWindowDimensions();
+  return (webCalc, createCalc) => createCalc(dimensions);
+};
+
+const useCreateCalcWeb = () => {
+  return webCalc => `calc(${webCalc})`;
+};
+
+const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative; // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
+
+const styles = StyleSheet.create({
+  connectionStateContainer: {
+    backgroundColor: defaultTheme.container.backgroundColor,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    height: 2,
+    color: defaultTheme.container.color,
+    textShadowOffset: defaultTheme.container.textShadowOffset,
+    textShadowRadius: defaultTheme.container.textShadowRadius,
+    boxShadow: "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)",
+    zIndex: 9,
+    transition: 'top .8s, background-color .2s'
+  },
+  hide: {
+    top: -24
+  },
+  connectionStateText: {
+    backgroundColor: defaultTheme.container.backgroundColor,
+    position: 'absolute',
+    width: 200,
+    height: 22,
+    lineHeight: 22,
+    top: 2,
+    textAlign: 'center',
+    borderBottomLeftRadius: 5,
+    borderBottomRightRadius: 5,
+    transition: 'background-color .2s'
+  }
+});
 function ConnectionState({
-  state
+  theme,
+  forceHidden,
+  state,
+  children
 }) {
-  const ctx = useContext(ReactAlpContext);
-  const notLoggedIn = !ctx.sanitizedState.user;
+  console.log({
+    state,
+    forceHidden
+  });
   const unloadingRef = useRef(false);
-  const currentStateRef = useRef(state);
-
-  if (!unloadingRef.current) {
-    currentStateRef.current = state;
-  }
+  const createCalc = useCreateCalc();
+  const left = createCalc('50% - 100px', ({
+    width
+  }) => width / 2 - 100); // TODO use calc() in web ?
 
-  const currentState = currentStateRef.current;
   useEffect(() => {
+    if (typeof window === 'undefined') return;
+
     const beforeUnloadHandler = () => {
       unloadingRef.current = true;
     };
@@ -26,13 +86,22 @@ function ConnectionState({
       window.removeEventListener('beforeunload', beforeUnloadHandler);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    hidden: !state || notLoggedIn || currentState === 'connected',
-    className: "alp-connection-state"
-  }, !state || notLoggedIn ? null : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(T, {
-    id: `connectionState.${currentState}`
-  })));
+  return /*#__PURE__*/jsx(View, {
+    style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme === null || theme === void 0 ? void 0 : theme.container, state === 'connected' && {
+      backgroundColor: (theme || defaultTheme).backgroundColorConnected
+    }],
+    children: !state ? null : /*#__PURE__*/jsx(View, {
+      style: [styles.connectionStateText, theme && {
+        backgroundColor: theme.container.backgroundColor
+      }, state === 'connected' && {
+        backgroundColor: (theme || defaultTheme).backgroundColorConnected
+      }, {
+        left
+      }],
+      children: children
+    })
+  });
 }
 
-export { ConnectionState as default };
+export { ConnectionState };
 //# sourceMappingURL=index-browsermodern.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index-browsermodern.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useRef } from 'react';\nimport ReactAlpContext from 'react-alp-context';\nimport { T } from 'react-alp-translate';\nimport '../ConnectionState.global.scss';\n\ntype State = null | 'connecting' | 'connected' | 'disconnected';\n\ninterface ConnectionStateProps {\n  state: State;\n}\n\nexport default function ConnectionState({\n  state,\n}: ConnectionStateProps): ReactElement {\n  const ctx = useContext(ReactAlpContext);\n  const notLoggedIn = !(ctx.sanitizedState as { user?: unknown }).user;\n\n  const unloadingRef = useRef<boolean>(false);\n  const currentStateRef = useRef(state);\n  if (!unloadingRef.current) {\n    currentStateRef.current = state;\n  }\n  const currentState = currentStateRef.current;\n\n  useEffect((): (() => void) => {\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  return (\n    <div\n      hidden={!state || notLoggedIn || currentState === 'connected'}\n      className=\"alp-connection-state\"\n    >\n      {!state || notLoggedIn ? null : (\n        <div>\n          <T id={`connectionState.${currentState as string}`} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["ConnectionState","state","ctx","useContext","ReactAlpContext","notLoggedIn","sanitizedState","user","unloadingRef","useRef","currentStateRef","current","currentState","useEffect","beforeUnloadHandler","window","addEventListener","removeEventListener"],"mappings":";;;;;AAYe,SAASA,eAAT,CAAyB;AACtCC,EAAAA;AADsC,CAAzB,EAEwB;AACrC,QAAMC,GAAG,GAAGC,UAAU,CAACC,eAAD,CAAtB;AACA,QAAMC,WAAW,GAAG,CAAEH,GAAG,CAACI,cAAL,CAA2CC,IAAhE;AAEA,QAAMC,YAAY,GAAGC,MAAM,CAAU,KAAV,CAA3B;AACA,QAAMC,eAAe,GAAGD,MAAM,CAACR,KAAD,CAA9B;;AACA,MAAI,CAACO,YAAY,CAACG,OAAlB,EAA2B;AACzBD,IAAAA,eAAe,CAACC,OAAhB,GAA0BV,KAA1B;AACD;;AACD,QAAMW,YAAY,GAAGF,eAAe,CAACC,OAArC;AAEAE,EAAAA,SAAS,CAAC,MAAoB;AAC5B,UAAMC,mBAAmB,GAAG,MAAY;AACtCN,MAAAA,YAAY,CAACG,OAAb,GAAuB,IAAvB;AACD,KAFD;;AAGAI,IAAAA,MAAM,CAACC,gBAAP,CAAwB,cAAxB,EAAwCF,mBAAxC;AAEA,WAAO,MAAY;AACjBC,MAAAA,MAAM,CAACE,mBAAP,CAA2B,cAA3B,EAA2CH,mBAA3C;AACD,KAFD;AAGD,GATQ,EASN,EATM,CAAT;AAWA,sBACE;AACE,IAAA,MAAM,EAAE,CAACb,KAAD,IAAUI,WAAV,IAAyBO,YAAY,KAAK,WADpD;AAEE,IAAA,SAAS,EAAC;AAFZ,KAIG,CAACX,KAAD,IAAUI,WAAV,GAAwB,IAAxB,gBACC,8CACE,oBAAC,CAAD;AAAG,IAAA,EAAE,EAAG,mBAAkBO,YAAuB;AAAjD,IADF,CALJ,CADF;AAYD;;;;"}
+{"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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"}

package/dist/index-node14.mjs

@@ -1,21 +1,82 @@
-import React, { useContext, useRef, useEffect } from 'react';
-import ReactAlpContext from 'react-alp-context';
-import { T } from 'react-alp-translate';
+import { useRef, useEffect } from 'react';
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { jsx } from 'react/jsx-runtime.js';
 
+const defaultTheme = {
+  container: {
+    backgroundColor: 'rgba(247, 25, 0, 0.8)',
+    color: '#fff',
+    textShadowColor: '#111',
+    textShadowOffset: {
+      width: 0,
+      height: -1
+    },
+    textShadowRadius: 1
+  },
+  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)'
+};
+
+const useCreateCalcNative = () => {
+  const dimensions = useWindowDimensions();
+  return (webCalc, createCalc) => createCalc(dimensions);
+};
+
+const useCreateCalcWeb = () => {
+  return webCalc => `calc(${webCalc})`;
+};
+
+const useCreateCalc = Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative; // example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
+
+const styles = StyleSheet.create({
+  connectionStateContainer: {
+    backgroundColor: defaultTheme.container.backgroundColor,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    height: 2,
+    color: defaultTheme.container.color,
+    textShadowOffset: defaultTheme.container.textShadowOffset,
+    textShadowRadius: defaultTheme.container.textShadowRadius,
+    boxShadow: "0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)",
+    zIndex: 9,
+    transition: 'top .8s, background-color .2s'
+  },
+  hide: {
+    top: -24
+  },
+  connectionStateText: {
+    backgroundColor: defaultTheme.container.backgroundColor,
+    position: 'absolute',
+    width: 200,
+    height: 22,
+    lineHeight: 22,
+    top: 2,
+    textAlign: 'center',
+    borderBottomLeftRadius: 5,
+    borderBottomRightRadius: 5,
+    transition: 'background-color .2s'
+  }
+});
 function ConnectionState({
-  state
+  theme,
+  forceHidden,
+  state,
+  children
 }) {
-  const ctx = useContext(ReactAlpContext);
-  const notLoggedIn = !ctx.sanitizedState.user;
+  console.log({
+    state,
+    forceHidden
+  });
   const unloadingRef = useRef(false);
-  const currentStateRef = useRef(state);
-
-  if (!unloadingRef.current) {
-    currentStateRef.current = state;
-  }
+  const createCalc = useCreateCalc();
+  const left = createCalc('50% - 100px', ({
+    width
+  }) => width / 2 - 100); // TODO use calc() in web ?
 
-  const currentState = currentStateRef.current;
   useEffect(() => {
+    if (typeof window === 'undefined') return;
+
     const beforeUnloadHandler = () => {
       unloadingRef.current = true;
     };
@@ -25,13 +86,22 @@ function ConnectionState({
       window.removeEventListener('beforeunload', beforeUnloadHandler);
     };
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    hidden: !state || notLoggedIn || currentState === 'connected',
-    className: "alp-connection-state"
-  }, !state || notLoggedIn ? null : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(T, {
-    id: `connectionState.${currentState}`
-  })));
+  return /*#__PURE__*/jsx(View, {
+    style: [styles.connectionStateContainer, (forceHidden || !state || state === 'connected') && styles.hide, theme?.container, state === 'connected' && {
+      backgroundColor: (theme || defaultTheme).backgroundColorConnected
+    }],
+    children: !state ? null : /*#__PURE__*/jsx(View, {
+      style: [styles.connectionStateText, theme && {
+        backgroundColor: theme.container.backgroundColor
+      }, state === 'connected' && {
+        backgroundColor: (theme || defaultTheme).backgroundColorConnected
+      }, {
+        left
+      }],
+      children: children
+    })
+  });
 }
 
-export { ConnectionState as default };
+export { ConnectionState };
 //# sourceMappingURL=index-node14.mjs.map

package/dist/index-node14.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index-node14.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport React, { useContext, useEffect, useRef } from 'react';\nimport ReactAlpContext from 'react-alp-context';\nimport { T } from 'react-alp-translate';\nimport '../ConnectionState.global.scss';\n\ntype State = null | 'connecting' | 'connected' | 'disconnected';\n\ninterface ConnectionStateProps {\n  state: State;\n}\n\nexport default function ConnectionState({\n  state,\n}: ConnectionStateProps): ReactElement {\n  const ctx = useContext(ReactAlpContext);\n  const notLoggedIn = !(ctx.sanitizedState as { user?: unknown }).user;\n\n  const unloadingRef = useRef<boolean>(false);\n  const currentStateRef = useRef(state);\n  if (!unloadingRef.current) {\n    currentStateRef.current = state;\n  }\n  const currentState = currentStateRef.current;\n\n  useEffect((): (() => void) => {\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  return (\n    <div\n      hidden={!state || notLoggedIn || currentState === 'connected'}\n      className=\"alp-connection-state\"\n    >\n      {!state || notLoggedIn ? null : (\n        <div>\n          <T id={`connectionState.${currentState as string}`} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["ConnectionState","state","ctx","useContext","ReactAlpContext","notLoggedIn","sanitizedState","user","unloadingRef","useRef","currentStateRef","current","currentState","useEffect","beforeUnloadHandler","window","addEventListener","removeEventListener"],"mappings":";;;;AAYe,SAASA,eAAT,CAAyB;AACtCC,EAAAA;AADsC,CAAzB,EAEwB;AACrC,QAAMC,GAAG,GAAGC,UAAU,CAACC,eAAD,CAAtB;AACA,QAAMC,WAAW,GAAG,CAAEH,GAAG,CAACI,cAAL,CAA2CC,IAAhE;AAEA,QAAMC,YAAY,GAAGC,MAAM,CAAU,KAAV,CAA3B;AACA,QAAMC,eAAe,GAAGD,MAAM,CAACR,KAAD,CAA9B;;AACA,MAAI,CAACO,YAAY,CAACG,OAAlB,EAA2B;AACzBD,IAAAA,eAAe,CAACC,OAAhB,GAA0BV,KAA1B;AACD;;AACD,QAAMW,YAAY,GAAGF,eAAe,CAACC,OAArC;AAEAE,EAAAA,SAAS,CAAC,MAAoB;AAC5B,UAAMC,mBAAmB,GAAG,MAAY;AACtCN,MAAAA,YAAY,CAACG,OAAb,GAAuB,IAAvB;AACD,KAFD;;AAGAI,IAAAA,MAAM,CAACC,gBAAP,CAAwB,cAAxB,EAAwCF,mBAAxC;AAEA,WAAO,MAAY;AACjBC,MAAAA,MAAM,CAACE,mBAAP,CAA2B,cAA3B,EAA2CH,mBAA3C;AACD,KAFD;AAGD,GATQ,EASN,EATM,CAAT;AAWA,sBACE;AACE,IAAA,MAAM,EAAE,CAACb,KAAD,IAAUI,WAAV,IAAyBO,YAAY,KAAK,WADpD;AAEE,IAAA,SAAS,EAAC;AAFZ,KAIG,CAACX,KAAD,IAAUI,WAAV,GAAwB,IAAxB,gBACC,8CACE,oBAAC,CAAD;AAAG,IAAA,EAAE,EAAG,mBAAkBO,YAAuB;AAAjD,IADF,CALJ,CADF;AAYD;;;;"}
+{"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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"}

package/dist/index.d.ts

@@ -1,9 +1,25 @@
-import type { ReactElement } from 'react';
-import '../ConnectionState.global.scss';
-declare type State = null | 'connecting' | 'connected' | 'disconnected';
-interface ConnectionStateProps {
+import type { ReactElement, ReactNode } from 'react';
+declare const defaultTheme: {
+    container: {
+        backgroundColor: string;
+        color: string;
+        textShadowColor: string;
+        textShadowOffset: {
+            width: number;
+            height: number;
+        };
+        textShadowRadius: number;
+    };
+    backgroundColorConnected: string;
+};
+export declare type ConnectionStateTheme = typeof defaultTheme;
+export declare type State = null | 'connecting' | 'connected' | 'disconnected';
+export interface ConnectionStateProps {
+    theme?: ConnectionStateTheme;
+    forceHidden?: boolean;
     state: State;
+    children: NonNullable<ReactNode>;
 }
-export default function ConnectionState({ state, }: ConnectionStateProps): ReactElement;
+export declare function ConnectionState({ theme, forceHidden, state, children, }: ConnectionStateProps): ReactElement | null;
 export {};
 //# sourceMappingURL=index.d.ts.map

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,MAAM,OAAO,CAAC;AAI1C,OAAO,gCAAgC,CAAC;AAExC,aAAK,KAAK,GAAG,IAAI,GAAG,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;AAEhE,UAAU,oBAAoB;IAC5B,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,GACN,EAAE,oBAAoB,GAAG,YAAY,CAkCrC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-alp-connection-state",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "description": "connection state",
   "keywords": [],
   "author": "Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com)",
@@ -87,23 +87,26 @@
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "ynnub": "^1.0.0 || ^2.0.0"
+    "react-native": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.0",
-    "alp-types": "3.1.0",
-    "react-alp-context": "4.0.2",
-    "react-alp-translate": "6.0.2"
+    "@babel/runtime": "^7.17.2"
   },
   "devDependencies": {
-    "@babel/core": "7.17.0",
+    "@babel/core": "7.17.2",
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
+    "@types/react-native": "0.66.15",
     "babel-preset-modern-browsers": "15.0.2",
-    "pob-babel": "31.0.0",
+    "pob-babel": "32.0.1",
     "react": "17.0.2",
-    "typescript": "4.5.5",
-    "ynnub": "2.0.0"
+    "react-native": "0.67.2",
+    "typescript": "4.5.5"
   },
-  "gitHead": "1af3cf2eb4bba25ab23f174cda860416ff68a63d"
+  "gitHead": "1617223e61c2b76e0613a49012792fbf6d3b872b"
 }

package/src/.eslintrc.json

@@ -2,7 +2,7 @@
   "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
-    "project": "packages/react-alp-connection-state/tsconfig.json"
+    "project": "packages/react-alp-connection-state/tsconfig.eslint.json"
   },
   "plugins": ["@typescript-eslint"],
   "extends": [

package/src/index.tsx

@@ -1,29 +1,96 @@
-import type { ReactElement } from 'react';
-import React, { useContext, useEffect, useRef } from 'react';
-import ReactAlpContext from 'react-alp-context';
-import { T } from 'react-alp-translate';
-import '../ConnectionState.global.scss';
+import type { ReactElement, ReactNode } from 'react';
+import { useEffect, useRef } from 'react';
+import type { ScaledSize } from 'react-native';
+import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
 
-type State = null | 'connecting' | 'connected' | 'disconnected';
+const defaultTheme = {
+  container: {
+    backgroundColor: 'rgba(247, 25, 0, 0.8)',
+    color: '#fff',
+    textShadowColor: '#111',
+    textShadowOffset: { width: 0, height: -1 },
+    textShadowRadius: 1,
+  },
+  backgroundColorConnected: 'rgba(25, 200, 60, 0.8)',
+};
 
-interface ConnectionStateProps {
+export type ConnectionStateTheme = typeof defaultTheme;
+export type State = null | 'connecting' | 'connected' | 'disconnected';
+
+export interface ConnectionStateProps {
+  theme?: ConnectionStateTheme;
+  forceHidden?: boolean;
   state: State;
+  children: NonNullable<ReactNode>;
 }
 
-export default function ConnectionState({
-  state,
-}: ConnectionStateProps): ReactElement {
-  const ctx = useContext(ReactAlpContext);
-  const notLoggedIn = !(ctx.sanitizedState as { user?: unknown }).user;
+const zDepth1 =
+  '0 2px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.2)';
+
+type CreateCalc = (
+  webCalc: string,
+  createCalc: (dimensions: ScaledSize) => number,
+) => string | number;
+
+const useCreateCalcNative = (): CreateCalc => {
+  const dimensions = useWindowDimensions();
+  return (webCalc, createCalc) => createCalc(dimensions);
+};
+const useCreateCalcWeb = (): CreateCalc => {
+  return (webCalc) => `calc(${webCalc})`;
+};
+const useCreateCalc =
+  Platform.OS === 'web' ? useCreateCalcWeb : useCreateCalcNative;
+
+// example: const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100);
 
+const styles = StyleSheet.create({
+  connectionStateContainer: {
+    backgroundColor: defaultTheme.container.backgroundColor,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    height: 2,
+    color: defaultTheme.container.color,
+    textShadowOffset: defaultTheme.container.textShadowOffset,
+    textShadowRadius: defaultTheme.container.textShadowRadius,
+    boxShadow: zDepth1,
+    zIndex: 9,
+    transition: 'top .8s, background-color .2s',
+  },
+  hide: {
+    top: -24,
+  },
+  connectionStateText: {
+    backgroundColor: defaultTheme.container.backgroundColor,
+    position: 'absolute',
+    width: 200,
+    height: 22,
+    lineHeight: 22,
+    top: 2,
+    textAlign: 'center',
+    borderBottomLeftRadius: 5,
+    borderBottomRightRadius: 5,
+    transition: 'background-color .2s',
+  },
+});
+
+export function ConnectionState({
+  theme,
+  forceHidden,
+  state,
+  children,
+}: ConnectionStateProps): ReactElement | null {
+  console.log({ state, forceHidden });
   const unloadingRef = useRef<boolean>(false);
-  const currentStateRef = useRef(state);
-  if (!unloadingRef.current) {
-    currentStateRef.current = state;
-  }
-  const currentState = currentStateRef.current;
 
-  useEffect((): (() => void) => {
+  const createCalc = useCreateCalc();
+  const left = createCalc('50% - 100px', ({ width }) => width / 2 - 100); // TODO use calc() in web ?
+
+  useEffect((): (() => void) | undefined => {
+    if (typeof window === 'undefined') return;
+
     const beforeUnloadHandler = (): void => {
       unloadingRef.current = true;
     };
@@ -34,16 +101,33 @@ export default function ConnectionState({
     };
   }, []);
 
+  const shouldHide = forceHidden || !state || state === 'connected';
+
   return (
-    <div
-      hidden={!state || notLoggedIn || currentState === 'connected'}
-      className="alp-connection-state"
+    <View
+      style={[
+        styles.connectionStateContainer,
+        shouldHide && styles.hide,
+        theme?.container,
+        state === 'connected' && {
+          backgroundColor: (theme || defaultTheme).backgroundColorConnected,
+        },
+      ]}
     >
-      {!state || notLoggedIn ? null : (
-        <div>
-          <T id={`connectionState.${currentState as string}`} />
-        </div>
+      {!state ? null : (
+        <View
+          style={[
+            styles.connectionStateText,
+            theme && { backgroundColor: theme.container.backgroundColor },
+            state === 'connected' && {
+              backgroundColor: (theme || defaultTheme).backgroundColorConnected,
+            },
+            { left },
+          ]}
+        >
+          {children}
+        </View>
       )}
-    </div>
+    </View>
   );
 }

package/tsconfig.eslint.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "noEmit": true
+  }
+}

package/ConnectionState.global.scss

@@ -1,37 +0,0 @@
-@import '~ynnub/mixins/block';
-@import '~ynnub/mixins/typography';
-
-$connection-state-background: rgba(247, 25, 0, 0.8) !default;
-$connection-state-color: #fff !default;
-$connection-state-text-shadow: #111 0 1px 1px !default;
-
-.alp-connection-state {
-  background: $connection-state-background;
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: 2px;
-  color: $connection-state-color;
-  text-shadow: $connection-state-text-shadow;
-  @include bold();
-  @include z-depth-1();
-  z-index: 9;
-
-  > div {
-    background: $connection-state-background;
-    position: fixed;
-    width: 200px;
-    height: 22px;
-    line-height: 22px;
-    // top: 50%;
-    top: 2px;
-    left: 50%;
-    // overflow: hidden;
-    // margin-top: -25px;
-    margin-left: -100px;
-    text-align: center;
-
-    border-radius: 0 0 5px 5px;
-  }
-}