Dialog - add showClose (#3192)

* Dialog - add showClose

* Review fixes 1

* Review fixes 2

* Rename to useDialogContent

Author: M-i-k-e-l

src/assets/icons/index.js

@@ -17,6 +17,9 @@ export const icons = {
   get x() {
     return require('./x.png');
   },
+  get xMedium() {
+    return require('./xMedium.png');
+  },
   get xFlat() {
     return require('./xFlat.png');
   }

src/assets/icons/xMedium.png

@@ -29,6 +29,11 @@
       "description": "The direction from which and to which the dialog is animating \\ panning (default down).",
       "default": "down"
     },
+    {
+      "name": "showClose",
+      "type": "boolean",
+      "description": "Show the close button"
+    },
     {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press."},
     {"name": "modalProps", "type": "ModalProps", "description": "Pass props to the dialog modal"},
     {

src/assets/icons/[email protected]

@@ -24,6 +24,7 @@ import Modal from '../../components/modal';
 import {extractAlignmentsValues} from '../../commons/modifiers';
 import useHiddenLocation from '../hooks/useHiddenLocation';
 import DialogHeader from './DialogHeader';
+import useDialogContent from './useDialogContent';
 import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps} from './types';
 export {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps};
 
@@ -42,8 +43,10 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
   const {
     visible = false,
     headerProps,
-    containerStyle,
-    containerProps,
+    showCloseButton,
+    closeButtonProps,
+    containerStyle: propsContainerStyle,
+    containerProps: propsContainerProps,
     width,
     height,
     onDismiss,
@@ -124,6 +127,16 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const {DialogContent, containerProps, containerStyle} = useDialogContent({
+    showCloseButton,
+    close,
+    closeButtonProps,
+    containerStyle: propsContainerStyle,
+    containerProps: propsContainerProps,
+    headerProps,
+    children
+  });
+
   // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     if (isVertical) {
@@ -202,8 +215,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     <GestureDetector gesture={panGesture}>
       {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
-        {headerProps && <DialogHeader {...headerProps}/>}
-        {children}
+        <DialogContent/>
       </View>
     </GestureDetector>
   );

src/assets/icons/[email protected]

@@ -2,10 +2,11 @@ import {PropsWithChildren, ReactElement} from 'react';
 import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {AlignmentModifiers} from '../../commons/modifiers';
 import {DialogProps as DialogPropsOld} from '../../components/dialog';
+import {ButtonProps} from '../../components/button';
 import {ModalProps} from '../../components/modal';
-import {ViewProps} from '../../components/view';
-import {TextProps} from '../../components/text';
 import {PanningDirections, PanningDirectionsEnum} from '../panView';
+import {TextProps} from '../../components/text';
+import {ViewProps} from '../../components/view';
 type DialogDirections = PanningDirections;
 const DialogDirectionsEnum = PanningDirectionsEnum;
 export {DialogDirections, DialogDirectionsEnum};
@@ -69,11 +70,7 @@ export interface DialogHeaderProps extends ViewProps {
   onPress?: () => void;
 }
 
-export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSafeArea'> {
-  /**
-   * The visibility of the dialog.
-   */
-  visible?: boolean;
+export interface DialogCloseButtonProps {
   /**
    * The Dialog's header (title, subtitle etc)
    */
@@ -86,6 +83,21 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
    * Extra props for the container
    */
   containerProps?: Omit<ViewProps, 'reanimated' | 'animated' | 'style' | 'onLayout' | 'ref' | 'testID'>;
+  /**
+   * Whether to show the close button or not
+   */
+  showCloseButton?: boolean;
+  /**
+   * The close button props
+   */
+  closeButtonProps?: Pick<ButtonProps, 'label' | 'labelProps' | 'iconProps'>;
+}
+
+export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSafeArea'>, DialogCloseButtonProps {
+  /**
+   * The visibility of the dialog.
+   */
+  visible?: boolean;
   /**
    * The dialog width.
    */

src/assets/icons/[email protected]

@@ -0,0 +1,87 @@
+import React, {PropsWithChildren, useMemo} from 'react';
+import {BorderRadiuses, Colors} from '../../style';
+import {DialogCloseButtonProps} from './types';
+import {StyleSheet} from 'react-native';
+import Assets from '../../assets';
+import DialogHeader from './DialogHeader';
+import Icon from '../../components/icon';
+import Text from '../../components/text';
+import TouchableOpacity from '../../components/touchableOpacity';
+import View from '../../components/view';
+
+interface InternalDialogCloseButtonProps extends PropsWithChildren<DialogCloseButtonProps> {
+  close: () => void;
+}
+
+const useDialogContent = (props: InternalDialogCloseButtonProps) => {
+  const {
+    showCloseButton,
+    close,
+    closeButtonProps,
+    containerStyle: propsContainerStyle,
+    containerProps: propsContainerProps,
+    headerProps,
+    children
+  } = props;
+
+  const DialogCloseButton = useMemo(() => {
+    if (!showCloseButton) {
+      return null;
+    }
+
+    return (
+      <View left centerV pointerEvents={'box-none'}>
+        <TouchableOpacity paddingB-s2 row onPress={close}>
+          <Icon source={Assets.icons.xMedium} tintColor={Colors.white} {...closeButtonProps?.iconProps}/>
+          <Text recorderTag={'unmask'} text70BO white {...closeButtonProps?.labelProps}>
+            {closeButtonProps?.label || 'Close'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }, [showCloseButton, close, closeButtonProps]);
+
+  const containerProps = useMemo((): DialogCloseButtonProps['containerProps'] => {
+    return showCloseButton ? {...propsContainerProps, pointerEvents: 'box-none'} : propsContainerProps;
+  }, [showCloseButton, propsContainerProps]);
+
+  const containerStyle = useMemo(() => {
+    return showCloseButton ? [propsContainerStyle, styles.transparent] : propsContainerStyle;
+  }, [showCloseButton, propsContainerStyle]);
+
+  const DialogContent = () => {
+    const DialogContent = (
+      <>
+        {headerProps && <DialogHeader {...headerProps}/>}
+        {children}
+      </>
+    );
+
+    if (DialogCloseButton) {
+      return (
+        <>
+          {DialogCloseButton}
+          <View style={styles.dialogContentContainer}>{DialogContent}</View>
+        </>
+      );
+    } else {
+      return DialogContent;
+    }
+  };
+
+  return {DialogContent, containerStyle, containerProps};
+};
+
+export default useDialogContent;
+
+const styles = StyleSheet.create({
+  transparent: {
+    backgroundColor: Colors.transparent
+  },
+  dialogContentContainer: {
+    flexShrink: 1,
+    backgroundColor: Colors.$backgroundDefault,
+    overflow: 'hidden',
+    borderRadius: BorderRadiuses.br60
+  }
+});