From 485e9d2ef864c826e6f664cc11b572a179beedea Mon Sep 17 00:00:00 2001
From: wwwcg <isarraypro@gmail.com>
Date: Wed, 30 Oct 2024 11:26:50 +0800
Subject: [PATCH] feat(ios): waterfall component support footer view

refactor waterfall component
---
 .../src/components/WaterfallView/index.jsx    |  23 +++-
 .../native-demos/demo-waterfall.vue           |  17 ++-
 .../components/native-demo/demo-waterfall.vue |  14 +-
 .../src/components/waterfall-view.tsx         |  30 ++++-
 .../waterfalllist/HippyShadowWaterfallItem.h  |   6 +
 .../HippyWaterfallItemViewManager.m           |   3 +
 .../waterfalllist/HippyWaterfallView.h        |  12 +-
 .../waterfalllist/HippyWaterfallView.mm       | 101 +++++++++-----
 .../HippyWaterfallViewDataSource.h            |  26 +++-
 .../HippyWaterfallViewDataSource.m            | 126 ++++++------------
 .../waterfalllist/HippyWaterfallViewManager.m |   2 +
 11 files changed, 230 insertions(+), 130 deletions(-)

diff --git a/driver/js/examples/hippy-react-demo/src/components/WaterfallView/index.jsx b/driver/js/examples/hippy-react-demo/src/components/WaterfallView/index.jsx
index 4fd51526e5b..7368992b183 100644
--- a/driver/js/examples/hippy-react-demo/src/components/WaterfallView/index.jsx
+++ b/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);
@@ -239,7 +240,7 @@ export default class ListExample extends React.Component {
 
   }
 
-  // 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}
diff --git a/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue b/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue
index a95b59a450a..5e2df5c8c41 100644
--- a/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-waterfall.vue
+++ b/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() {
diff --git a/driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-waterfall.vue b/driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-waterfall.vue
index d67ab9635e8..fb00f5ee650 100644
--- a/driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-waterfall.vue
+++ b/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,7 +24,7 @@
         </p>
       </pull-header>
       <div
-        v-if="!isAndroid"
+        v-if="!isAndroid && !isiOS"
         class="banner-view"
       >
         <span>BannerView</span>
@@ -33,9 +32,10 @@
       <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,
diff --git a/driver/js/packages/hippy-react/src/components/waterfall-view.tsx b/driver/js/packages/hippy-react/src/components/waterfall-view.tsx
index af2107f8677..ee2326fd796 100644
--- a/driver/js/packages/hippy-react/src/components/waterfall-view.tsx
+++ b/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
diff --git a/renderer/native/ios/renderer/component/waterfalllist/HippyShadowWaterfallItem.h b/renderer/native/ios/renderer/component/waterfalllist/HippyShadowWaterfallItem.h
index 8e75ba48228..3d791cefb39 100644
--- a/renderer/native/ios/renderer/component/waterfalllist/HippyShadowWaterfallItem.h
+++ b/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;
 
diff --git a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallItemViewManager.m b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallItemViewManager.m
index 0e49d4e0016..093adce9453 100644
--- a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallItemViewManager.m
+++ b/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];
 }
diff --git a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallView.h b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallView.h
index 35025b65395..8fbc1a732ff 100644
--- a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallView.h
+++ b/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
diff --git a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallView.mm b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallView.mm
index e76d0b96ee4..902d8304353 100644
--- a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallView.mm
+++ b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallView.mm
@@ -45,13 +45,16 @@ @interface HippyWaterfallView () <HippyInvalidating, HippyRefreshDelegate> {
     BOOL _manualScroll;
 }
 
+/// Layout
 @property (nonatomic, strong) HippyCollectionViewWaterfallLayout *layout;
 
-@property (nonatomic, assign) NSInteger initialListSize;
+/// Whether contain a bannerView, js set.
+/// As of version 3.3.2, use isHeader prop to determine whether it is banner,
+/// Deprecated, used only for compatibility with old js code.
 @property (nonatomic, assign) BOOL containBannerView;
 
+/// Hippy root view
 @property (nonatomic, weak) HippyRootView *rootView;
-@property (nonatomic, strong) UIView *loadingView;
 
 @end
 
@@ -98,7 +101,13 @@ - (void)registerCells {
 }
 
 - (void)registerSupplementaryViews {
-    
+    Class cls = [self listItemClass];
+    [_collectionView registerClass:cls
+        forSupplementaryViewOfKind:HippyCollectionElementKindSectionHeader
+               withReuseIdentifier:HippyCollectionElementKindSectionHeader];
+    [_collectionView registerClass:cls
+        forSupplementaryViewOfKind:HippyCollectionElementKindSectionFooter
+               withReuseIdentifier:HippyCollectionElementKindSectionFooter];
 }
 
 - (__kindof UICollectionViewLayout *)collectionViewLayout {
@@ -159,16 +168,26 @@ - (void)zoomToRect:(CGRect)rect animated:(BOOL)animated {
 
 - (void)setContainBannerView:(BOOL)containBannerView {
     _containBannerView = containBannerView;
+    [self reloadData];
 }
 
 #pragma mark Setter & Getter
 
 - (void)setContentInset:(UIEdgeInsets)contentInset {
     _contentInset = contentInset;
-
     _layout.sectionInset = _contentInset;
 }
 
+- (void)setHeaderInset:(UIEdgeInsets)headerInset {
+    _headerInset = headerInset;
+    _layout.headerInset = headerInset;
+}
+
+- (void)setFooterInset:(UIEdgeInsets)footerInset {
+    _footerInset = footerInset;
+    _layout.footerInset = footerInset;
+}
+
 - (void)setNumberOfColumns:(NSInteger)numberOfColumns {
     _numberOfColumns = numberOfColumns;
     _layout.columnCount = _numberOfColumns;
@@ -230,7 +249,6 @@ - (void)insertHippySubview:(UIView *)subview atIndex:(NSInteger)atIndex {
         _headerRefreshView = (HippyHeaderRefresh *)subview;
         [_headerRefreshView setScrollView:self.collectionView];
         _headerRefreshView.delegate = self;
-        _headerRefreshView.frame = subview.hippyShadowView.frame;
     } else if ([subview isKindOfClass:[HippyFooterRefresh class]]) {
         if (_footerRefreshView) {
             [_footerRefreshView removeFromSuperview];
@@ -238,9 +256,6 @@ - (void)insertHippySubview:(UIView *)subview atIndex:(NSInteger)atIndex {
         _footerRefreshView = (HippyFooterRefresh *)subview;
         [_footerRefreshView setScrollView:self.collectionView];
         _footerRefreshView.delegate = self;
-        _footerRefreshView.frame = subview.hippyShadowView.frame;
-        UIEdgeInsets insets = self.collectionView.contentInset;
-        self.collectionView.contentInset = UIEdgeInsetsMake(insets.top, insets.left, _footerRefreshView.frame.size.height, insets.right);
     }
 }
 
@@ -275,13 +290,42 @@ - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cell
     return cell;
 }
 
+- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView
+           viewForSupplementaryElementOfKind:(NSString *)kind
+                                 atIndexPath:(NSIndexPath *)indexPath {
+    HippyWaterfallViewCell *headOrFooterCell = nil;
+    HippyShadowView *shadowView = nil;
+    if ([kind isEqualToString:HippyCollectionElementKindSectionHeader]) {
+        headOrFooterCell = [collectionView dequeueReusableSupplementaryViewOfKind:HippyCollectionElementKindSectionHeader
+                                                              withReuseIdentifier:HippyCollectionElementKindSectionHeader
+                                                                     forIndexPath:indexPath];
+        shadowView = [_dataSource headerForSection:indexPath.section];
+    } else if ([kind isEqualToString:HippyCollectionElementKindSectionFooter]) {
+        headOrFooterCell = [collectionView dequeueReusableSupplementaryViewOfKind:HippyCollectionElementKindSectionFooter
+                                                              withReuseIdentifier:HippyCollectionElementKindSectionFooter
+                                                                     forIndexPath:indexPath];
+        shadowView = [_dataSource footerForSection:indexPath.section];
+    }
+    
+    UIView *cellView = nil;
+    UIView *cachedCellView = [_cachedWeakCellViews objectForKey:shadowView.hippyTag];
+    if (cachedCellView) {
+        cellView = cachedCellView;
+    } else {
+        cellView = [self.uiManager createViewForShadowListItem:shadowView];
+        [_cachedWeakCellViews setObject:cellView forKey:shadowView.hippyTag];
+    }
+    headOrFooterCell.cellView = cellView;
+    cellView.parent = self;
+    return headOrFooterCell;
+}
+
+#pragma mark - UICollectionViewDelegate
+
 - (void)collectionView:(UICollectionView *)collectionView
        willDisplayCell:(UICollectionViewCell *)cell
     forItemAtIndexPath:(NSIndexPath *)indexPath {
-    if (0 == [indexPath section] && _containBannerView) {
-        return;
-    }
-    NSInteger section = _containBannerView ? 1 : 0;
+    NSInteger section = 0;
     NSInteger count = [_dataSource numberOfCellForSection:section];
     NSInteger leftCnt = count - indexPath.item - 1;
     if (leftCnt == _preloadItemNumber) {
@@ -297,7 +341,7 @@ - (void)collectionView:(UICollectionView *)collectionView
     }
 }
 
-#pragma mark - NativeRenderCollectionViewDelegateWaterfallLayout
+#pragma mark - HippyCollectionViewDelegateWaterfallLayout
 
 - (CGSize)collectionView:(UICollectionView *)collectionView
                   layout:(UICollectionViewLayout *)collectionViewLayout
@@ -314,21 +358,29 @@ - (CGSize)collectionView:(UICollectionView *)collectionView
 - (NSInteger)collectionView:(UICollectionView *)collectionView
                      layout:(UICollectionViewLayout *)collectionViewLayout
       columnCountForSection:(NSInteger)section {
-    if (_containBannerView && 0 == section) {
-        return 1;
-    }
     return _numberOfColumns;
 }
 
 - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView
                         layout:(UICollectionViewLayout *)collectionViewLayout
         insetForSectionAtIndex:(NSInteger)section {
-    if (0 == section && _containBannerView) {
-        return UIEdgeInsetsZero;
-    }
     return _contentInset;
 }
 
+- (CGFloat)collectionView:(UICollectionView *)collectionView 
+                   layout:(UICollectionViewLayout *)collectionViewLayout
+ heightForHeaderInSection:(NSInteger)section {
+    HippyShadowView *shadowView = [_dataSource headerForSection:section];
+    return CGRectGetHeight(shadowView.frame);
+}
+
+- (CGFloat)collectionView:(UICollectionView *)collectionView
+                   layout:(UICollectionViewLayout *)collectionViewLayout
+ heightForFooterInSection:(NSInteger)section {
+    HippyShadowView *shadowView = [_dataSource footerForSection:section];
+    return CGRectGetHeight(shadowView.frame);
+}
+
 - (void)startLoadMore {
     [self startLoadMoreData];
 }
@@ -378,17 +430,6 @@ - (NSDictionary *)scrollEventDataWithState:(NativeRenderScrollState)state {
         NSInteger firstVisibleRowIndex = [[visibleItems firstObject] row];
         NSInteger lastVisibleRowIndex = [[visibleItems lastObject] row];
 
-        if (_containBannerView) {
-            if ([visibleItems firstObject].section == 0) {
-                if ([visibleItems lastObject].section != 0) {
-                    lastVisibleRowIndex = lastVisibleRowIndex + 1;
-                }
-            } else {
-                firstVisibleRowIndex = firstVisibleRowIndex + 1;
-                lastVisibleRowIndex = lastVisibleRowIndex + 1;
-            }
-        }
-
         NSMutableArray *visibleRowsFrames = [NSMutableArray arrayWithCapacity:[visibleItems count]];
         for (NSIndexPath *indexPath in visibleItems) {
             UICollectionViewCell *node = [self.collectionView cellForItemAtIndexPath:indexPath];
diff --git a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewDataSource.h b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewDataSource.h
index e16810d10a4..11b146cb32a 100644
--- a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewDataSource.h
+++ b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewDataSource.h
@@ -50,8 +50,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 /// Whether contain bannerView, currently used by the waterfall component.
 @property(nonatomic, readonly) BOOL containBannerView;
-/// The BannerView, currently waterfall component has.
-@property(nonatomic, readonly) HippyShadowView *bannerView;
+
 /// The shadowViews of Cells
 @property(nonatomic, readonly) NSArray<NSArray<HippyShadowView *> *> *shadowCellViews;
 /// The view name of cell item
@@ -64,12 +63,35 @@ NS_ASSUME_NONNULL_BEGIN
 - (void)setDataSource:(NSArray<__kindof HippyShadowView *> *)dataSource
     containBannerView:(BOOL)containBannerView;
 
+/// Get shadowView for given indexPath
+/// - Parameter indexPath: NSIndexPath
 - (HippyShadowView *)cellForIndexPath:(NSIndexPath *)indexPath;
+
+/// Get header shadowView (old bannerView)
+/// - Parameter section: unused, currently only one section
 - (HippyShadowView *)headerForSection:(NSInteger)section;
+
+/// Get footer shadowView
+/// - Parameter section: unused, currently only one section
+- (HippyShadowView *)footerForSection:(NSInteger)section;
+
+/// Get section number
 - (NSInteger)numberOfSection;
+
+/// Cell count of given section
+/// - Parameter section: NSInteger
 - (NSInteger)numberOfCellForSection:(NSInteger)section;
+
+/// Get indexPath of given shadowView
+/// - Parameter cell: shadowView
 - (NSIndexPath *)indexPathOfCell:(HippyShadowView *)cell;
+
+/// Get the NSIndexPath for given `flat` index.
+/// - Parameter index: NSInteger
 - (NSIndexPath *)indexPathForFlatIndex:(NSInteger)index;
+
+/// Get `flat` index (take header into account) for given IndexPath
+/// - Parameter indexPath: NSIndexPath
 - (NSInteger)flatIndexForIndexPath:(NSIndexPath *)indexPath;
 
 
diff --git a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewDataSource.m b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewDataSource.m
index 20684fe2beb..620b3619a17 100644
--- a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewDataSource.m
+++ b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewDataSource.m
@@ -28,7 +28,8 @@
 
 @interface HippyWaterfallViewDataSource () {
     BOOL _containBannerView;
-    HippyShadowView *_bannerView;
+    HippyShadowView *_headerView;
+    HippyShadowWaterfallItem *_footerView;
     NSString *_itemViewName;
 }
 
@@ -50,7 +51,7 @@ - (instancetype)initWithDataSource:(NSArray<__kindof HippyShadowView *> *)dataSo
 - (id)copyWithZone:(nullable NSZone *)zone {
     HippyWaterfallViewDataSource *dataSource = [[[self class] allocWithZone:zone] init];
     dataSource->_containBannerView = self.containBannerView;
-    dataSource->_bannerView = _bannerView;
+    dataSource->_headerView = _headerView;
     NSMutableArray<NSArray<HippyShadowView *> *> *objectSectionViews = [NSMutableArray arrayWithCapacity:[_shadowCellViews count]];
     for (NSArray<HippyShadowView *> *objects in _shadowCellViews) {
         NSArray<HippyShadowView *> *copiedObjects = [objects copy];
@@ -61,129 +62,90 @@ - (id)copyWithZone:(nullable NSZone *)zone {
     return dataSource;
 }
 
-- (void)setDataSource:(NSArray<HippyShadowView *> *)dataSource {
-    [self setDataSource:dataSource containBannerView:NO];
-}
-
-- (void)setDataSource:(NSArray<HippyShadowView *> *)dataSource
-    containBannerView:(BOOL)containBannerView {
+- (void)setDataSource:(NSArray<HippyShadowView *> *)dataSource containBannerView:(BOOL)containBannerView {
     _containBannerView = containBannerView;
     if ([dataSource count] > 0) {
-        if (containBannerView) {
+        // find all cell item and header/footer in a loop
+        NSString *waterfallItemViewName = self.itemViewName;
+        NSMutableArray *cellItems = [NSMutableArray arrayWithCapacity:dataSource.count];
+        for (int i = 0; i < dataSource.count; i++) {
+            HippyShadowView *shadowView = [dataSource objectAtIndex:i];
+            if ([shadowView.viewName isEqualToString:waterfallItemViewName]) {
+                HippyShadowWaterfallItem *item = (HippyShadowWaterfallItem *)shadowView;
+                if ([item isHeader]) {
+                    _headerView = item;
+                    _containBannerView = YES;
+                } else if ([item isFooter]) {
+                    _footerView = item;
+                } else {
+                    [cellItems addObject:item];
+                }
+            }
+        }
+        
+        if (cellItems.count > 0) {
+            _shadowCellViews = [NSArray arrayWithObject:cellItems];
+        } else {
+            _shadowCellViews = nil;
+        }
+        
+        if (containBannerView && !_headerView) {
             // find the first shadowView that is not pull header or pull footer
+            // Old logic and is deprecated, keep it for some time to ensure js compatibility
+            // As of version 3.3.2, use the `isHeader` attribute to determine whether it is banner.
             for (int i = 0; i < dataSource.count; i++) {
                 HippyShadowView *subShadowView = [dataSource objectAtIndex:i];
                 if ([subShadowView.viewName isEqualToString:HippyHeaderRefreshManager.moduleName]) {
                     continue;
                 } else {
-                    _bannerView = subShadowView;
+                    _headerView = subShadowView;
                     break;
                 }
             }
         }
-        NSUInteger loc = _containBannerView ? 1 : 0;
-        NSArray<HippyShadowView *> *candidateRenderObjectViews = [dataSource subarrayWithRange:NSMakeRange(loc, [dataSource count] - loc)];
-        NSString *viewName = self.itemViewName;
-        static dispatch_once_t onceToken;
-        static NSPredicate *prediate = nil;
-        dispatch_once(&onceToken, ^{
-            prediate = [NSPredicate predicateWithBlock:^BOOL(id  _Nullable evaluatedObject, NSDictionary<NSString *,id> * _Nullable bindings) {
-                HippyShadowView *renderObjectView = (HippyShadowView *)evaluatedObject;
-                if ([renderObjectView.viewName isEqualToString:viewName]) {
-                    return YES;
-                }
-                return NO;
-            }];
-        });
-        NSArray<HippyShadowView *> *objects = [candidateRenderObjectViews filteredArrayUsingPredicate:prediate];
-        if ([objects count]) {
-            _shadowCellViews = [NSArray arrayWithObject:objects];
-        }
-        else {
-            _shadowCellViews = nil;
-        }
     }
 }
 
--(HippyShadowView *)bannerView {
-    return _bannerView;
-}
+#pragma mark - Getters
 
 - (NSArray<NSArray<HippyShadowView *> *> *)shadowCellViews {
     return [_shadowCellViews copy];
 }
 
 - (HippyShadowView *)cellForIndexPath:(NSIndexPath *)indexPath {
-    if (_containBannerView && 0 == [indexPath section]) {
-        return _bannerView;
-    }
-    else {
-        return [[_shadowCellViews firstObject] objectAtIndex:[indexPath row]];
-    }
+    return [[_shadowCellViews firstObject] objectAtIndex:[indexPath row]];
 }
 
 - (HippyShadowView *)headerForSection:(NSInteger)section {
-    return nil;
+    return _headerView;
+}
+
+- (HippyShadowView *)footerForSection:(NSInteger)section {
+    return _footerView;
 }
 
 - (NSInteger)numberOfSection {
-    NSInteger count = _containBannerView ? 1  : 0;
-    count += [[_shadowCellViews firstObject] count] ? 1 : 0;
+    NSInteger count = [[_shadowCellViews firstObject] count] ? 1 : 0;
     return count;
 }
 
 - (NSInteger)numberOfCellForSection:(NSInteger)section {
-    if (_containBannerView) {
-        return 0 == section ? 1 : [[_shadowCellViews firstObject] count];
-    }
-    else {
-        return [[_shadowCellViews firstObject] count];
-    }
+    return [[_shadowCellViews firstObject] count];
 }
 
 - (NSIndexPath *)indexPathOfCell:(HippyShadowView *)cell {
-    NSInteger row = 0;
     NSInteger section = 0;
-    if (_containBannerView) {
-        if (_bannerView != cell) {
-            section = 1;
-            row = [[_shadowCellViews firstObject] indexOfObject:cell];
-        }
-    }
-    else {
-        row = [[_shadowCellViews firstObject] indexOfObject:cell];
-    }
+    NSInteger row = [[_shadowCellViews firstObject] indexOfObject:cell];
     return [NSIndexPath indexPathForRow:row inSection:section];
 }
 
 - (NSIndexPath *)indexPathForFlatIndex:(NSInteger)index {
-    NSInteger row = 0;
     NSInteger section = 0;
-    if (_containBannerView) {
-        if (0 != index) {
-            section = 1;
-            index -= 1;
-        }
-    }
-    else {
-        row = index;
-    }
-    return [NSIndexPath indexPathForRow:row inSection:section];
+    return [NSIndexPath indexPathForRow:index inSection:section];
 }
 
 - (NSInteger)flatIndexForIndexPath:(NSIndexPath *)indexPath {
-    NSInteger row = [indexPath row];
-    NSInteger section = [indexPath section];
-    NSInteger index = 0;
-    if (_containBannerView) {
-        if (0 != section) {
-            index = row + 1;
-        }
-    }
-    else {
-        index = row;
-    }
-    return index;
+    return [indexPath row];
 }
 
 
diff --git a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewManager.m b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewManager.m
index 936a8dd5db4..c1ac185eef0 100644
--- a/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewManager.m
+++ b/renderer/native/ios/renderer/component/waterfalllist/HippyWaterfallViewManager.m
@@ -30,6 +30,8 @@ @implementation HippyWaterfallViewManager
 HIPPY_EXPORT_MODULE(WaterfallView)
 
 HIPPY_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
+HIPPY_EXPORT_VIEW_PROPERTY(headerInset, UIEdgeInsets)
+HIPPY_EXPORT_VIEW_PROPERTY(footerInset, UIEdgeInsets)
 HIPPY_EXPORT_VIEW_PROPERTY(numberOfColumns, NSInteger)
 HIPPY_EXPORT_VIEW_PROPERTY(preloadItemNumber, NSInteger)
 HIPPY_EXPORT_VIEW_PROPERTY(columnSpacing, CGFloat)