Typescript/connection status bar (#1384)

* ConnectionStatusBar migrate to typescript

* migrate screen and index to typescript

* docs

* generated types

* types file and export asBaseComponent

* Fix tests import

Author: mendyEdri

demo/src/screens/componentScreens/ConnectionStatusBarScreen.js renamed to demo/src/screens/componentScreens/ConnectionStatusBarScreen.tsx

@@ -2,15 +2,19 @@ import React, {Component} from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import {ConnectionStatusBar, Typography, Colors} from 'react-native-ui-lib'; //eslint-disable-line
 
+type ConnectionStatusBarScreenState = {
+  isConnected: boolean;
+};
+
 ConnectionStatusBar.registerGlobalOnConnectionLost(() => {
   // console.warn('what what?!? connection has been lost');
 });
 
-export default class ConnectionStatusBarScreen extends Component {
-  constructor(props) {
+export default class ConnectionStatusBarScreen extends Component<{}, ConnectionStatusBarScreenState> {
+  constructor(props: any) {
     super(props);
     this.state = {
-      isConnected: true,
+      isConnected: true
     };
   }
 
@@ -25,7 +29,7 @@ export default class ConnectionStatusBarScreen extends Component {
             textAlign: 'center',
             marginBottom: 10,
             ...Typography.text60,
-            color: Colors.dark40,
+            color: Colors.dark40
           }}
         >
           Turn your wifi on/off to see the component in action
@@ -43,6 +47,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: 25,
-  },
+    paddingHorizontal: 25
+  }
 });

generatedTypes/components/connectionStatusBar/Types.d.ts

@@ -0,0 +1,28 @@
+export declare type ConnectionStatusBarProps = {
+    /**
+     * Text to show as the status
+     */
+    label?: string;
+    /**
+     * Handler to get connection change events propagation
+     */
+    onConnectionChange?: (isConnected: boolean, isInitial: boolean) => void;
+    /**
+     * Text to show as the status
+     */
+    allowDismiss?: boolean;
+    /**
+     * Use absolute position for the component
+     */
+    useAbsolutePosition?: boolean;
+};
+export declare type ConnectionStatusBarState = {
+    type?: string;
+    isConnected: boolean;
+    isCancelled: boolean;
+};
+export declare const DEFAULT_PROPS: {
+    label: string;
+    allowDismiss: boolean;
+    useAbsolutePosition: boolean;
+};

generatedTypes/components/connectionStatusBar/index.d.ts

@@ -0,0 +1,35 @@
+import React, { PureComponent } from 'react';
+import { ConnectionStatusBarProps, ConnectionStatusBarState } from './Types';
+export { ConnectionStatusBarProps };
+/**
+ * @description: Top bar to show a "no internet" connection status. Note: Run on real device for best results
+ * @image: https://user-images.githubusercontent.com/33805983/34683190-f3b1904c-f4a9-11e7-9d46-9a340bd35448.png, https://user-images.githubusercontent.com/33805983/34484206-edc6c6e4-efcb-11e7-88b2-cd394c19dd5e.png
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ConnectionStatusBarScreen.js
+ * @notes: The component requires installing the '@react-native-community/netinfo' native library
+ */
+declare class ConnectionStatusBar extends PureComponent<ConnectionStatusBarProps, ConnectionStatusBarState> {
+    static displayName: string;
+    static defaultProps: {
+        label: string;
+        allowDismiss: boolean;
+        useAbsolutePosition: boolean;
+    };
+    styles?: any;
+    unsubscribe?: any;
+    static onConnectionLost?: () => void;
+    static registerGlobalOnConnectionLost(callback: () => void): void;
+    static unregisterGlobalOnConnectionLost(): void;
+    constructor(props: ConnectionStatusBarProps);
+    generateStyles(): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onConnectionChange(state: ConnectionStatusBarState): void;
+    getInitialConnectionState(): Promise<void>;
+    isStateConnected(state: ConnectionStatusBarState): boolean;
+    render(): false | JSX.Element;
+}
+export { ConnectionStatusBar };
+declare const _default: React.ComponentClass<ConnectionStatusBarProps & {
+    useCustomTheme?: boolean | undefined;
+}, any> & typeof ConnectionStatusBar;
+export default _default;

src/components/connectionStatusBar/Types.tsx

@@ -0,0 +1,50 @@
+import {PureComponent} from 'react';
+
+export type ConnectionStatusBarProps = {
+  /**
+   * Text to show as the status
+   */
+  label?: string;
+  /**
+   * Handler to get connection change events propagation
+   */
+  onConnectionChange?: (isConnected: boolean, isInitial: boolean) => void;
+  /**
+   * Text to show as the status
+   */
+  allowDismiss?: boolean;
+  /**
+   * Use absolute position for the component
+   */
+  useAbsolutePosition?: boolean;
+};
+
+export type ConnectionStatusBarState = {
+  /* Current connection type  */
+  type?: string;
+  isConnected: boolean;
+  isCancelled: boolean;
+};
+
+export const DEFAULT_PROPS = {
+  label: 'No internet. Check your connection.',
+  allowDismiss: false,
+  useAbsolutePosition: true
+};
+
+/**
+ * @description: Top bar to show a "no internet" connection status. Note: Run on real device for best results
+ * @image: https://user-images.githubusercontent.com/33805983/34683190-f3b1904c-f4a9-11e7-9d46-9a340bd35448.png, https://user-images.githubusercontent.com/33805983/34484206-edc6c6e4-efcb-11e7-88b2-cd394c19dd5e.png
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ConnectionStatusBarScreen.js
+ * @notes: The component requires installing the '@react-native-community/netinfo' native library
+ */
+// @ts-ignore
+class FakeConnectionStatusBarForDocs extends PureComponent<ConnectionStatusBarProps, ConnectionStatusBarState> { // eslint-disable-line
+  static displayName = 'ConnectionStatusBar';
+
+  static defaultProps = DEFAULT_PROPS;
+
+  render() {
+    return null;
+  }
+}

src/components/connectionStatusBar/__tests__/index.spec.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import ConnectionStatusBar from '../index';
+import {ConnectionStatusBar} from '../index';
 
 describe('ConnectionStatusBar', () => {
   let uut;

src/components/connectionStatusBar/index.js renamed to src/components/connectionStatusBar/index.tsx

@@ -1,58 +1,39 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {PureComponent} from 'react';
 import _ from 'lodash';
 import {StyleSheet, Text} from 'react-native';
 import {NetInfoPackage as NetInfo} from '../../optionalDependencies';
 import {Constants} from '../../helpers';
-import {PureBaseComponent} from '../../commons';
 import {Colors, Typography} from '../../style';
 import TouchableOpacity from '../touchableOpacity';
 import View from '../view';
+import {asBaseComponent} from '../../commons/new';
+import {ConnectionStatusBarProps, ConnectionStatusBarState, DEFAULT_PROPS} from './Types';
+export {ConnectionStatusBarProps};
 
 /**
  * @description: Top bar to show a "no internet" connection status. Note: Run on real device for best results
  * @image: https://user-images.githubusercontent.com/33805983/34683190-f3b1904c-f4a9-11e7-9d46-9a340bd35448.png, https://user-images.githubusercontent.com/33805983/34484206-edc6c6e4-efcb-11e7-88b2-cd394c19dd5e.png
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ConnectionStatusBarScreen.js
  * @notes: The component requires installing the '@react-native-community/netinfo' native library
  */
-export default class ConnectionStatusBar extends PureBaseComponent {
+class ConnectionStatusBar extends PureComponent<ConnectionStatusBarProps, ConnectionStatusBarState> {
   static displayName = 'ConnectionStatusBar';
-  static propTypes = {
-    /**
-     * Text to show as the status
-     */
-    label: PropTypes.string,
-    /**
-     * Handler to get connection change events propagation
-     */
-    onConnectionChange: PropTypes.func,
-    /**
-     * Text to show as the status
-     */
-    allowDismiss: PropTypes.bool,
-
-    /**
-     * Use absolute position for the component
-     */
-    useAbsolutePosition: PropTypes.bool
-  };
-
-  static defaultProps = {
-    label: 'No internet. Check your connection.',
-    allowDismiss: false,
-    useAbsolutePosition: true
-  };
-
-  static onConnectionLost;
-  static registerGlobalOnConnectionLost(callback) {
+
+  static defaultProps = DEFAULT_PROPS;
+
+  styles?: any;
+  unsubscribe?: any;
+  static onConnectionLost?: () => void;
+  
+  static registerGlobalOnConnectionLost(callback: () => void) {
     ConnectionStatusBar.onConnectionLost = callback;
   }
 
   static unregisterGlobalOnConnectionLost() {
     delete ConnectionStatusBar.onConnectionLost;
   }
 
-  constructor(props) {
+  constructor(props: ConnectionStatusBarProps) {
     super(props);
     this.onConnectionChange = this.onConnectionChange.bind(this);
 
@@ -82,7 +63,7 @@ export default class ConnectionStatusBar extends PureBaseComponent {
     }
   }
 
-  onConnectionChange(state) {
+  onConnectionChange(state: ConnectionStatusBarState) {
     const isConnected = this.isStateConnected(state);
     if (isConnected !== this.state.isConnected) {
       this.setState({
@@ -114,7 +95,7 @@ export default class ConnectionStatusBar extends PureBaseComponent {
     }
   }
 
-  isStateConnected(state) {
+  isStateConnected(state: ConnectionStatusBarState) {
     const lowerCaseState = _.lowerCase(state.type);
     const isConnected = lowerCaseState !== 'none';
     return isConnected;
@@ -174,8 +155,12 @@ function createStyles() {
       alignSelf: 'center'
     },
     x: {
-      fontSize: Typography.text80.fontSize,
+      fontSize: Typography.text80?.fontSize,
       color: Colors.black
     }
   });
 }
+
+export {ConnectionStatusBar}; // For tests
+
+export default asBaseComponent<ConnectionStatusBarProps, typeof ConnectionStatusBar>(ConnectionStatusBar);

typings/components/ConnectionStatusBar.d.ts

@@ -8,4 +8,6 @@ export interface ConnectionStatusBarProps {
   useAbsolutePosition?: boolean;
 }
 
-export class ConnectionStatusBar extends PureBaseComponent<ConnectionStatusBarProps> {}
+export class ConnectionStatusBar extends PureBaseComponent<ConnectionStatusBarProps> {
+  static registerGlobalOnConnectionLost: any;
+}