From f654335b7e027adcc8dd4ef3e04def39bf6447d9 Mon Sep 17 00:00:00 2001 From: zhang740 Date: Tue, 19 Sep 2017 11:05:35 +0800 Subject: [PATCH 1/6] add onScrollChange event, ref antd-mobile/#1447. --- examples/picker.tsx | 5 +++++ src/Picker.tsx | 22 +++++++++++++++++++++- src/PickerMixin.tsx | 11 ++++++++--- src/PickerTypes.tsx | 1 + 4 files changed, 35 insertions(+), 4 deletions(-) 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/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..abcd59e 100644 --- a/src/PickerMixin.tsx +++ b/src/PickerMixin.tsx @@ -9,7 +9,7 @@ type IItemProps = { const Item = (_props: IItemProps) => null; -export default function(ComposedComponent) { +export default function (ComposedComponent) { return class extends React.Component { static Item = Item; @@ -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; }; From a7bd709951155bd7e113c0027dd86759a3cc528d Mon Sep 17 00:00:00 2001 From: zhang740 Date: Tue, 19 Sep 2017 11:16:41 +0800 Subject: [PATCH 2/6] add onScrollChange event to MultiPicker. --- examples/multi-picker.tsx | 5 +++++ src/MultiPicker.tsx | 1 + src/MultiPickerMixin.tsx | 15 +++++++++++++-- src/MultiPickerProps.tsx | 1 + 4 files changed, 20 insertions(+), 2 deletions(-) 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/src/MultiPicker.tsx b/src/MultiPicker.tsx index a955f58..1c86ef4 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: (...args) => props.onScrollChange!(i, ...args), }); }); return ( diff --git a/src/MultiPickerMixin.tsx b/src/MultiPickerMixin.tsx index 68b8a6b..c014a6f 100644 --- a/src/MultiPickerMixin.tsx +++ b/src/MultiPickerMixin.tsx @@ -1,7 +1,7 @@ import React from 'react'; import MultiPickerProps from './MultiPickerProps'; -export default function(ComposedComponent) { +export default function (ComposedComponent) { return class extends React.Component { static defaultProps = { prefixCls: 'rmc-multi-picker', @@ -30,9 +30,20 @@ export default function(ComposedComponent) { this.props.onValueChange!(value, i); } + onScrollChange = (i, v) => { + const value = this.getValue().concat(); + value[i] = v; + this.props.onScrollChange!(value, i); + } + 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; From 8355bddf91f11b3b5e9dcf9a14cfa9467cec25b2 Mon Sep 17 00:00:00 2001 From: zhang740 Date: Tue, 19 Sep 2017 14:08:13 +0800 Subject: [PATCH 3/6] update onScrollChange process function. --- src/MultiPickerMixin.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/MultiPickerMixin.tsx b/src/MultiPickerMixin.tsx index c014a6f..b948626 100644 --- a/src/MultiPickerMixin.tsx +++ b/src/MultiPickerMixin.tsx @@ -1,7 +1,7 @@ import React from 'react'; import MultiPickerProps from './MultiPickerProps'; -export default function (ComposedComponent) { +export default function(ComposedComponent) { return class extends React.Component { static defaultProps = { prefixCls: 'rmc-multi-picker', @@ -24,16 +24,18 @@ export default function (ComposedComponent) { } } - onValueChange = (i, v) => { + onChange = (i, v, cb) => { const value = this.getValue().concat(); value[i] = v; - this.props.onValueChange!(value, i); + cb!(value, i); + } + + onValueChange = (i, v) => { + this.onChange(i, v, this.props.onValueChange); } onScrollChange = (i, v) => { - const value = this.getValue().concat(); - value[i] = v; - this.props.onScrollChange!(value, i); + this.onChange(i, v, this.props.onScrollChange); } render() { From cb71cf5d538fd9bf734698c496ade0fbc79cbbf2 Mon Sep 17 00:00:00 2001 From: zhang740 Date: Tue, 19 Sep 2017 14:18:59 +0800 Subject: [PATCH 4/6] mixin update. --- src/MultiPickerMixin.tsx | 2 +- src/PickerMixin.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/MultiPickerMixin.tsx b/src/MultiPickerMixin.tsx index b948626..dd8dbae 100644 --- a/src/MultiPickerMixin.tsx +++ b/src/MultiPickerMixin.tsx @@ -27,7 +27,7 @@ export default function(ComposedComponent) { onChange = (i, v, cb) => { const value = this.getValue().concat(); value[i] = v; - cb!(value, i); + cb && cb(value, i); } onValueChange = (i, v) => { diff --git a/src/PickerMixin.tsx b/src/PickerMixin.tsx index abcd59e..04a9c3d 100644 --- a/src/PickerMixin.tsx +++ b/src/PickerMixin.tsx @@ -9,7 +9,7 @@ type IItemProps = { const Item = (_props: IItemProps) => null; -export default function (ComposedComponent) { +export default function(ComposedComponent) { return class extends React.Component { static Item = Item; From 1a332ebb8bc7f60447a3d545a99dc183051822ff Mon Sep 17 00:00:00 2001 From: zhang740 Date: Tue, 19 Sep 2017 14:24:01 +0800 Subject: [PATCH 5/6] fix lint. --- src/MultiPickerMixin.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/MultiPickerMixin.tsx b/src/MultiPickerMixin.tsx index dd8dbae..625c783 100644 --- a/src/MultiPickerMixin.tsx +++ b/src/MultiPickerMixin.tsx @@ -27,7 +27,9 @@ export default function(ComposedComponent) { onChange = (i, v, cb) => { const value = this.getValue().concat(); value[i] = v; - cb && cb(value, i); + if (cb) { + cb(value, i); + } } onValueChange = (i, v) => { From 094e5f4689a36184b8de6ce465f0e26ad3ac9170 Mon Sep 17 00:00:00 2001 From: zhang740 Date: Tue, 19 Sep 2017 14:46:08 +0800 Subject: [PATCH 6/6] onScrollChange in MultiPicker opt. --- src/MultiPicker.tsx | 2 +- src/MultiPickerMixin.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/MultiPicker.tsx b/src/MultiPicker.tsx index 1c86ef4..8ae5f86 100644 --- a/src/MultiPicker.tsx +++ b/src/MultiPicker.tsx @@ -20,7 +20,7 @@ const MultiPicker = (props: IMultiPickerProp & MultiPickerProps) => { return React.cloneElement(col, { selectedValue: selectedValue[i], onValueChange: (...args) => props.onValueChange!(i, ...args), - onScrollChange: (...args) => props.onScrollChange!(i, ...args), + onScrollChange: props.onScrollChange && ((...args) => props.onScrollChange!(i, ...args)), }); }); return ( diff --git a/src/MultiPickerMixin.tsx b/src/MultiPickerMixin.tsx index 625c783..9b9a54f 100644 --- a/src/MultiPickerMixin.tsx +++ b/src/MultiPickerMixin.tsx @@ -46,7 +46,7 @@ export default function(ComposedComponent) { {...this.props} getValue={this.getValue} onValueChange={this.onValueChange} - onScrollChange={this.onScrollChange} + onScrollChange={this.props.onScrollChange && this.onScrollChange} /> ); }