Skip to content

Commit

Permalink
feat(BasicPicker): change to one way data
Browse files Browse the repository at this point in the history
  • Loading branch information
@lulutia
lulutia committed Mar 2, 2017
1 parent 680627c commit ffd94df
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 171 deletions.
89 changes: 30 additions & 59 deletions app/pickerLogic/basicPicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import {
View,
Text,
Dimensions,
TouchableOpacity,
TextInput,
Animated,
Platform,
PickerIOS,
Expand Down Expand Up @@ -86,12 +84,12 @@ class BasicPicker extends Component {
constructor(props, context){
super(props, context);
this._changeAnimateStatus = this._changeAnimateStatus.bind(this);
this._pushOpera = this._pushOpera.bind(this);
this._setEventBegin = this._setEventBegin.bind(this);
this._confirmChose = this._confirmChose.bind(this);
this._setModalVisible = this._setModalVisible.bind(this);

this.state = this._stateFromProps(props);
this.state = {};
this.state.visible = props.visible;
this.state.animatedHeight = new Animated.Value(height);
}

Expand All @@ -103,77 +101,47 @@ class BasicPicker extends Component {
this._setEventBegin();
}
}
/**
* 状态初始化
* @param props {object} 继承的属性
* @returns {{visible: bool, animationType: string, enable: bool, inputValue: string, selectIndex: Array, selectedValue: Array, confirmBtnText: string, cancelBtnText: string}}
* @private
*/
_stateFromProps(props){

_calculateSelecteValue() {
let selectIndex = [];
let selectedValue = [];
if (typeof props.selectIndex === 'undefined'){
for (let item of props.data){
if (!this.props.selectIndex){
for (let item of this.props.data){
selectIndex.push(0);
selectedValue.push(Object.keys(item)[0]);
}
} else {
selectIndex = props.selectIndex;
props.data.map((item,index) =>{
selectIndex = this.props.selectIndex.slice();
this.props.data.map((item,index) =>{
selectedValue.push(Object.keys(item)[selectIndex[index]]);
});
}
const {
visible,
inputValue
} = props;

return {
visible,
inputValue,
selectIndex,
selectedValue,
};
return {selectIndex: selectIndex, selectedValue: selectedValue};
}

/**
* 确定操作
* @returns {string} 选择的数据
* @private
*/
_confirmChose(){
this.props.data.map((item,index) =>{
this.str = this.str + this.props.data[index][this.state.selectedValue[index]].name;
this.str = this.str + this.props.data[index][this.select.selectedValue[index]].name;
});
this. _setModalVisible(false,'confirm');
return this.str;
}

/**
* 数组操作
* @param from {array} 拷贝的数组
* @param to {array} 待拷贝的数组
* @private
*/
_pushOpera(from,to){
to.length = 0;
for (let item of from){
to.push(item);
}
}

/**
* 行为触发(整个操作的开始
* @returns {*}
* @private
*/
_setEventBegin(){
this.hack = false;
if (this.props.enable){
this._setModalVisible(true);
this._pushOpera(this.state.selectIndex, this.indexCount);
this._pushOpera(this.state.selectedValue,this.valueCount);
this.str = '';
return {valueCount: this.valueCount, indexCount:this.indexCount};
return {valueCount: this.select.selectIndex, indexCount:this.select.selectedValue};
} else {
this.state.visible = false;
return 'it is disabled';
Expand Down Expand Up @@ -209,13 +177,13 @@ class BasicPicker extends Component {
* @private
*/
_changeAnimateStatus(type){
if (type === 'confirm'){this.setState({visible:false,inputValue: this.str});
if (type === 'confirm'){
if (this.props.onResult){
this.props.onResult(this.str);
}}
this.props.onResult(this.str, this.select.selectIndex, this.select.selectedValue);
}
this.setState({visible:false});
}
else if (type === 'cancel'){
this._pushOpera(this.indexCount, this.state.selectIndex);
this._pushOpera(this.valueCount, this.state.selectedValue);
this.setState({visible:false});
}
}
Expand All @@ -225,9 +193,10 @@ class BasicPicker extends Component {
* @returns {XML}
*/
render(){
console.debug('sasdqwqwqwdqw-------');
console.debug(this.state.selectedValue);

if (!this.hack) {
this.select = this._calculateSelecteValue();
this.hack = false;
}
return (
<View style={styles.container}>
<Modal
Expand Down Expand Up @@ -257,15 +226,18 @@ class BasicPicker extends Component {
key = {index}
style = {{flex:1}}
className = {'test' + index}
selectIndex = {this.state.selectIndex[index]}
selectedValue={this.state.selectedValue[index]}
selectIndex = {this.select.selectIndex[index]}
selectedValue={this.select.selectedValue[index]}
pickerStyle = {{flex:1}}
data = {this.props.data[index]}
itemCount = {this.props.data.length}
onValueChange={(newValue,newIndex) => {
this.state.selectIndex.splice(index,1,newIndex);
this.state.selectedValue.splice(index,1,newValue);
this.setState({selectIndex:this.state.selectIndex,selectedValue:this.state.selectedValue});
this.select.selectIndex.splice(index,1,newIndex);
this.select.selectedValue.splice(index,1,newValue);
if (Platform.OS === 'ios') {
this.hack = true;
this.forceUpdate();
}
}}
>{
Platform.OS === 'ios' && (
Expand All @@ -292,8 +264,7 @@ class BasicPicker extends Component {
onPress={this._setEventBegin}
iconStyle={this.props.iconStyle}
enable={this.props.enable}
placeholder={this.state.inputValue}
value={this.state.inputValue}/>
placeholder={this.props.inputValue}/>
</View>
);
}}
Expand Down
87 changes: 33 additions & 54 deletions app/pickerLogic/basicRoll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ class Pickroll extends Component {
*/
constructor(props, context){
super(props, context);
this.state = this._stateFromProps(props);
}

/**
Expand All @@ -50,32 +49,13 @@ class Pickroll extends Component {
* @returns {{selectedIndex: number, items: Array, pickerStyle:View.propTypes.style, itemStyle:View.propTypes.style, onValueChange: func}}
* @private
*/
_stateFromProps(props){
let selectedIndex = props.selectIndex;
let items = [];
let pickerStyle = props.pickerStyle;
let itemStyle = props.itemStyle;
let onValueChange = props.onValueChange;
Object.keys(props.data).map((child,index) =>{
child === props.selectedValue && (selectedIndex = index);
items.push({value: child, label: props.data[child].name});
});
this.moveDy = 0;
this.fingerLeft = false;
return {
selectedIndex,
items,
pickerStyle,
itemStyle,
onValueChange
};
}


/**
* 组件需要渲染前,对手势事件处理进行初始化
*/
componentWillMount(){
this.initIndex = this.state.selectedIndex + 2;
this.initIndex = this.props.selectIndex + 2;
this.index = 2;
}

Expand Down Expand Up @@ -117,11 +97,10 @@ class Pickroll extends Component {
let middleItems = [];
let total = new Animated.Value(this.moveDy);
items.forEach((item, index) => {
middleItems[index + 2] = <Animated.Text
key={'mid' + (index + 2)}
middleItems[index + 2] = <View style={rollStyles.textContainer} key={'mid' + (index + 2)}><Animated.Text
className={'mid' + (index + 2)}
onPress={() => {this._moveTo(index + 2);}}
style={[rollStyles.middleText, this.state.itemStyle,
style={[rollStyles.middleText, this.props.itemStyle,
{
// todo: when add fontSize, the shaking is too obvious
// fontSize:
Expand All @@ -134,29 +113,16 @@ class Pickroll extends Component {
outputRange: [0.4, 1.0, 0.4]})
}
]}>{item.label}
</Animated.Text>;
</Animated.Text></View>;
});

let aroundItemArray = [0, 1, items.length + 2, items.length + 1 + 2];
aroundItemArray.forEach((item, index) => {
middleItems[item] = <View style={rollStyles.textContainer} key={'mid' + item}><Text
className={'mid' + item}
style={[rollStyles.middleText, this.props.itemStyle]} /></View>;
});

// todo 优化
middleItems[0] = <Text
key={'mid' + 0}
className={'mid' + 0}
style={[rollStyles.middleText, this.state.itemStyle]} />;

middleItems[1] = <Text
key={'mid' + 1}
className={'mid' + 1}
style={[rollStyles.middleText, this.state.itemStyle]} />;

middleItems[items.length + 2] = <Text
key={'mid' + items.length + 2}
className={'mid' + items.length + 2}
style={[rollStyles.middleText, this.state.itemStyle]} />;

middleItems[items.length + 1 + 2] = <Text
key={'mid' + items.length + 1 + 2}
className={'mid' + items.length + 1 + 2}
style={[rollStyles.middleText, this.state.itemStyle]} />;
return middleItems;
}

Expand All @@ -166,10 +132,8 @@ class Pickroll extends Component {
* @private
*/
_onValueChange(){
console.debug(this.index);
console.debug(this.state.items[this.index - 2]);
var curItem = this.state.items[this.index - 2];
this.state.onValueChange && this.state.onValueChange(curItem.value, this.index - 2);
var curItem = this.items[this.index - 2];
this.props.onValueChange && this.props.onValueChange(curItem.value, this.index - 2);
}

/**
Expand Down Expand Up @@ -219,14 +183,26 @@ class Pickroll extends Component {
this._calculateItemroll('scroll');
}

_handleData() {
this.items = [];
Object.keys(this.props.data).map((child,index) =>{
child === this.props.selectedValue && (this.selectedIndex = index);
this.items.push({value: child, label: this.props.data[child].name});
});
this.moveDy = 0;
this.fingerLeft = false;
}

/**
* 渲染函数
* @returns {XML}
*/
render(){
let index = this.state.selectedIndex;
let length = this.state.items.length;

if (!this.hack) {
this._handleData();
this.hack = false;
}

return (
<View style={{flex: 1}}>
Expand All @@ -239,9 +215,12 @@ class Pickroll extends Component {
onMomentumScrollEnd={(event) => {this._detectScrollEnd(event);}}
pagingEnabled
onScrollEndDrag={(event) => {this._detectEnd(event);}}
onScroll={(event) => {this.moveDy = event.nativeEvent.contentOffset.y; this.forceUpdate();}}>
onScroll={(event) => {
this.moveDy = event.nativeEvent.contentOffset.y;
this.hack = true;
this.forceUpdate();}}>
<View style={[rollStyles.middleView]}>
{this._renderItems(this.state.items)}
{this._renderItems(this.items)}
</View>
</ScrollView>
</View>
Expand Down
32 changes: 9 additions & 23 deletions app/pickerLogic/cascadeRoll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,11 +155,10 @@ class Pickroll extends Component {
let middleItems = [];
let total = new Animated.Value(this.moveDy);
items.forEach((item, index) => {
middleItems[index + 2] = <Animated.Text
key={'mid' + (index + 2)}
middleItems[index + 2] = <View style={rollStyles.textContainer} key={'mid' + (index + 2)}><Animated.Text
className={'mid' + (index + 2)}
onPress={() => {this._moveTo(index + 2);}}
style={[rollStyles.middleText, this.state.itemStyle,
style={[rollStyles.middleText, this.props.itemStyle,
{
// todo: when add fontSize, the shaking is too obvious
// fontSize:
Expand All @@ -172,29 +171,16 @@ class Pickroll extends Component {
outputRange: [0.4, 1.0, 0.4]})
}
]}>{item.label}
</Animated.Text>;
</Animated.Text></View>;
});

// todo 优化
middleItems[0] = <Text
key={'mid' + 0}
className={'mid' + 0}
style={[rollStyles.middleText, this.state.itemStyle]} />;

middleItems[1] = <Text
key={'mid' + 1}
className={'mid' + 1}
style={[rollStyles.middleText, this.state.itemStyle]} />;

middleItems[items.length + 2] = <Text
key={'mid' + items.length + 2}
className={'mid' + items.length + 2}
style={[rollStyles.middleText, this.state.itemStyle]} />;
let aroundItemArray = [0, 1, items.length + 2, items.length + 1 + 2];
aroundItemArray.forEach((item, index) => {
middleItems[item] = <View style={rollStyles.textContainer} key={'mid' + item}><Text
className={'mid' + item}
style={[rollStyles.middleText, this.props.itemStyle]} /></View>;
});

middleItems[items.length + 1 + 2] = <Text
key={'mid' + items.length + 1 + 2}
className={'mid' + items.length + 1 + 2}
style={[rollStyles.middleText, this.state.itemStyle]} />;
return middleItems;
}

Expand Down
Loading

0 comments on commit ffd94df

Please sign in to comment.