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> = props => {
  const controller = useSendVcScreen();

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

Modal.defaultProps = {
  modalStyle: Theme.ModalStyles.defaultModal,
  showClose: true,
  showHeader: true,
};

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;
}