react-native-ui-lib 7.46.2-snapshot.7314 → 7.46.2-snapshot.7316

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>"
   ]
 }

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

@@ -1,15 +1,107 @@
-import React from 'react';
-import DialogHeader from './DialogHeader';
-import { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps } from './types';
-export { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps };
-export interface DialogStatics {
-    directions: typeof DialogDirectionsEnum;
-    Header: typeof DialogHeader;
-}
-export interface DialogImperativeMethods {
-    dismiss: () => void;
-}
-declare const _default: React.ForwardRefExoticComponent<import("./types")._DialogProps & {
+import React, { Component } from 'react';
+import { StyleProp, ViewStyle, ModalPropsIOS, AccessibilityProps, type DimensionValue } from 'react-native';
+import { AlignmentModifiers } from '../../commons/modifiers';
+import { ModalProps } from '../modal';
+import { PanningDirections, PanningDirectionsEnum } from '../panningViews/panningProvider';
+export { PanningDirections as DialogDirections, PanningDirectionsEnum as DialogDirectionsEnum };
+interface RNPartialProps extends Pick<ModalPropsIOS, 'supportedOrientations'>, Pick<AccessibilityProps, 'accessibilityLabel'> {
+}
+export interface DialogProps extends AlignmentModifiers, RNPartialProps {
+    /**
+     * Control visibility of the dialog
+     */
+    visible?: boolean;
+    /**
+     * Dismiss callback for when clicking on the background
+     */
+    onDismiss?: (props?: any) => void;
+    /**
+     * Whether or not to ignore background press
+     */
+    ignoreBackgroundPress?: boolean;
+    /**
+     * The color of the overlay background
+     */
+    overlayBackgroundColor?: string;
+    /**
+     * The dialog width (default: 90%)
+     */
+    width?: DimensionValue;
+    /**
+     * The dialog height (default: undefined)
+     */
+    height?: DimensionValue;
+    /**
+     * The direction of the allowed pan (default is DOWN).
+     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###).
+     * Pass null to remove pan.
+     */
+    panDirection?: PanningDirections;
+    /**
+     * Whether or not to handle SafeArea
+     */
+    useSafeArea?: boolean;
+    /**
+     * Called once the dialog has been dismissed completely
+     */
+    onDialogDismissed?: (props: any) => void;
+    /**
+     * If this is added only the header will be pannable;
+     * this allows for scrollable content (the children of the dialog)
+     * props are transferred to the renderPannableHeader
+     */
+    renderPannableHeader?: (props: any) => JSX.Element;
+    /**
+     * The props that will be passed to the pannable header
+     */
+    pannableHeaderProps?: any;
+    /**
+     * Additional props for the modal.
+     */
+    modalProps?: ModalProps;
+    /**
+     * The Dialog`s container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
     children?: React.ReactNode;
-} & React.RefAttributes<any>> & DialogStatics;
+}
+interface DialogState {
+    alignments: AlignmentModifiers;
+    modalVisibility?: boolean;
+    dialogVisibility?: boolean;
+    fadeOut?: boolean;
+}
+/**
+ * @description: Dialog component for displaying custom content inside a popup dialog
+ * @notes: 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.js
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true
+ */
+declare class Dialog extends Component<DialogProps, DialogState> {
+    static displayName: string;
+    static directions: typeof PanningDirectionsEnum;
+    static defaultProps: {
+        overlayBackgroundColor: string | undefined;
+    };
+    private styles;
+    constructor(props: DialogProps);
+    UNSAFE_componentWillReceiveProps(nextProps: DialogProps): void;
+    setAlignment(): void;
+    onFadeDone: () => void;
+    _onDismiss: () => void;
+    onDismiss: () => void;
+    hideDialogView: () => void;
+    renderPannableHeader: (directions: PanningDirections[]) => React.JSX.Element | undefined;
+    getContainerType: () => React.ForwardRefExoticComponent<import("../view").ViewProps & React.RefAttributes<import("react-native").View>> | React.ComponentClass<import("../panningViews/panListenerView").PanListenerViewProps, any>;
+    renderDialogView: () => React.JSX.Element;
+    renderDialogContainer: () => React.JSX.Element;
+    render: () => React.JSX.Element;
+}
+declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<any>> & typeof Dialog;
 export default _default;