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

## Installation

import React, { Component } from 'react';
import { TouchableOpacity, View } from 'react-native';
import Modal from 'react-native-modal';
import EventEmitter from 'eventemitter3';
import Entypo from 'react-native-vector-icons/Entypo';
import { WINDOW } from '../../../property/constants';
import { GSTYLE } from '../../../property/gstyle/globalStyle';
import Text from '../text/QText';

export const ModalEvent = new EventEmitter();

type Props = {
    headerTitleStyle?: any,
    accessibilityLabel: any,
    showBackdrop?: any,
    backdropClose?: any,
    height?: any,
    width?: any,
    headerStyle?: any,
    style?: any,
    headerContent?: any,
    title?: any,
    containerStyle: any,
    footerStyle?: any,
    children: any,
    footerContent?: any,
    containerButton: any,
    show: any,
    animationIn: string,
    animationOut: string,
}

export default class QModal extends Component<Props> {
    state = {
        modalVisible: false,
    };

    isOpen = () => {
        const { modalVisible } = this.state;
        return modalVisible;
    }

    open = () => {
        this.setState({ modalVisible: true });
    }

    close = () => {
        this.setState({ modalVisible: false });
    }

    componentDidMount = () => {
        this.mounted = true;
    }

    componentWillUnmount = () => {
        this.mounted = false;
    }

    componentWillReceiveProps = (nextProps) => {
        const { show } = this.props;
        const { modalVisible } = this.state;
        if (show !== nextProps.show) {
            if (nextProps.show && !modalVisible) {
                this.open();
            } else {
                this.close();
            }
        }
    }

    renderButtons = () => {
        const { buttons, onClose } = this.props;
        const listButtons = [];
        buttons.map(val => listButtons.push(
            <TouchableOpacity
                accessibilityLabel={val.accessibilityLabel === '' || val.accessibilityLabel === null ? 'QModalButton' : val.accessibilityLabel}
                activeOpacity={0.7}
                onPress={() => {
                    val.onPress();
                    if (onClose) onClose();
                }}
                key={Math.random()}
                style={[{
                    backgroundColor: val.backgroundColor,
                    borderColor: val.borderColor,
                    borderWidth: val.borderWidth,
                    flex: 1,
                    flexDirection: 'column',
                    flexWrap: 'wrap',
                    alignItems: 'center',
                    justifyContent: 'center',
                    paddingVertical: 6,
                    marginHorizontal: 6,
                }, val.style]}
            >
                <Text
                    style={[{ color: val.color, fontSize: 14 }, val.textStyle]}
                >
                    {val.text}
                </Text>
            </TouchableOpacity>,
        ));
        return listButtons;
    }

    render() {
        const {
            headerTitleStyle,
            accessibilityLabel,
            showBackdrop,
            backdropClose,
            height,
            width,
            headerStyle,
            style,
            headerContent,
            title,
            containerStyle,
            footerStyle,
            children,
            footerContent,
            containerButton,
            backToClose,
            animationIn,
            animationOut,
        } = this.props;
        const { modalVisible } = this.state;
        return (
            <Modal
                onModalShow={() => ModalEvent.emit('onModalShow')}
                onModalHide={() => {
                    ModalEvent.emit('onModalHide');
                    const { onClose } = this.props;
                    if (onClose) onClose();
                }}
                accessibilityLabel={accessibilityLabel === '' || accessibilityLabel === null ? 'QModal' : accessibilityLabel}
                animationIn={!animationIn ? 'fadeIn' : animationIn}
                animationOut={!animationOut ? 'fadeOut' : animationOut}
                hasBackdrop={showBackdrop}
                isVisible={modalVisible}
                onBackdropPress={() => {
                    if (backdropClose) {
                        this.close();
                    }
                }}
                useNativeDriver
                onBackButtonPress={() => {
                    if (backToClose) {
                        this.close();
                    }
                }}
                ref={(m) => { this.modal = m; }}
            >
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <View style={[{
                        height,
                        width,
                        backgroundColor: '#fff',
                        borderRadius: 8,
                    }, style]}
                    >
                        <View style={[{ width: '100%', padding: 18 }, headerStyle]}>
                            {
                                headerContent != null
                                    ? (
                                        headerContent
                                    )
                                    : (
                                        <View style={{ flexDirection: 'row' }}>
                                            <Text style={[
                                                GSTYLE.fontBold,
                                                { flex: 0.9, fontSize: 20 }, headerTitleStyle]}
                                            >
                                                {title}
                                            </Text>
                                            <TouchableOpacity style={{ flex: 0.1, alignItems: 'flex-end' }} onPress={this.close}>
                                                <Entypo name="cross" size={24} />
                                            </TouchableOpacity>
                                        </View>
                                    )
                            }
                        </View>
                        <View style={[{ flex: 1, padding: 12 }, containerStyle]}>{children}</View>
                        <View style={[{ width: '100%', padding: 12 }, footerStyle]}>
                            {
                                footerContent != null
                                    ? (
                                        footerContent
                                    ) : (
                                        <View style={[{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }, containerButton]}>
                                            {this.renderButtons()}
                                        </View>
                                    )
                            }
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
}

QModal.defaultProps = {
    height: WINDOW.height / 2,
    width: WINDOW.width - 50,
    style: {},
    showBackdrop: true,
    backToClose: true,
    backdropClose: true,
    backgroundColor: '#fff',
    coverScreen: false,
    isOpen: false,
    headerStyle: {},
    headerContent: null,
    footerStyle: {},
    footerContent: null,
    title: '',
    headerTitleStyle: {},
    onClose: () => { },
    buttons: [
        {
            icon: null,
            text: 'Close',
            onPress: () => { },
            backgroundColor: null,
            color: null,
            style: {},
        },
        {
            icon: 'save',
            text: 'Save',
            onPress: () => { },
            backgroundColor: null,
            color: null,
            style: {},
        },
    ],
};