@eslam-elmeniawy/react-native-common-components/lib/module/components/Dialog/Dialog.js

Common `ReactNative` components packed in library for usage in projects.

"use strict";

// External imports.
import * as React from 'react';
import { Pressable, BackHandler, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { withTheme } from 'react-native-paper';

// Types imports.

// Internal imports.
import styles from "./Dialog.styles.js";
import { Portal } from "../wrappers/index.js";

/**
 * DialogComponent (unwrapped, for testing)
 * @internal For testing purposes only. Do not use in production code.
 */
import { jsx as _jsx } from "react/jsx-runtime";
const DialogComponent = /*#__PURE__*/React.memo(props => {
  const {
    visible,
    position,
    onDismiss,
    dismissable,
    style,
    overlayColor,
    children,
    theme
  } = props;
  const _onBackPress = React.useCallback(() => {
    if (visible) {
      const isDialogDismissable = dismissable ?? true;
      if (isDialogDismissable && onDismiss) {
        onDismiss();
      }
      return true;
    } else {
      return false;
    }
  }, [dismissable, onDismiss, visible]);
  React.useEffect(() => {
    const backHandlerSubscription = BackHandler.addEventListener('hardwareBackPress', _onBackPress);
    return () => {
      backHandlerSubscription?.remove();
    };
  }, [_onBackPress]);
  if (visible) {
    const edges = ['right', 'left'];
    let justifyContent;
    switch (position) {
      case 'top':
        edges.push('bottom');
        justifyContent = 'flex-start';
        break;
      case 'bottom':
        edges.push('top');
        justifyContent = 'flex-end';
        break;
      default:
        edges.push('top', 'bottom');
        justifyContent = 'center';
        break;
    }
    const isDialogDismissable = dismissable ?? true;
    const overlayStyle = StyleSheet.flatten([styles.overlay, {
      backgroundColor: overlayColor ?? theme.colors.backdrop
    }]);
    const borderRadius = (theme.isV3 ? 7 : 1) * theme.roundness;
    return /*#__PURE__*/_jsx(Portal, {
      children: /*#__PURE__*/_jsx(Pressable, {
        style: overlayStyle,
        onPress: isDialogDismissable ? onDismiss : undefined,
        children: /*#__PURE__*/_jsx(SafeAreaView, {
          edges: edges,
          style: StyleSheet.flatten([styles.safeArea, {
            justifyContent: justifyContent
          }]),
          children: /*#__PURE__*/_jsx(Pressable, {
            style: StyleSheet.flatten([styles.dialog, {
              backgroundColor: theme.colors.surface,
              borderRadius: borderRadius,
              padding: borderRadius
            }, style]),
            onPress: () => {},
            children: children
          })
        })
      })
    });
  }
  return null;
});
const Dialog = withTheme(DialogComponent);
export { DialogComponent };
export default Dialog;
//# sourceMappingURL=Dialog.js.map