airbridge-react-native-sdk/qa/source/component/CustomEventParamsDialog.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'

import CustomTextInput from './CustomTextInput'

export default class CustomEventParamsDialog extends Component {
    
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            category: this.props.initCategory == null ? '' : this.props.initCategory,
            action: this.props.initAction == null ? '' : this.props.initAction,
            label: this.props.initLabel == null ? '' : this.props.initLabel,
            value: this.props.initValue == null ? '' : '' + this.props.initValue,
            semanticAttr: '',
            customAttr: ''
        }
    }

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

    close = () => {
        this.setState({
            visible: false,
            category: this.props.initCategory == null ? '' : this.props.initCategory,
            action: this.props.initAction == null ? '' : this.props.initAction,
            label: this.props.initLabel == null ? '' : this.props.initLabel,
            value: this.props.initValue == null ? '' : '' + this.props.initValue,
            semanticAttr: '',
            customAttr: ''
        })
    }

    confirm = () => {
        if (this.props.onConfirm != null) {
            var outputCategory = this.state.category.trim()
            var outputAction = this.state.action.trim()
            outputAction = outputAction.length == 0 ? null : outputAction
            var outputLabel = this.state.label.trim()
            outputLabel = outputLabel.length == 0 ? null : outputLabel
            var outputValue = this.state.value.length == 0 ? null : Number(this.state.value)
            var outputSemanticAttr
            try{
                outputSemanticAttr = JSON.parse(this.state.semanticAttr)
                outputSemanticAttr = outputSemanticAttr.length == 0 ? null : outputSemanticAttr
            } catch (e) {
                outputSemanticAttr = null
            }
            var outputCustomAttr
            try{
                outputCustomAttr = JSON.parse(this.state.customAttr)
                outputCustomAttr = outputCustomAttr.length == 0 ? null : outputCustomAttr
            } catch (e) {
                outputCustomAttr = null
            }
            this.props.onConfirm(outputCategory, outputAction, outputLabel, outputValue, outputSemanticAttr, outputCustomAttr)
        }
        this.close()
    }

    render() {
        return (
            <Modal
                visible={this.state.visible}
                transparent={true}>
                <View style={Styles.centeredView}>
                    <View style={Styles.modalView}>
                        <Text style={ Styles.h2 }>Custom event params</Text>
                        <View style={{ margin: 4 }} />
                        <CustomTextInput
                            title={'CATEGORY'}
                            placeholder={'Enter category'}
                            accessibilityLabel={'customEventCategory'}
                            onChangeText={newText => this.setState({ category: newText })}
                            value={this.state.category} />
                        <View style={{ margin: 4 }} />
                        <CustomTextInput
                            title={'ACTION'}
                            placeholder={'Enter action'}
                            accessibilityLabel={'customEventAction'}
                            onChangeText={newText => this.setState({ action: newText })}
                            value={this.state.action} />
                        <View style={{ margin: 4 }} />
                        <CustomTextInput
                            title={'LABEL'}
                            placeholder={'Enter label'}
                            accessibilityLabel={'customEventLabel'}
                            onChangeText={newText => this.setState({ label: newText })}
                            value={this.state.label} />
                        <View style={{ margin: 4 }} />
                        <CustomTextInput
                            title={'VALUE'}
                            placeholder={'Enter value'}
                            accessibilityLabel={'customEventValue'}
                            onChangeText={newText => this.setState({ value: newText })}
                            value={this.state.value} />
                        <View style={{ margin: 4 }} />
                        <CustomTextInput
                            title={'SEMANTIC ATTRIBUTES'}
                            placeholder={'Enter SemanticAttributes'}
                            accessibilityLabel={'customEventSemanticAttributes'}
                            onChangeText={newText => this.setState({ semanticAttr: newText })}
                            value={this.state.semanticAttr} />
                        <View style={{ margin: 4 }} />
                        <CustomTextInput
                            title={'CUSTOM ATTRIBUTES'}
                            placeholder={'Enter CustomAttributes'}
                            accessibilityLabel={'customEventCustomAttributes'}
                            onChangeText={newText => this.setState({ customAttr: newText })}
                            value={this.state.customAttr} />
                        <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>
                </View>
            </Modal>
        )
    }
}

CustomEventParamsDialog.propTypes = {
    onConfirm: propTypes.func.isRequired,
    
    initCategory: propTypes.string, 
    initAction: propTypes.string, 
    initLabel: propTypes.string, 
    initValue: propTypes.number, 
}