h5:List support loadmore

doric-h5/dist/ListDemo.js

@@ -0,0 +1,110 @@
+'use strict';
+
+var doric = require('doric');
+
+const colors = [
+    "#70a1ff",
+    "#7bed9f",
+    "#ff6b81",
+    "#a4b0be",
+    "#f0932b",
+    "#eb4d4b",
+    "#6ab04c",
+    "#e056fd",
+    "#686de0",
+    "#30336b",
+].map(e => doric.Color.parse(e));
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let ListPanel = class ListPanel extends doric.Panel {
+    build(rootView) {
+        let offset = Math.ceil(Math.random() * colors.length);
+        doric.vlayout([
+            doric.list({
+                itemCount: 100,
+                renderItem: (idx) => {
+                    let counter;
+                    return doric.listItem(doric.hlayout([
+                        doric.text({
+                            layoutConfig: {
+                                widthSpec: doric.LayoutSpec.FIT,
+                                heightSpec: doric.LayoutSpec.JUST,
+                                alignment: doric.gravity().center(),
+                            },
+                            text: `Cell At Line ${idx}`,
+                            textAlignment: doric.gravity().center(),
+                            textColor: doric.Color.parse("#ffffff"),
+                            textSize: 20,
+                            height: 50,
+                        }),
+                        doric.text({
+                            textColor: doric.Color.parse("#ffffff"),
+                            textSize: 20,
+                            text: "",
+                        }).also(it => {
+                            counter = it;
+                            it.layoutConfig = {
+                                widthSpec: doric.LayoutSpec.FIT,
+                                heightSpec: doric.LayoutSpec.FIT,
+                                margin: {
+                                    left: 10,
+                                }
+                            };
+                        })
+                    ]).also(it => {
+                        it.layoutConfig = {
+                            widthSpec: doric.LayoutSpec.MOST,
+                            heightSpec: doric.LayoutSpec.FIT,
+                            margin: {
+                                bottom: 2,
+                            }
+                        };
+                        it.gravity = doric.gravity().center();
+                        it.backgroundColor = colors[(idx + offset) % colors.length];
+                        let clicked = 0;
+                        it.onClick = () => {
+                            counter.text = `Item Clicked ${++clicked}`;
+                        };
+                    })).also(it => {
+                        it.layoutConfig = {
+                            widthSpec: doric.LayoutSpec.MOST,
+                            heightSpec: doric.LayoutSpec.FIT,
+                        };
+                        it.onClick = () => {
+                            doric.log(`Click item at ${idx}`);
+                            it.height += 10;
+                            it.nativeChannel(context, "getWidth")().then(resolve => {
+                                doric.log(`resolve,${resolve}`);
+                            }, reject => {
+                                doric.log(`reject,${reject}`);
+                            });
+                        };
+                    });
+                },
+                layoutConfig: doric.layoutConfig().most().configHeight(doric.LayoutSpec.JUST),
+                height: 500,
+            }).also(it => {
+                it.loadMore = true;
+                it.onLoadMore = () => {
+                    it.itemCount += 100;
+                };
+                it.loadMoreView = doric.listItem(doric.text({
+                    text: "Loading",
+                    layoutConfig: doric.layoutConfig().most().configHeight(doric.LayoutSpec.JUST).configAlignmnet(doric.Gravity.Center),
+                    height: 50,
+                }));
+            }),
+        ]).apply({
+            layoutConfig: doric.layoutConfig().most(),
+        }).in(rootView);
+    }
+};
+ListPanel = __decorate([
+    Entry
+], ListPanel);
+//# sourceMappingURL=ListDemo.js.map

doric-h5/dist/index.js

@@ -3937,7 +3937,7 @@ return __module.exports;
             for (let i = 1; i < arguments.length; i++) {
                 argumentsList.push(arguments[i]);
             }
-            Reflect.apply(this.context.invokeEntityMethod, this.context, argumentsList);
+            return Reflect.apply(this.context.invokeEntityMethod, this.context, argumentsList);
         }
     }
     class DoricSuperNode extends DoricViewNode {
@@ -4643,6 +4643,110 @@ return __module.exports;
         }
     }
 
+    class DoricListItemNode extends DoricStackNode {
+    }
+
+    class DoricListNode extends DoricSuperNode {
+        constructor() {
+            super(...arguments);
+            this.itemCount = 0;
+            this.batchCount = 15;
+            this.loadMore = false;
+            this.childNodes = [];
+        }
+        blendProps(v, propName, prop) {
+            switch (propName) {
+                case "itemCount":
+                    this.itemCount = prop;
+                    break;
+                case "renderItem":
+                    this.reset();
+                    this.renderItemFuncId = prop;
+                    break;
+                case "onLoadMore":
+                    this.onLoadMoreFuncId = prop;
+                    break;
+                case "loadMoreView":
+                    this.loadMoreViewId = prop;
+                    break;
+                case "batchCount":
+                    this.batchCount = prop;
+                    break;
+                case "loadMore":
+                    this.loadMore = prop;
+                    break;
+                default:
+                    super.blendProps(v, propName, prop);
+                    break;
+            }
+        }
+        reset() {
+            while (this.view.lastElementChild) {
+                this.view.removeChild(this.view.lastElementChild);
+            }
+        }
+        onBlended() {
+            super.onBlended();
+            if (this.childNodes.length !== this.itemCount) {
+                const ret = this.callJSResponse("renderBunchedItems", this.childNodes.length, this.itemCount);
+                this.childNodes = this.childNodes.concat(ret.map(e => {
+                    const viewNode = DoricViewNode.create(this.context, e.type);
+                    viewNode.viewId = e.id;
+                    viewNode.init(this);
+                    viewNode.blend(e.props);
+                    this.view.appendChild(viewNode.view);
+                    return viewNode;
+                }));
+            }
+            if (this.loadMoreViewNode && this.view.contains(this.loadMoreViewNode.view)) {
+                this.view.removeChild(this.loadMoreViewNode.view);
+            }
+            if (this.loadMore) {
+                if (!this.loadMoreViewNode) {
+                    const loadMoreViewModel = this.getSubModel(this.loadMoreViewId || "");
+                    if (loadMoreViewModel) {
+                        this.loadMoreViewNode = DoricViewNode.create(this.context, loadMoreViewModel.type);
+                        this.loadMoreViewNode.viewId = loadMoreViewModel.id;
+                        this.loadMoreViewNode.init(this);
+                        this.loadMoreViewNode.blend(loadMoreViewModel.props);
+                    }
+                }
+                if (this.loadMoreViewNode) {
+                    this.view.appendChild(this.loadMoreViewNode.view);
+                }
+            }
+        }
+        blendSubNode(model) {
+            const viewNode = this.getSubNodeById(model.id);
+            if (viewNode) {
+                viewNode.blend(model.props);
+            }
+        }
+        getSubNodeById(viewId) {
+            if (viewId === this.loadMoreViewId) {
+                return this.loadMoreViewNode;
+            }
+            return this.childNodes.filter(e => e.viewId === viewId)[0];
+        }
+        onScrollToEnd() {
+            if (this.loadMore && this.onLoadMoreFuncId) {
+                this.callJSResponse(this.onLoadMoreFuncId);
+            }
+        }
+        build() {
+            const ret = document.createElement('div');
+            ret.style.overflow = "scroll";
+            ret.addEventListener("scroll", () => {
+                if (this.loadMore) {
+                    if (ret.scrollTop + ret.offsetHeight === ret.scrollHeight) {
+                        this.onScrollToEnd();
+                    }
+                }
+            });
+            return ret;
+        }
+    }
+
     const bundles = new Map;
     const plugins = new Map;
     const nodes = new Map;
@@ -4672,6 +4776,8 @@ return __module.exports;
     registerViewNode('Text', DoricTextNode);
     registerViewNode('Image', DoricImageNode);
     registerViewNode('Scroller', DoricScrollerNode);
+    registerViewNode('ListItem', DoricListItemNode);
+    registerViewNode('List', DoricListNode);
 
     function getScriptId(contextId) {
         return `__doric_script_${contextId}`;
@@ -4832,7 +4938,7 @@ ${content}
             for (let i = 0; i < arguments.length; i++) {
                 argumentsList.push(arguments[i]);
             }
-            Reflect.apply(sandbox.jsCallEntityMethod, this.panel, argumentsList);
+            return Reflect.apply(sandbox.jsCallEntityMethod, this.panel, argumentsList);
         }
         init(frame, extra) {
             this.invokeEntityMethod("__init__", frame, extra ? JSON.stringify(extra) : undefined);

doric-h5/src/shader/DoricListNode.ts

@@ -9,6 +9,7 @@ export class DoricListNode extends DoricSuperNode {
     batchCount = 15
     loadMore = false
     childNodes: DoricListItemNode[] = []
+    loadMoreViewNode?: DoricListItemNode
     blendProps(v: HTMLParagraphElement, propName: string, prop: any) {
         switch (propName) {
             case "itemCount":
@@ -45,15 +46,32 @@ export class DoricListNode extends DoricSuperNode {
     onBlended() {
         super.onBlended()
         if (this.childNodes.length !== this.itemCount) {
-            const ret = this.callJSResponse("renderBunchedItems", 0, this.itemCount) as DVModel[]
+            const ret = this.callJSResponse("renderBunchedItems", this.childNodes.length, this.itemCount) as DVModel[]
-            this.childNodes = ret.map(e => {
+            this.childNodes = this.childNodes.concat(ret.map(e => {
                 const viewNode = DoricViewNode.create(this.context, e.type) as DoricListItemNode
                 viewNode.viewId = e.id
                 viewNode.init(this)
                 viewNode.blend(e.props)
                 this.view.appendChild(viewNode.view)
                 return viewNode
-            })
+            }))
+        }
+        if (this.loadMoreViewNode && this.view.contains(this.loadMoreViewNode.view)) {
+            this.view.removeChild(this.loadMoreViewNode.view)
+        }
+        if (this.loadMore) {
+            if (!this.loadMoreViewNode) {
+                const loadMoreViewModel = this.getSubModel(this.loadMoreViewId || "")
+                if (loadMoreViewModel) {
+                    this.loadMoreViewNode = DoricViewNode.create(this.context, loadMoreViewModel.type) as DoricListItemNode
+                    this.loadMoreViewNode.viewId = loadMoreViewModel.id
+                    this.loadMoreViewNode.init(this)
+                    this.loadMoreViewNode.blend(loadMoreViewModel.props)
+                }
+            }
+            if (this.loadMoreViewNode) {
+                this.view.appendChild(this.loadMoreViewNode.view)
+            }
         }
     }
     blendSubNode(model: DVModel) {
@@ -64,12 +82,28 @@ export class DoricListNode extends DoricSuperNode {
     }
 
     getSubNodeById(viewId: string) {
+        if (viewId === this.loadMoreViewId) {
+            return this.loadMoreViewNode
+        }
         return this.childNodes.filter(e => e.viewId === viewId)[0]
     }
 
+    onScrollToEnd() {
+        if (this.loadMore && this.onLoadMoreFuncId) {
+            this.callJSResponse(this.onLoadMoreFuncId)
+        }
+    }
+
     build() {
         const ret = document.createElement('div')
         ret.style.overflow = "scroll"
+        ret.addEventListener("scroll", () => {
+            if (this.loadMore) {
+                if (ret.scrollTop + ret.offsetHeight === ret.scrollHeight) {
+                    this.onScrollToEnd()
+                }
+            }
+        })
         return ret
     }
 }