Migrate panning views to typescript (#923)

* Rename panningContext from .js to .ts

* Rename asPanViewConsumer from .js to .tsx

* Migrate asPanViewConsumer to typescript

* Rename PanningProvider from .js to .tsx

* Migrate PanningProvider to typescript

* Rename panListenerView from .js to .tsx

* Migrate PanListenerView to typescript  +  fixes

* PanListenerView - allow undefined values

* PanListenerView - allow undefined values (2)

* Fix some TS errors

* Remove onLayout - seems like it's not used

* Rename PanListenerScreen from .js to .tsx

* Migrate PanListenerScreen to typescript  +  renaming  +  exporting properly

* Rename PanResponderView from .js to .tsx

* Migrate PanResponderView to typescript

* Rename PanResponderScreen from .js to .tsx

* Migrate PanResponderScreen to typescript  +  some fixes

* Rename PanDismissibleView from .js to .tsx

* Migrate PanDismissibleView to typescript  +  some fixes

* Remove comments

* Rename PanDismissibleScreen from .js to .tsx

* Migrate PanDismissibleScreen to typescript  +  some fixes

* Fix some imports

* Rename PanGestureView from .js to .tsx

* Migrate PanGestureView to typescript

* Fix TS errors

* Change from using ? to = (more like a default prop)

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

Author: M-i-k-e-l

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

@@ -1,18 +1,18 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {View, Text, PanListenerView, PanningProvider} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, PanListenerView, PanningProvider, PanDirectionsProps, PanAmountsProps} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class PanListenerScreen extends Component {
   state = {
     locationText: '',
-    endType: '',
+    endType: ''
   };
 
-  onDrag = ({directions, deltas}) => {
+  onDrag = ({directions, deltas}: ({directions: PanDirectionsProps, deltas: PanAmountsProps})) => {
     this.setState({locationText: `Dragged: ${directions.x}, ${directions.y}`});
   };
 
-  onSwipe = ({directions, velocities}) => {
+  onSwipe = ({directions, velocities}: ({directions: PanDirectionsProps, velocities: PanAmountsProps})) => {
     this.setState({locationText: `Swiped: ${directions.x}, ${directions.y}`});
   };
 

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

@@ -9,28 +9,28 @@ import {
   Typography,
   PanListenerView,
   PanningProvider,
-  PanResponderView,
-} from 'react-native-ui-lib'; //eslint-disable-line
+  PanResponderView
+} from 'react-native-ui-lib';
 
 const PAN_LISTENER_VIEW_HEIGHT = 100;
 
 export default class PanResponderScreen extends Component {
   state = {
     location: {left: 50, top: 50},
-    isCoupled: false,
+    isCoupled: false
   };
 
   switchExample = () => {
     const {isCoupled, location} = this.state;
     if (isCoupled) {
       this.setState({
         isCoupled: false,
-        location: {left: location.left, top: location.top - PAN_LISTENER_VIEW_HEIGHT},
+        location: {left: location.left, top: location.top - PAN_LISTENER_VIEW_HEIGHT}
       });
     } else {
       this.setState({
         isCoupled: true,
-        location: {left: location.left, top: location.top + PAN_LISTENER_VIEW_HEIGHT},
+        location: {left: location.left, top: location.top + PAN_LISTENER_VIEW_HEIGHT}
       });
     }
   };
@@ -71,29 +71,29 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     height: 50,
-    alignItems: 'center',
+    alignItems: 'center'
   },
   panResponder: {
     width: 250,
     height: 250,
-    backgroundColor: Colors.blue30,
+    backgroundColor: Colors.blue30
   },
   panListener: {
     width: '100%',
     height: PAN_LISTENER_VIEW_HEIGHT,
     backgroundColor: Colors.blue60,
-    justifyContent: 'center',
+    justifyContent: 'center'
   },
   largeText: {
     ...Typography.text50,
-    marginLeft: 40,
+    marginLeft: 40
   },
   smallText: {
     ...Typography.text70,
-    marginLeft: 20,
+    marginLeft: 20
   },
   switch: {
     marginLeft: 20,
-    alignSelf: 'center',
-  },
+    alignSelf: 'center'
+  }
 });

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function asPanViewConsumer<PROPS>(WrappedComponent: React.ComponentType<any>): React.ComponentClass<PROPS>;
+export default asPanViewConsumer;

generatedTypes/components/panningViews/asPanViewConsumer.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { PanningDirections, PanAmountsProps } from './panningProvider';
+export interface DismissibleAnimationPropTypes {
+    /**
+     * The return animation speed (default is 20)
+     */
+    speed: number;
+    /**
+     * The return animation bounciness (default is 6)
+     */
+    bounciness: number;
+    /**
+     * The dismiss animation duration (default is 280)
+     */
+    duration: number;
+}
+export interface PanDismissibleViewPropTypes {
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The directions of the allowed pan (default allows all directions)
+     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
+     */
+    directions?: PanningDirections[];
+    /**
+     * onDismiss callback
+     */
+    onDismiss?: () => void;
+    /**
+     * Some animation options to choose from, defaults are set for:
+     * speed - the animation speed (default is 20)
+     * bounciness - the animation bounciness (default is 6)
+     * duration - the dismiss animation duration (default is 280)
+     */
+    animationOptions: DismissibleAnimationPropTypes;
+    /**
+     * Override the default threshold (height/2 and width/2) with different values.
+     */
+    threshold?: PanAmountsProps;
+    /**
+     * Allow diagonal dismiss, this is false by default,
+     * since it looks better and most cases.
+     */
+    allowDiagonalDismiss?: boolean;
+}
+declare const _default: React.ComponentClass<PanDismissibleViewPropTypes, any>;
+export default _default;

generatedTypes/components/panningViews/panDismissibleView.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export declare enum GestureDirections {
+    UP = "up",
+    DOWN = "down"
+}
+export interface PanGestureViewPropTypes {
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * onDismiss callback
+     */
+    onDismiss?: () => void;
+    /**
+     * The direction of the allowed pan (default is down)
+     */
+    direction?: GestureDirections;
+}
+declare const _default: React.ComponentClass<PanGestureViewPropTypes & {
+    useCustomTheme?: boolean | undefined; /**
+     * onDismiss callback
+     */
+}, any>;
+export default _default;

generatedTypes/components/panningViews/panGestureView.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { PanningDirections, PanDirectionsProps, PanAmountsProps } from './panningProvider';
+import { ViewPropTypes } from '../view';
+interface PanningPropTypes {
+    /**
+     * This is were you will get notified when a drag occurs
+     * onDrag = ({directions, deltas}) => {...}
+     * directions - array of directions
+     * deltas - array of deltas (same length and order as directions)
+     * Both arrays will have {x, y} - if no x or y drag has occurred this value will be undefined
+     */
+    onDrag?: ({ directions, deltas }: ({
+        directions: PanDirectionsProps;
+        deltas: PanAmountsProps;
+    })) => void;
+    /**
+     * This is were you will get notified when a swipe occurs
+     * onSwipe = ({directions, velocities}) => {...}
+     * directions - array of directions
+     * velocities - array of velocities (same length and order as directions)
+     * Both arrays will have {x, y} - if no x or y swipe has occurred this value will be undefined
+     */
+    onSwipe?: ({ directions, velocities }: ({
+        directions: PanDirectionsProps;
+        velocities: PanAmountsProps;
+    })) => void;
+    /**
+     * This is were you will get notified when the pan starts
+     */
+    onPanStart?: () => void;
+    /**
+     * This is were you will get notified when the pan ends
+     * The user has released all touches while this view is the responder.
+     * This typically means a gesture has succeeded
+     */
+    onPanRelease?: () => void;
+    /**
+     * This is were you will get notified when the pan ends
+     * Another component has become the responder,
+     * so this gesture should be cancelled
+     */
+    onPanTerminated?: () => void;
+}
+export interface PanListenerViewPropTypes extends PanningPropTypes, ViewPropTypes {
+    /**
+     * The directions of the allowed pan (default allows all directions)
+     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
+     */
+    directions?: PanningDirections[];
+    /**
+     * The sensitivity beyond which a pan is no longer considered a single click (default is 5)
+     */
+    panSensitivity?: number;
+    /**
+     * The sensitivity beyond which a pan is no longer considered a drag, but a swipe (default is 1.8)
+     * Note: a pan would have to occur (i.e. the panSensitivity has already been surpassed)
+     */
+    swipeVelocitySensitivity?: number;
+    /**
+     * Is there a view that is clickable (has onPress etc.) in the PanListenerView.
+     * This can affect the panability of this component.
+     */
+    isClickable?: boolean;
+}
+declare const _default: React.ComponentClass<PanListenerViewPropTypes, any>;
+export default _default;

generatedTypes/components/panningViews/panListenerView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ViewPropTypes } from '../view';
+import { PanLocationProps } from './panningProvider';
+export interface PanResponderViewPropTypes extends ViewPropTypes {
+    /**
+     * Will be called with the current location ({left, top}) when the pan has ended
+     */
+    onPanLocationChanged?: (location: PanLocationProps) => void;
+    /**
+     * Ignore panning events while this is true
+     */
+    ignorePanning?: boolean;
+    /**
+     * Allow the view to be animated (send animation via style; default is false)
+     */
+    isAnimated?: boolean;
+}
+declare const _default: React.ComponentClass<PanResponderViewPropTypes, any>;
+export default _default;

generatedTypes/components/panningViews/panResponderView.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PanningContext: React.Context<{}>;
+export default PanningContext;

generatedTypes/components/panningViews/panningContext.d.ts

@@ -0,0 +1,71 @@
+import { Component } from 'react';
+export declare enum PanningDirections {
+    UP = "up",
+    DOWN = "down",
+    LEFT = "left",
+    RIGHT = "right"
+}
+export interface PanLocationProps {
+    left?: number;
+    top?: number;
+}
+export interface PanDirectionsProps {
+    x?: PanningDirections;
+    y?: PanningDirections;
+}
+export interface PanAmountsProps {
+    x?: number;
+    y?: number;
+}
+interface State {
+    isPanning: boolean;
+    wasTerminated: boolean;
+    dragDirections: PanDirectionsProps;
+    dragDeltas: PanAmountsProps;
+    swipeDirections: PanDirectionsProps;
+    swipeVelocities: PanAmountsProps;
+    panLocation: PanLocationProps;
+}
+/**
+ * @description: Wraps the panResponderView and panListenerView to provide a shared context
+ */
+export default class PanningProvider extends Component<{}, State> {
+    static displayName: string;
+    static Directions: typeof PanningDirections;
+    constructor(props: {});
+    getProviderContextValue: () => {
+        onPanStart: () => void;
+        onPanRelease: () => void;
+        onPanTerminated: () => void;
+        isPanning: boolean;
+        wasTerminated: boolean;
+        onDrag: ({ directions, deltas }: {
+            directions: PanDirectionsProps;
+            deltas: PanAmountsProps;
+        }) => void;
+        dragDirections: PanDirectionsProps;
+        dragDeltas: PanAmountsProps;
+        onSwipe: ({ directions, velocities }: {
+            directions: PanDirectionsProps;
+            velocities: PanAmountsProps;
+        }) => void;
+        swipeDirections: PanDirectionsProps;
+        swipeVelocities: PanAmountsProps;
+        onPanLocationChanged: (location: PanLocationProps) => void;
+        panLocation: PanLocationProps;
+    };
+    onPanStart: () => void;
+    onPanRelease: () => void;
+    onPanTerminated: () => void;
+    onDrag: ({ directions, deltas }: {
+        directions: PanDirectionsProps;
+        deltas: PanAmountsProps;
+    }) => void;
+    onSwipe: ({ directions, velocities }: {
+        directions: PanDirectionsProps;
+        velocities: PanAmountsProps;
+    }) => void;
+    onPanLocationChanged: (location: PanLocationProps) => void;
+    render(): JSX.Element;
+}
+export {};

generatedTypes/components/panningViews/panningProvider.d.ts

@@ -20,8 +20,20 @@ export {default as Overlay, OverlayTypes} from './components/overlay';
 export {default as RadioButton, RadioButtonPropTypes} from './components/radioButton/RadioButton';
 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 Fader, FaderProps, FaderPosition} from './components/fader';
 export {default as Modal, ModalProps, ModalTopBarProps} from './components/modal';
+export {default as PanningContext} from './components/panningViews/panningContext';
+export {default as asPanViewConsumer} from './components/panningViews/asPanViewConsumer';
+export {
+  default as PanningProvider,
+  PanningDirections,
+  PanLocationProps,
+  PanAmountsProps,
+  PanDirectionsProps
+} from './components/panningViews/panningProvider';
+export {default as PanListenerView, PanListenerViewPropTypes} from './components/panningViews/panListenerView';
+export {default as PanResponderView, PanResponderViewPropTypes} from './components/panningViews/panResponderView';
+export {default as PanDismissibleView, PanDismissibleViewPropTypes, DismissibleAnimationPropTypes} from './components/panningViews/panDismissibleView';
 
 /* All components with manual typings */
 export {
@@ -41,11 +53,6 @@ export {
   MaskedInput,
   ListItem,
   PageControl,
-  PanningProvider,
-  PanGestureView,
-  PanListenerView,
-  PanDismissibleView,
-  PanResponderView,
   ProgressBar,
   Slider,
   GradientSlider,

generatedTypes/index.d.ts

@@ -1,9 +1,11 @@
-import React, {Component} from 'react';
+import React, {Component, Ref} from 'react';
 import PanningContext from './panningContext';
 
-function asPanViewConsumer(WrappedComponent) {
-  class PanViewConsumer extends Component {
-    saveRef = r => {
+function asPanViewConsumer<PROPS>(WrappedComponent: React.ComponentType<any>): React.ComponentClass<PROPS> {
+  class PanViewConsumer extends Component<PROPS> {
+    contentRef: any;
+
+    saveRef = (r: Ref<React.Component<any>>) => {
       this.contentRef = r;
     };
 
@@ -16,7 +18,7 @@ function asPanViewConsumer(WrappedComponent) {
     }
   }
 
-  return PanViewConsumer;
+  return PanViewConsumer as any;
 }
 
 export default asPanViewConsumer;