Skip to content

Commit

Permalink
feat(basic picker): change the realize of wheel
Browse files Browse the repository at this point in the history
  • Loading branch information
@lulutia
lulutia committed Oct 13, 2016
1 parent a801fce commit fdca711
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 111 deletions.
107 changes: 43 additions & 64 deletions app/roll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import React, { Component, PropTypes } from 'react';
import {
View,
Text,
PanResponder
PanResponder,
Animated
} from 'react-native';
import {rollStyles} from './style';

Expand Down Expand Up @@ -43,6 +44,8 @@ class Pickroll extends Component {
constructor(props, context){
super(props, context);
this.state = this._stateFromProps(props);
this.init = true;
this.moveDy = 0;
}

/**
Expand Down Expand Up @@ -77,22 +80,13 @@ class Pickroll extends Component {
*/
_move(dy){
let index = this.index;
this.middleHeight = Math.abs(-index * 40 + dy);
this.up && this.up.setNativeProps({
style: {
marginTop: (3 - index) * 30 + dy * 0.75
}
});
this.moveDy = dy;
this.middle && this.middle.setNativeProps({
style: {
marginTop: -index * 40 + dy
}
});
this.down && this.down.setNativeProps({
style: {
marginTop: (-index - 1) * 30 + dy * 0.75
top: - 36 * index + 72 + dy
}
});
this.forceUpdate();
}

/**
Expand All @@ -106,7 +100,7 @@ class Pickroll extends Component {
let diff = _index - index;
let marginValue;
if (diff && !this.isMoving) {
marginValue = diff * 40;
marginValue = diff * 36;
this._move(marginValue);
this.index = index;
this._onValueChange();
Expand All @@ -127,9 +121,9 @@ class Pickroll extends Component {
}

if (dy > 0) {
this._move(dy > this.index * 40 ? this.index * 40 : dy);
this._move(dy > this.index * 36 ? this.index * 36 : dy);
} else {
this._move(dy < (this.index - this.state.items.length + 1) * 40 ? (this.index - this.state.items.length + 1) * 40 : dy);
this._move(dy < (this.index - this.state.items.length + 1) * 36 ? (this.index - this.state.items.length + 1) * 36 : dy);
}
}

Expand All @@ -140,9 +134,15 @@ class Pickroll extends Component {
* @private
*/
_handlePanResponderRelease(evt, gestureState){
let middleHeight = this.middleHeight;
this.index = middleHeight % 40 >= 20 ? Math.ceil(middleHeight / 40) : Math.floor(middleHeight / 40);
this._move(0);
let diff;
diff = Math.abs(this.moveDy) % 36 >= 18 ? Math.ceil(Math.abs(this.moveDy / 36)) : Math.floor(Math.abs(this.moveDy / 36));
if (this.moveDy >= 0) {this.index = this.index - diff} else {this.index = this.index + diff;}
this.middle && this.middle.setNativeProps({
style: {
top: - 36 * this.index + 72
}
});
this.moveDy = 0;
this._onValueChange();
}

Expand All @@ -151,46 +151,41 @@ class Pickroll extends Component {
*/
componentWillMount(){
this._panResponder = PanResponder.create({
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder.bind(this),
onMoveShouldSetPanResponder: this._handleStartShouldSetPanResponder.bind(this),
onPanResponderGrant: this._handlePanResponderGrant.bind(this),
onPanResponderRelease: this._handlePanResponderRelease.bind(this),
onPanResponderMove: this._handlePanResponderMove.bind(this)
});
this.isMoving = false;
this.index = this.state.selectedIndex;
}

_handleStartShouldSetPanResponder(e, gestureState){
return true;
}

_handlePanResponderGrant(){
console.debug('Start to move');
}
/**
* 对单轮的每个格子进行初始化
* @param items {array} 需要渲染的总的数据
* @returns {{upItems: Array, middleItems: Array, downItems: Array}}
* @private
*/
_renderItems(items){
_renderItems(items, init){
let upItems = [], middleItems = [], downItems = [];
items.forEach((item, index) => {
upItems[index] = <Text
key={'up' + index}
className={'up' + index}
style={[rollStyles.upText, this.state.itemStyle]}
onPress={() => {this._moveTo(index);}} >
{item.label}
</Text>;

console.debug((1- Math.abs((index - this.index)*36 + this.moveDy)/36 * 0.05) * 22);
middleItems[index] = <Text
key={'mid' + index}
className={'mid' + index}
style={[rollStyles.middleText, this.state.itemStyle]}>{item.label}
</Text>;
downItems[index] = <Text
key={'down' + index}
className={'down' + index}
style={[rollStyles.downText, this.state.itemStyle]}
onPress={() => {this._moveTo(index);}} >
{item.label}
style={[rollStyles.middleText, this.state.itemStyle, {fontSize: (1- Math.abs((index - this.index)*36 + this.moveDy)/36 * 0.07) * 22, opacity: 1- Math.abs((index - this.index)*36 + this.moveDy)/36 * 0.4}]}>{item.label}
</Text>;
});
return { upItems, middleItems, downItems };

return middleItems;
}

/**
Expand All @@ -209,40 +204,24 @@ class Pickroll extends Component {
* @returns {XML}
*/
render(){

let index = this.state.selectedIndex;
let length = this.state.items.length;
let items = this._renderItems(this.state.items);

let upViewStyle = {
marginTop: (3 - index) * 30,
height: length * 30
};
this.init = false;
let middleViewStyle = {
marginTop: -index * 40
};
let downViewStyle = {
marginTop: (-index - 1) * 30,
height: length * 30
position: 'absolute',
top: - 36 * index + 72
};

return (

<View style={[rollStyles.container, this.state.pickerStyle]} {...this._panResponder.panHandlers}>
<View style={rollStyles.up}>
<View style={[rollStyles.upView, upViewStyle]} ref={(up) => { this.up = up }} >
{ items.upItems }
</View>
</View>
<View style={rollStyles.middle}>
<View style={[{flex: 1}]}>
<View style={{position: 'absolute', width: 400, height: 46, borderTopWidth: 1, borderBottomWidth: 1, borderColor: '#ccc', marginTop: 63}}></View>
<View style={[rollStyles.container, this.state.pickerStyle]} {...this._panResponder.panHandlers} >
<View style={[rollStyles.middleView, middleViewStyle]} ref={(middle) => { this.middle = middle }} >
{ items.middleItems }
</View>
</View>
<View style={rollStyles.down}>
<View style={[rollStyles.downView, downViewStyle]} ref={(down) => { this.down = down }} >
{ items.downItems }
{ this._renderItems(this.state.items) }
</View>
</View>
</View>
</View>
);
}
Expand Down
7 changes: 6 additions & 1 deletion app/setup3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Animated,
Platform,
PickerIOS,
StatusBar,
Modal,
Image,
} from 'react-native';
Expand Down Expand Up @@ -86,6 +87,9 @@ class TMPicker extends Component {
this.state.animatedHeight = new Animated.Value(height);
}

componentDidMount() {
this._setEventBegin();
}
/**
* 状态初始化
* @param props {object} 继承的属性
Expand Down Expand Up @@ -179,7 +183,7 @@ class TMPicker extends Component {
this.setState({visible: visible});
Animated.timing(
this.state.animatedHeight,
{toValue: height-250}
{toValue: height-StatusBar.currentHeight-220}
).start();
}else{
Animated.timing(
Expand Down Expand Up @@ -213,6 +217,7 @@ class TMPicker extends Component {
* @returns {XML}
*/
render(){
console.debug(StatusBar.currentHeight);
return (
<View style={styles.container}>
<Modal
Expand Down
19 changes: 9 additions & 10 deletions app/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,7 @@ let styles = StyleSheet.create({
},
innerContainer: {
position:'absolute',
top: height-250,
height:250,
height:220,
width:width,
backgroundColor:'white',
},
Expand Down Expand Up @@ -87,7 +86,9 @@ let rollStyles = StyleSheet.create({
container: {
flex:1,
justifyContent: 'center',
alignItems: 'center'
alignItems: 'center',
flexDirection: 'row',
backgroundColor: 'rgba(255,255,255,0)'
},
up: {
height: 90,
Expand All @@ -110,25 +111,23 @@ let rollStyles = StyleSheet.create({
},
middle: {
alignSelf:'stretch',
height: 40,
overflow: 'hidden',
borderColor: '#aaa',
borderTopWidth: 1 / ratio,
borderBottomWidth: 1 / ratio
},
middleView: {
height: 40,
justifyContent: 'flex-start',
alignItems: 'center'
},
middleText: {
paddingTop: 0,
height: 40,
height: 36,
paddingTop: 8,
paddingBottom: 8,
color: '#000',
fontSize: 28,
fontSize: 20,
paddingBottom: 0,
marginTop: 0,
marginBottom: 0
marginBottom: 0,
},
down: {
height: 90,
Expand Down
38 changes: 2 additions & 36 deletions index.android.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,48 +172,14 @@ class TpickerEx extends Component {
return (
<View style={testStyle.container}>
<Text style={{margin:10}}>{this.state.str}</Text>
<Cpicker
pickerNameStyle = {{color:'red'}}
cancelBtnStyle = {{color:'blue'}}
pickerName = {'just a test'}
inputValue={'4 level picker'}
level = {4}
selectIndex = {[0,1,1,0]}
data = {level4Data}
onResult = {(str)=>{
this.setState({str:str});
}}
/>
<Cpicker
inputValue={'3 level picker'}
level = {3}
selectIndex = {[0,1,0]}
data = {level3Data}
visible = {false}
/>
<Cpicker
inputValue={'2 level picker'}
level = {2}
selectIndex = {[0,1]}
data = {level2Data}
visible = {false}
/>
<Test3
inputValue ={'3 wheel picker'}
inputStyle = {testStyle.textInput}
confirmBtnText = {'confirm'}
cancelBtnText = {'cancel'}
data = {wheel3}
selectIndex = {[0,2,1]}
visible = {false}
/>

<Test3
inputValue ={'2 wheel picker'}
inputStyle = {testStyle.textInput}
confirmBtnText = {'confirm'}
cancelBtnText = {'cancel'}
data = {wheel2}
selectIndex = {[0,2]}
selectIndex = {[0,1]}
onResult ={(str) => {this.setState({str1:str});}}
visible = {false}
/>
Expand Down

0 comments on commit fdca711

Please sign in to comment.