diff --git a/examples/multi-picker.tsx b/examples/multi-picker.tsx index d224d6c..e944966 100644 --- a/examples/multi-picker.tsx +++ b/examples/multi-picker.tsx @@ -18,12 +18,17 @@ class Test extends React.Component { }); } + onScrollChange = (value) => { + console.log('onScrollChange', value); + } + render() { return (
one diff --git a/examples/picker.tsx b/examples/picker.tsx index 0f9910d..7d5391d 100644 --- a/examples/picker.tsx +++ b/examples/picker.tsx @@ -22,6 +22,10 @@ class PickerDemo extends React.Component { }); } + onScrollChange = (value) => { + console.log('onScrollChange', value); + } + disable = () => { this.setState({ disabled: !this.state.disabled, @@ -57,6 +61,7 @@ class PickerDemo extends React.Component { selectedValue={this.state.value} disabled={this.state.disabled} onValueChange={this.onChange} + onScrollChange={this.onScrollChange} > {this.state.items} diff --git a/src/MultiPicker.tsx b/src/MultiPicker.tsx index a955f58..8ae5f86 100644 --- a/src/MultiPicker.tsx +++ b/src/MultiPicker.tsx @@ -20,6 +20,7 @@ const MultiPicker = (props: IMultiPickerProp & MultiPickerProps) => { return React.cloneElement(col, { selectedValue: selectedValue[i], onValueChange: (...args) => props.onValueChange!(i, ...args), + onScrollChange: props.onScrollChange && ((...args) => props.onScrollChange!(i, ...args)), }); }); return ( diff --git a/src/MultiPickerMixin.tsx b/src/MultiPickerMixin.tsx index 68b8a6b..9b9a54f 100644 --- a/src/MultiPickerMixin.tsx +++ b/src/MultiPickerMixin.tsx @@ -24,15 +24,30 @@ export default function(ComposedComponent) { } } - onValueChange = (i, v) => { + onChange = (i, v, cb) => { const value = this.getValue().concat(); value[i] = v; - this.props.onValueChange!(value, i); + if (cb) { + cb(value, i); + } + } + + onValueChange = (i, v) => { + this.onChange(i, v, this.props.onValueChange); + } + + onScrollChange = (i, v) => { + this.onChange(i, v, this.props.onScrollChange); } render() { return ( - + ); } }; diff --git a/src/MultiPickerProps.tsx b/src/MultiPickerProps.tsx index 76de7bc..df14d24 100644 --- a/src/MultiPickerProps.tsx +++ b/src/MultiPickerProps.tsx @@ -11,6 +11,7 @@ interface IMultiPickerProps { onValueChange?: (v?: any, i?: number) => void; children?: any; style?: any; + onScrollChange?: (v?: any, i?: number) => void; } export default IMultiPickerProps; diff --git a/src/Picker.tsx b/src/Picker.tsx index 7676b30..d68c7ef 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -7,6 +7,7 @@ import PickerMixin from './PickerMixin'; type IPickerProp = { select: Function; doScrollingComplete: Function; + coumputeChildIndex: Function; }; class Picker extends React.Component { @@ -20,6 +21,7 @@ class Picker extends React.Component { indicatorRef: any; itemHeight: number; zscroller: any; + scrollValue: any; constructor(props) { super(props); @@ -60,6 +62,7 @@ class Picker extends React.Component { penetrationDeceleration: .1, minVelocityToKeepDecelerating: 0.5, scrollingComplete: this.scrollingComplete, + onScroll: this.props.onScrollChange && this.onScrollChange, }); this.zscroller.setDisabled(this.props.disabled); this.zscroller.scroller.setSnapSize(0, itemHeight); @@ -106,6 +109,23 @@ class Picker extends React.Component { } } + onScrollChange = () => { + const { top } = this.zscroller.scroller.getValues(); + if (top >= 0) { + const children = React.Children.toArray(this.props.children); + const index = this.props.coumputeChildIndex(top, this.itemHeight, children.length); + if (this.scrollValue !== index) { + this.scrollValue = index; + const child: any = children[index]; + if (child && this.props.onScrollChange) { + this.props.onScrollChange(child.props.value); + } else if (console.warn) { + console.warn('child not found', children, index); + } + } + } + } + scrollingComplete = () => { const { top } = this.zscroller.scroller.getValues(); if (top >= 0) { @@ -154,7 +174,7 @@ class Picker extends React.Component { }; return (
this.rootRef = el} style={this.props.style}> -
this.maskRef = el}/> +
this.maskRef = el} />
this.indicatorRef = el} diff --git a/src/PickerMixin.tsx b/src/PickerMixin.tsx index ffefaa0..04a9c3d 100644 --- a/src/PickerMixin.tsx +++ b/src/PickerMixin.tsx @@ -31,7 +31,7 @@ export default function(ComposedComponent) { zscrollTo(index * itemHeight); } - doScrollingComplete = (top, itemHeight, fireValueChange) => { + coumputeChildIndex(top, itemHeight, childrenLength) { let index = top / itemHeight; const floor = Math.floor(index); if (index - floor > 0.5) { @@ -39,8 +39,12 @@ export default function(ComposedComponent) { } else { index = floor; } + return Math.min(index, childrenLength - 1); + } + + doScrollingComplete = (top, itemHeight, fireValueChange) => { const children = React.Children.toArray(this.props.children); - index = Math.min(index, children.length - 1); + const index = this.coumputeChildIndex(top, itemHeight, children.length); const child: any = children[index]; if (child) { fireValueChange(child.props.value); @@ -54,6 +58,7 @@ export default function(ComposedComponent) { ); diff --git a/src/PickerTypes.tsx b/src/PickerTypes.tsx index 5f55a1f..2e5591b 100644 --- a/src/PickerTypes.tsx +++ b/src/PickerTypes.tsx @@ -10,4 +10,5 @@ export type IPickerProps = { className?: string; defaultSelectedValue?: any; style?: any; + onScrollChange?: (value: any) => void; };