feat(react): add refresh wrapper footer

examples/hippy-react-demo/src/components/ViewPager/index.jsx

@@ -68,6 +68,8 @@ export default class PagerExample extends React.Component {
       this.onPageScrollStateChanged = this.onPageScrollStateChanged.bind(this);
       this.onRefresh = this.onRefresh.bind(this);
       this.getRefresh = this.getRefresh.bind(this);
+      this.onFooterRefresh = this.onFooterRefresh.bind(this);
+      this.getFooterRefresh = this.getFooterRefresh.bind(this);
     }
 
     onPageSelected(pageData) {
@@ -85,13 +87,19 @@ export default class PagerExample extends React.Component {
       console.log('onPageScroll', offset, position);
     }
 
+    /**
+     * callback for header
+     */
     onRefresh() {
       setTimeout(async () => {
-        console.log('raytest RefreshWrapper onRefresh');
+        console.log('RefreshWrapper onRefresh');
         this.refresh.refreshCompleted();
       }, 3000);
     }
 
+    /**
+     *  get header view
+     */
     getRefresh() {
       return (
       <View style={{ flex: 1, width: 80, backgroundColor: 'green' }}>
@@ -103,6 +111,30 @@ export default class PagerExample extends React.Component {
       );
     }
 
+    /**
+     * callback for footer
+     */
+    onFooterRefresh() {
+      setTimeout(async () => {
+        console.log('RefreshWrapper onFooterRefresh');
+        this.refresh.refreshFooterCompleted();
+      }, 3000);
+    }
+
+    /**
+     *  get footer view
+     */
+    getFooterRefresh() {
+      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 (
@@ -127,9 +159,13 @@ export default class PagerExample extends React.Component {
             }}
             style={{ flex: 1 }}
             horizontal={true}
+            hiddenHeader={false}
+            showFooter={true}
             onRefresh={this.onRefresh}
+            onFooterRefresh={this.onFooterRefresh}
             bounceTime={500}
             getRefresh={this.getRefresh}
+            getFooterRefresh={this.getFooterRefresh}
           >
 
             <ViewPager

packages/hippy-react/src/components/refresh-wrapper.tsx

@@ -26,8 +26,12 @@ import Element from '../dom/element-node';
 export interface RefreshWrapperProps {
   bounceTime?: number;
   horizontal?: boolean;
-  onRefresh?: () => void;
-  getRefresh?: () => ReactElement;
+  hiddenHeader?: boolean;
+  showFooter?: boolean;
+  onRefresh?: () => void;                 // header refresh callback
+  getRefresh?: () => ReactElement;        // get header refresh view
+  onFooterRefresh?: () => void;           // footer refresh callback
+  getFooterRefresh?: () => ReactElement;  // get footer refresh view
 }
 
 /**
@@ -39,54 +43,87 @@ export interface RefreshWrapperProps {
 export class RefreshWrapper extends React.Component<RefreshWrapperProps, {}> {
   private instance: Element | Fiber | HTMLDivElement | null = null;
   private refreshComplected: () => void;
+  private refreshFooterComplected: () => void;
 
   public constructor(props: RefreshWrapperProps) {
     super(props);
     this.refreshComplected = this.refreshCompleted.bind(this);
+    this.refreshFooterComplected = this.refreshFooterCompleted.bind(this);
   }
 
   /**
-   * Call native for start refresh.
+   * Call native for start refresh. (For Header)
    */
   public startRefresh() {
     callUIFunction(this.instance as Element, 'startRefresh', null);
   }
 
   /**
-   * Call native that data is refreshed
+   * Call native for start refresh. (For Footer)
+   */
+  public startRefreshFooter() {
+    callUIFunction(this.instance as Element, 'startRefreshFooter', null);
+  }
+
+  /**
+   * Call native that data is refreshed. (For Header)
    */
   public refreshCompleted() {
     callUIFunction(this.instance as Element, 'refreshComplected', null);
   }
 
+  /**
+   * Call native that data is refreshed. (For Footer)
+   */
+  public refreshFooterCompleted() {
+    callUIFunction(this.instance as Element, 'refreshFooterComplected', null);
+  }
+
   /**
    * @ignore
    */
   public render() {
     const { children, ...nativeProps } = this.props;
     // 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' };
+      ? { top: 0, bottom: 0, position: 'absolute' }
+      : { left: 0, right: 0, position: 'absolute' };
     return (
       <div nativeName="RefreshWrapper" ref={(ref) => {
         this.instance = ref;
       }} {...nativeProps}>
-        <div nativeName="RefreshWrapperItemView" style={style}>
+        { !this.props.hiddenHeader ? <div nativeName="RefreshWrapperItemView" style={style}>
           { this.getRefresh() }
-        </div>
+        </div> : null}
         { children }
+        { this.props.showFooter ? <div nativeName="RefreshWrapperFooterItemView" style={style}>
+          { this.getFooterRefresh() }
+        </div> : null }
       </div>
     );
   }
 
+  /**
+   * callback for header
+   */
   private getRefresh(): ReactElement | null {
     const { getRefresh } = this.props;
     if (typeof getRefresh === 'function') {
       return getRefresh() || null;
     }
     return null;
   }
+
+  /**
+   * callback for footer
+   */
+  private getFooterRefresh(): ReactElement | null {
+    const { getFooterRefresh } = this.props;
+    if (typeof getFooterRefresh === 'function') {
+      return getFooterRefresh() || null;
+    }
+    return null;
+  }
 }
 
 export default RefreshWrapper;