Typescript/state screen (#1455)

* index.js -> index.tsx

* migrate StateScreen to typecript

* added fake type for docs

* EmptyStateScreen.js -> EmptyStateScreen.tsx

* EmptyStateScreen migration to ts

* Support nested text

* optional style support

* Fix styles

* declerations

* fix export

* types should be tsx and not ts (for docs)

* PR comments

* export also in generatedTypes + remove manual typings

* Uses different image that's working

Author: mendyEdri

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

@@ -1,19 +1,20 @@
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView, View} from 'react-native';
-import {StateScreen, Constants, PageControl} from 'react-native-ui-lib';//eslint-disable-line
-const localImageSource = require('../../assets/images/empty-state.jpg'); // eslint-disable-line
-const remoteImageSource = {uri: 'https://static.pexels.com/photos/169651/pexels-photo-169651.jpeg'};
+import {StateScreen, Constants, PageControl} from 'react-native-ui-lib';
+const localImageSource = require('../../assets/images/empty-state.jpg');
+const remoteImageSource = {uri: 'https://cdn.pixabay.com/photo/2017/04/19/20/10/morning-2243465_1280.jpg'};
 
-export default class EmptyStateScreen extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {currentPage: 0};
-  }
+type State = {
+  currentPage: number;
+};
+
+export default class EmptyStateScreen extends Component<{}, State> {
+  state = {currentPage: 0};
 
-  setCurrentPage(offsetX) {
+  setCurrentPage(offsetX: number) {
     if (offsetX >= 0) {
       this.setState({
-        currentPage: Math.floor(offsetX / Constants.screenWidth),
+        currentPage: Math.floor(offsetX / Constants.screenWidth)
       });
     }
   }
@@ -26,24 +27,24 @@ export default class EmptyStateScreen extends Component {
           horizontal
           showsHorizontalScrollIndicator={false}
           pagingEnabled
-          onScroll={(event) => {
+          onScroll={event => {
             this.setCurrentPage(event.nativeEvent.contentOffset.x);
           }}
           scrollEventThrottle={200}
         >
           <View style={styles.pageView}>
             <StateScreen
-              title='Oppsie (with local image)'
-              subtitle='Nothing to see here..'
-              ctaLabel='OK'
+              title={'Oppsie (with local image)'}
+              subtitle={'Nothing to see here..'}
+              ctaLabel={'OK'}
               imageSource={localImageSource}
             />
           </View>
           <View style={styles.pageView}>
             <StateScreen
-              title='Oppsie (with remote image)'
-              subtitle='Nothing to see here..'
-              ctaLabel='OK'
+              title={'Oppsie (with remote image)'}
+              subtitle={'Nothing to see here..'}
+              ctaLabel={'OK'}
               imageSource={remoteImageSource}
             />
           </View>
@@ -53,7 +54,7 @@ export default class EmptyStateScreen extends Component {
             position: 'absolute',
             bottom: 10,
             left: 0,
-            width: Constants.screenWidth,
+            width: Constants.screenWidth
           }}
           numOfPages={2}
           currentPage={this.state.currentPage}
@@ -66,10 +67,10 @@ export default class EmptyStateScreen extends Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'column',
+    flexDirection: 'column'
   },
   pageView: {
     width: Constants.screenWidth,
-    height: Constants.screenHeight,
-  },
+    height: Constants.screenHeight
+  }
 });

generatedTypes/components/stateScreen/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StateScreenProps } from './types';
+export { StateScreenProps };
+declare const _default: React.ComponentClass<StateScreenProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/stateScreen/types.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ImageURISource } from 'react-native';
+export declare type StateScreenProps = {
+    /**
+     * The image source that's showing at the top. use an image that was required locally
+     */
+    imageSource?: ImageURISource;
+    source?: ImageURISource;
+    /**
+     * To to show as the title
+     */
+    title: string;
+    /**
+     * Text to to show as the subtitle
+     */
+    subtitle?: string | React.ReactNode;
+    /**
+     * Text to to show in the "call to action" button
+     */
+    ctaLabel?: string;
+    /**
+     * Action handler for "call to action" button
+     */
+    onCtaPress?: () => void;
+    /**
+     * Use to identify the container in tests
+     */
+    testId?: string;
+    testID?: string;
+};

generatedTypes/index.d.ts

@@ -80,6 +80,7 @@ export {default as PageControl, PageControlProps} from './components/pageControl
 export {default as Carousel, CarouselProps, PageControlPosition} from './components/carousel';
 export {default as ActionSheet} from './components/actionSheet';
 export {default as Wizard, WizardProps, WizardStepProps, WizardStepStates, WizardStepConfig, WizardStepsConfig} from './components/wizard';
+export {default as StateScreen, StateScreenProps} from './components/stateScreen';
 export {default as LoaderScreen, LoaderScreenProps} from './components/loaderScreen';
 
 /* All components with manual typings */
@@ -102,7 +103,6 @@ export {
   UIComponent,
   forwardRef,
   AvatarHelper,
-  StateScreen,
   WheelPicker,
   WheelPickerProps,
   Picker,

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

@@ -1,61 +1,32 @@
 import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
 import {LogService} from '../../services';
 import {Constants} from '../../helpers';
 import {Typography, Colors} from '../../style';
-import {BaseComponent} from '../../commons';
+import {asBaseComponent} from '../../commons/new';
 import View from '../../components/view';
 import Image from '../../components/image';
 import Button from '../../components/button';
 import Text from '../../components/text';
+import {StateScreenProps} from './types';
 
-/**
- * @description: Component that shows a full screen for a certain state, like an empty state
- * @image: https://user-images.githubusercontent.com/33805983/34672894-f262ab84-f488-11e7-83f0-4ee0f0ac34ba.png
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/EmptyStateScreen.js
- */
-export default class StateScreen extends BaseComponent {
+class StateScreen extends Component<StateScreenProps> {
   static displayName = 'StateScreen';
-  static propTypes = {
-    /**
-     * The image source that's showing at the top. use an image that was required locally
-     */
-    imageSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
-    source: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), // TODO: remove after deprecation
-    /**
-     * To to show as the title
-     */
-    title: PropTypes.string.isRequired,
-    /**
-     * Text to to show as the subtitle
-     */
-    subtitle: PropTypes.any,
-    /**
-     * Text to to show in the "call to action" button
-     */
-    ctaLabel: PropTypes.string,
-    /**
-     * Action handler for "call to action" button
-     */
-    onCtaPress: PropTypes.func,
-    /**
-     * Use to identify the container in tests
-     */
-    testId: PropTypes.string
-  };
 
-  constructor(props) {
+  styles: any;
+  constructor(props: StateScreenProps) {
     super(props);
-
+    
     if (props.testId) {
       LogService.deprecationWarn({component: 'StateScreen', oldProp: 'testId', newProp: 'testID'});
 
     }
     if (props.source) {
       LogService.deprecationWarn({component: 'StateScreen', oldProp: 'source', newProp: 'imageSource'});
     }
+
+    this.generateStyles();
   }
 
   generateStyles() {
@@ -88,7 +59,10 @@ export default class StateScreen extends BaseComponent {
   }
 }
 
-function createStyles(isRemoteImage) {
+export {StateScreenProps};
+export default asBaseComponent<StateScreenProps>(StateScreen);
+
+function createStyles(isRemoteImage: boolean) {
   const imageStyle = _.merge({height: 200}, isRemoteImage && {width: Constants.screenWidth * 0.9});
   return StyleSheet.create({
     container: {

src/components/stateScreen/types.tsx

@@ -0,0 +1,45 @@
+import {PureComponent} from 'react';
+import {ImageURISource} from 'react-native';
+
+export type StateScreenProps = {
+  /**
+   * The image source that's showing at the top. use an image that was required locally
+   */
+  imageSource?: ImageURISource;
+  source?: ImageURISource; // TODO: remove after deprecation
+  /**
+   * To to show as the title
+   */
+  title: string;
+  /**
+   * Text to to show as the subtitle
+   */
+  subtitle?: string | React.ReactNode;
+  /**
+   * Text to to show in the "call to action" button
+   */
+  ctaLabel?: string;
+  /**
+   * Action handler for "call to action" button
+   */
+  onCtaPress?: () => void;
+  /**
+   * Use to identify the container in tests
+   */
+  testId?: string;
+  testID?: string;
+};
+
+/**
+ * @description: Component that shows a full screen for a certain state, like an empty state
+ * @image: https://user-images.githubusercontent.com/33805983/34672894-f262ab84-f488-11e7-83f0-4ee0f0ac34ba.png
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/EmptyStateScreen.tsx
+ */
+// @ts-ignore
+class FakeStateScreenForDocs extends PureComponent<StateScreenProps> { // eslint-disable-line
+  static displayName = 'StateScreen';
+
+  render() {
+    return null;
+  }
+}

src/index.ts

@@ -78,6 +78,7 @@ export {default as Slider, SliderProps} from './components/slider';
 export {default as GradientSlider, GradientSliderProps} from './components/slider/GradientSlider';
 export {default as ColorSliderGroup, ColorSliderGroupProps} from './components/slider/ColorSliderGroup';
 export {default as LogService} from './services/LogService';
+export {default as StateScreen, StateScreenProps} from './components/stateScreen';
 export {default as LoaderScreen, LoaderScreenProps} from './components/loaderScreen';
 
 //================ Manual typings (all those exports should be removed one day) ==========
@@ -87,5 +88,5 @@ export {
   PickerProps, ProgressBar, Stepper,
   TagsInput, SharedTransition, Toast, WheelPickerDialog, Assets,
   BaseComponent, PureBaseComponent, UIComponent, forwardRef,
-  StateScreen, WheelPicker, WheelPickerProps
+  WheelPicker, WheelPickerProps
 } from '../typings';