Typescript migration fixes - PanningViews and Modal (wix#929)

Author: M-i-k-e-l

generatedTypes/components/modal/index.d.ts

@@ -42,7 +42,7 @@ declare class Modal extends Component<ModalProps> {
     renderTouchableOverlay(): JSX.Element | undefined;
     render(): JSX.Element;
 }
-declare const _default: React.ComponentClass<typeof Modal & {
+declare const _default: React.ComponentClass<ModalProps & {
     useCustomTheme?: boolean | undefined;
-}, any>;
+}, any> & typeof Modal;
 export default _default;

generatedTypes/components/panningViews/panDismissibleView.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { PanningDirections, PanAmountsProps } from './panningProvider';
+import { PanningDirections, PanningProviderDirection, PanAmountsProps } from './panningProvider';
 export interface DismissibleAnimationPropTypes {
     /**
      * The return animation speed (default is 20)
      */
-    speed: number;
+    speed?: number;
     /**
      * The return animation bounciness (default is 6)
      */
-    bounciness: number;
+    bounciness?: number;
     /**
      * The dismiss animation duration (default is 280)
      */
-    duration: number;
+    duration?: number;
 }
 export interface PanDismissibleViewPropTypes {
     /**
@@ -24,7 +24,7 @@ export interface PanDismissibleViewPropTypes {
      * The directions of the allowed pan (default allows all directions)
      * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
      */
-    directions?: PanningDirections[];
+    directions?: PanningDirections[] | PanningProviderDirection[];
     /**
      * onDismiss callback
      */
@@ -35,7 +35,7 @@ export interface PanDismissibleViewPropTypes {
      * bounciness - the animation bounciness (default is 6)
      * duration - the dismiss animation duration (default is 280)
      */
-    animationOptions: DismissibleAnimationPropTypes;
+    animationOptions?: DismissibleAnimationPropTypes;
     /**
      * Override the default threshold (height/2 and width/2) with different values.
      */

generatedTypes/components/panningViews/panGestureView.d.ts

@@ -4,7 +4,7 @@ export declare enum GestureDirections {
     UP = "up",
     DOWN = "down"
 }
-export interface PanGestureViewPropTypes {
+export interface PanGestureViewProps {
     /**
      * Additional styling
      */
@@ -18,9 +18,7 @@ export interface PanGestureViewPropTypes {
      */
     direction?: GestureDirections;
 }
-declare const _default: React.ComponentClass<PanGestureViewPropTypes & {
-    useCustomTheme?: boolean | undefined; /**
-     * onDismiss callback
-     */
+declare const _default: React.ComponentClass<PanGestureViewProps & {
+    useCustomTheme?: boolean | undefined;
 }, any>;
 export default _default;

generatedTypes/components/panningViews/panListenerView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PanningDirections, PanDirectionsProps, PanAmountsProps } from './panningProvider';
+import { PanningDirections, PanDirectionsProps, PanAmountsProps, PanningProviderDirection } from './panningProvider';
 import { ViewPropTypes } from '../view';
 interface PanningPropTypes {
     /**
@@ -46,7 +46,7 @@ export interface PanListenerViewPropTypes extends PanningPropTypes, ViewPropType
      * The directions of the allowed pan (default allows all directions)
      * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
      */
-    directions?: PanningDirections[];
+    directions?: PanningDirections[] | PanningProviderDirection[];
     /**
      * The sensitivity beyond which a pan is no longer considered a single click (default is 5)
      */

generatedTypes/components/panningViews/panningProvider.d.ts

@@ -1,4 +1,8 @@
 import { Component } from 'react';
+/**
+ * @deprecated Please transition to PanningDirections
+ */
+export declare type PanningProviderDirection = 'up' | 'down' | 'left' | 'right';
 export declare enum PanningDirections {
     UP = "up",
     DOWN = "down",
@@ -10,8 +14,8 @@ export interface PanLocationProps {
     top?: number;
 }
 export interface PanDirectionsProps {
-    x?: PanningDirections;
-    y?: PanningDirections;
+    x?: PanningDirections | PanningProviderDirection;
+    y?: PanningDirections | PanningProviderDirection;
 }
 export interface PanAmountsProps {
     x?: number;

generatedTypes/index.d.ts

@@ -22,14 +22,16 @@ export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButt
 export {default as TabBar} from './components/TabBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal';
+export {default as PanGestureView, PanGestureViewProps} from './components/panningViews/panGestureView';
 export {default as PanningContext} from './components/panningViews/panningContext';
 export {default as asPanViewConsumer} from './components/panningViews/asPanViewConsumer';
 export {
   default as PanningProvider,
   PanningDirections,
   PanLocationProps,
   PanAmountsProps,
-  PanDirectionsProps
+  PanDirectionsProps,
+  PanningProviderDirection
 } from './components/panningViews/panningProvider';
 export {default as PanListenerView, PanListenerViewPropTypes} from './components/panningViews/panListenerView';
 export {default as PanResponderView, PanResponderViewPropTypes} from './components/panningViews/panResponderView';

src/components/modal/index.tsx

@@ -102,4 +102,4 @@ const styles = StyleSheet.create({
 
 Modal.TopBar = TopBar;
 
-export default asBaseComponent<typeof Modal>(Modal);
+export default asBaseComponent<ModalProps, typeof Modal>(Modal);

src/components/panningViews/panDismissibleView.tsx

@@ -3,21 +3,21 @@ import React, {PureComponent} from 'react';
 import {Animated, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import {Constants} from '../../helpers';
 import asPanViewConsumer from './asPanViewConsumer';
-import PanningProvider, {PanningDirections, PanAmountsProps, PanDirectionsProps} from './panningProvider';
+import PanningProvider, {PanningDirections, PanningProviderDirection, PanAmountsProps, PanDirectionsProps} from './panningProvider';
 
 export interface DismissibleAnimationPropTypes {
     /**
      * The return animation speed (default is 20)
      */
-    speed: number;
+    speed?: number;
     /**
      * The return animation bounciness (default is 6)
      */
-    bounciness: number;
+    bounciness?: number;
     /**
      * The dismiss animation duration (default is 280)
      */
-    duration: number;
+    duration?: number;
 }
 
 export interface PanDismissibleViewPropTypes {
@@ -29,7 +29,7 @@ export interface PanDismissibleViewPropTypes {
    * The directions of the allowed pan (default allows all directions)
    * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
    */
-  directions?: PanningDirections[];
+  directions?: PanningDirections[] | PanningProviderDirection[];
   /**
    * onDismiss callback
    */
@@ -40,7 +40,7 @@ export interface PanDismissibleViewPropTypes {
    * bounciness - the animation bounciness (default is 6)
    * duration - the dismiss animation duration (default is 280)
    */
-  animationOptions: DismissibleAnimationPropTypes;
+  animationOptions?: DismissibleAnimationPropTypes;
   /**
    * Override the default threshold (height/2 and width/2) with different values.
    */
@@ -224,7 +224,8 @@ class PanDismissibleView extends PureComponent<Props, State> {
   };
 
   resetPosition = () => {
-    const {speed, bounciness} = this.props.animationOptions;
+    const {animationOptions} = this.props;
+    const {speed, bounciness} = animationOptions || DEFAULT_ANIMATION_OPTIONS;
     const toX = -this.left;
     const toY = -this.top;
     const animations: Animated.CompositeAnimation[] = [];
@@ -333,7 +334,8 @@ class PanDismissibleView extends PureComponent<Props, State> {
   };
 
   _animateDismiss = (isRight?: boolean, isDown?: boolean) => {
-    const {duration} = this.props.animationOptions;
+    const {animationOptions} = this.props;
+    const {duration} = animationOptions || DEFAULT_ANIMATION_OPTIONS;
     const animations: Animated.CompositeAnimation[] = [];
     let toX;
     let toY;

src/components/panningViews/panGestureView.tsx

@@ -20,7 +20,7 @@ export enum GestureDirections {
   DOWN = 'down'
 }
 
-export interface PanGestureViewPropTypes {
+export interface PanGestureViewProps {
   /**
    * Additional styling
    */
@@ -46,10 +46,10 @@ interface State {
 /**
  * @description: PanGestureView component for drag and swipe gestures (supports only vertical gestures at the moment)
  */
-class PanGestureView extends Component<PanGestureViewPropTypes, State> {
+class PanGestureView extends Component<PanGestureViewProps, State> {
   static displayName = 'PanGestureView'
 
-  static defaultProps: Partial<PanGestureViewPropTypes> = {
+  static defaultProps: Partial<PanGestureViewProps> = {
     direction: GestureDirections.DOWN
   };
 
@@ -59,7 +59,7 @@ class PanGestureView extends Component<PanGestureViewPropTypes, State> {
   private swipe?: boolean;
   private layout?: LayoutRectangle;
 
-  constructor(props: PanGestureViewPropTypes) {
+  constructor(props: PanGestureViewProps) {
     super(props);
 
     this.state = {
@@ -199,4 +199,4 @@ class PanGestureView extends Component<PanGestureViewPropTypes, State> {
   }
 }
 
-export default asBaseComponent<PanGestureViewPropTypes>(PanGestureView);
+export default asBaseComponent<PanGestureViewProps>(PanGestureView);

src/components/panningViews/panListenerView.tsx

@@ -10,7 +10,8 @@ import asPanViewConsumer from './asPanViewConsumer';
 import PanningProvider, {
   PanningDirections,
   PanDirectionsProps,
-  PanAmountsProps
+  PanAmountsProps,
+  PanningProviderDirection
 } from './panningProvider';
 import View, {ViewPropTypes} from '../view';
 
@@ -54,7 +55,7 @@ export interface PanListenerViewPropTypes extends PanningPropTypes, ViewPropType
      * The directions of the allowed pan (default allows all directions)
      * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
      */
-    directions?: PanningDirections[];
+    directions?: PanningDirections[] | PanningProviderDirection[];
     /**
      * The sensitivity beyond which a pan is no longer considered a single click (default is 5)
      */

src/components/panningViews/panningProvider.tsx

@@ -1,6 +1,11 @@
 import React, {Component} from 'react';
 import PanningContext from './panningContext';
 
+/**
+ * @deprecated Please transition to PanningDirections
+ */
+export type PanningProviderDirection = 'up' | 'down' | 'left' | 'right';
+
 export enum PanningDirections {
   UP = 'up',
   DOWN = 'down',
@@ -14,8 +19,8 @@ export interface PanLocationProps {
 }
 
 export interface PanDirectionsProps {
-  x?: PanningDirections;
-  y?: PanningDirections;
+  x?: PanningDirections | PanningProviderDirection;
+  y?: PanningDirections | PanningProviderDirection;
 }
 
 export interface PanAmountsProps {

src/index.ts

@@ -23,14 +23,16 @@ export {default as RadioGroup, RadioGroupPropTypes} from './components/radioButt
 export {default as TabBar} from './components/TabBar';
 export {default as Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal';
+export {default as PanGestureView, PanGestureViewProps} from './components/panningViews/panGestureView';
 export {default as PanningContext} from './components/panningViews/panningContext';
 export {default as asPanViewConsumer} from './components/panningViews/asPanViewConsumer';
 export {
   default as PanningProvider,
   PanningDirections,
   PanLocationProps,
   PanAmountsProps,
-  PanDirectionsProps
+  PanDirectionsProps,
+  PanningProviderDirection
 } from './components/panningViews/panningProvider';
 export {default as PanListenerView, PanListenerViewPropTypes} from './components/panningViews/panListenerView';
 export {default as PanResponderView, PanResponderViewPropTypes} from './components/panningViews/panResponderView';