Skip to content

Commit ce8b28a

Browse files
ruoruruoru
ruoru
authored and
ruoru
committed
issue #218 
1 parent f8b12cd commit ce8b28a

File tree

3 files changed

+70
-64
lines changed

3 files changed

+70
-64
lines changed

‎src/components/picker/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import Picker from './picker';
2-
import PickerGroup from './picker_group';
2+
import PickerColumn from './picker_column';
33
import CityPicker from './city_picker';
44

55
export {
66
Picker,
7-
PickerGroup,
7+
PickerColumn,
88
CityPicker
99
};

‎src/components/picker/picker.js‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import PickerGroup from './picker_group';
3+
import PickerColumn from './picker_column';
44
import classNames from '../../utils/classnames';
55
import Mask from '../mask';
66
/**
@@ -60,27 +60,28 @@ class Picker extends Component {
6060

6161
constructor(props){
6262
super(props);
63+
const { defaultSelect, groups, actions, lang, onCancel } = props;
6364

6465
this.state = {
65-
selected: this.props.defaultSelect ? this.props.defaultSelect : Array(this.props.groups.length).fill(-1),
66-
actions: this.props.actions.length > 0 ? this.props.actions : [{
67-
label: this.props.lang.leftBtn,
68-
onClick: e=>this.handleClose( ()=> {if (this.props.onCancel) this.props.onCancel(e);} )
66+
selected: defaultSelect ? defaultSelect : Array(groups.length).fill(-1),
67+
actions: actions.length > 0 ? actions : [{
68+
label: lang.leftBtn,
69+
onClick: e=>this.handleLeft( () => {if (onCancel) onCancel(e);} )
6970
},
7071
{
71-
label: this.props.lang.rightBtn,
72-
onClick: e=>this.handleChanges()
72+
label: lang.rightBtn,
73+
onClick: e=>this.handleRight()
7374
}],
7475
closing: false
7576
};
7677

77-
this.handleChanges = this.handleChanges.bind(this);
78+
this.handleRight = this.handleRight.bind(this);
7879
this.handleChange = this.handleChange.bind(this);
79-
this.handleClose = this.handleClose.bind(this);
80+
this.handleLeft = this.handleLeft.bind(this);
8081
}
8182

82-
handleChanges(){
83-
this.handleClose( ()=> { if (this.props.onChange) this.props.onChange(this.state.selected, this); } );
83+
handleRight(){
84+
this.handleLeft( ()=> { if (this.props.onChange) this.props.onChange(this.state.selected, this); } );
8485
}
8586

8687
handleChange(item, i, groupIndex){
@@ -92,7 +93,7 @@ class Picker extends Component {
9293
});
9394
}
9495

95-
handleClose(cb){
96+
handleLeft(cb){
9697
this.setState({
9798
closing: true
9899
}, ()=> setTimeout( ()=> {
@@ -116,7 +117,7 @@ class Picker extends Component {
116117

117118
renderGroups(){
118119
return this.props.groups.map( (group, i) => {
119-
return <PickerGroup key={i} {...group} onChange={this.handleChange} groupIndex={i} defaultIndex={this.state.selected[i]} />;
120+
return <PickerColumn key={i} {...group} onChange={this.handleChange} groupIndex={i} defaultIndex={this.state.selected[i]} />;
120121
});
121122
}
122123

@@ -134,7 +135,7 @@ class Picker extends Component {
134135

135136
return this.props.show ? (
136137
<div>
137-
<Mask className={maskCls} onClick={e=>this.handleClose( ()=> {if (this.props.onCancel) this.props.onCancel(e);} )} />
138+
<Mask className={maskCls} onClick={e=>this.handleLeft( ()=> {if (this.props.onCancel) this.props.onCancel(e);} )} />
138139
<div className={cls} {...others}>
139140
{ this.renderActions() }
140141
<div className="weui-picker__bd">

‎src/components/picker/picker_group.js‎ renamed to ‎src/components/picker/picker_column.js‎

Lines changed: 53 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from '../../utils/classnames';
44

5-
class PickerGroup extends Component {
5+
class PickerColumn extends Component {
66
static propTypes = {
77
height: PropTypes.number,
88
itemHeight: PropTypes.number,
@@ -31,14 +31,22 @@ class PickerGroup extends Component {
3131
super(props);
3232

3333
this.state = {
34-
touching: false,
35-
ogY: 0,
36-
ogTranslate: 0,
37-
touchId: undefined,
38-
translate: 0,
39-
totalHeight: 0,
40-
selected: 0,
41-
animating: this.props.animation
34+
translate : 0,
35+
selectedIndex : 0,
36+
animating : props.animation,
37+
touching : false,
38+
ogY : 0,
39+
ogTranslate : 0,
40+
touchId : undefined,
41+
totalHeight : 0,
42+
};
43+
44+
this.cache = {
45+
touching : false,
46+
ogY : 0,
47+
ogTranslate : 0,
48+
touchId : undefined,
49+
totalHeight : 0,
4250
};
4351

4452
this.handleTouchStart = this.handleTouchStart.bind(this);
@@ -55,58 +63,55 @@ class PickerGroup extends Component {
5563
this.adjustPosition(nextProps);
5664
}
5765

58-
adjustPosition(props){
59-
const { items, itemHeight, indicatorTop, defaultIndex } = props;
66+
adjustPosition(props) {
67+
const { items, defaultIndex, itemHeight, indicatorTop, indicatorHeight } = props;
6068
const totalHeight = items.length * itemHeight;
61-
let translate = totalHeight <= indicatorTop ? indicatorTop : 0;
69+
let { translate } = this.state;
6270

6371
if (defaultIndex > -1) {
64-
if (translate === 0){
65-
let upperCount = Math.floor(indicatorTop / itemHeight);
66-
if ( defaultIndex > upperCount ){
67-
//over
68-
let overCount = defaultIndex - upperCount;
69-
translate -= overCount * itemHeight;
70-
} else if ( defaultIndex === upperCount){
71-
translate = 0;
72-
} else {
73-
//less
74-
translate += ( Math.abs(upperCount - defaultIndex) * itemHeight);
75-
}
76-
//if(props.groupIndex == 2) console.log(defaultIndex,translate, upperCount)
77-
} else {
78-
//total item less than indicator height
79-
translate -= itemHeight * defaultIndex;
80-
}
72+
translate = indicatorTop - itemHeight * defaultIndex;
8173
}
8274

83-
this.setState({ selected: defaultIndex, ogTranslate: translate, totalHeight, translate,
84-
}, () => defaultIndex > -1 ? this.updateSelected(false) : this.updateSelected() );
75+
this.setState({
76+
selectedIndex : defaultIndex,
77+
ogTranslate : translate,
78+
totalHeight,
79+
translate,
80+
}, () => {if (defaultIndex <= -1) this.updateSelected()});
8581
}
8682

87-
updateSelected(propagate = true){
88-
const { items, itemHeight, indicatorTop, indicatorHeight, onChange, groupIndex } = this.props;
89-
let selected = 0;
90-
items.forEach( (item, i) => {
91-
//console.log(i, this.state.translate, (this.state.translate + (itemHeight * i)), indicatorTop, this.state.translate + (itemHeight * i) + itemHeight , indicatorTop + indicatorHeight)
92-
if ( !item.disabled && (this.state.translate + (itemHeight * i)) >= indicatorTop &&
93-
( this.state.translate + (itemHeight * i) + itemHeight ) <= indicatorTop + indicatorHeight ){
94-
selected = i;
83+
adjustSelectedIndex() {
84+
const { items, itemHeight, indicatorTop, indicatorHeight } = this.props;
85+
const { translate } = this.state;
86+
let selectedIndex = 0;
87+
88+
for (let i = 0; i < items.length; i++) {
89+
if (!items[i].disabled && (itemHeight * i + translate) >= indicatorTop
90+
&& ((i + 1) * itemHeight + translate) <= indicatorTop + indicatorHeight){
91+
selectedIndex = i;
92+
break;
9593
}
96-
});
94+
}
9795

98-
if (onChange && propagate) onChange(items[selected], selected, groupIndex);
96+
return selectedIndex;
97+
}
98+
99+
updateSelected() {
100+
const { items, onChange, groupIndex } = this.props
101+
const selectedIndex = this.adjustSelectedIndex()
102+
if (onChange) {
103+
onChange(items[selectedIndex], selectedIndex, groupIndex);
104+
}
99105
}
100106

101107
handleTouchStart(e){
102108
if (this.state.touching || this.props.items.length <= 1) return;
103-
104109
this.setState({
105-
touching: true,
106-
ogTranslate: this.state.translate,
107-
touchId: e.targetTouches[0].identifier,
108-
ogY: this.state.translate === 0 ? e.targetTouches[0].pageY : e.targetTouches[0].pageY - this.state.translate,
109-
animating: false
110+
touching : true,
111+
ogTranslate : this.state.translate,
112+
touchId : e.targetTouches[0].identifier,
113+
ogY : e.targetTouches[0].pageY - this.state.translate,
114+
animating : false
110115
});
111116
}
112117

@@ -197,4 +202,4 @@ class PickerGroup extends Component {
197202
}
198203
}
199204

200-
export default PickerGroup;
205+
export default PickerColumn;

0 commit comments

Comments
 (0)