Commit 5a762f7c by peii

host支持ip

parent 10f67d54
Showing with 213 additions and 227 deletions
import React, { Component } from 'react'; import React, { Component } from 'react'
import { ActionSheet } from '@ant-design/react-native'
import { View, Text, Modal, SafeAreaView, TextInput, StyleSheet, TouchableOpacity } from 'react-native'
import { import {
View, safe_view,
Text, placehold_text_color,
Modal, Width,
SafeAreaView, pxHeight,
TextInput, foundation_color,
StyleSheet, promary_text_color,
TouchableOpacity font_family_semibold,
} from 'react-native'; font_family_regular,
import { first_text_color,
safe_view, btn_sub_color,
placehold_text_color, second_text_size,
Width, title_text_color,
pxHeight, pxSize,
foundation_color, scale,
promary_text_color, } from '../../../base/BaseStyle'
font_family_semibold, import { show } from '../../../utils/Utils'
font_family_regular,
first_text_color,
btn_sub_color,
second_text_size,
title_text_color,
pxSize
} from '../../../base/BaseStyle';
import { show } from '../../../utils/Utils';
class FillDomainModel extends Component { class FillDomainModel extends Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
isVisible: false, isVisible: false,
defaDomainHead: 'https://', defaDomainHead: 'http(s)://',
domainValue: '', domainValue: '',
isNull: false isNull: false,
}
} }
}
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.state.isVisible != nextProps.show) { if (this.state.isVisible != nextProps.show) {
this.setState({ this.setState({
isVisible: nextProps.show isVisible: nextProps.show,
}); })
}
if(this.state.domainValue != nextProps.domainValue) {
let tempDomain = nextProps.domainValue
let {isVisible} = this.state
if(tempDomain.includes("obs.uat.guke.tech")) {
// tempDomain = ''
isVisible = true
}
this.setState({
domainValue: tempDomain,
isVisible
})
}
} }
if (this.state.domainValue != nextProps.domainValue) {
closeModal() { let tempDomain = nextProps.domainValue
this.setState({ let { isVisible } = this.state
isVisible: false if (tempDomain.includes('obs.uat.guke.tech')) {
}) // tempDomain = ''
this.props.closeModal(false) isVisible = true
}
this.setState({
domainValue: tempDomain,
isVisible,
})
} }
}
// 域名 输入 closeModal() {
handleDomainInput(text) { this.setState({
let isNull = false isVisible: false,
if(!text) { })
isNull = true this.props.closeModal(false)
} }
this.setState({
domainValue: text,
isNull
})
}
// 确定 // 域名 输入
handleSubClick() { handleDomainInput(text) {
let {defaDomainHead, domainValue} = this.state let isNull = false
if(!domainValue) { if (!text) {
this.setState({ isNull = true
isNull: true
})
return
}
// 存储值 !!!
let tempDomain = defaDomainHead+domainValue
this.closeModal()
this.props.callback(tempDomain)
} }
this.setState({
domainValue: text,
isNull,
})
}
renderDialog() { // 确定
let { domainValue, defaDomainHead, isNull } = this.state handleSubClick() {
return ( let { domainValue } = this.state
<View style={styles.cont_mian}> if (!domainValue) {
<View style={styles.cont_inner}> this.setState({
<View style={styles.cont_tit_box}> isNull: true,
<Text style={styles.cont_tit}>配置域名</Text> })
</View> return
<View style={styles.cont_cell}> }
<Text style={styles.input_head}>{defaDomainHead}</Text> // 存储值 !!!
<TextInput let host = 'https://' + domainValue
autoCapitalize='none' const exp = /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])/g
style={styles.cell_inp_txt} if (exp.test(domainValue)) {
placeholderTextColor={placehold_text_color} host = 'http://' + domainValue
returnKeyType="done"
defaultValue={domainValue}
placeholder={'请输入域名'}
keyboardType="email-address"
onChangeText={(text) => this.handleDomainInput(text)}
/>
</View>
{
isNull ?
<View style={styles.err_input_box}>
<Text style={styles.err_input}>请输入域名</Text>
</View> : null
}
<View style={styles.cont_footer}>
<TouchableOpacity
activeOpacity={.8}
style={styles.sub_btn_box}
onPress={() => this.handleSubClick()}
>
<Text style={styles.sub_tit}>确定</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
} }
this.closeModal()
this.props.callback(host)
}
render() { renderDialog() {
return ( let { domainValue, defaDomainHead, isNull } = this.state
<View style={styles.dia_container}> return (
<Modal <View style={styles.cont_mian}>
transparent={true} <View style={styles.cont_inner}>
visible={this.state.isVisible} <View style={styles.cont_tit_box}>
animationType={'fade'} <Text style={styles.cont_tit}>配置域名</Text>
> </View>
<SafeAreaView style={safe_view}> <View style={styles.cont_cell}>
<View style={styles.container}> <Text style={styles.input_head}>{defaDomainHead}</Text>
{this.renderDialog()} <TextInput
</View> autoCapitalize="none"
</SafeAreaView> style={styles.cell_inp_txt}
</Modal> placeholderTextColor={placehold_text_color}
returnKeyType="done"
defaultValue={domainValue}
placeholder={'请输入域名'}
keyboardType="email-address"
onChangeText={text => this.handleDomainInput(text)}
/>
</View>
{isNull ? (
<View style={styles.err_input_box}>
<Text style={styles.err_input}>请输入域名</Text>
</View> </View>
); ) : null}
} <View style={styles.cont_footer}>
<TouchableOpacity activeOpacity={0.8} style={styles.sub_btn_box} onPress={() => this.handleSubClick()}>
<Text style={styles.sub_tit}>确定</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
render() {
return (
<View style={styles.dia_container}>
<Modal transparent={true} visible={this.state.isVisible} animationType={'fade'}>
<SafeAreaView style={safe_view}>
<View style={styles.container}>{this.renderDialog()}</View>
</SafeAreaView>
</Modal>
</View>
)
}
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
dia_container: { dia_container: {
flex: 1 flex: 1,
}, },
container: { container: {
flex: 1, flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)' backgroundColor: 'rgba(0, 0, 0, 0.5)',
}, },
cont_mian: { cont_mian: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: 'center',
position: 'relative' position: 'relative',
}, },
cont_inner: { cont_inner: {
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: pxHeight(196), top: scale(196),
width: Width() - 60, width: Width() - 60,
flex: 1, flex: 1,
flexDirection: 'column', flexDirection: 'column',
backgroundColor: foundation_color, backgroundColor: foundation_color,
height: pxSize(360), height: scale(360),
borderRadius: 10, borderRadius: 10,
marginHorizontal: 30, marginHorizontal: 30,
marginVertical: 20, marginVertical: 20,
paddingTop: 30, paddingTop: 30,
paddingBottom: 60, paddingBottom: 60,
paddingHorizontal: 20 paddingHorizontal: 20,
},
cont_tit_box: {},
cont_tit: {
color: promary_text_color,
fontSize: 20,
lineHeight: 28,
fontFamily: font_family_semibold,
},
cont_cell: {
height: 45,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 100,
paddingHorizontal: 12,
backgroundColor: '#EFEFEF',
marginTop: 30,
},
input_head: {
fontSize: 14,
fontFamily: font_family_semibold,
color: promary_text_color,
},
cell_inp_txt: {
paddingLeft: 4,
fontFamily: font_family_regular,
fontSize: 14,
color: first_text_color,
width: '80%',
},
err_input_box: {
paddingLeft: 10,
paddingTop: 4,
},
err_input: {
fontSize: 14,
fontFamily: font_family_regular,
color: '#FF0000',
},
cont_footer: {
flex: 1,
justifyContent: 'flex-end',
},
sub_btn_box: {
width: '100%',
height: 38,
backgroundColor: btn_sub_color,
borderRadius: 20,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
shadowColor: btn_sub_color,
shadowOffset: {
width: 1,
height: 2,
}, },
cont_tit_box: {}, shadowOpacity: 1,
cont_tit: { elevation: 2,
color: promary_text_color, borderWidth: 0,
fontSize: 20, },
lineHeight: 28, sub_tit: {
fontFamily: font_family_semibold color: title_text_color,
}, fontSize: second_text_size,
cont_cell: { },
height: 45,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 100,
paddingHorizontal: 12,
backgroundColor: '#EFEFEF',
marginTop: 30
},
input_head: {
fontSize: 14,
fontFamily: font_family_semibold,
color: promary_text_color
},
cell_inp_txt: {
paddingLeft: 4,
fontFamily: font_family_regular,
fontSize: 14,
color: first_text_color,
width: '80%'
},
err_input_box: {
paddingLeft: 10,
paddingTop: 4
},
err_input:{
fontSize: 14,
fontFamily: font_family_regular,
color: '#FF0000'
},
cont_footer: {
flex: 1,
justifyContent: 'flex-end'
},
sub_btn_box: {
width: '100%',
height: 38,
backgroundColor: btn_sub_color,
borderRadius: 20,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
shadowColor: btn_sub_color,
shadowOffset: {
width: 1,
height: 2
},
shadowOpacity: 1,
elevation: 2,
borderWidth: 0
},
sub_tit: {
color: title_text_color,
fontSize: second_text_size
}
}) })
export default FillDomainModel; export default FillDomainModel
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment