airbridge-react-native-sdk/qa/source/component/AttributeTypeInputDialog.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 CustomButton from './CustomButton'
import { Colors } from '../common/Colors'

export default class AttributeTypeInputDialog extends Component {
    
    constructor(props) {
        super(props)
        this.state = {
            visible: false
        }
    }

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

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

    confirm = (type) => {
        if (this.props.onConfirm != null) {
            this.props.onConfirm(type)
        }
        this.close()
    }

    render() {
        return (
            <Modal
                visible={this.state.visible}
                transparent={true}>
                <View style={Styles.centeredView}>
                    <View style={Styles.modalView}>
                        <Text style={ Styles.h2 }>Select attribute type</Text>
                        <View style={{ margin: 4 }} />
                        <View style={{width:'100%'}}>
                            <CustomButton
                                buttonColor={Colors.grey}
                                title={'Int'}
                                titleColor='white'
                                accessibilityLabel={'int'}
                                onPress={() => this.confirm('int')} />
                            <CustomButton
                                buttonColor={Colors.grey}
                                title={'Long'}
                                titleColor='white'
                                accessibilityLabel={'long'}
                                onPress={() => this.confirm('long')} />
                            <CustomButton
                                buttonColor={Colors.grey}
                                title={'Float'}
                                titleColor='white'
                                accessibilityLabel={'float'}
                                onPress={() => this.confirm('float')} />
                            <CustomButton
                                buttonColor={Colors.grey}
                                title={'Double'}
                                titleColor='white'
                                accessibilityLabel={'double'}
                                onPress={() => this.confirm('double')} />
                            <CustomButton
                                buttonColor={Colors.grey}
                                title={'Boolean'}
                                titleColor='white'
                                accessibilityLabel={'boolean'}
                                onPress={() => this.confirm('boolean')} />
                            <CustomButton
                                buttonColor={Colors.grey}
                                title={'String'}
                                titleColor='white'
                                accessibilityLabel={'string'}
                                onPress={() => this.confirm('string')} />
                        </View>

                        <View style={{margin: 4}} />

                        <CustomButton
                            buttonColor={Colors.grey}
                            title={'cancel'}
                            titleColor='white'
                            accessibilityLabel={'cancel'}
                            onPress={() => this.close()} />
                    </View>
                </View>
            </Modal>
        )
    }
}

AttributeTypeInputDialog.propTypes = {
    onConfirm: propTypes.func.isRequired
}