airbridge-react-native-sdk/qa/source/component/MessageDialog.js

Airbridge SDK for React Native

import React, { Component } from 'react'
import propTypes from 'prop-types'

import { View, Modal, Text } from 'react-native'
import { Styles } from '../common/Styles'
import { Colors } from '../common/Colors'

import CustomButton from './CustomButton'

export default class MessageDialog extends Component {
    
    constructor(props) {
        super(props)

        this.accessibilityLabel = Platform.OS !== 'ios' ? this.props.accessibilityLabel : null
        this.testID = this.props.accessibilityLabel
        this.autoClose = this.props.autoClose ?? true

        this.state = {
            visible: false,
            value: ''
        }
    }

    show = () => {
        this.setState({ visible: true })

        if (this.autoClose == true) {
            this.setTimer(2000)
        }
    }

    close = () => {
        this.setState({
            visible: false,
            value: ''
        })
    }

    setTimer = async (value) => {
        new Promise(resolve => {
            setTimeout(() => {
                resolve(value)
                this.close()
            }, value)
        })
    }

    render() {
        return (
            <Modal
                visible={this.state.visible}
                transparent={true}>
                <View style={Styles.centeredView}>
                    <View style={Styles.modalView}>
                        <Text style={ Styles.h2 }>{this.props.title}</Text>
                        <View style={{ margin: 4 }} />
                        <Text
                            testID={this.testID}
                            accessibilityLabel={this.accessibilityLabel}
                        >{this.props.message}</Text>
                        {this.autoClose == false &&
                        <CustomButton
                            buttonColor={Colors.deepBlue}
                            title={'ok'}
                            titleColor='white'
                            accessibilityLabel={'ok'}
                            onPress={() => this.close()} />
                        }
                    </View>
                </View>
            </Modal>
        )
    }
}

MessageDialog.propTypes = {
    title: propTypes.string.isRequired,
    message: propTypes.string.isRequired,
    accessibilityLabel: propTypes.string.isRequired
}