airbridge-react-native-sdk-restricted 2.8.7 → 2.8.8

package/qa/source/component/CustomEventParamsDialog.js

@@ -0,0 +1,150 @@
+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, 
+}

package/qa/source/component/CustomTextInput.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import {
+  Platform,
+  View,
+  Text,
+  TextInput
+} from 'react-native'
+
+export default class CustomTextInput extends Component{
+  
+  constructor(props){
+    super(props)
+
+    this.accessibilityLabel = Platform.OS !== 'ios' ? this.props.accessibilityLabel : null
+    this.testID = this.props.accessibilityLabel
+  }
+
+  render() {
+    return (
+      <View style={{width: '100%'}}>
+        <Text style={{width: '100%', fontWeight: 'bold', fontSize: 12}}>{this.props.title}</Text>
+        <TextInput
+            placeholder={this.props.placeholder}
+            testID={this.testID}
+            accessibilityLabel={this.accessibilityLabel}
+            onChangeText={this.props.onChangeText}
+            value={this.props.value}
+            style={{
+              width: '100%', 
+              backgroundColor: 'white',
+              borderColor: 'grey',
+              borderWidth: 1,
+              minHeight: 36,
+              paddingHorizontal: 16,
+              borderRadius: 16,
+            }} />
+      </View>
+    )
+  }
+}

package/qa/source/component/EntryInputDialog.js

@@ -0,0 +1,89 @@
+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 EntryInputDialog extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            visible: false,
+            key: '',
+            value: ''
+        }
+    }
+
+    show = () => {
+        this.setState({ visible: true })
+    }
+
+    close = () => {
+        this.setState({
+            visible: false,
+            key: '',
+            value: ''
+        })
+    }
+
+    confirm = () => {
+        if (this.props.onConfirm != null) {
+            this.props.onConfirm(this.state.key, this.state.value)
+        }
+        this.close()
+    }
+
+    render() {
+        return (
+            <Modal
+                visible={this.state.visible}
+                transparent={true}>
+                <View style={Styles.centeredView}>
+                    <View style={Styles.modalView}>
+                        <Text style={ Styles.h2 }>Input 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 }} />
+                        
+                        <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>
+        )
+    }
+}
+
+EntryInputDialog.propTypes = {
+    onConfirm: propTypes.func.isRequired
+}

package/qa/source/component/HorizontalPreference.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+
+import { Styles } from '../common/Styles'
+import { Colors } from '../common/Colors'
+
+export default class HorizontalPreference extends Component{
+
+  constructor(props){
+    super(props)
+
+    this.accessibilityLabel = Platform.OS !== 'ios' ? this.props.accessibilityLabel : null
+    this.testID = this.props.accessibilityLabel
+  }
+
+  render() {
+    return (
+      <View>
+        <View
+          style={{ 
+            flexDirection: 'row', 
+            marginBottom: 4,
+            alignItems: 'center'
+            }}>
+          <Text style={{
+              color: Colors.black,
+              fontSize: 16,
+              fontWeight: 900,
+              marginEnd: 12
+            }}>{this.props.title}</Text>
+          <Text
+            testID={this.testID}
+            accessibilityLabel={this.accessibilityLabel}
+            style={{
+              color: Colors.black,
+              fontSize: 16
+          }}>{this.props.text}</Text>
+        </View>
+        <View style={Styles.line} />
+      </View>
+    )
+  }
+}

package/qa/source/component/ImageButton.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+
+import {
+  Platform,
+  Pressable,
+  Image,
+} from 'react-native'
+
+export default class ImageButton extends Component{
+
+  constructor(props){
+    super(props)
+
+    this.accessibilityLabel = Platform.OS !== 'ios' ? this.props.accessibilityLabel : null
+    this.testID = this.props.accessibilityLabel
+  }
+
+  render() {
+    return (
+      <Pressable
+        testID={this.testID}
+        accessibilityLabel={this.accessibilityLabel}
+        onPress={this.props.onPress}>
+        <Image 
+          style={{
+            padding: 12,
+            margin: 12,
+            width: this.props.width,
+            height: this.props.height
+          }}
+          source={ this.props.source }/>
+      </Pressable>
+    )
+  }
+}

package/qa/source/component/InjectInputDialog.js

@@ -0,0 +1,80 @@
+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 InjectInputDialog extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            visible: false,
+            value: ''
+        }
+    }
+
+    show = () => {
+        this.setState({ visible: true })
+    }
+
+    close = () => {
+        this.setState({
+            visible: false,
+            value: ''
+        })
+    }
+
+    confirm = () => {
+        if (this.props.onConfirm != null) {
+            this.props.onConfirm(this.state.value)
+        }
+        this.close()
+    }
+
+    render() {
+        return (
+            <Modal
+                visible={this.state.visible}
+                transparent={true}>
+                <View style={Styles.centeredView}>
+                    <View style={Styles.modalView}>
+                        <Text style={ Styles.h2 }>Input token</Text>
+                        <View style={{ margin: 4 }} />
+                        <CustomTextInput
+                            title={'Token'}
+                            placeholder={'Enter token'}
+                            accessibilityLabel='token'
+                            onChangeText={newText => this.setState({ value: newText })}
+                            value={this.state.value} />
+                        <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={'inject'}
+                                titleColor='white'
+                                accessibilityLabel={'inject'}
+                                onPress={() => this.confirm()} />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        )
+    }
+}
+
+InjectInputDialog.propTypes = {
+    onConfirm: propTypes.func.isRequired
+}

package/qa/source/component/MessageDialog.js

@@ -0,0 +1,81 @@
+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
+}

package/qa/source/component/UrlInputDialog.js

@@ -0,0 +1,80 @@
+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 UrlInputDialog extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            visible: false,
+            value: ''
+        }
+    }
+
+    show = () => {
+        this.setState({ visible: true })
+    }
+
+    close = () => {
+        this.setState({
+            visible: false,
+            value: ''
+        })
+    }
+
+    confirm = () => {
+        if (this.props.onConfirm != null) {
+            this.props.onConfirm(this.state.value)
+        }
+        this.close()
+    }
+
+    render() {
+        return (
+            <Modal
+                visible={this.state.visible}
+                transparent={true}>
+                <View style={Styles.centeredView}>
+                    <View style={Styles.modalView}>
+                        <Text style={ Styles.h2 }>Input URL</Text>
+                        <View style={{ margin: 4 }} />
+                        <CustomTextInput
+                            title={'URL'}
+                            placeholder={'Enter URL'}
+                            accessibilityLabel='url'
+                            onChangeText={newText => this.setState({ value: newText })}
+                            value={this.state.value} />
+                        <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={'go'}
+                                titleColor='white'
+                                accessibilityLabel={'go'}
+                                onPress={() => this.confirm()} />
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        )
+    }
+}
+
+UrlInputDialog.propTypes = {
+    onConfirm: propTypes.func.isRequired
+}

package/qa/source/component/ValueInputDialog.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react'
+import propTypes from 'prop-types'
+
+import { View, Modal, Text, TextInput } from 'react-native'
+import { Styles } from '../common/Styles'
+import CustomButton from './CustomButton'
+import { Colors } from '../common/Colors'
+
+import CustomTextInput from './CustomTextInput'
+
+export default class ValueInputDialog extends Component {
+    
+    constructor(props) {
+        super(props)
+        this.state = {
+            visible: false,
+            value: ''
+        }
+    }
+
+    show = () => {
+        this.setState({ visible: true })
+    }
+
+    close = () => {
+        this.setState({
+            visible: false,
+            value: ''
+        })
+    }
+
+    confirm = () => {
+        if (this.props.onConfirm != null) {
+            this.props.onConfirm(this.state.value)
+        }
+        this.close()
+    }
+
+    render() {
+        return (
+            <Modal
+                visible={this.state.visible}
+                transparent={true}>
+                <View style={Styles.centeredView}>
+                    <View style={Styles.modalView}>
+                        <Text style={ Styles.h2 }>Input Value</Text>
+                        <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 }} />
+                    
+                        <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>
+        )
+    }
+}
+
+ValueInputDialog.propTypes = {
+    onConfirm: propTypes.func.isRequired
+}