Typescript/loader screen (#1458)

* index.js -> index.tsx

* migrate loader-screen to typescript

* LoadingScreen (demo screen) to tsx

* added missing exports

* removed manual typings + added to generatedTypes

Author: mendyEdri

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

@@ -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 LoaderScreen, LoaderScreenProps} from './components/loaderScreen';
 
 /* All components with manual typings */
 export {
@@ -101,7 +102,6 @@ export {
   UIComponent,
   forwardRef,
   AvatarHelper,
-  LoaderScreen,
   StateScreen,
   WheelPicker,
   WheelPickerProps,

generatedTypes/index.d.ts

@@ -1,51 +1,15 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, {Component} from 'react';
 import {StyleSheet, ActivityIndicator} from 'react-native';
 import {Colors, Typography} from '../../style';
 import {Constants} from '../../helpers';
-import {BaseComponent} from '../../commons';
+import {asBaseComponent} from '../../commons/new';
 import View from '../../components/view';
 import Text from '../../components/text';
+import {LoaderScreenProps} from './types';
 
-/**
- * @description: Component that shows a full screen with an activity indicator
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/LoadingScreen.js
- * 
- */
-export default class LoaderScreen extends BaseComponent {
+class LoaderScreen extends Component<LoaderScreenProps> {
   static displayName = 'LoaderScreen';
 
-  static propTypes = {
-    ...ActivityIndicator.propTypes,
-    /**
-     * Color of the loading indicator
-     */
-    loaderColor: PropTypes.string,
-    /**
-     * Custom loader
-     */
-    customLoader: PropTypes.element,
-    /**
-     * Color of the loader background (only when passing 'overlay')
-     */
-    backgroundColor: PropTypes.string,
-    /**
-     * loader message
-     */
-    message: PropTypes.string,
-    /**
-     * message style
-     */
-    messageStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-    /**
-     * Show the screen as an absolute overlay
-     */
-    overlay: PropTypes.bool
-    /**
-     * Custom container style
-     */
-  };
-
   render() {
     const {
       message,
@@ -76,6 +40,9 @@ export default class LoaderScreen extends BaseComponent {
   }
 }
 
+export {LoaderScreenProps};
+export default asBaseComponent<LoaderScreenProps>(LoaderScreen);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1

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

@@ -0,0 +1,47 @@
+import {PureComponent} from 'react';
+import {ActivityIndicatorProps, TextStyle, ViewStyle} from 'react-native';
+
+export type LoaderScreenProps = ActivityIndicatorProps & {
+    /**
+     * Color of the loading indicator
+     */
+    loaderColor?: string;
+    /**
+     * Custom loader
+     */
+    customLoader?: React.ReactChild;
+    /**
+     * Color of the loader background (only when passing 'overlay')
+     */
+    backgroundColor?: string;
+    /**
+     * loader message
+     */
+    message?: string;
+    /**
+     * message style
+     */
+    messageStyle?: TextStyle,
+    /**
+     * Show the screen as an absolute overlay
+     */
+    overlay?: boolean;
+     /**
+     * Custom container style
+     */
+    containerStyle?: ViewStyle;
+};
+
+
+/**
+ * @description: Component that shows a full screen with an activity indicator
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/LoadingScreen.tsx
+ */
+// @ts-ignore
+class FakeLoaderScreenForDocs extends PureComponent<LoaderScreenProps> { // eslint-disable-line
+  static displayName = 'LoaderScreen';
+
+  render() {
+    return null;
+  }
+}

src/components/loaderScreen/types.tsx

@@ -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 LoaderScreen, LoaderScreenProps} from './components/loaderScreen';
 
 //================ Manual typings (all those exports should be removed one day) ==========
 export {
@@ -86,5 +87,5 @@ export {
   PickerProps, ProgressBar, Stepper,
   TagsInput, SharedTransition, Toast, WheelPickerDialog, Assets,
   BaseComponent, PureBaseComponent, UIComponent, forwardRef,
-  LoaderScreen, StateScreen, WheelPicker, WheelPickerProps
+  StateScreen, WheelPicker, WheelPickerProps
 } from '../typings';