Feat/modal migrate to typescript (#920)

* Rename modal/TopBar from .js to .tsx

* Some work on Modal.TopBar typescript

* Rename modal/index from .js to .tsx

* Modal to typescript

* Rename ModalScreen from .js to .tsx

* Fix typings exports and move screen to ts

* Ignore weird TS issue

* ModalPropTypes --> ModalProps  +  ModalTopBarPropTypes -> ModalTopBarProps

* Use typeof Modal

Co-authored-by: Ethan Sharabi <[email protected]>

Author: M-i-k-e-l

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

@@ -3,8 +3,15 @@ import {Alert, StyleSheet} from 'react-native';
 import {Navigation} from 'react-native-navigation';
 import {Colors, Carousel, PageControl, Modal, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
 
+interface ModalScreenPropTypes {
+  componentId: string;
+}
+
+interface State {
+  currentPage?: number;
+}
 
-export default class ModalScreen extends Component {
+export default class ModalScreen extends Component<ModalScreenPropTypes, State> {
 
   static options() {
     return {
@@ -15,7 +22,7 @@ export default class ModalScreen extends Component {
     };
   }
 
-  constructor(props) {
+  constructor(props: ModalScreenPropTypes) {
     super(props);
 
     this.state = {
@@ -40,11 +47,11 @@ export default class ModalScreen extends Component {
         <Carousel onChangePage={currentPage => this.setState({currentPage})} containerStyle={{flex: 1}}>
           <View bg-green50 flex style={styles.page}>
             <Modal.TopBar
-              title='modal title'
+              title="modal title"
               onCancel={() => this.closeScreen()}
               onDone={() => Alert.alert('done')}
               doneButtonProps={{
-                disabled: true,
+                disabled: true
               }}
             />
             <View padding-20>
@@ -59,11 +66,11 @@ export default class ModalScreen extends Component {
 
           <View bg-violet80 flex style={styles.page}>
             <Modal.TopBar
-              title='another example'
+              title="another example"
               onCancel={() => Alert.alert('cancel')}
               onDone={() => Alert.alert('done')}
               cancelIcon={null}
-              cancelLabel='back'
+              cancelLabel="back"
             />
             <View padding-20>
               <Text text70>
@@ -75,11 +82,11 @@ export default class ModalScreen extends Component {
 
           <View bg-orange70 flex style={styles.page}>
             <Modal.TopBar
-              title='last one'
+              title="last one"
               onCancel={() => Alert.alert('cancel')}
               onDone={() => Alert.alert('done')}
               cancelIcon={null}
-              cancelLabel='back'
+              cancelLabel="back"
             />
             <View padding-20>
               <Text text70>
@@ -90,7 +97,7 @@ export default class ModalScreen extends Component {
 
           <View bg-dark70 flex style={styles.page}>
             <Modal.TopBar
-              title='Custom Style'
+              title="Custom Style"
               onCancel={() => Alert.alert('cancel')}
               onDone={() => Alert.alert('done')}
               doneButtonProps={{color: Colors.orange30}}

generatedTypes/components/button/index.d.ts

@@ -86,7 +86,7 @@ export declare type ButtonPropTypes = TouchableOpacityProps & TypographyModifier
     /**
      * Additional styles for label text
      */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Props that will be passed to the button's Text label.
      */
@@ -420,7 +420,7 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
     /**
      * Additional styles for label text
      */
-    labelStyle?: TextStyle | undefined;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Props that will be passed to the button's Text label.
      */
@@ -577,7 +577,7 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
     /**
      * Additional styles for label text
      */
-    labelStyle?: TextStyle | undefined;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Props that will be passed to the button's Text label.
      */
@@ -734,7 +734,7 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
     /**
      * Additional styles for label text
      */
-    labelStyle?: TextStyle | undefined;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Props that will be passed to the button's Text label.
      */
@@ -891,7 +891,7 @@ declare const _default: React.ComponentClass<(Pick<import("react-native").Toucha
     /**
      * Additional styles for label text
      */
-    labelStyle?: TextStyle | undefined;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Props that will be passed to the button's Text label.
      */

generatedTypes/components/modal/TopBar.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleProp, TextStyle, ImageSourcePropType } from 'react-native';
+import { ButtonPropTypes } from '../../components/button';
+export interface ModalTopBarProps {
+    /**
+       * title to display in the center of the top bar
+       */
+    title?: string;
+    /**
+     * title custom style
+     */
+    titleStyle?: StyleProp<TextStyle>;
+    /**
+     * done action props (Button props)
+     */
+    doneButtonProps?: Omit<ButtonPropTypes, 'onPress'>;
+    /**
+     * done action label
+     */
+    doneLabel?: string;
+    /**
+     * done action icon
+     */
+    doneIcon?: ImageSourcePropType;
+    /**
+     * done action callback
+     */
+    onDone?: (props: any) => void;
+    /**
+     * cancel action props (Button props)
+     */
+    cancelButtonProps?: Omit<ButtonPropTypes, 'onPress'>;
+    /**
+     * cancel action label
+     */
+    cancelLabel?: string;
+    /**
+     * cancel action icon
+     */
+    cancelIcon?: ImageSourcePropType;
+    /**
+     * cancel action callback
+     */
+    onCancel?: (props: any) => void;
+    /**
+     * whether to include status bar or not (height claculations)
+     */
+    includeStatusBar?: boolean;
+}
+declare const _default: React.ComponentClass<ModalTopBarProps & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/components/modal/index.d.ts

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { ModalProps as RNModalProps, GestureResponderEvent } from 'react-native';
+import TopBar, { ModalTopBarProps } from './TopBar';
+export { ModalTopBarProps };
+export interface ModalProps extends RNModalProps {
+    /**
+     * Blurs the modal background when transparent (iOS only)
+     */
+    enableModalBlur?: boolean;
+    /**
+     * A custom view to use as a BlueView instead of the default one
+     */
+    blurView?: JSX.Element;
+    /**
+     * allow dismissing a modal when clicking on its background
+     */
+    onBackgroundPress?: (event: GestureResponderEvent) => void;
+    /**
+     * the background color of the overlay
+     */
+    overlayBackgroundColor?: string;
+    /**
+     * The modal's end-to-end test identifier
+     */
+    testID?: string;
+    /**
+     * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+     * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+     */
+    accessibilityLabel?: string;
+}
+/**
+ * @description: Component that present content on top of the invoking screen
+ * @extends: Modal
+ * @extendslink: https://facebook.github.io/react-native/docs/modal.html
+ * @gif: https://media.giphy.com/media/3oFzmfSX8KgvctI4Ks/giphy.gif
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.js
+ */
+declare class Modal extends Component<ModalProps> {
+    static displayName: string;
+    static TopBar: typeof TopBar;
+    renderTouchableOverlay(): JSX.Element | undefined;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentClass<typeof Modal & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;

generatedTypes/index.d.ts

@@ -21,6 +21,7 @@ export {default as RadioButton, RadioButtonPropTypes} from './components/radioBu
 export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButton/RadioGroup';
 export {default as TabBar} from './components/TabBar';
 export {default as Fader, FaderProps} from './components/fader';
+export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal';
 
 /* All components with manual typings */
 export {
@@ -64,7 +65,6 @@ export {
   Constants,
   LogService,
   LoaderScreen,
-  Modal,
   StateScreen,
   WheelPicker,
   WheelPickerProps,

src/components/button/index.tsx

@@ -109,7 +109,7 @@ export type ButtonPropTypes = TouchableOpacityProps &
     /**
      * Additional styles for label text
      */
-    labelStyle?: TextStyle;
+    labelStyle?: StyleProp<TextStyle>;
     /**
      * Props that will be passed to the button's Text label.
      */