Skip to content

Commit

Permalink
Merge ce8b28a into f8b12cd
Browse files Browse the repository at this point in the history
  • Loading branch information
@ruoru
ruoru committed Jan 16, 2018
2 parents f8b12cd + ce8b28a commit 4abf823
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 64 deletions.
4 changes: 2 additions & 2 deletions src/components/picker/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import Picker from './picker';
import PickerGroup from './picker_group';
import PickerColumn from './picker_column';
import CityPicker from './city_picker';

export {
Picker,
PickerGroup,
PickerColumn,
CityPicker
};
29 changes: 15 additions & 14 deletions src/components/picker/picker.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import PickerGroup from './picker_group';
import PickerColumn from './picker_column';
import classNames from '../../utils/classnames';
import Mask from '../mask';
/**
Expand Down Expand Up @@ -60,27 +60,28 @@ class Picker extends Component {

constructor(props){
super(props);
const { defaultSelect, groups, actions, lang, onCancel } = props;

this.state = {
selected: this.props.defaultSelect ? this.props.defaultSelect : Array(this.props.groups.length).fill(-1),
actions: this.props.actions.length > 0 ? this.props.actions : [{
label: this.props.lang.leftBtn,
onClick: e=>this.handleClose( ()=> {if (this.props.onCancel) this.props.onCancel(e);} )
selected: defaultSelect ? defaultSelect : Array(groups.length).fill(-1),
actions: actions.length > 0 ? actions : [{
label: lang.leftBtn,
onClick: e=>this.handleLeft( () => {if (onCancel) onCancel(e);} )
},
{
label: this.props.lang.rightBtn,
onClick: e=>this.handleChanges()
label: lang.rightBtn,
onClick: e=>this.handleRight()
}],
closing: false
};

this.handleChanges = this.handleChanges.bind(this);
this.handleRight = this.handleRight.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleClose = this.handleClose.bind(this);
this.handleLeft = this.handleLeft.bind(this);
}

handleChanges(){
this.handleClose( ()=> { if (this.props.onChange) this.props.onChange(this.state.selected, this); } );
handleRight(){
this.handleLeft( ()=> { if (this.props.onChange) this.props.onChange(this.state.selected, this); } );
}

handleChange(item, i, groupIndex){
Expand All @@ -92,7 +93,7 @@ class Picker extends Component {
});
}

handleClose(cb){
handleLeft(cb){
this.setState({
closing: true
}, ()=> setTimeout( ()=> {
Expand All @@ -116,7 +117,7 @@ class Picker extends Component {

renderGroups(){
return this.props.groups.map( (group, i) => {
return <PickerGroup key={i} {...group} onChange={this.handleChange} groupIndex={i} defaultIndex={this.state.selected[i]} />;
return <PickerColumn key={i} {...group} onChange={this.handleChange} groupIndex={i} defaultIndex={this.state.selected[i]} />;
});
}

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

return this.props.show ? (
<div>
<Mask className={maskCls} onClick={e=>this.handleClose( ()=> {if (this.props.onCancel) this.props.onCancel(e);} )} />
<Mask className={maskCls} onClick={e=>this.handleLeft( ()=> {if (this.props.onCancel) this.props.onCancel(e);} )} />
<div className={cls} {...others}>
{ this.renderActions() }
<div className="weui-picker__bd">
Expand Down
101 changes: 53 additions & 48 deletions src/components/picker/picker_group.js → src/components/picker/picker_column.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../utils/classnames';

class PickerGroup extends Component {
class PickerColumn extends Component {
static propTypes = {
height: PropTypes.number,
itemHeight: PropTypes.number,
Expand Down Expand Up @@ -31,14 +31,22 @@ class PickerGroup extends Component {
super(props);

this.state = {
touching: false,
ogY: 0,
ogTranslate: 0,
touchId: undefined,
translate: 0,
totalHeight: 0,
selected: 0,
animating: this.props.animation
translate : 0,
selectedIndex : 0,
animating : props.animation,
touching : false,
ogY : 0,
ogTranslate : 0,
touchId : undefined,
totalHeight : 0,
};

this.cache = {
touching : false,
ogY : 0,
ogTranslate : 0,
touchId : undefined,
totalHeight : 0,
};

this.handleTouchStart = this.handleTouchStart.bind(this);
Expand All @@ -55,58 +63,55 @@ class PickerGroup extends Component {
this.adjustPosition(nextProps);
}

adjustPosition(props){
const { items, itemHeight, indicatorTop, defaultIndex } = props;
adjustPosition(props) {
const { items, defaultIndex, itemHeight, indicatorTop, indicatorHeight } = props;
const totalHeight = items.length * itemHeight;
let translate = totalHeight <= indicatorTop ? indicatorTop : 0;
let { translate } = this.state;

if (defaultIndex > -1) {
if (translate === 0){
let upperCount = Math.floor(indicatorTop / itemHeight);
if ( defaultIndex > upperCount ){
//over
let overCount = defaultIndex - upperCount;
translate -= overCount * itemHeight;
} else if ( defaultIndex === upperCount){
translate = 0;
} else {
//less
translate += ( Math.abs(upperCount - defaultIndex) * itemHeight);
}
//if(props.groupIndex == 2) console.log(defaultIndex,translate, upperCount)
} else {
//total item less than indicator height
translate -= itemHeight * defaultIndex;
}
translate = indicatorTop - itemHeight * defaultIndex;
}

this.setState({ selected: defaultIndex, ogTranslate: translate, totalHeight, translate,
}, () => defaultIndex > -1 ? this.updateSelected(false) : this.updateSelected() );
this.setState({
selectedIndex : defaultIndex,
ogTranslate : translate,
totalHeight,
translate,
}, () => {if (defaultIndex <= -1) this.updateSelected()});
}

updateSelected(propagate = true){
const { items, itemHeight, indicatorTop, indicatorHeight, onChange, groupIndex } = this.props;
let selected = 0;
items.forEach( (item, i) => {
//console.log(i, this.state.translate, (this.state.translate + (itemHeight * i)), indicatorTop, this.state.translate + (itemHeight * i) + itemHeight , indicatorTop + indicatorHeight)
if ( !item.disabled && (this.state.translate + (itemHeight * i)) >= indicatorTop &&
( this.state.translate + (itemHeight * i) + itemHeight ) <= indicatorTop + indicatorHeight ){
selected = i;
adjustSelectedIndex() {
const { items, itemHeight, indicatorTop, indicatorHeight } = this.props;
const { translate } = this.state;
let selectedIndex = 0;

for (let i = 0; i < items.length; i++) {
if (!items[i].disabled && (itemHeight * i + translate) >= indicatorTop
&& ((i + 1) * itemHeight + translate) <= indicatorTop + indicatorHeight){
selectedIndex = i;
break;
}
});
}

if (onChange && propagate) onChange(items[selected], selected, groupIndex);
return selectedIndex;
}

updateSelected() {
const { items, onChange, groupIndex } = this.props
const selectedIndex = this.adjustSelectedIndex()
if (onChange) {
onChange(items[selectedIndex], selectedIndex, groupIndex);
}
}

handleTouchStart(e){
if (this.state.touching || this.props.items.length <= 1) return;

this.setState({
touching: true,
ogTranslate: this.state.translate,
touchId: e.targetTouches[0].identifier,
ogY: this.state.translate === 0 ? e.targetTouches[0].pageY : e.targetTouches[0].pageY - this.state.translate,
animating: false
touching : true,
ogTranslate : this.state.translate,
touchId : e.targetTouches[0].identifier,
ogY : e.targetTouches[0].pageY - this.state.translate,
animating : false
});
}

Expand Down Expand Up @@ -197,4 +202,4 @@ class PickerGroup extends Component {
}
}

export default PickerGroup;
export default PickerColumn;

0 comments on commit 4abf823

Please sign in to comment.