Fix/drawer types source (#1069)

* Removing Drawer manual typings

* Adding 'customValue' prop to pass with props on callbacks; adding props' type declaration

* fix for generated types

* exporting DrawerItemProps; removing manual typings from index

Author: Inbal-Tish

generatedTypes/components/drawer/Swipeable.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { Animated } from 'react-native';
-export declare type PropType = {
+declare type Props = {
     children: any;
     friction: number;
     leftThreshold?: number;
@@ -42,7 +42,8 @@ declare type StateType = {
     rightOffset: number | typeof undefined;
     rowWidth: number | typeof undefined;
 };
-export default class Swipeable extends Component<PropType, StateType> {
+export declare type SwipeableProps = Props;
+export default class Swipeable extends Component<Props, StateType> {
     static displayName: string;
     static defaultProps: {
         friction: number;
@@ -51,7 +52,7 @@ export default class Swipeable extends Component<PropType, StateType> {
         fullLeftThreshold: number;
         fullRightThreshold: number;
     };
-    constructor(props: PropType);
+    constructor(props: Props);
     _handleDrag: (e: any) => void;
     getTransX: () => Animated.AnimatedInterpolation;
     getShowLeftAction: () => Animated.Value | Animated.AnimatedInterpolation;

generatedTypes/components/drawer/index.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent, RefObject } from 'react';
 import { Animated, ViewStyle, TextStyle } from 'react-native';
-import Swipeable, { PropType as SwipeableProps } from './Swipeable';
+import Swipeable, { SwipeableProps } from './Swipeable';
 interface ItemProps {
     width?: number;
     background?: string;
@@ -11,7 +11,7 @@ interface ItemProps {
     style?: ViewStyle;
     testID?: string;
 }
-interface DrawerProps {
+interface Props {
     /**
      * The drawer animation bounciness
      */
@@ -92,14 +92,27 @@ interface DrawerProps {
      * Style
      */
     style?: ViewStyle;
+    /**
+     * Callback for open action
+     */
+    onSwipeableWillOpen?: Function;
+    /**
+     * Callback for close action
+     */
+    onSwipeableWillClose?: Function;
+    /**
+     * Custom value of any type to pass on to the component and receive back in the action callbacks
+     */
+    customValue?: any;
 }
+export declare type DrawerProps = Props;
 /**
  * @description: Drawer Component
  * @important: If your app works with RNN, your screen must be wrapped
  * with gestureHandlerRootHOC from 'react-native-gesture-handler'. see
  * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
  */
-declare class Drawer extends PureComponent<DrawerProps> {
+declare class Drawer extends PureComponent<Props> {
     static displayName: string;
     static defaultProps: {
         itemsTintColor: string;
@@ -137,7 +150,7 @@ declare class Drawer extends PureComponent<DrawerProps> {
     private renderAction;
     render(): JSX.Element;
 }
-declare const _default: React.ComponentClass<DrawerProps & {
+declare const _default: React.ComponentClass<Props & {
     useCustomTheme?: boolean | undefined;
 }, any> & typeof Drawer;
 export default _default;

generatedTypes/index.d.ts

@@ -35,6 +35,7 @@ export {default as TouchableOpacity, TouchableOpacityProps} from './components/t
 export {default as Button, ButtonPropTypes, ButtonProps} from './components/button';
 export {default as Checkbox, CheckboxPropTypes, CheckboxProps} from './components/checkbox';
 export {default as Chip, ChipPropTypes, ChipProps} from './components/chip';
+export {default as Drawer, DrawerProps, DrawerItemProps} from './components/drawer';
 export {default as FloatingButton, FloatingButtonProps} from './components/floatingButton';
 export {default as Image, ImageProps} from './components/image';
 export {default as Overlay, OverlayTypes} from './components/overlay';
@@ -67,7 +68,6 @@ export {default as Carousel, CarouselProps} from './components/carousel';
 export {
   ActionSheet,
   ConnectionStatusBar,
-  Drawer,
   FeatureHighlight,
   Hint,
   BaseInput,

src/components/drawer/Swipeable.tsx

@@ -23,7 +23,7 @@ if (!Math.sign) {
   };
 }
 
-export type PropType = {
+type Props = {
   children: any,
   friction: number,
   leftThreshold?: number,
@@ -58,6 +58,7 @@ export type PropType = {
   containerStyle?: Object,
   childrenContainerStyle?: Object
 };
+
 type StateType = {
   dragX: Animated.Value,
   rowTranslation: Animated.Value,
@@ -66,7 +67,9 @@ type StateType = {
   rowWidth: number | typeof undefined
 };
 
-export default class Swipeable extends Component<PropType, StateType> {
+export type SwipeableProps = Props;
+
+export default class Swipeable extends Component<Props, StateType> {
   static displayName = 'IGNORE';
   static defaultProps = {
     friction: 1,
@@ -83,7 +86,7 @@ export default class Swipeable extends Component<PropType, StateType> {
   // _showRightAction: ?Animated.Interpolation | ?Animated.Value;
   // _rightActionTranslate: ?Animated.Interpolation;
 
-  constructor(props: PropType) {
+  constructor(props: Props) {
     super(props);
 
     const dragX = new Animated.Value(0);

src/components/drawer/index.tsx

@@ -8,7 +8,8 @@ import {extractAccessibilityProps} from '../../commons/modifiers';
 import {Constants} from '../../helpers';
 import {Colors} from '../../style';
 import View from '../view';
-import Swipeable, {PropType as SwipeableProps} from './Swipeable';
+import Swipeable, {SwipeableProps} from './Swipeable';
+
 
 const DEFAULT_BG = Colors.blue30;
 const DEFAULT_BOUNCINESS = 0;
@@ -24,7 +25,7 @@ interface ItemProps {
   testID?: string;
 }
 
-interface DrawerProps {
+interface Props {
   /**
    * The drawer animation bounciness
    */
@@ -105,15 +106,30 @@ interface DrawerProps {
    * Style
    */
   style?: ViewStyle;
+  /**
+   * Callback for open action
+   */
+  onSwipeableWillOpen?: Function;
+  /**
+   * Callback for close action
+   */
+  onSwipeableWillClose?: Function;
+  /**
+   * Custom value of any type to pass on to the component and receive back in the action callbacks
+   */
+  customValue?: any;
 }
 
+export type DrawerProps = Props;
+export type DrawerItemProps = ItemProps;
+
 /**
  * @description: Drawer Component
  * @important: If your app works with RNN, your screen must be wrapped
  * with gestureHandlerRootHOC from 'react-native-gesture-handler'. see
  * @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
  */
-class Drawer extends PureComponent<DrawerProps> {
+class Drawer extends PureComponent<Props> {
   static displayName = 'Drawer';
 
   static defaultProps = {
@@ -204,7 +220,7 @@ class Drawer extends PureComponent<DrawerProps> {
 
   private animateItem({rowWidth, leftWidth, dragX, released, resetItemPosition}: any) {
     const toValue = resetItemPosition ? 0 : dragX ? dragX - leftWidth : rowWidth * 0.6 - leftWidth;
-    
+
     Animated.timing(this.leftActionX, {
       toValue,
       easing: Easing.bezier(0.25, 1, 0.5, 1),

src/index.ts

@@ -60,10 +60,10 @@ export {default as Carousel, CarouselProps} from './components/carousel';
 
 //================ Manual typings (all those exports should be removed one day) ==========
 export {
-  ActionSheet, ConnectionStatusBar, ChipsInput, Drawer,
-  FeatureHighlight, Hint, BaseInput, TextArea, TextField, MaskedInput, ListItem,
-  Picker, PickerProps, ProgressBar, Slider,
-  GradientSlider, ColorSliderGroup, Stepper, TagsInput, SharedTransition, StackAggregator, Toast,
-  WheelPickerDialog, Assets, BaseComponent, PureBaseComponent, UIComponent, forwardRef, AvatarHelper,
+  ActionSheet, ConnectionStatusBar, ChipsInput,
+  FeatureHighlight, Hint, BaseInput, TextArea, TextField, MaskedInput, ListItem, Picker,
+  PickerProps, ProgressBar, Slider, GradientSlider, ColorSliderGroup, Stepper,
+  TagsInput, SharedTransition, StackAggregator, Toast, WheelPickerDialog, Assets,
+  BaseComponent, PureBaseComponent, UIComponent, forwardRef, AvatarHelper,
   LogService, LoaderScreen, StateScreen, WheelPicker, WheelPickerProps, ColorPicker
 } from '../typings';

typings/index.d.ts

@@ -4,7 +4,6 @@ export * from './commons';
 export * from './components';
 export * from './helpers';
 export * from './incubator';
-export * from './interactableComponents';
 export * from './nativeComponents';
 export * from './services';
 export * from './generatedTypes';