react-native-ui-lib 7.45.0-snapshot.7266 → 7.46.0

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;