add onScrollChange event, ref antd-mobile/#1447.

examples/multi-picker.tsx

@@ -18,12 +18,17 @@ class Test extends React.Component<any, any> {
     });
   }
 
+  onScrollChange = (value) => {
+    console.log('onScrollChange', value);
+  }
+
   render() {
     return (
       <div style={{ background: '#f5f5f9', padding: 10 }}>
         <MultiPicker
           selectedValue={this.state.value}
           onValueChange={this.onChange}
+          onScrollChange={this.onScrollChange}
         >
           <Picker indicatorClassName="my-picker-indicator">
             <Picker.Item className="my-picker-view-item" value="1">one</Picker.Item>

examples/picker.tsx

@@ -22,6 +22,10 @@ class PickerDemo extends React.Component<any, any> {
     });
   }
 
+  onScrollChange = (value) => {
+    console.log('onScrollChange', value);
+  }
+
   disable = () => {
     this.setState({
       disabled: !this.state.disabled,
@@ -57,6 +61,7 @@ class PickerDemo extends React.Component<any, any> {
           selectedValue={this.state.value}
           disabled={this.state.disabled}
           onValueChange={this.onChange}
+          onScrollChange={this.onScrollChange}
         >
           {this.state.items}
         </Picker>

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 (

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 (
-        <ComposedComponent {...this.props} getValue={this.getValue} onValueChange={this.onValueChange} />
+        <ComposedComponent
+          {...this.props}
+          getValue={this.getValue}
+          onValueChange={this.onValueChange}
+          onScrollChange={this.props.onScrollChange && this.onScrollChange}
+        />
       );
     }
   };

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;

src/Picker.tsx

@@ -7,6 +7,7 @@ import PickerMixin from './PickerMixin';
 type IPickerProp = {
   select: Function;
   doScrollingComplete: Function;
+  coumputeChildIndex: Function;
 };
 
 class Picker extends React.Component<IPickerProp & IPickerProps, any> {
@@ -20,6 +21,7 @@ class Picker extends React.Component<IPickerProp & IPickerProps, any> {
   indicatorRef: any;
   itemHeight: number;
   zscroller: any;
+  scrollValue: any;
 
   constructor(props) {
     super(props);
@@ -60,6 +62,7 @@ class Picker extends React.Component<IPickerProp & IPickerProps, any> {
       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<IPickerProp & IPickerProps, any> {
     }
   }
 
+  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<IPickerProp & IPickerProps, any> {
     };
     return (
       <div className={classNames(pickerCls)} ref={el => this.rootRef = el} style={this.props.style}>
-        <div className={`${prefixCls}-mask`} ref={el => this.maskRef = el}/>
+        <div className={`${prefixCls}-mask`} ref={el => this.maskRef = el} />
         <div
           className={`${prefixCls}-indicator ${indicatorClassName}`}
           ref={el => this.indicatorRef = el}

src/PickerMixin.tsx

@@ -31,16 +31,20 @@ 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) {
         index = floor + 1;
       } 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) {
         <ComposedComponent
           {...this.props}
           doScrollingComplete={this.doScrollingComplete}
+          coumputeChildIndex={this.coumputeChildIndex}
           select={this.select}
         />
       );

src/PickerTypes.tsx

@@ -10,4 +10,5 @@ export type IPickerProps = {
   className?: string;
   defaultSelectedValue?: any;
   style?: any;
+  onScrollChange?: (value: any) => void;
 };