feat(react): refresh wrapper support horizontal and update demo

Tencent · Jul 29, 2024 · f602d48 · f602d48
1 parent faf2483
commit f602d48
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 18 deletions.
diff --git a/examples/hippy-react-demo/src/components/ViewPager/index.jsx b/examples/hippy-react-demo/src/components/ViewPager/index.jsx
@@ -4,6 +4,7 @@ import {
   View,
   Text,
   ViewPager,
+  RefreshWrapper,
 } from '@hippy/react';
 import { CirclePagerView, SquarePagerView, TrianglePagerView } from '../../shared/PagerItemView';
 
@@ -65,6 +66,8 @@ export default class PagerExample extends React.Component {
       super(props);
       this.onPageSelected = this.onPageSelected.bind(this);
       this.onPageScrollStateChanged = this.onPageScrollStateChanged.bind(this);
+      this.onRefresh = this.onRefresh.bind(this);
+      this.getRefresh = this.getRefresh.bind(this);
     }
 
     onPageSelected(pageData) {
@@ -81,6 +84,25 @@ export default class PagerExample extends React.Component {
     onPageScroll({ offset, position }) {
       console.log('onPageScroll', offset, position);
     }
+
+    onRefresh() {
+      setTimeout(async () => {
+        console.log('raytest RefreshWrapper onRefresh');
+        this.refresh.refreshCompleted();
+      }, 3000);
+    }
+
+    getRefresh() {
+      return (
+      <View style={{ flex: 1, width: 80, backgroundColor: 'green' }}>
+        <View style={{ flex: 2 }}></View>
+        <View style={{ width: 40, height: 40, alignSelf: 'center', backgroundColor: 'red' }}></View>
+        <Text style={{ flex: 1, marginTop: 10, textAlign: 'center' }}>刷新中...</Text>
+        <View style={{ flex: 2 }}></View>
+      </View>
+      );
+    }
+
     render() {
       const { selectedIndex } = this.state;
       return (
@@ -98,26 +120,41 @@ export default class PagerExample extends React.Component {
               <Text style={styles.buttonText}>直接滑到第1页</Text>
             </View>
           </View>
-          <ViewPager
+
+          <RefreshWrapper
             ref={(ref) => {
-              this.viewpager = ref;
+              this.refresh = ref;
             }}
-            style={styles.container}
-            initialPage={0}
-            keyboardDismissMode="none"
-            scrollEnabled
-            onPageSelected={this.onPageSelected}
-            onPageScrollStateChanged={this.onPageScrollStateChanged}
-            onPageScroll={this.onPageScroll}
+            style={{ flex: 1 }}
+            horizontal={true}
+            onRefresh={this.onRefresh}
+            bounceTime={500}
+            getRefresh={this.getRefresh}
           >
-            {
-              [
-                SquarePagerView('squarePager'),
-                TrianglePagerView('TrianglePager'),
-                CirclePagerView('CirclePager'),
-              ]
-            }
-          </ViewPager>
+
+            <ViewPager
+              ref={(ref) => {
+                this.viewpager = ref;
+              }}
+              style={styles.container}
+              initialPage={0}
+              keyboardDismissMode="none"
+              scrollEnabled
+              onPageSelected={this.onPageSelected}
+              onPageScrollStateChanged={this.onPageScrollStateChanged}
+              onPageScroll={this.onPageScroll}
+            >
+              {
+                [
+                  SquarePagerView('squarePager'),
+                  TrianglePagerView('TrianglePager'),
+                  CirclePagerView('CirclePager'),
+                ]
+              }
+            </ViewPager>
+
+            </RefreshWrapper>
+
           <View style={styles.dotContainer}>
             {
               new Array(PAGE_COUNT).fill(0)

diff --git a/packages/hippy-react/src/components/refresh-wrapper.tsx b/packages/hippy-react/src/components/refresh-wrapper.tsx
@@ -25,6 +25,7 @@ import Element from '../dom/element-node';
 
 export interface RefreshWrapperProps {
   bounceTime?: number;
+  horizontal?: boolean;
   onRefresh?: () => void;
   getRefresh?: () => ReactElement;
 }
@@ -63,7 +64,10 @@ export class RefreshWrapper extends React.Component<RefreshWrapperProps, {}> {
    */
   public render() {
     const { children, ...nativeProps } = this.props;
-    const style: CSSProperties = { left: 0, right: 0, position: 'absolute' };
+    // Set the style according to the horizontal prop
+    const style: CSSProperties = nativeProps.horizontal
+    ? { top: 0, bottom: 0, position: 'absolute' }
+    : { left: 0, right: 0, position: 'absolute' };
     return (
       <div nativeName="RefreshWrapper" ref={(ref) => {
         this.instance = ref;