react-native-ui-lib 7.44.0-snapshot.7233 → 7.44.0

package/src/components/dateTimePicker/index.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { BaseComponentInjectedProps } from '../../commons/new';
 import { TextFieldProps } from '../textField';
-import type { DialogProps } from '../dialog';
+import type { DialogMigrationProps } from '../../incubator/dialog';
 import { ButtonProps } from '../button';
 import { OldApiProps } from './useOldApi';
 export type DateTimePickerMode = 'date' | 'time';
-export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & {
+export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & DialogMigrationProps & {
     /**
      * The type of picker to display ('date' or 'time')
      */
@@ -15,10 +15,6 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      * The initial value to set the picker to. Defaults to device's date / time
      */
     value?: Date;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps;
     /**
      * The onChange callback
      */
@@ -96,6 +92,7 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      */
     cancelButtonProps?: ButtonProps;
 };
+type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -104,185 +101,7 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
  * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
-    /**
-     * The type of picker to display ('date' or 'time')
-     */
-    mode?: DateTimePickerMode | undefined;
-    /**
-     * The initial value to set the picker to. Defaults to device's date / time
-     */
-    value?: Date | undefined;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps | undefined;
-    /**
-     * The onChange callback
-     */
-    onChange?: ((date: Date) => void) | undefined;
-    /**
-     * Should this input be editable or disabled
-     */
-    editable?: boolean | undefined;
-    /**
-     * The minimum date or time value to use
-     */
-    minimumDate?: Date | undefined;
-    /**
-     * The maximum date or time value to use
-     */
-    maximumDate?: Date | undefined;
-    /**
-     * A callback function to format the time or date
-     * @param mode the type of the picker ('date' or 'time')
-     * @returns the formatted string to display
-     */
-    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
-    /**
-     * Allows changing of the locale of the component (iOS only)
-     */
-    locale?: string | undefined;
-    /**
-     * Allows changing of the time picker to a 24 hour format (Android only)
-     */
-    is24Hour?: boolean | undefined;
-    /**
-     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
-     */
-    minuteInterval?: number | undefined;
-    /**
-     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
-     */
-    timeZoneOffsetInMinutes?: number | undefined;
-    /**
-     * style to apply to the iOS dialog header
-     */
-    headerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Render custom input
-     */
-    renderInput?: ((props: Omit<DateTimePickerProps, 'value'> & {
-        value?: string;
-    }) => React.ReactElement) | undefined;
-    /**
-     * Override system theme variant (dark or light mode) used by the date picker.
-     */
-    themeVariant?: "light" | "dark" | undefined;
-    /**
-     * The component testID
-     */
-    testID?: string | undefined;
-    /**
-     * Allows changing the visual display of the picker
-     */
-    display?: string | undefined;
-    /**
-     * Text color of the wheel picker items
-     */
-    textColor?: string | undefined;
-    /**
-     * Background color of the wheel picker
-     */
-    backgroundColor?: string | undefined;
-    /**
-     * Confirm button props
-     */
-    confirmButtonProps?: ButtonProps | undefined;
-    /**
-     * Cancel button props
-     */
-    cancelButtonProps?: ButtonProps | undefined;
-} & BaseComponentInjectedProps & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerPropsInternal & React.RefAttributes<any>>;
 export { DateTimePicker };
-declare const _default: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
-    /**
-     * The type of picker to display ('date' or 'time')
-     */
-    mode?: DateTimePickerMode | undefined;
-    /**
-     * The initial value to set the picker to. Defaults to device's date / time
-     */
-    value?: Date | undefined;
-    /**
-     *  The props to pass to the dialog expandable container
-     */
-    dialogProps?: DialogProps | undefined;
-    /**
-     * The onChange callback
-     */
-    onChange?: ((date: Date) => void) | undefined;
-    /**
-     * Should this input be editable or disabled
-     */
-    editable?: boolean | undefined;
-    /**
-     * The minimum date or time value to use
-     */
-    minimumDate?: Date | undefined;
-    /**
-     * The maximum date or time value to use
-     */
-    maximumDate?: Date | undefined;
-    /**
-     * A callback function to format the time or date
-     * @param mode the type of the picker ('date' or 'time')
-     * @returns the formatted string to display
-     */
-    dateTimeFormatter?: ((value: Date, mode: DateTimePickerMode) => string) | undefined;
-    /**
-     * Allows changing of the locale of the component (iOS only)
-     */
-    locale?: string | undefined;
-    /**
-     * Allows changing of the time picker to a 24 hour format (Android only)
-     */
-    is24Hour?: boolean | undefined;
-    /**
-     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
-     */
-    minuteInterval?: number | undefined;
-    /**
-     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
-     */
-    timeZoneOffsetInMinutes?: number | undefined;
-    /**
-     * style to apply to the iOS dialog header
-     */
-    headerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Render custom input
-     */
-    renderInput?: ((props: Omit<DateTimePickerProps, "value"> & {
-        value?: string | undefined;
-    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
-    /**
-     * Override system theme variant (dark or light mode) used by the date picker.
-     */
-    themeVariant?: "light" | "dark" | undefined;
-    /**
-     * The component testID
-     */
-    testID?: string | undefined;
-    /**
-     * Allows changing the visual display of the picker
-     */
-    display?: string | undefined;
-    /**
-     * Text color of the wheel picker items
-     */
-    textColor?: string | undefined;
-    /**
-     * Background color of the wheel picker
-     */
-    backgroundColor?: string | undefined;
-    /**
-     * Confirm button props
-     */
-    confirmButtonProps?: ButtonProps | undefined;
-    /**
-     * Cancel button props
-     */
-    cancelButtonProps?: ButtonProps | undefined;
-} & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<any>>;
 export default _default;

package/src/components/dateTimePicker/index.js

@@ -42,6 +42,7 @@ const DateTimePicker = forwardRef((props, ref) => {
     themeVariant = Colors.getScheme(),
     onChange,
     dialogProps,
+    migrateDialog,
     textColor = Colors.$textDefault,
     backgroundColor = Colors.$backgroundDefault,
     headerStyle,
@@ -164,7 +165,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   return <>
       <ExpandableOverlay
     // @ts-expect-error
-    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} disabled={editable === false}
+    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} migrateDialog={migrateDialog} disabled={editable === false}
     // NOTE: Android picker comes with its own overlay built-in therefor we're not using ExpandableOverlay for it
     renderCustomOverlay={Constants.isAndroid ? renderAndroidDateTimePicker : undefined} testID={`${testID}.overlay`}>
         {renderInput ? renderInput({

package/src/components/dialog/DialogDismissibleView.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { PanningDirections } from '../panningViews/panningProvider';
+interface DialogDismissibleProps {
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The direction of the allowed pan (default is DOWN)
+     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###)
+     */
+    direction?: PanningDirections;
+    /**
+     * onDismiss callback
+     */
+    onDismiss?: () => void;
+    /**
+     * The dialog`s container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether to show the dialog or not
+     */
+    visible?: boolean;
+}
+interface Props extends DialogDismissibleProps {
+    children?: React.ReactNode | React.ReactNode[];
+}
+declare const DialogDismissibleView: {
+    (props: Props): React.JSX.Element;
+    displayName: string;
+};
+export default DialogDismissibleView;

package/src/components/dialog/DialogDismissibleView.js

@@ -0,0 +1,184 @@
+import _isUndefined from "lodash/isUndefined";
+import React, { useEffect, useRef, useCallback, useContext } from 'react';
+import { Animated, Easing, StyleSheet } from 'react-native';
+import { Constants } from "../../commons/new";
+import View from "../view";
+import PanningContext from "../panningViews/panningContext";
+import PanningProvider from "../panningViews/panningProvider";
+import PanResponderView from "../panningViews/panResponderView";
+const MAXIMUM_DRAGS_AFTER_SWIPE = 2;
+
+// TODO: move this to panningContext
+
+const DEFAULT_DIRECTION = PanningProvider.Directions.DOWN;
+const DialogDismissibleView = props => {
+  const {
+    direction = DEFAULT_DIRECTION,
+    visible: propsVisible,
+    containerStyle,
+    style,
+    children,
+    onDismiss = () => {}
+  } = props;
+  // @ts-expect-error
+  const {
+    isPanning,
+    dragDeltas,
+    swipeDirections
+  } = useContext(PanningContext);
+  const width = useRef(Constants.screenWidth);
+  const height = useRef(Constants.screenHeight);
+  const TOP_INSET = useRef(Constants.isIphoneX ? Constants.getSafeAreaInsets().top : Constants.isIOS ? 20 : 0);
+  const BOTTOM_INSET = useRef(Constants.isIphoneX ? Constants.getSafeAreaInsets().bottom : Constants.isIOS ? 20 : 0);
+  const thresholdX = useRef(0);
+  const thresholdY = useRef(0);
+  const dragsCounter = useRef(0);
+  const containerRef = useRef();
+  const animatedValue = useRef(new Animated.Value(0));
+  const mutableSwipeDirections = useRef({});
+  const prevDragDeltas = useRef();
+  const prevSwipeDirections = useRef();
+  const visible = useRef(Boolean(propsVisible));
+  const getHiddenLocation = useCallback((left, top) => {
+    const result = {
+      left: 0,
+      top: 0
+    };
+    switch (direction) {
+      case PanningProvider.Directions.LEFT:
+        result.left = -left - width.current;
+        break;
+      case PanningProvider.Directions.RIGHT:
+        result.left = Constants.screenWidth - left;
+        break;
+      case PanningProvider.Directions.UP:
+        result.top = -top - height.current - TOP_INSET.current;
+        break;
+      case PanningProvider.Directions.DOWN:
+      default:
+        result.top = Constants.screenHeight - top + BOTTOM_INSET.current;
+        break;
+    }
+    return result;
+  }, [direction]);
+  const hiddenLocation = useRef(getHiddenLocation(0, 0));
+  const animateTo = useCallback((toValue, animationEndCallback) => {
+    Animated.timing(animatedValue.current, {
+      toValue,
+      duration: 300,
+      easing: Easing.bezier(0.2, 0, 0.35, 1),
+      useNativeDriver: true
+    }).start(animationEndCallback);
+  }, []);
+  const isSwiping = useCallback(() => {
+    return !_isUndefined(mutableSwipeDirections.current.x) || !_isUndefined(mutableSwipeDirections.current.y);
+  }, []);
+  const resetSwipe = useCallback(() => {
+    dragsCounter.current = 0;
+    mutableSwipeDirections.current = {};
+  }, []);
+  const onDrag = useCallback(() => {
+    if (isSwiping()) {
+      if (dragsCounter.current < MAXIMUM_DRAGS_AFTER_SWIPE) {
+        dragsCounter.current += 1;
+      } else {
+        resetSwipe();
+      }
+    }
+  }, [isSwiping, resetSwipe]);
+  const hide = useCallback(() => {
+    // TODO: test we're not animating?
+    animateTo(0, () => {
+      visible.current = false;
+      onDismiss?.();
+    });
+  }, [animateTo, onDismiss]);
+  useEffect(() => {
+    if (isPanning && (dragDeltas.x || dragDeltas.y) && (dragDeltas.x !== prevDragDeltas.current?.x || dragDeltas.y !== prevDragDeltas.current?.y)) {
+      onDrag();
+      prevDragDeltas.current = dragDeltas;
+    }
+  }, [isPanning, dragDeltas, onDrag, hide]);
+  useEffect(() => {
+    if (isPanning && (swipeDirections.x || swipeDirections.y) && (swipeDirections.x !== prevSwipeDirections.current?.x || swipeDirections.y !== prevSwipeDirections.current?.y)) {
+      mutableSwipeDirections.current = swipeDirections;
+    }
+  }, [isPanning, swipeDirections, hide]);
+  useEffect(() => {
+    if (visible.current && !propsVisible) {
+      hide();
+    }
+  }, [propsVisible, hide]);
+  const onLayout = useCallback(event => {
+    // DO NOT move the width\height into the measureInWindow - it causes errors with orientation change
+    const layout = event.nativeEvent.layout;
+    width.current = layout.width;
+    height.current = layout.height;
+    thresholdX.current = width.current / 2;
+    thresholdY.current = height.current / 2;
+    if (containerRef.current) {
+      // @ts-ignore TODO: can we fix this on ViewProps \ View?
+      containerRef.current.measureInWindow((x, y) => {
+        hiddenLocation.current = getHiddenLocation(x, y);
+        animateTo(1);
+      });
+    }
+  }, [getHiddenLocation, animateTo]);
+  const getAnimationStyle = useCallback(() => {
+    return {
+      transform: [{
+        translateX: animatedValue.current.interpolate({
+          inputRange: [0, 1],
+          outputRange: [hiddenLocation.current.left, 0]
+        })
+      }, {
+        translateY: animatedValue.current.interpolate({
+          inputRange: [0, 1],
+          outputRange: [hiddenLocation.current.top, 0]
+        })
+      }]
+    };
+  }, []);
+  const resetToShown = useCallback((left, top, direction) => {
+    const toValue =
+    //@ts-expect-error
+    [PanningProvider.Directions.LEFT, PanningProvider.Directions.RIGHT].includes(direction) ? 1 + left / hiddenLocation.current.left : 1 + top / hiddenLocation.current.top;
+    animateTo(toValue);
+  }, [animateTo]);
+  const onPanLocationChanged = useCallback(({
+    left = 0,
+    top = 0
+  }) => {
+    const endValue = {
+      x: Math.round(left),
+      y: Math.round(top)
+    };
+    if (isSwiping()) {
+      hide();
+    } else {
+      resetSwipe();
+      if (direction === PanningProvider.Directions.LEFT && endValue.x <= -thresholdX.current || direction === PanningProvider.Directions.RIGHT && endValue.x >= thresholdX.current || direction === PanningProvider.Directions.UP && endValue.y <= -thresholdY.current || direction === PanningProvider.Directions.DOWN && endValue.y >= thresholdY.current) {
+        hide();
+      } else {
+        resetToShown(left, top, direction);
+      }
+    }
+  }, [isSwiping, hide, resetSwipe, direction, resetToShown]);
+  return (
+    // @ts-ignore
+    <View ref={containerRef} style={containerStyle} onLayout={onLayout}>
+      <PanResponderView
+      // !visible.current && styles.hidden is done to fix a bug is iOS
+      style={[style, getAnimationStyle(), !visible.current && styles.hidden]} isAnimated onPanLocationChanged={onPanLocationChanged}>
+        {children}
+      </PanResponderView>
+    </View>
+  );
+};
+DialogDismissibleView.displayName = 'IGNORE';
+export default DialogDismissibleView;
+const styles = StyleSheet.create({
+  hidden: {
+    opacity: 0
+  }
+});

package/src/components/dialog/OverlayFadingBackground.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Props {
+    testID?: string;
+    dialogVisibility?: boolean;
+    modalVisibility?: boolean;
+    overlayBackgroundColor?: string;
+    onFadeDone?: () => void;
+    fadeOut?: boolean;
+}
+declare const OverlayFadingBackground: {
+    ({ testID, dialogVisibility, modalVisibility, overlayBackgroundColor, onFadeDone: propsOnFadeDone, fadeOut }: Props): React.JSX.Element;
+    displayName: string;
+};
+export default OverlayFadingBackground;

package/src/components/dialog/OverlayFadingBackground.js

@@ -0,0 +1,45 @@
+import React, { useRef, useEffect, useCallback, useMemo } from 'react';
+import View from "../view";
+import { Animated } from 'react-native';
+const OverlayFadingBackground = ({
+  testID,
+  dialogVisibility,
+  modalVisibility,
+  overlayBackgroundColor,
+  onFadeDone: propsOnFadeDone,
+  fadeOut
+}) => {
+  const fadeAnimation = useRef(new Animated.Value(0)).current;
+  const isAnimating = useRef(false);
+  const onFadeDone = useCallback(() => {
+    isAnimating.current = false;
+    propsOnFadeDone?.();
+  }, [propsOnFadeDone]);
+  const animateFading = useCallback(toValue => {
+    isAnimating.current = true;
+    Animated.timing(fadeAnimation, {
+      toValue,
+      duration: 400,
+      useNativeDriver: true
+    }).start(onFadeDone);
+  }, [fadeAnimation, onFadeDone]);
+  useEffect(() => {
+    if (!isAnimating.current && (!dialogVisibility || fadeOut)) {
+      animateFading(0);
+    }
+  }, [dialogVisibility, animateFading, fadeOut]);
+  useEffect(() => {
+    if (modalVisibility) {
+      animateFading(1);
+    }
+  }, [modalVisibility, animateFading]);
+  const style = useMemo(() => {
+    return {
+      opacity: fadeAnimation,
+      backgroundColor: overlayBackgroundColor
+    };
+  }, [overlayBackgroundColor, fadeAnimation]);
+  return <View testID={testID} absF animated style={style} pointerEvents="none" />;
+};
+OverlayFadingBackground.displayName = 'IGNORE';
+export default OverlayFadingBackground;

package/src/components/dialog/dialog.api.json

@@ -2,53 +2,59 @@
   "name": "Dialog",
   "category": "overlays",
   "description": "Component for displaying custom content inside a popup dialog",
-  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center).  \nWhen adding a `FlatList` \\ `ScrollView` to the content be sure to use one from `react-native-gesture-handler` (see [this link](https://github.com/software-mansion/react-native-gesture-handler/issues/1380) for `SectionList`).",
+  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)",
   "modifiers": ["alignment"],
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.tsx",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js",
+  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true"],
   "props": [
-    {"name": "visible", "type": "boolean", "description": "The visibility of the dialog"},
-    {"name": "headerProps", "type": "DialogHeaderProps", "description": "The Dialog's header (title, subtitle etc)"},
+    {"name": "visible", "type": "boolean", "description": "Control visibility of the component"},
+    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press"},
     {
-      "name": "containerStyle",
-      "type": "ViewStyle",
-      "description": "The Dialog`s container style (it is set to {position: 'absolute'})"
+      "name": "overlayBackgroundColor",
+      "type": "string",
+      "description": "The color of the overlay background",
+      "default": "Colors.rgba(Colors.grey10, 0.6)"
     },
+    {"name": "width", "type": "string | number", "description": "Width", "default": "90%"},
+    {"name": "height", "type": "string | number", "description": "Height", "default": "undefined"},
     {
-      "name": "containerProps",
-      "type": "ViewProps",
-      "description": "Extra props for the container"
+      "name": "panDirection",
+      "type": "UP | DOWN | LEFT | RIGHT",
+      "description": "The direction of the allowed pan",
+      "default": "PanningProvider.Directions.DOWN"
     },
+    {"name": "onDismiss", "type": "(props?: any) => void", "description": "Called when clicking on the background"},
     {
-      "name": "onDismiss",
-      "type": "(props?: DialogProps) => void",
-      "description": "Callback that is called after the dialog's dismiss (after the animation has ended)."
+      "name": "onDialogDismissed",
+      "type": "(props: any) => void",
+      "description": "Called once the dialog has been dismissed completely"
     },
     {
-      "name": "direction",
-      "type": "up | down | left | right",
-      "description": "The direction from which and to which the dialog is animating \\ panning (default down).",
-      "default": "down"
+      "name": "renderPannableHeader",
+      "type": "(props: any) => JSX.Element",
+      "description": "For scrollable content (the children of the dialog)",
+      "note": "If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'"
     },
     {
-      "name": "showClose",
-      "type": "boolean",
-      "description": "Show the close button"
+      "name": "pannableHeaderProps",
+      "type": "any",
+      "description": "The props that will be passed to the pannable header"
     },
-    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press."},
-    {"name": "modalProps", "type": "ModalProps", "description": "Pass props to the dialog modal"},
     {
-      "name": "testID",
-      "type": "string",
-      "description": "Used to locate this view in end-to-end tests.  \nThe container has the original id.  \nSupported inner elements IDs:  \n`${TestID}.modal` - the Modal's id.  \n`${TestID}.overlayFadingBackground` - the fading background id."
-    }
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "In iOS, use safe area, in case component attached to the bottom"
+    },
+    {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
   ],
   "snippet": [
-    "<Dialog",
-    "  visible={isVisible$1}",
-    "  onDismiss={() => console.log('dismissed')$2}",
-    "  direction={Dialog.directions.DOWN$3}",
+    "<Dialog", 
+    " visible={isVisible$1}",
+    " onDismiss={() => console.log('dismissed')$2}",
+    " panDirection={PanningProvider.Directions.DOWN$3}",
     ">",
-    "  <Text text60>Content</Text>$4",
+    " <Text text60>Content</Text>$4",
     "</Dialog>"
   ]
 }