feat: add onSync callback to resolve goldenyz#87

Author: haoliangwu

example/example.js

@@ -10,13 +10,22 @@ function logEvent(type) {
   console.log(`event '${type}' triggered!`);
 }
 
+const debounce = (fn, ms = 0) => {
+  let timeoutId;
+  return function wrapper(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+
 class Example extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       className: undefined,
       onXReachEnd: null,
+      items: Array.from(new Array(100).keys()),
     };
   }
 
@@ -33,28 +42,48 @@ class Example extends Component {
     logEvent('onYReachEnd');
   }
 
+  handleTrigger = () => {
+    this.setState({
+      items: Array.from(new Array(100).keys()),
+    });
+  }
+
+  handleSync = debounce((ps) => {
+    ps.update();
+    console.log('debounce sync ps container in 1000ms');
+  }, 1000)
+
   render() {
     const { className, onXReachEnd } = this.state;
 
     return (
-      <div className="example">
-        <ScrollBar
-          className={className}
-          onScrollY={() => logEvent('onScrollY')}
-          onScrollX={() => logEvent('onScrollX')}
-          onScrollUp={() => logEvent('onScrollUp')}
-          onScrollDown={() => logEvent('onScrollDown')}
-          onScrollLeft={() => logEvent('onScrollLeft')}
-          onScrollRight={() => logEvent('onScrollRight')}
-          onYReachStart={() => logEvent('onYReachStart')}
-          onYReachEnd={this.handleYReachEnd}
-          onXReachStart={() => logEvent('onXReachStart')}
-          onXReachEnd={onXReachEnd}
-          component="div"
-        >
-          <div className="content" />
-        </ScrollBar>
-      </div>
+      <React.Fragment>
+
+        <div className="example">
+          <ScrollBar
+            className={className}
+            onScrollY={() => logEvent('onScrollY')}
+            onScrollX={() => logEvent('onScrollX')}
+            onScrollUp={() => logEvent('onScrollUp')}
+            onScrollDown={() => logEvent('onScrollDown')}
+            onScrollLeft={() => logEvent('onScrollLeft')}
+            onScrollRight={() => logEvent('onScrollRight')}
+            onYReachStart={() => logEvent('onYReachStart')}
+            onYReachEnd={this.handleYReachEnd}
+            onXReachStart={() => logEvent('onXReachStart')}
+            onXReachEnd={onXReachEnd}
+            component="div"
+          >
+            <div className="content" />
+          </ScrollBar>
+        </div>
+        <div className="example">
+          <button onClick={this.handleTrigger}>Trigger</button>
+          <ScrollBar onSync={this.handleSync}>
+            {this.state.items.map(e => (<div key={e}>{e}</div>))}
+          </ScrollBar>
+        </div>
+      </React.Fragment>
     );
   }
 }

src/scrollbar.js

@@ -37,7 +37,9 @@ export default class ScrollBar extends Component {
 
   componentDidUpdate(prevProps) {
     this._updateEventHook(prevProps);
-    this._ps.update();
+
+    if (typeof this.props.onSync === 'function') this.props.onSync(this._ps);
+
     if (prevProps.className !== this.props.className) {
       this._updateClassName();
     }
@@ -89,10 +91,6 @@ export default class ScrollBar extends Component {
     }
   }
 
-  updateScroll() {
-    this._ps.update();
-  }
-
   handleRef(ref) {
     this._container = ref;
     this.props.containerRef(ref);
@@ -116,6 +114,7 @@ export default class ScrollBar extends Component {
       onXReachStart,
       onXReachEnd,
       component,
+      onSync,
       children,
       ...remainProps
     } = this.props;
@@ -145,6 +144,7 @@ ScrollBar.defaultProps = {
   onYReachEnd: undefined,
   onXReachStart: undefined,
   onXReachEnd: undefined,
+  onSync: ps => ps.update(),
   component: 'div',
 };
 
@@ -165,5 +165,6 @@ ScrollBar.propTypes = {
   onYReachEnd: PropTypes.func,
   onXReachStart: PropTypes.func,
   onXReachEnd: PropTypes.func,
+  onSync: PropTypes.func,
   component: PropTypes.string,
 };