feat(ios): waterfall component support footer view

refactor waterfall component

driver/js/examples/hippy-react-demo/src/components/WaterfallView/index.jsx

@@ -74,6 +74,7 @@ export default class ListExample extends React.Component {
     this.onHeaderPulling = this.onHeaderPulling.bind(this);
     this.onFooterPulling = this.onFooterPulling.bind(this);
     this.renderBanner = this.renderBanner.bind(this);
+    this.renderFooter = this.renderFooter.bind(this);
     this.getItemStyle = this.getItemStyle.bind(this);
     this.getHeaderStyle = this.getHeaderStyle.bind(this);
     this.onScroll = this.onScroll.bind(this);
@@ -236,10 +237,10 @@ export default class ListExample extends React.Component {
   }
 
   onScroll(obj) {
-
+    console.log('onScroll', obj);
   }
 
-  // render banner(it is not supported on Android yet)
+  // render banner
   renderBanner() {
     if (this.state.dataSource.length === 0) return null;
     return (<View style={{
@@ -257,6 +258,24 @@ export default class ListExample extends React.Component {
     </View>);
   }
 
+  // render footer (currently only iOS support)
+  renderFooter() {
+    if (this.state.dataSource.length === 0) return null;
+    return (<View style={{
+      backgroundColor: 'grey',
+      height: 100,
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}>
+      <Text style={{
+        fontSize: 20,
+        color: 'white',
+        lineHeight: 100,
+        height: 100,
+      }}>Footer View</Text>
+    </View>);
+  }
+
   renderItem(index) {
     const { dataSource } = this.state;
     let styleUI = null;
@@ -362,7 +381,9 @@ export default class ListExample extends React.Component {
               style={{ flex: 1 }}
               onScroll={this.onScroll}
               renderBanner={this.renderBanner}
+              renderFooter={this.renderFooter}
               renderPullHeader={this.renderPullHeader}
+              renderPullFooter={this.renderPullFooter}
               onEndReached={this.onEndReached}
               onFooterReleased={this.onEndReached}
               onHeaderReleased={this.onHeaderReleased}

driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue

@@ -25,17 +25,18 @@
           </p>
         </pull-header>
         <div
-          v-if="!isAndroid"
+          v-if="!isAndroid && !isiOS"
           class="banner-view"
         >
           <span>BannerView</span>
-        </div>  
+        </div>
         <waterfall-item
-          v-else 
+          v-else
           :fullSpan="true",
+          :isHeader="true",
           class="banner-view"
         >
-          <span>BannerView</span>
+          <span>Banner View</span>
         </waterfall-item>
         <waterfall-item
           v-for="(ui, index) in dataSource"
@@ -57,6 +58,13 @@
             :item-bean="ui.itemBean"
           />
         </waterfall-item>
+        <waterfall-item
+          :fullSpan="true",
+          :isFooter="true",
+          class="banner-view"
+        >
+          <span>Footer View</span>
+        </waterfall-item>
         <pull-footer
           ref="pullFooter"
           class="pull-footer"
@@ -91,6 +99,7 @@ export default {
       footerRefreshText: '正在加载...',
       isLoading: false,
       isAndroid: Vue.Native.Platform === 'android',
+      isiOS: Vue.Native.Platform === 'android',
     };
   },
   mounted() {

driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-waterfall.vue

@@ -4,7 +4,6 @@
       ref="gridView"
       :content-inset="contentInset"
       :column-spacing="columnSpacing"
-      :contain-banner-view="!isAndroid"
       :contain-pull-footer="true"
       :inter-item-spacing="interItemSpacing"
       :number-of-columns="numberOfColumns"
@@ -25,17 +24,18 @@
         </p>
       </pull-header>
       <div
-        v-if="!isAndroid"
+        v-if="!isAndroid && !isiOS"
         class="banner-view"
       >
         <span>BannerView</span>
       </div>
       <waterfall-item
         v-else
         :full-span="true"
+        :isHeader="true"
         class="banner-view"
       >
-        <span>BannerView</span>
+        <span>Banner View</span>
       </waterfall-item>
       <waterfall-item
         v-for="(ui, index) in dataSource"
@@ -57,6 +57,12 @@
           :item-bean="ui.itemBean"
         />
       </waterfall-item>
+      <waterfall-item
+        :isFooter="true"
+        class="banner-view"
+      >
+        <span>Footer View</span>
+      </waterfall-item>
       <pull-footer
         ref="pullFooter"
         class="pull-footer"
@@ -95,6 +101,7 @@ const numberOfColumns = 2;
 // inner content padding
 const contentInset = { top: 0, left: 5, bottom: 0, right: 5 };
 const isAndroid = Native.Platform === 'android';
+const isiOS = Native.Platform === 'ios';
 
 const mockFetchData = async (): Promise<any> => new Promise((resolve) => {
   setTimeout(() => {
@@ -249,6 +256,7 @@ export default defineComponent({
       onEndReached,
       onClickItem,
       isAndroid,
+      isiOS,
       onHeaderPulling,
       onFooterPulling,
       onHeaderIdle,

driver/js/packages/hippy-react/src/components/waterfall-view.tsx

@@ -64,9 +64,12 @@ interface WaterfallViewProps {
   // Declare whether banner view exists
   containBannerView?: boolean
 
-  // Return banner view element
+  // Return banner view element (header)
   renderBanner?: () => React.ReactElement;
 
+  // Return footer banner view element
+  renderFooter?:  () => React.ReactElement;
+
   /**
    * Passing the data and returns the row component.
    *
@@ -253,6 +256,7 @@ class WaterfallView extends React.Component<WaterfallViewProps> {
     const {
       style = {},
       renderBanner,
+      renderFooter,
       numberOfColumns = 2,
       columnSpacing = 0,
       interItemSpacing = 0,
@@ -293,17 +297,18 @@ class WaterfallView extends React.Component<WaterfallViewProps> {
     if (typeof renderBanner === 'function') {
       const banner = renderBanner();
       if (banner) {
-        if (Device.platform.OS === 'ios' || Device.platform.OS === 'ohos') {
+        if (Device.platform.OS === 'ohos') {
           itemList.push((
             <View key="bannerView">
               {React.cloneElement(banner)}
             </View>
           ));
           nativeProps.containBannerView = true;
-        } else if (Device.platform.OS === 'android') {
+        } else {
           const itemProps = {
             key: 'bannerView',
-            fullSpan: true,
+            isHeader: true,
+            fullSpan: true, // only for android
             style: {},
           };
           itemList.push((
@@ -357,6 +362,23 @@ class WaterfallView extends React.Component<WaterfallViewProps> {
       warn('Waterfall attribute [renderItem] is not Function');
     }
 
+    // only ios support currently
+    if (Device.platform.OS === 'ios' && typeof renderFooter === 'function') {
+      const footer = renderFooter();
+      if (footer) {
+        const itemProps = {
+          key: 'WaterfallFooterView',
+          isFooter: true,
+          style: {},
+        };
+        itemList.push((
+          <WaterfallViewItem{...itemProps}>
+            {React.cloneElement(footer)}
+          </WaterfallViewItem>
+        ));
+      }
+    }
+
     return (
       // @ts-ignore
       <ul

renderer/native/ios/renderer/component/waterfalllist/HippyShadowWaterfallItem.h

@@ -38,6 +38,12 @@ NS_ASSUME_NONNULL_BEGIN
 /// Waterfall item's shadowView
 @interface HippyShadowWaterfallItem : HippyShadowView
 
+/// Whether is header view
+@property (nonatomic, assign) BOOL isHeader;
+
+/// Whether is footer view
+@property (nonatomic, assign) BOOL isFooter;
+
 /// frame change observer, usually is shadowListView
 @property (nonatomic, weak) id<HippyShadowWaterfallItemFrameChangedProtocol> observer;
 

renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallItemViewManager.m

@@ -28,6 +28,9 @@ @implementation HippyWaterfallItemViewManager
 
 HIPPY_EXPORT_MODULE(WaterfallItem)
 
+HIPPY_EXPORT_SHADOW_PROPERTY(isHeader, BOOL)
+HIPPY_EXPORT_SHADOW_PROPERTY(isFooter, BOOL)
+
 - (UIView *)view {
     return [HippyWaterfallItemView new];
 }

renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallView.h

@@ -56,10 +56,14 @@ typedef NS_ENUM(NSInteger, NativeRenderScrollState) {
     BOOL _allowNextScrollNoMatterWhat;
 }
 
-/**
- * Content inset for HippyWaterfallView
- */
-@property(nonatomic, assign) UIEdgeInsets contentInset;
+/// inset for items
+@property (nonatomic, assign) UIEdgeInsets contentInset;
+
+/// inset for Header
+@property (nonatomic, assign) UIEdgeInsets headerInset;
+
+/// inset for Footer
+@property (nonatomic, assign) UIEdgeInsets footerInset;
 
 /**
  * Number of columns for HippyWaterfallView