inji-wallet/components/ui/Modal.tsx

import React from 'react';
import {I18nManager, Modal as RNModal, View} from 'react-native';
import {Icon} from 'react-native-elements';
import {Column, Row, Text} from '.';
import {useSendVcScreen} from '../../screens/Scan/SendVcScreenController';
import {DeviceInfoList} from '../DeviceInfoList';
import {ElevationLevel, Theme} from './styleUtils';
import testIDProps from '../../shared/commonUtil';
import {BackButton} from './backButton/BackButton';

export const Modal: React.FC<ModalProps> = ({
                                              testID,
                                              isVisible,
                                              requester,
                                              showClose = true,
                                              showHeader = true,
                                              modalStyle = Theme.ModalStyles.defaultModal,
                                              onDismiss,
                                              headerTitle,
                                              headerElevation,
                                              headerLabel,
                                              headerLabelColor,
                                              headerRight,
                                              headerLeft,
                                              arrowLeft,
                                              onShow,
                                              children,
                                            }) => {
  const controller = useSendVcScreen();

  return (
    <RNModal
      {...testIDProps(testID)}
      animationType="slide"
      style={modalStyle}
      visible={isVisible}
      onShow={onShow}
      onRequestClose={onDismiss}>
      <Column {...(showHeader ? {fill: true, safe: true} : {fill: true})}>
        {showHeader ? (
          <Row elevation={headerElevation}>
            <View style={modalStyle}>
              {headerRight && !arrowLeft ? (
                <Icon
                  {...testIDProps('closeModal')}
                  name={I18nManager.isRTL ? 'chevron-right' : 'chevron-left'}
                  onPress={onDismiss}
                  color={Theme.Colors.Icon}
                />
              ) : null}
              {arrowLeft && onDismiss ? (
                <BackButton onPress={onDismiss} />
              ) : null}
              <Row
                fill
                align={headerLeft ? 'flex-start' : 'center'}
                margin={arrowLeft ? '16 0 0 -15' : '16 0 0 10'}>
                <Column>
                  <Text testID={testID} style={Theme.TextStyles.header}>
                    {headerTitle || headerLeft}
                  </Text>
                  {!requester ? (
                    <Text
                      weight="semibold"
                      style={Theme.TextStyles.small}
                      color={
                        headerLabelColor
                          ? headerLabelColor
                          : Theme.Colors.textLabel
                      }>
                      {headerLabel}
                    </Text>
                  ) : (
                    <Text
                      weight="semibold"
                      style={Theme.TextStyles.small}
                      color={Theme.Colors.IconBg}>
                      <DeviceInfoList deviceInfo={controller.receiverInfo} />
                    </Text>
                  )}
                </Column>
              </Row>
              {headerRight != null ||
                arrowLeft ||
                (showClose && (
                  <Icon
                    {...testIDProps('close')}
                    name="close"
                    onPress={onDismiss}
                    color={Theme.Colors.Details}
                    size={27}
                  />
                ))}
              {headerRight && headerRight}
            </View>
          </Row>
        ) : null}
        {children}
      </Column>
    </RNModal>
  );
};

export interface ModalProps {
  testID?: string;
  isVisible: boolean;
  requester?: boolean;
  showClose?: boolean;
  showHeader?: boolean;
  modalStyle?: Object;
  onDismiss?: () => void;
  headerTitle?: string;
  headerElevation?: ElevationLevel;
  headerLabel?: string;
  headerLabelColor?: string;
  headerRight?: React.ReactElement;
  headerLeft?: React.ReactElement;
  arrowLeft?: boolean;
  onShow?: () => void;
  children?: React.ReactNode;
}