feat: keep scrollview the same on web\miniapp\weex

packages/rax-scrollview/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.0.0
+- Remove `resetScroll` method
+- Add `resetEndReached` method: reset status to trigger `onEndReached`
+- Rename `onEndReachedThreshold`: `endReachedThreshold`
+
 ## 3.6.1
 - Fix `pixelRatio` is not initialized and make onEndReached can not triggered
 

packages/rax-scrollview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-scrollview",
-  "version": "3.6.1",
+  "version": "4.0.0",
   "description": "ScrollView component for Rax.",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",

packages/rax-scrollview/src/miniapp/index.tsx

@@ -33,14 +33,14 @@ function translateToPx(origin: string | number): number {
   const matched = /^(\d+)(r{0,1}px){0,1}$/.exec(origin);
   if (matched) {
     if (!matched[2]) {
-      return parseInt(matched[1]);
+      return parseInt(matched[1], 10);
     }
     if (matched[2] === 'rpx') {
       const pixelRatio = getPixelRatio();
-      return parseInt(matched[1]) * pixelRatio;
+      return parseInt(matched[1], 10) * pixelRatio;
     }
     if (matched[2] === 'px') {
-      return parseInt(matched[1]);
+      return parseInt(matched[1], 10);
     }
   }
   return 0;
@@ -56,14 +56,15 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
       onScroll,
       children,
       disableScroll = false,
-      onEndReachedThreshold
+      endReachedThreshold
     } = props;
     const [scrollTop] = useState(0);
     const [scrollLeft] = useState(0);
     const [scrollWithAnimation, setScrollWithAnimation] = useState(false);
     const [scrollAnimationDuration, setScrollAnimationDuration] = useState(ANIMATION_DURATION);
     const [scrollIntoViewId] = useState(null);
     const scrollerRef = useRef<HTMLDivElement>(null);
+    const endReachedStatus = useRef(false);
     const handleScroll = e => {
       if (onScroll) {
         e.nativeEvent = {
@@ -83,14 +84,16 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
         onScroll(e);
       }
     };
+    const handleEndReached = (e) => {
+      if (onEndReached && !endReachedStatus.current) {
+        endReachedStatus.current = true;
+        onEndReached(e);
+      }
+    };
     useImperativeHandle(ref, () => ({
       _nativeNode: scrollerRef.current,
-      resetScroll() {
-        if (horizontal) {
-          scrollerRef.current.setAttribute('scroll-left', '0');
-        } else {
-          scrollerRef.current.setAttribute('scroll-top', '0');
-        }
+      resetEndReached() {
+        endReachedStatus.current = false;
       },
       scrollTo(options?: {
         x?: number | string;
@@ -138,7 +141,7 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
       className
     );
 
-    const endReachedThreshold = translateToPx(onEndReachedThreshold);
+    const transedEndReachedThreshold = translateToPx(endReachedThreshold);
 
     return (
       <scroll-view
@@ -149,8 +152,8 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
         scroll-top={scrollTop}
         scroll-left={scrollLeft}
         onScroll={onScroll ? handleScroll : null}
-        onScrollToLower={onEndReached}
-        lower-threshold={endReachedThreshold}
+        onScrollToLower={onEndReached ? handleEndReached : null}
+        lower-threshold={transedEndReachedThreshold}
         scroll-with-animation={scrollWithAnimation}
         scroll-animation-duration={scrollAnimationDuration}
         scroll-x={!disableScroll && horizontal}

packages/rax-scrollview/src/types.ts

@@ -2,7 +2,7 @@ import { RefAttributes, HTMLAttributes, UIEvent } from 'rax';
 
 export interface ScrollViewRefObject {
   _nativeNode: HTMLDivElement;
-  resetScroll: () => void;
+  resetEndReached: () => void;
   scrollTo: (options?: {
     x?: number | string;
     y?: number | string;
@@ -26,7 +26,7 @@ export interface ScrollViewProps extends RefAttributes<ScrollViewRefObject>, HTM
   horizontal?: boolean;
   showsHorizontalScrollIndicator?: boolean;
   showsVerticalScrollIndicator?: boolean;
-  onEndReachedThreshold?: number | string;
+  endReachedThreshold?: number | string;
   onEndReached?: (e: ScrollEvent) => void;
   onScroll?: (e: ScrollEvent) => void;
 }

packages/rax-scrollview/src/utils/wrapDefaultProperties.ts

@@ -1,13 +1,13 @@
 import { ForwardRefExoticComponent } from 'rax';
 import { ScrollViewProps } from '../types';
 
-const DEFAULT_END_REACHED_THRESHOLD = 500;
+const DEFAULT_END_REACHED_THRESHOLD = '500rpx';
 const DEFAULT_SCROLL_CALLBACK_THROTTLE = 50;
 
 export default function wrapDefaultProperties(ScrollView: ForwardRefExoticComponent<ScrollViewProps>): ForwardRefExoticComponent<ScrollViewProps> {
   ScrollView.defaultProps = {
     scrollEventThrottle: DEFAULT_SCROLL_CALLBACK_THROTTLE,
-    onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
+    endReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
     showsHorizontalScrollIndicator: true,
     showsVerticalScrollIndicator: true,
     className: 'rax-scrollview'

packages/rax-scrollview/src/web/index.tsx

@@ -76,13 +76,13 @@ function translateToPx(origin: string | number): number {
   const matched = /^(\d+)(r{0,1}px){0,1}$/.exec(origin);
   if (matched) {
     if (!matched[2]) {
-      return parseInt(matched[1]) * pixelRatio;
+      return parseInt(matched[1], 10) * pixelRatio;
     }
     if (matched[2] === 'rpx') {
-      return parseInt(matched[1]) * pixelRatio;
+      return parseInt(matched[1], 10) * pixelRatio;
     }
     if (matched[2] === 'px') {
-      return parseInt(matched[1]);
+      return parseInt(matched[1], 10);
     }
   }
   return 0;
@@ -100,13 +100,12 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
       showsHorizontalScrollIndicator,
       showsVerticalScrollIndicator,
       onEndReached,
-      onEndReachedThreshold,
+      endReachedThreshold,
       onScroll,
       children
     } = props;
     const lastScrollDistance = useRef(0);
-    const lastScrollContentSize = useRef(0);
-    const scrollerNodeSize = useRef(0);
+    const endReachedStatus = useRef(false);
     const scrollerRef = useRef<HTMLDivElement>(null);
     const contentContainerRef = useRef<HTMLDivElement>(null);
     const handleScroll = e => {
@@ -130,7 +129,7 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
 
       if (onEndReached) {
         const scrollerNode = scrollerRef.current;
-        scrollerNodeSize.current = horizontal
+        const scrollerNodeSize = horizontal
           ? scrollerNode.offsetWidth
           : scrollerNode.offsetHeight;
         // NOTE：in iOS7/8 offsetHeight/Width is is inaccurate （ use scrollHeight/Width ）
@@ -141,18 +140,16 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
           ? scrollerNode.scrollLeft
           : scrollerNode.scrollTop;
 
-        const endReachedThreshold = translateToPx(onEndReachedThreshold);
+        const transedEndReachedThreshold = translateToPx(endReachedThreshold);
 
         const isEndReached =
-          scrollContentSize - scrollDistance - scrollerNodeSize.current <
-          endReachedThreshold;
+          scrollContentSize - scrollDistance - scrollerNodeSize <
+          transedEndReachedThreshold;
 
         const isScrollToEnd = scrollDistance > lastScrollDistance.current;
-        const isLoadedMoreContent =
-          scrollContentSize != lastScrollContentSize.current;
 
-        if (isEndReached && isScrollToEnd && isLoadedMoreContent) {
-          lastScrollContentSize.current = scrollContentSize;
+        if (isEndReached && isScrollToEnd && !endReachedStatus.current) {
+          endReachedStatus.current = true;
           props.onEndReached(e);
         }
 
@@ -161,9 +158,8 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
     };
     useImperativeHandle(ref, () => ({
       _nativeNode: scrollerRef.current,
-      resetScroll() {
-        lastScrollContentSize.current = 0;
-        lastScrollDistance.current = 0;
+      resetEndReached() {
+        endReachedStatus.current = false;
       },
       scrollTo(options?: {
         x?: number | string;
@@ -262,7 +258,7 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
       const webProps = {
         ...props
       };
-      delete webProps.onEndReachedThreshold;
+      delete webProps.endReachedThreshold;
       return (
         <View
           {...webProps}

packages/rax-scrollview/src/weex/index.tsx

@@ -4,7 +4,6 @@ import {
   ForwardRefExoticComponent,
   forwardRef,
   useRef,
-  useState,
   useImperativeHandle
 } from 'rax';
 import View from 'rax-view';
@@ -17,6 +16,17 @@ import '../index.css';
 
 const baseCls = 'rax-scrollview';
 
+function translateToPx(origin: string | number): number {
+  if (typeof origin === 'number') {
+    return origin;
+  }
+  const mathched = /^(\d+)\.*/.exec(origin);
+  if (mathched) {
+    return parseInt(mathched[1], 10);
+  }
+  return 0;
+}
+
 const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
   (props, ref) => {
     let {
@@ -27,11 +37,10 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
       showsHorizontalScrollIndicator,
       showsVerticalScrollIndicator,
       onEndReached,
-      onEndReachedThreshold,
+      endReachedThreshold,
       onScroll,
       children
     } = props;
-    const [loadmoreretry, setLoadmoreretry] = useState(0);
     const scrollerRef = useRef<HTMLDivElement>(null);
     const contentContainerRef = useRef<HTMLDivElement>(null);
     const handleScroll = e => {
@@ -52,8 +61,9 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
     };
     useImperativeHandle(ref, () => ({
       _nativeNode: scrollerRef.current,
-      resetScroll() {
-        setLoadmoreretry(loadmoreretry + 1);
+      resetEndReached() {
+        // @ts-ignore
+        scrollerRef.current.resetLoadmore();
       },
       scrollTo(options?: {
         x?: number;
@@ -95,10 +105,8 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
     }));
 
     // In weex must be int value
-    onEndReachedThreshold =
-      typeof onEndReachedThreshold === 'string'
-        ? parseInt(onEndReachedThreshold, 10)
-        : onEndReachedThreshold;
+    const transedEndReachedThreshold = translateToPx(endReachedThreshold);
+
     if (style) {
       const childLayoutProps = ['alignItems', 'justifyContent'].filter(
         prop => style[prop] !== undefined
@@ -169,8 +177,7 @@ const ScrollView: ForwardRefExoticComponent<ScrollViewProps> = forwardRef(
         showScrollbar={showsScrollIndicator}
         onLoadmore={onEndReached}
         onScroll={onScroll ? handleScroll : null}
-        loadmoreoffset={onEndReachedThreshold}
-        loadmoreretry={loadmoreretry}
+        loadmoreoffset={transedEndReachedThreshold}
         scrollDirection={horizontal ? 'horizontal' : 'vertical'}
       >
         {refreshContainer}