Function Dialog

src/components/Dialog/Dialog.tsx:97–164

({
  children,
  dismissable = true,
  dismissableBackButton = dismissable,
  onDismiss,
  visible = false,
  style,
  theme: themeOverrides,
  testID,
}: Props)

 * ```
 */
const Dialog = ({
  children,
  dismissable = true,
  dismissableBackButton = dismissable,
  onDismiss,
  visible = false,
  style,
  theme: themeOverrides,
  testID,
}: Props) => {
  const { right, left } = useSafeAreaInsets();
  const theme = useInternalTheme(themeOverrides);
  const { isV3, dark, mode, colors, roundness } = theme;
  const borderRadius = (isV3 ? 7 : 1) * roundness;

  const backgroundColorV2 =
    dark && mode === 'adaptive'
      ? overlay(DIALOG_ELEVATION, colors?.surface)
      : colors?.surface;
  const backgroundColor = isV3
    ? theme.colors.elevation.level3
    : backgroundColorV2;

  return (
    <Modal
      dismissable={dismissable}
      dismissableBackButton={dismissableBackButton}
      onDismiss={onDismiss}
      visible={visible}
      contentContainerStyle={[
        {
          borderRadius,
          backgroundColor,
          marginHorizontal: Math.max(left, right, 26),
        },
        styles.container,
        style,
      ]}
      theme={theme}
      testID={testID}
    >
      {React.Children.toArray(children)
        .filter((child) => child != null && typeof child !== 'boolean')
        .map((child, i) => {
          if (isV3) {
            if (i === 0 && React.isValidElement<DialogChildProps>(child)) {
              return React.cloneElement(child, {
                style: [{ marginTop: 24 }, child.props.style],
              });
            }
          }

          if (
            i === 0 &&
            React.isValidElement<DialogChildProps>(child) &&
            child.type === DialogContent
          ) {
            // Dialog content is the first item, so we add a top padding