flowlayout add header and footer:js and android implement

doric-android/doric/src/main/java/pub/doric/shader/flowlayout/FlowAdapter.java

@@ -39,7 +39,9 @@ import pub.doric.shader.ViewNode;
  * @CreateDate: 2019-11-12
  */
 class FlowAdapter extends RecyclerView.Adapter<FlowAdapter.DoricViewHolder> {
-
+    private static final int TYPE_LOAD_MORE = -1;
+    private static final int TYPE_HEADER = -2;
+    private static final int TYPE_FOOTER = -3;
     private final FlowLayoutNode flowLayoutNode;
     String renderItemFuncId;
     int itemCount = 0;
@@ -67,7 +69,17 @@ class FlowAdapter extends RecyclerView.Adapter<FlowAdapter.DoricViewHolder> {
             holder.flowLayoutItemNode.setId(jsObject.getProperty("id").asString().value());
             holder.flowLayoutItemNode.blend(jsObject.getProperty("props").asObject());
         }
-        if (position >= this.itemCount && !TextUtils.isEmpty(this.flowLayoutNode.onLoadMoreFuncId)) {
+        if ((this.flowLayoutNode.hasHeader() && position == 0)
+                || (this.flowLayoutNode.hasFooter() && position == this.getItemCount() - 1)) {
+            StaggeredGridLayoutManager.LayoutParams layoutParams = new StaggeredGridLayoutManager.LayoutParams(
+                    ViewGroup.LayoutParams.MATCH_PARENT,
+                    holder.itemView.getLayoutParams().height
+            );
+            layoutParams.setFullSpan(true);
+            holder.itemView.setLayoutParams(layoutParams);
+        } else if (this.flowLayoutNode.loadMore
+                && position == this.itemCount + (this.flowLayoutNode.hasHeader() ? 1 : 0)
+                && !TextUtils.isEmpty(this.flowLayoutNode.onLoadMoreFuncId)) {
             callLoadMore();
             StaggeredGridLayoutManager.LayoutParams layoutParams = new StaggeredGridLayoutManager.LayoutParams(
                     ViewGroup.LayoutParams.MATCH_PARENT,
@@ -80,16 +92,27 @@ class FlowAdapter extends RecyclerView.Adapter<FlowAdapter.DoricViewHolder> {
 
     @Override
     public int getItemCount() {
-        return this.itemCount + (this.flowLayoutNode.loadMore ? 1 : 0);
+        return this.itemCount
+                + (this.flowLayoutNode.loadMore ? 1 : 0)
+                + (this.flowLayoutNode.hasHeader() ? 1 : 0)
+                + (this.flowLayoutNode.hasFooter() ? 1 : 0);
     }
 
     @Override
     public int getItemViewType(int position) {
-        if (position >= itemCount) {
+        if (this.flowLayoutNode.hasHeader() && position == 0) {
-            return Integer.MAX_VALUE;
+            return TYPE_HEADER;
+        }
+
+        if (this.flowLayoutNode.hasFooter() && position == this.getItemCount() - 1) {
+            return TYPE_FOOTER;
+        }
+
+        if (position >= this.itemCount + (this.flowLayoutNode.hasHeader() ? 1 : 0)) {
+            return TYPE_LOAD_MORE;
         }
         JSValue value = getItemModel(position);
-        if (value.isObject()) {
+        if (value != null && value.isObject()) {
             if (value.asObject().getProperty("identifier").isString()) {
                 return value.asObject().getProperty("identifier").asString().value().hashCode();
             }
@@ -97,10 +120,21 @@ class FlowAdapter extends RecyclerView.Adapter<FlowAdapter.DoricViewHolder> {
         return super.getItemViewType(position);
     }
 
-    private JSValue getItemModel(final int position) {
+    private JSValue getItemModel(int position) {
-        if (position >= this.itemCount) {
+        if (this.flowLayoutNode.hasHeader() && position == 0) {
+            return this.flowLayoutNode.getSubModel(this.flowLayoutNode.headerViewId);
+        }
+
+        if (this.flowLayoutNode.hasFooter() && position == this.getItemCount() - 1) {
+            return this.flowLayoutNode.getSubModel(this.flowLayoutNode.footerViewId);
+        }
+
+        if (position >= this.itemCount + (this.flowLayoutNode.hasHeader() ? 1 : 0)) {
             return this.flowLayoutNode.getSubModel(this.flowLayoutNode.loadMoreViewId);
         }
+        if (this.flowLayoutNode.hasHeader()) {
+            position--;
+        }
         String id = itemValues.get(position);
         if (TextUtils.isEmpty(id)) {
             AsyncResult<JSDecoder> asyncResult = flowLayoutNode.pureCallJSResponse(

doric-android/doric/src/main/java/pub/doric/shader/flowlayout/FlowLayoutNode.java

@@ -99,6 +99,9 @@ public class FlowLayoutNode extends SuperNode<RecyclerView> implements IDoricScr
     private int itemCount = 0;
     private boolean scrollable = true;
 
+    String headerViewId;
+    String footerViewId;
+
     public FlowLayoutNode(DoricContext doricContext) {
         super(doricContext);
         this.flowAdapter = new FlowAdapter(this);
@@ -206,6 +209,12 @@ public class FlowLayoutNode extends SuperNode<RecyclerView> implements IDoricScr
                 }
                 this.onScrollEndFuncId = prop.asString().value();
                 break;
+            case "header":
+                this.headerViewId = prop.asString().value();
+                break;
+            case "footer":
+                this.footerViewId = prop.asString().value();
+                break;
             default:
                 super.blend(view, name, prop);
                 break;
@@ -316,4 +325,12 @@ public class FlowLayoutNode extends SuperNode<RecyclerView> implements IDoricScr
     public void removeScrollChangeListener(DoricScrollChangeListener listener) {
         listeners.remove(listener);
     }
+
+    boolean hasHeader() {
+        return !TextUtils.isEmpty(this.headerViewId);
+    }
+
+    boolean hasFooter() {
+        return !TextUtils.isEmpty(this.footerViewId);
+    }
 }

doric-demo/src/FlowLayoutDemo.ts

@@ -1,4 +1,4 @@
-import { Group, Panel, flowlayout, layoutConfig, FlowLayoutItem, text, Color, LayoutSpec, Gravity, flowItem } from "doric";
+import { Group, Panel, flowlayout, layoutConfig, FlowLayoutItem, text, Color, LayoutSpec, Gravity, flowItem, image } from "doric";
 import { colors, label } from "./utils";
 
 const imageUrls = [
@@ -17,10 +17,18 @@ class FlowDemo extends Panel {
     build(rootView: Group) {
         const flowView = flowlayout({
             layoutConfig: layoutConfig().most(),
-            itemCount: 100,
+            itemCount: 20,
             columnCount: 3,
             columnSpace: 10,
             rowSpace: 10,
+            header: flowItem(image({
+                layoutConfig: layoutConfig().mostWidth().fitHeight(),
+                imageUrl: imageUrls[0]
+            })),
+            footer: flowItem(image({
+                layoutConfig: layoutConfig().mostWidth().fitHeight(),
+                imageUrl: imageUrls[1]
+            })),
             renderItem: (idx) => {
                 return flowItem(
                     text({
@@ -35,7 +43,7 @@ class FlowDemo extends Panel {
                         layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
                     })
             },
-            loadMore: true,
+            loadMore: false,
             onLoadMore: () => {
                 setTimeout(() => {
                     flowView.itemCount += 20

doric-js/bundle/doric-lib.es5.js

@@ -2944,12 +2944,17 @@ var FlowLayout = /** @class */ (function (_super) {
         return _this;
     }
     FlowLayout.prototype.allSubviews = function () {
+        var ret = __spreadArray([], __read(this.cachedViews.values()));
         if (this.loadMoreView) {
-            return __spreadArray(__spreadArray([], __read(this.cachedViews.values())), [this.loadMoreView]);
+            ret.push(this.loadMoreView);
         }
-        else {
+        if (this.header) {
-            return this.cachedViews.values();
+            ret.push(this.header);
         }
+        if (this.footer) {
+            ret.push(this.footer);
+        }
+        return ret;
     };
     FlowLayout.prototype.reset = function () {
         this.cachedViews.clear();
@@ -2972,6 +2977,12 @@ var FlowLayout = /** @class */ (function (_super) {
         if (this.loadMoreView) {
             this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
         }
+        if (this.header) {
+            this.dirtyProps['header'] = this.header.viewId;
+        }
+        if (this.footer) {
+            this.dirtyProps['footer'] = this.footer.viewId;
+        }
         return _super.prototype.toModel.call(this);
     };
     __decorate$5([
@@ -3026,6 +3037,14 @@ var FlowLayout = /** @class */ (function (_super) {
         Property,
         __metadata$5("design:type", Boolean)
     ], FlowLayout.prototype, "bounces", void 0);
+    __decorate$5([
+        Property,
+        __metadata$5("design:type", FlowLayoutItem)
+    ], FlowLayout.prototype, "header", void 0);
+    __decorate$5([
+        Property,
+        __metadata$5("design:type", FlowLayoutItem)
+    ], FlowLayout.prototype, "footer", void 0);
     return FlowLayout;
 }(Superview));
 function flowlayout(config) {

doric-js/bundle/doric-lib.js

@@ -2220,12 +2220,17 @@ class FlowLayout extends Superview {
         this.batchCount = 15;
     }
     allSubviews() {
+        const ret = [...this.cachedViews.values()];
         if (this.loadMoreView) {
-            return [...this.cachedViews.values(), this.loadMoreView];
+            ret.push(this.loadMoreView);
         }
-        else {
+        if (this.header) {
-            return this.cachedViews.values();
+            ret.push(this.header);
         }
+        if (this.footer) {
+            ret.push(this.footer);
+        }
+        return ret;
     }
     reset() {
         this.cachedViews.clear();
@@ -2247,6 +2252,12 @@ class FlowLayout extends Superview {
         if (this.loadMoreView) {
             this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
         }
+        if (this.header) {
+            this.dirtyProps['header'] = this.header.viewId;
+        }
+        if (this.footer) {
+            this.dirtyProps['footer'] = this.footer.viewId;
+        }
         return super.toModel();
     }
 }
@@ -2302,6 +2313,14 @@ __decorate$5([
     Property,
     __metadata$5("design:type", Boolean)
 ], FlowLayout.prototype, "bounces", void 0);
+__decorate$5([
+    Property,
+    __metadata$5("design:type", FlowLayoutItem)
+], FlowLayout.prototype, "header", void 0);
+__decorate$5([
+    Property,
+    __metadata$5("design:type", FlowLayoutItem)
+], FlowLayout.prototype, "footer", void 0);
 function flowlayout(config) {
     const ret = new FlowLayout;
     for (let key in config) {

doric-js/bundle/doric-vm.js

@@ -3741,12 +3741,17 @@ class FlowLayout extends Superview {
         this.batchCount = 15;
     }
     allSubviews() {
+        const ret = [...this.cachedViews.values()];
         if (this.loadMoreView) {
-            return [...this.cachedViews.values(), this.loadMoreView];
+            ret.push(this.loadMoreView);
         }
-        else {
+        if (this.header) {
-            return this.cachedViews.values();
+            ret.push(this.header);
         }
+        if (this.footer) {
+            ret.push(this.footer);
+        }
+        return ret;
     }
     reset() {
         this.cachedViews.clear();
@@ -3768,6 +3773,12 @@ class FlowLayout extends Superview {
         if (this.loadMoreView) {
             this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
         }
+        if (this.header) {
+            this.dirtyProps['header'] = this.header.viewId;
+        }
+        if (this.footer) {
+            this.dirtyProps['footer'] = this.footer.viewId;
+        }
         return super.toModel();
     }
 }
@@ -3823,6 +3834,14 @@ __decorate$5([
     Property,
     __metadata$5("design:type", Boolean)
 ], FlowLayout.prototype, "bounces", void 0);
+__decorate$5([
+    Property,
+    __metadata$5("design:type", FlowLayoutItem)
+], FlowLayout.prototype, "header", void 0);
+__decorate$5([
+    Property,
+    __metadata$5("design:type", FlowLayoutItem)
+], FlowLayout.prototype, "footer", void 0);
 function flowlayout(config) {
     const ret = new FlowLayout;
     for (let key in config) {

doric-js/index.d.ts

@@ -832,7 +832,7 @@ declare module 'doric/lib/src/widget/flowlayout' {
             identifier?: string;
     }
     export class FlowLayout extends Superview {
-            allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[];
+            allSubviews(): FlowLayoutItem[];
             columnCount: number;
             columnSpace?: number;
             rowSpace?: number;
@@ -855,6 +855,8 @@ declare module 'doric/lib/src/widget/flowlayout' {
                 * Take effect only on iOS
                 */
             bounces?: boolean;
+            header?: FlowLayoutItem;
+            footer?: FlowLayoutItem;
             reset(): void;
             toModel(): NativeViewModel;
     }

doric-js/lib/src/widget/flowlayout.d.ts

@@ -8,7 +8,7 @@ export declare class FlowLayoutItem extends Stack {
 }
 export declare class FlowLayout extends Superview {
     private cachedViews;
-    allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[];
+    allSubviews(): FlowLayoutItem[];
     columnCount: number;
     columnSpace?: number;
     rowSpace?: number;
@@ -31,6 +31,8 @@ export declare class FlowLayout extends Superview {
      * Take effect only on iOS
      */
     bounces?: boolean;
+    header?: FlowLayoutItem;
+    footer?: FlowLayoutItem;
     reset(): void;
     private getItem;
     private renderBunchedItems;

doric-js/lib/src/widget/flowlayout.js

@@ -40,12 +40,17 @@ export class FlowLayout extends Superview {
         this.batchCount = 15;
     }
     allSubviews() {
+        const ret = [...this.cachedViews.values()];
         if (this.loadMoreView) {
-            return [...this.cachedViews.values(), this.loadMoreView];
+            ret.push(this.loadMoreView);
         }
-        else {
+        if (this.header) {
-            return this.cachedViews.values();
+            ret.push(this.header);
         }
+        if (this.footer) {
+            ret.push(this.footer);
+        }
+        return ret;
     }
     reset() {
         this.cachedViews.clear();
@@ -67,6 +72,12 @@ export class FlowLayout extends Superview {
         if (this.loadMoreView) {
             this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
         }
+        if (this.header) {
+            this.dirtyProps['header'] = this.header.viewId;
+        }
+        if (this.footer) {
+            this.dirtyProps['footer'] = this.footer.viewId;
+        }
         return super.toModel();
     }
 }
@@ -122,6 +133,14 @@ __decorate([
     Property,
     __metadata("design:type", Boolean)
 ], FlowLayout.prototype, "bounces", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", FlowLayoutItem)
+], FlowLayout.prototype, "header", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", FlowLayoutItem)
+], FlowLayout.prototype, "footer", void 0);
 export function flowlayout(config) {
     const ret = new FlowLayout;
     for (let key in config) {

doric-js/src/widget/flowlayout.ts

@@ -29,11 +29,17 @@ export class FlowLayout extends Superview {
     private cachedViews: Map<string, FlowLayoutItem> = new Map
 
     allSubviews() {
+        const ret = [...this.cachedViews.values()]
         if (this.loadMoreView) {
-            return [...this.cachedViews.values(), this.loadMoreView]
+            ret.push(this.loadMoreView)
-        } else {
-            return this.cachedViews.values()
         }
+        if (this.header) {
+            ret.push(this.header)
+        }
+        if (this.footer) {
+            ret.push(this.footer)
+        }
+        return ret
     }
 
     @Property
@@ -77,6 +83,12 @@ export class FlowLayout extends Superview {
     @Property
     bounces?: boolean
 
+    @Property
+    header?: FlowLayoutItem
+
+    @Property
+    footer?: FlowLayoutItem
+
     reset() {
         this.cachedViews.clear()
         this.itemCount = 0
@@ -98,6 +110,12 @@ export class FlowLayout extends Superview {
         if (this.loadMoreView) {
             this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId
         }
+        if (this.header) {
+            this.dirtyProps['header'] = this.header.viewId
+        }
+        if (this.footer) {
+            this.dirtyProps['footer'] = this.footer.viewId
+        }
         return super.toModel()
     }
 }

doric-web/dist/index.js

@@ -3795,12 +3795,17 @@ class FlowLayout extends Superview {
         this.batchCount = 15;
     }
     allSubviews() {
+        const ret = [...this.cachedViews.values()];
         if (this.loadMoreView) {
-            return [...this.cachedViews.values(), this.loadMoreView];
+            ret.push(this.loadMoreView);
         }
-        else {
+        if (this.header) {
-            return this.cachedViews.values();
+            ret.push(this.header);
         }
+        if (this.footer) {
+            ret.push(this.footer);
+        }
+        return ret;
     }
     reset() {
         this.cachedViews.clear();
@@ -3822,6 +3827,12 @@ class FlowLayout extends Superview {
         if (this.loadMoreView) {
             this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
         }
+        if (this.header) {
+            this.dirtyProps['header'] = this.header.viewId;
+        }
+        if (this.footer) {
+            this.dirtyProps['footer'] = this.footer.viewId;
+        }
         return super.toModel();
     }
 }
@@ -3877,6 +3888,14 @@ __decorate$5([
     Property,
     __metadata$5("design:type", Boolean)
 ], FlowLayout.prototype, "bounces", void 0);
+__decorate$5([
+    Property,
+    __metadata$5("design:type", FlowLayoutItem)
+], FlowLayout.prototype, "header", void 0);
+__decorate$5([
+    Property,
+    __metadata$5("design:type", FlowLayoutItem)
+], FlowLayout.prototype, "footer", void 0);
 function flowlayout(config) {
     const ret = new FlowLayout;
     for (let key in config) {