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

Airbridge SDK for React Native

import React, { Component } from 'react'

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

import AttributeTypeInputDialog from './AttributeTypeInputDialog'
import CustomTextInput from './CustomTextInput'

export default class AttributeEntryInputDialog extends Component {
    
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            key: '',
            value: '',
            type: 'string'
        }

        this.typeRef = React.createRef()
    }

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

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

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

    render() {
        return (
            <Modal
                visible={this.state.visible}
                transparent={true}>
                <View style={Styles.centeredView}>
                    <View style={Styles.modalView}>
                        <Text style={ Styles.h2 }>Input Attribute Entry</Text>
                        <View style={{ margin: 4 }} />
                        <CustomTextInput
                            title={'KEY'}
                            placeholder={'Enter key'}
                            accessibilityLabel={'key'}
                            onChangeText={newText => this.setState({ key: newText })}
                            value={this.state.key} />
                        <View style={{ margin: 4 }} />
                        <CustomTextInput
                            title={'VALUE'}
                            placeholder={'Enter value'}
                            accessibilityLabel={'value'}
                            onChangeText={newText => this.setState({ value: newText })}
                            value={this.state.value} />
                        <View style={{ margin: 4 }} />
                        <CustomTextInput
                            title={'TYPE'}
                            placeholder={'Enter type'}
                            accessibilityLabel={'type'}
                            onChangeText={newText => this.setState({ type: newText })}
                            value={this.state.type} />
                        <View style={{ margin: 4 }} />

                        <View style={{
                            flexDirection: 'row',
                            alignItems: 'center'
                            }}>
                            <Text>Type</Text>
                            <View style={{ margin: 4 }} />
                            <View style={{ flex:1 }}>
                                <CustomButton
                                    style={{flex:8}}
                                    buttonColor={Colors.grey}
                                    title={this.state.type}
                                    titleColor='white'
                                    onPress={() => this.typeRef.current.show()} />
                            </View>
                        </View>
                        
                        <View style={{ margin: 4 }} />
                        <View style={{ flexDirection: 'row'}}>
                            <CustomButton
                                buttonColor={Colors.deepBlue}
                                title={'cancel'}
                                titleColor='white'
                                accessibilityLabel={'cancel'}
                                onPress={() => this.close()} />
                            <View style={{ margin: 4 }} />
                            <CustomButton
                                buttonColor={Colors.deepBlue}
                                title={'save'}
                                titleColor='white'
                                accessibilityLabel={'save'}
                                onPress={() => this.confirm()} />
                        </View>
                    </View>

                    <AttributeTypeInputDialog
                        ref={this.typeRef}
                        onConfirm={(type) => this.setState({type:type})} />
                </View>
            </Modal>
        )
    }
}