document-upload-qsi/component/modal/QModalConfirm.js

## Installation

import React, { Component } from 'react';
import {
    PixelRatio,
    View,
    ViewStyle,
    StyleProp,
    TextStyle,
} from 'react-native';
import { GSTYLE } from '../../../property/gstyle/globalStyle';
import QIcon from '../icon/QIcon';
import QModal from './QModal';
import Text from '../text/QText';

interface IModalButtons {
    accessibilityLabel: string,
    icon: Component,
    text: string,
    onPress: () => void,
    backgroundColor: string,
    color: string,
    style: StyleProp<ViewStyle>,
    textStyle: StyleProp<TextStyle>,
}

interface IModalConfirm {
    type: 'TYPE_SUCCESS' | 'TYPE_ERROR',
    buttonText: string,
    onClose: () => void,
    modalTitle: string,
    contentHeaderText: string,
    contentText: string,
    buttons: Array<IModalButtons>,
    onModalClose: () => void,
}

export default class QModalConfirm extends Component {
    static TYPE_SUCCESS = 'TYPE_SUCCESS';

    static TYPE_ERROR = 'TYPE_ERROR';

    static defaultProps = {
        buttonText: 'OK',
    }

    constructor(props) {
        super(props);
        this.state = {
            params: null,
        };
    }

    open = (params: IModalConfirm = null) => {
        if (params === null) {
            this.modal.open();
        } else {
            this.setState({ params }, () => this.modal.open());
        }
    }

    close = () => {
        if (this.modal) this.modal.close();
    }

    renderButtons = () => {
        const { params } = this.state;
        const { buttons, buttonText, onClose } = this.props;
        if (params && params.buttons) {
            return params.buttons;
        }
        if (buttons) {
            return buttons;
        }
        return [{
            accessibilityLabel: 'Ok',
            icon: null,
            text: params ? params.buttonText : buttonText,
            onPress: params ? params.onClose : onClose,
            backgroundColor: GSTYLE.PrimaryButtonColor,
            color: '#FFFFFF',
            style: {
                borderRadius: 30,
                alignSelf: 'center',
                marginTop: 10,
                flex: 0.5,
            },
            textStyle: {
                textAlign: 'center',
                ...GSTYLE.fontSizeTitle,
                ...GSTYLE.fontNormal,
            },
        }];
    }

    getOnCloseEvent = (params, onClose) => {
        if (params && params.onModalClose) {
            params.onModalClose();
        } else if (onClose) {
            onClose();
        }
        this.close();
    }

    render() {
        const {
            type,
            modalTitle,
            contentHeaderText,
            contentHeaderStyle,
            contentText,
            contentTextStyle,
            modalStyles,
            headerContent,
            width,
            height,
            onClose,
        } = this.props;
        const { params } = this.state;
        const mModalType = params ? params.type : type;
        const mModalTitle = params ? params.modalTitle : modalTitle;
        const mModalHeader = params ? params.contentHeaderText : contentHeaderText;
        const mModalContent = params ? params.contentText : contentText;
        return (
            <QModal
                accessibilityLabel="QModalConfirm"
                closeable
                style={[{ borderRadius: 10 }, modalStyles]}
                width={!width ? PixelRatio.roundToNearestPixel(268) : width}
                height={!height ? PixelRatio.roundToNearestPixel(194) : height}
                showBackdrop
                backToClose
                backdropClose
                headerContent={!headerContent
                    ? (
                        <View style={{
                            justifyContent: 'center',
                            alignItems: 'center',
                            width: '100%',
                            height: 30,
                        }}
                        >
                            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                                <View style={{ flexDirection: 'row' }}>
                                    <QIcon
                                        size={24}
                                        style={{}}
                                        type={QIcon.TYPE_IONICONS}
                                        name={mModalType === QModalConfirm.TYPE_ERROR ? 'ios-close-circle' : 'ios-checkmark-circle'}
                                        color={mModalType === QModalConfirm.TYPE_ERROR ? '#e53935' : '#64dd17'}
                                    />
                                    <Text style={[
                                        GSTYLE.lightGreyText,
                                        GSTYLE.fontSizeModalTitle, { marginLeft: 10 }]}
                                    >
                                        {mModalTitle}
                                    </Text>
                                </View>
                            </View>
                            <View style={{
                                width: '100%',
                                marginTop: 16,
                                borderWidth: 1,
                                borderColor: '#B8B8B8',
                            }}
                            />

                        </View>
                    )
                    : headerContent
                }
                headerStyle={{
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                backgroundColor="#FFFFFF"
                containerStyle={{ justifyContent: 'center', alignItems: 'center', padding: 0 }}
                {...this.props}
                ref={(v) => {
                    this.modal = v;
                }}
                buttons={this.renderButtons()}
                onClose={() => this.getOnCloseEvent(params, onClose)}
            >
                <View style={{}}>
                    <Text style={[
                        GSTYLE.textCenter,
                        GSTYLE.fontSizeNormal,
                        GSTYLE.greyColor, { paddingBottom: 3 }, contentHeaderStyle]}
                    >
                        {mModalHeader}
                    </Text>
                    <Text style={[
                        GSTYLE.textCenter,
                        GSTYLE.fontSizeNormal,
                        GSTYLE.lightGreyText, { opacity: 0.5 }, contentTextStyle]}
                    >
                        {mModalContent}
                    </Text>
                </View>
            </QModal>
        );
    }
}