|
@@ -0,0 +1,286 @@
|
|
|
+/**
|
|
|
+ * Created by zcy on 2017/4/6.
|
|
|
+ */
|
|
|
+import React, {Component} from 'react'
|
|
|
+import {
|
|
|
+ View,
|
|
|
+ StyleSheet,
|
|
|
+ TouchableHighlight,
|
|
|
+ Text,
|
|
|
+ Image,
|
|
|
+ Dimensions,
|
|
|
+} from 'react-native'
|
|
|
+// var Dimensions = require('Dimensions');
|
|
|
+var width = Dimensions.get('window').width;
|
|
|
+var height = Dimensions.get('window').height;
|
|
|
+class RadioModal extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ clicked: true,
|
|
|
+ radioInit: this.props.radioInit,
|
|
|
+ indexa: this.props.selectedValue === undefined ? '0' : this.props.selectedValue,
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ click(id, item, notes) {
|
|
|
+ this.setState({indexa: id})
|
|
|
+ this.props.onValueChange(id, item, notes)
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidMount() {
|
|
|
+ const indexInit = this.props.selectedValue === undefined ? '0' : this.props.selectedValue;
|
|
|
+ this.setState({
|
|
|
+ indexa: indexInit
|
|
|
+ })
|
|
|
+ //this.props.onValueChange(indexInit)
|
|
|
+ }
|
|
|
+
|
|
|
+ createInner(child, index, props) {
|
|
|
+ const disabled = props ? child[this.props.options.disabled] : child.props.disabled;
|
|
|
+ const childC = props ? child[this.props.options.value] : child.props.children;
|
|
|
+ const values = props ? child[this.props.options.id] : child.props.value;
|
|
|
+ const notes = props ? child[this.props.options.note] : child.props.note;
|
|
|
+ const hightlight = props ? this.state.indexa === child[this.props.options.id] : this.state.indexa === child.props.value;
|
|
|
+ return <Raio2
|
|
|
+ child={childC}
|
|
|
+ index={index}
|
|
|
+ value={values}
|
|
|
+ notes={notes}
|
|
|
+ key={index}
|
|
|
+ initStyle={this.props.innerStyle}
|
|
|
+ txtColor={this.props.txtColor}
|
|
|
+ noneColor={this.props.noneColor}
|
|
|
+ onclick={this.click.bind(this)}
|
|
|
+ hightlight={hightlight}
|
|
|
+ disabled={disabled}
|
|
|
+ seledImg={this.props.seledImg}
|
|
|
+ selImg={this.props.selImg}
|
|
|
+ selnoneImg={this.props.selnoneImg}
|
|
|
+ />
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const that = this;
|
|
|
+ return (
|
|
|
+ <View {...this.props.style}>
|
|
|
+ {
|
|
|
+ !this.props.dataOption && React.Children.map(this.props.children, (child, index) => this.createInner(child, index))
|
|
|
+ }
|
|
|
+ {
|
|
|
+ this.props.dataOption && this.props.dataOption.map((item, index) => this.createInner(item, index, true))
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class Raio2 extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ }
|
|
|
+
|
|
|
+ click(id, item, notes) {
|
|
|
+ if (this.props.disabled) {
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ this.props.onclick(id, item, notes);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const imgUrl = this.props.hightlight ? this.props.seledImg || require('../../assets/images/selted.png') : this.props.selImg || require('../../assets/images/selt.png');
|
|
|
+ const imgUrlNone = this.props.selnoneImg || require('../../assets/images/seltnone.png');
|
|
|
+ return (
|
|
|
+ <TouchableHighlight
|
|
|
+ underlayColor='transparent'
|
|
|
+ style={[{marginRight: 15, width: (width - 80) / 2, height: 24}, this.props.initStyle]}
|
|
|
+ onPress={this.click.bind(this, this.props.value, this.props.child, this.props.notes)}>
|
|
|
+ <View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
|
|
|
+ {this.props.disabled && !this.props.hightlight &&
|
|
|
+ <Image source={imgUrlNone} style={{width: 14, height: 14, marginRight: 7}}/>}
|
|
|
+ {this.props.disabled && this.props.hightlight &&
|
|
|
+ <Image source={imgUrl} style={{width: 14, height: 14, marginRight: 7}}/>}
|
|
|
+ {!this.props.disabled && <Image source={imgUrl} style={{width: 14, height: 14, marginRight: 7}}/>}
|
|
|
+ <Text
|
|
|
+ style={{color: this.props.disabled ? this.props.noneColor || '#dfdfdf' : this.props.txtColor || '#414141'}}>{this.props.child}</Text>
|
|
|
+ </View>
|
|
|
+ </TouchableHighlight>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ titleCom: {
|
|
|
+ marginBottom: 5,
|
|
|
+ },
|
|
|
+ seltedImgs: {
|
|
|
+ width: 14,
|
|
|
+ height: 14,
|
|
|
+ marginRight: 8,
|
|
|
+ },
|
|
|
+ emailH: {
|
|
|
+ height: 28,
|
|
|
+ textAlignVertical: 'center',
|
|
|
+ marginRight: 10,
|
|
|
+ color: '#141414',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ inputs: {
|
|
|
+ width: width * 0.5,
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#dfdfdf',
|
|
|
+ borderRadius: 3,
|
|
|
+ height: 28,
|
|
|
+ padding: 0,
|
|
|
+ paddingLeft: 5,
|
|
|
+ paddingRight: 5,
|
|
|
+ marginBottom: 10,
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ closeBtns: {
|
|
|
+ position: 'absolute',
|
|
|
+ width: 14,
|
|
|
+ height: 14,
|
|
|
+ right: 10,
|
|
|
+ top: 7,
|
|
|
+ },
|
|
|
+ headLog: {
|
|
|
+ backgroundColor: '#e6454a',
|
|
|
+ color: '#ffffff',
|
|
|
+ height: 28,
|
|
|
+ textAlignVertical: 'center',
|
|
|
+ textAlign: 'center'
|
|
|
+ },
|
|
|
+ border1: {
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#dfdfdf',
|
|
|
+ },
|
|
|
+ borderR: {
|
|
|
+ borderRightWidth: 1,
|
|
|
+ borderRightColor: '#dfdfdf',
|
|
|
+ },
|
|
|
+ borderL: {
|
|
|
+ borderLeftWidth: 1,
|
|
|
+ borderLeftColor: '#dfdfdf',
|
|
|
+ },
|
|
|
+ eleMess: {
|
|
|
+ paddingLeft: 10,
|
|
|
+ paddingRight: 10,
|
|
|
+ height: 24,
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#ffffff',
|
|
|
+ backgroundColor: '#f8cb43',
|
|
|
+ borderRadius: 3,
|
|
|
+ textAlignVertical: 'center',
|
|
|
+ textAlign: 'center',
|
|
|
+ width: 80,
|
|
|
+ },
|
|
|
+ electronicTip: {
|
|
|
+ width: (width - 40) / 5,
|
|
|
+ flexDirection: 'row',
|
|
|
+ justifyContent: 'center',
|
|
|
+ paddingTop: 10,
|
|
|
+ paddingBottom: 10,
|
|
|
+ },
|
|
|
+ lineRow: {
|
|
|
+ backgroundColor: '#ffffff',
|
|
|
+ borderRadius: 3,
|
|
|
+ flexDirection: 'row',
|
|
|
+ flex: 1,
|
|
|
+ marginBottom: 15,
|
|
|
+ padding: 10,
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'space-between',
|
|
|
+ flexWrap: 'wrap',
|
|
|
+
|
|
|
+ },
|
|
|
+ lineRowB: {
|
|
|
+ backgroundColor: '#ffffff',
|
|
|
+ borderRadius: 3,
|
|
|
+ flexDirection: 'row',
|
|
|
+ flex: 1,
|
|
|
+ marginBottom: 15,
|
|
|
+ paddingLeft: 10,
|
|
|
+ paddingRight: 10,
|
|
|
+ alignItems: 'center',
|
|
|
+ },
|
|
|
+ inner3: {
|
|
|
+ width: (width - 40) / 3,
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#141414'
|
|
|
+ },
|
|
|
+ innerS: {
|
|
|
+ flexDirection: 'row',
|
|
|
+ flex: 1,
|
|
|
+ fontSize: 12,
|
|
|
+ color: '#141414'
|
|
|
+ },
|
|
|
+ flex1: {
|
|
|
+ flex: 1
|
|
|
+ },
|
|
|
+ flexRow: {
|
|
|
+
|
|
|
+ flexDirection: 'row',
|
|
|
+ },
|
|
|
+ flexVer: {
|
|
|
+ flexDirection: 'column',
|
|
|
+ },
|
|
|
+ Jcenter: {
|
|
|
+ justifyContent: 'center',
|
|
|
+ },
|
|
|
+ Acenter: {
|
|
|
+ alignItems: 'center',
|
|
|
+ },
|
|
|
+ BE: {
|
|
|
+ justifyContent: 'space-between'
|
|
|
+ },
|
|
|
+ Textcenter: {
|
|
|
+ textAlign: 'center',
|
|
|
+ },
|
|
|
+ TextCenterVer: {
|
|
|
+ textAlignVertical: 'center',
|
|
|
+ },
|
|
|
+ backCGray: {
|
|
|
+ backgroundColor: '#dfdfdf'
|
|
|
+ },
|
|
|
+ backWhite: {
|
|
|
+ backgroundColor: '#ffffff',
|
|
|
+ },
|
|
|
+ borderRadius5: {
|
|
|
+ borderRadius: 5,
|
|
|
+ },
|
|
|
+ borderRadius3: {
|
|
|
+ borderRadius: 3,
|
|
|
+ },
|
|
|
+ horLine: {
|
|
|
+ flexDirection: 'row',
|
|
|
+ flex: 1,
|
|
|
+ flexWrap: 'wrap',
|
|
|
+ alignItems: 'flex-start',
|
|
|
+ marginBottom: 10,
|
|
|
+ },
|
|
|
+ paddlr10: {
|
|
|
+ paddingLeft: 10,
|
|
|
+ paddingRight: 10,
|
|
|
+ },
|
|
|
+ marginB10: {
|
|
|
+ marginBottom: 10,
|
|
|
+ },
|
|
|
+ colorRed: {
|
|
|
+ color: '#b40e12',
|
|
|
+ },
|
|
|
+ colorBlack: {
|
|
|
+ color: '#141414',
|
|
|
+ },
|
|
|
+ colorYellow: {
|
|
|
+ color: '#f8cb43',
|
|
|
+ },
|
|
|
+ color999: {
|
|
|
+ color: '#999999',
|
|
|
+ },
|
|
|
+ colorWhite: {
|
|
|
+ color: '#ffffff',
|
|
|
+ },
|
|
|
+})
|
|
|
+export default RadioModal
|