Skip to content

Commit

Permalink
refactor(location): remove the style
Browse files Browse the repository at this point in the history
  • Loading branch information
@lulutia
lulutia committed Jun 7, 2016
1 parent 8cd4e7c commit 5f3f260
Show file tree
Hide file tree
Showing 6 changed files with 230 additions and 483 deletions.
105 changes: 33 additions & 72 deletions app/csetup.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { Component, PropTypes} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import {
View,
Text,
Expand All @@ -14,10 +15,11 @@ import {
Modal,
} from 'react-native';


import CPickroll from './roll2';
import styles from './style';
let CPicker = Platform.OS === 'ios' ? PickerIOS : CPickroll;
let PickerItem = CPicker.Item;

let height = Dimensions.get('window').height;
let top = height - 250;
let str = '';
Expand All @@ -39,6 +41,7 @@ class CPickerroll extends Component {
this._changeAnimateStatus = this._changeAnimateStatus.bind(this);
this.state = this._stateFromProps(props);
this.state.animatedHeight = new Animated.Value(height);
this.state.flex = new Animated.Value(0);
}

_stateFromProps(props){
Expand Down Expand Up @@ -70,24 +73,24 @@ class CPickerroll extends Component {
}
}

let selfStyle = props.selfStyle;
let inputStyle = props.inputStyle;
let animationType = props.animationType||'none';
let transparent = typeof props.transparent === 'undefined' ? true:props.transparent;
let visible = typeof props.visible === 'undefined' ? false:props.visible;
let enable = typeof props.enable === 'undefined' ? true:props.enable;
let inputValue = props.inputValue || 'please chose';
let confirmBtnText = props.confirmBtnText || '确定';
let cancelBtnText = props.cancelBtnText || '取消';
return {
selfStyle,
visible,
transparent,
animationType,
enable,
inputValue,
inputStyle,
passData,
selectIndex,
selectedValue,
confirmBtnText,
cancelBtnText,
};
}
_confirmChose(){
Expand All @@ -100,6 +103,7 @@ class CPickerroll extends Component {
return str;
}
_cancelChose(){
console.log("nono");
this.state.selectIndex.length=0;
this.state.passData.length = 0;
this.state.selectedValue.length = 0;
Expand Down Expand Up @@ -141,13 +145,13 @@ class CPickerroll extends Component {
if(visible){
this.setState({visible: visible});
Animated.timing(
this.state.animatedHeight,
{toValue: top}
this.state.flex,
{toValue: 1}
).start();
}else{
Animated.timing(
this.state.animatedHeight,
{toValue: height}
this.state.flex,
{toValue: 0}
).start(() => this._changeAnimateStatus(type))
}
}
Expand Down Expand Up @@ -193,11 +197,9 @@ class CPickerroll extends Component {
render(){

let modalBackgroundStyle = {
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
backgroundColor: 'rgba(0, 0, 0, 0.5)' ,
};
let innerContainerTransparentStyle = this.state.transparent
? {backgroundColor: '#fff', padding: 20}
: null;
let innerContainerTransparentStyle = {backgroundColor: '#fff'};

return (
<View style={styles.container}>
Expand All @@ -207,29 +209,31 @@ class CPickerroll extends Component {
visible={this.state.visible}
onRequestClose={() => {this._setModalVisible(false)}}
>
<View style={[styles.modalcontainer, modalBackgroundStyle]}>
<Animated.View style={[styles.innerContainer, innerContainerTransparentStyle,{marginTop:this.state.animatedHeight}]}>
<View style={styles.nav}>
<View style={[styles.modalContainer]}>
<View style={styles.test}></View>
<Animated.View style={[styles.innerContainer,{flex:this.state.flex}]}>
<View style={[styles.nav,this.props.navStyle]}>
<TouchableOpacity style={styles.confirm}>
<Text className={"confirm"} onPress={() => {this. _confirmChose()}}
style={{textAlign:'left',marginLeft:10}} >Confirm</Text>
style={[styles.confirmBtnStyle,this.props.confirmBtnStyle]} >{this.state.confirmBtnText}</Text>
</TouchableOpacity>
<Text style={[styles.pickerName,this.props.pickerNameStyle]}>{this.props.pickerName}</Text>
<TouchableOpacity style={styles.cancel} >
<Text
className={"cancel"}
style={{textAlign:'right',marginRight:10}}
onPress={() => {this._cancelChose()
}}
>Cancel</Text>
onPress={() => {this._cancelChose()}}
style={[styles.cancelBtnStyle,this.props.cancelBtnStyle]}
>{this.state.cancelBtnText}</Text>
</TouchableOpacity>
</View>
<View style={[styles.pickContainer, this.state.selfStyle]} >
<View style={[styles.pickContainer]} >
{this.state.passData.map((item,index) =>{
return(
<CPicker
key = {index}
className = {"test"+index}
style = {{flex:1}}
itemStyle = {{flex:1}}
selectIndex = {this.state.selectIndex[index]}
selectedValue = {this.state.selectedValue[index]}
pickerStyle = {{flex:1}}
Expand All @@ -251,15 +255,19 @@ class CPickerroll extends Component {
</Animated.View>
</View>
</Modal>
<View style={[styles.outerInput,this.props.inputStyle]}>
<TextInput
underlineColorAndroid={'transparent'}
editable = {this.state.enable}
style = {[styles.textInput,this.props.inputStyle]}
style = {[styles.textInput,this.props.textStyle]}
ref = 'test'
multiline={ true }
onFocus={() => { this._setEventBegin()}}
placeholder={this.state.inputValue}
value={this.state.inputValue}
/>
/><TouchableOpacity style={styles.iconOuter}onPress={() => { this._setEventBegin()}}>
<Icon style={styles.container2Icon} name="sort-desc" color="grey" size={20}/>
</TouchableOpacity>
</View>
</View>

);
Expand All @@ -268,54 +276,7 @@ class CPickerroll extends Component {



let styles = StyleSheet.create({

container: {
justifyContent: 'center',
alignItems: 'center',
},
nav: {
flex: 1,
marginTop:10,
flexDirection: 'row',
height: 28,
alignSelf: 'stretch',
backgroundColor:'white',
},
confirm: {
flex:1,
},
cancel: {
flex:1,

},
pickContainer:{
flex:1,
justifyContent: 'center',
alignSelf:'stretch',
flexDirection:'row',
},
modalcontainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
innerContainer: {
flex:1,
alignItems: 'center',
justifyContent: 'flex-end',
flexDirection: 'column',
},
textInput:{
padding:10,
borderBottomWidth:1,
borderBottomColor: 'grey',
height: 40,
}


});


export default CPickerroll;
4 changes: 2 additions & 2 deletions app/roll2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ class CPickroll extends Component {
let selectedIndex = props.selectIndex;
let items = [];
let pickerStyle = props.pickerStyle;
let itemStyle = props.itemStyle;
let itemStyle = props.itemAndroidStyle;
let onValueChange = props.onValueChange;
props.data.map((child,index) =>{
child === props.selectedValue && ( selectedIndex = index );
Expand Down Expand Up @@ -172,7 +172,7 @@ class CPickroll extends Component {

return (

<View style={[styles.container, this.state.pickerStyle]} {...this._panResponder.panHandlers}>
<View style={[styles.container, this.state.pickerStyle,{flex:1}]} {...this._panResponder.panHandlers}>

<View style={styles.up}>
<View style={[styles.upView, upViewStyle]} ref={(up) => { this.up = up }} >
Expand Down
78 changes: 16 additions & 62 deletions app/setup3.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { Component,PropTypes } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import {
View,
Text,
Expand All @@ -16,6 +17,7 @@ import {


import Pickroll from './roll';
import styles from './style';

let PickRoll = Platform.OS === 'ios' ? PickerIOS : Pickroll;
let PickerItem = PickRoll.Item;
Expand Down Expand Up @@ -57,10 +59,7 @@ class TMPicker extends Component {
selectedValue.push(Object.keys(item)[selectIndex[index]]);
})
}
let selfStyle = props.selfStyle;
let inputStyle = props.inputStyle;
let confirmBtnStyle = props.confirmBtnStyle;
let cancelBtnStyle = props.cancelBtnStyle;

let animationType = props.animationType||'none';
let transparent = typeof props.transparent==='undefined'?true:props.transparent;
let visible = typeof props.visible==='undefined'?false:props.visible;
Expand All @@ -69,19 +68,15 @@ class TMPicker extends Component {
let confirmBtnText = props.confirmBtnText || '确定';
let cancelBtnText = props.cancelBtnText || '取消';
return {
selfStyle,
visible,
transparent,
animationType,
enable,
inputValue,
selectIndex,
selectedValue,
inputStyle,
confirmBtnText,
cancelBtnText,
confirmBtnStyle,
cancelBtnStyle,
};
}
_confirmChose(){
Expand Down Expand Up @@ -147,7 +142,7 @@ class TMPicker extends Component {
backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff',
};
let innerContainerTransparentStyle = this.state.transparent
? {backgroundColor: '#fff'}
? {backgroundColor: '#fff',padding:20}
: null;
return (
<View style={styles.container}>
Expand All @@ -157,17 +152,18 @@ class TMPicker extends Component {
visible={this.state.visible}
onRequestClose={() => {this._setModalVisible(false)}}
>
<View style={[styles.modalContainer, modalBackgroundStyle]}>
<Animated.View style={[styles.innerContainer, innerContainerTransparentStyle, this.state.selfStyle,{marginTop:this.state.animatedHeight}]}>
<View style={[styles.modalContainer]}>
<Animated.View style={[styles.innerContainer]}>
< View style={styles.nav}>
<TouchableOpacity style={styles.confirm}>
<Text className={"confirm"} onPress={() => {this._confirmChose()}}
style={[{textAlign:'left',marginLeft:10},this.state.confirmBtnStyle]} >{this.state.confirmBtnText}</Text>
style={[{textAlign:'left',marginLeft:10},this.props.confirmBtnStyle]} >{this.state.confirmBtnText}</Text>
</TouchableOpacity>
<Text style={[styles.pickerName,this.props.pickerNameStyle]}>{this.props.pickerName}</Text>
<TouchableOpacity style={styles.cancel} >
<Text
className={"cancel"}
style={[{textAlign:'right',marginRight:10},this.state.cancelBtnStyle]}
style={[{textAlign:'right',marginRight:10},this.props.cancelBtnStyle]}
onPress={() => {this._setModalVisible(false,'cancel')
}}
>{this.state.cancelBtnText}</Text>
Expand Down Expand Up @@ -208,63 +204,21 @@ class TMPicker extends Component {
</Animated.View>
</View>
</Modal>
<View style={[styles.outerInput,this.props.inputStyle]}>
<TextInput
underlineColorAndroid={'transparent'}
editable = {this.state.enable}
multiline={ true }
style = {[styles.textInput,this.props.inputStyle]}
style = {[styles.textInput,this.props.textStyle]}
ref = 'test'
onFocus={() => { this._setEventBegin()}}
placeholder={this.state.inputValue}
value={this.state.inputValue}
/>
/><TouchableOpacity style={styles.iconOuter}onPress={() => { this._setEventBegin()}}>
<Icon style={styles.container2Icon} name="sort-desc" color="grey" size={20}/>
</TouchableOpacity>
</View>
</View>
);
}}


let styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
},
nav: {
flex: 1,
marginTop:10,
flexDirection: 'row',
height: 28,
alignSelf: 'stretch',
backgroundColor:'white',
},
confirm: {
flex:1,
},
cancel: {
flex:1,
},
pickContainer:{
flex:1,
justifyContent: 'center',
alignSelf:'stretch',
flexDirection:'row',
},
modalContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
innerContainer: {
flex:1,
alignItems: 'center',
justifyContent: 'flex-end',
flexDirection: 'column',
},
textInput:{
padding:10,
borderBottomWidth:1,
borderBottomColor: 'grey',
height: 40,
}
});

export default TMPicker;
Loading

0 comments on commit 5f3f260

Please sign in to comment.