From dd12ca765bd1e2f5261cf2b15ad09bb2e7383964 Mon Sep 17 00:00:00 2001 From: "pengfei.zhou" Date: Sat, 28 Dec 2019 14:25:03 +0800 Subject: [PATCH] h5:add ListNode and ListItemNode --- doric-h5/src/DoricContext.ts | 2 +- doric-h5/src/DoricRegistry.ts | 6 +- doric-h5/src/shader/DoricListItemNode.ts | 5 ++ doric-h5/src/shader/DoricListNode.ts | 75 +++++++++++++++++++++ doric-h5/src/shader/DoricRefreshableNode.ts | 18 +++++ doric-h5/src/shader/DoricTextNode.ts | 2 +- doric-h5/src/shader/DoricViewNode.ts | 2 +- 7 files changed, 106 insertions(+), 4 deletions(-) create mode 100644 doric-h5/src/shader/DoricListItemNode.ts create mode 100644 doric-h5/src/shader/DoricListNode.ts create mode 100644 doric-h5/src/shader/DoricRefreshableNode.ts diff --git a/doric-h5/src/DoricContext.ts b/doric-h5/src/DoricContext.ts index cb167d6d..84a2bcaf 100644 --- a/doric-h5/src/DoricContext.ts +++ b/doric-h5/src/DoricContext.ts @@ -36,7 +36,7 @@ export class DoricContext { for (let i = 0; i < arguments.length; i++) { argumentsList.push(arguments[i]) } - Reflect.apply(jsCallEntityMethod, this.panel, argumentsList) + return Reflect.apply(jsCallEntityMethod, this.panel, argumentsList) } init(frame: { diff --git a/doric-h5/src/DoricRegistry.ts b/doric-h5/src/DoricRegistry.ts index 0f654f30..e16bc217 100644 --- a/doric-h5/src/DoricRegistry.ts +++ b/doric-h5/src/DoricRegistry.ts @@ -11,6 +11,8 @@ import { ModalPlugin } from './plugins/ModalPlugin' import { StoragePlugin } from "./plugins/StoragePlugin" import { NavigatorPlugin } from "./navigate/NavigatorPlugin" import { PopoverPlugin } from './plugins/PopoverPlugin' +import { DoricListItemNode } from "./shader/DoricListItemNode" +import { DoricListNode } from "./shader/DoricListNode" const bundles: Map = new Map @@ -56,4 +58,6 @@ registerViewNode('VLayout', DoricVLayoutNode) registerViewNode('HLayout', DoricHLayoutNode) registerViewNode('Text', DoricTextNode) registerViewNode('Image', DoricImageNode) -registerViewNode('Scroller', DoricScrollerNode) \ No newline at end of file +registerViewNode('Scroller', DoricScrollerNode) +registerViewNode('ListItem', DoricListItemNode) +registerViewNode('List', DoricListNode) \ No newline at end of file diff --git a/doric-h5/src/shader/DoricListItemNode.ts b/doric-h5/src/shader/DoricListItemNode.ts new file mode 100644 index 00000000..7505b177 --- /dev/null +++ b/doric-h5/src/shader/DoricListItemNode.ts @@ -0,0 +1,5 @@ +import { DoricStackNode } from "./DoricStackNode"; + +export class DoricListItemNode extends DoricStackNode { + +} \ No newline at end of file diff --git a/doric-h5/src/shader/DoricListNode.ts b/doric-h5/src/shader/DoricListNode.ts new file mode 100644 index 00000000..4cd1933b --- /dev/null +++ b/doric-h5/src/shader/DoricListNode.ts @@ -0,0 +1,75 @@ +import { DoricSuperNode, DVModel, DoricViewNode } from "./DoricViewNode"; +import { DoricListItemNode } from "./DoricListItemNode"; + +export class DoricListNode extends DoricSuperNode { + itemCount = 0 + renderItemFuncId?: string + onLoadMoreFuncId?: string + loadMoreViewId?: string + batchCount = 15 + loadMore = false + childNodes: DoricListItemNode[] = [] + blendProps(v: HTMLParagraphElement, propName: string, prop: any) { + switch (propName) { + case "itemCount": + this.itemCount = prop as number + break + case "renderItem": + this.reset() + this.renderItemFuncId = prop as string + break + case "onLoadMore": + this.onLoadMoreFuncId = prop as string + break + case "loadMoreView": + this.loadMoreViewId = prop as string + break + case "batchCount": + this.batchCount = prop as number + break + case "loadMore": + this.loadMore = prop as boolean + 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", 0, this.itemCount) as DVModel[] + this.childNodes = 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 + }) + } + } + blendSubNode(model: DVModel) { + const viewNode = this.getSubNodeById(model.id) + if (viewNode) { + viewNode.blend(model.props) + } + } + + getSubNodeById(viewId: string) { + return this.childNodes.filter(e => e.viewId === viewId)[0] + } + + build() { + const ret = document.createElement('div') + ret.style.overflow = "scroll" + return ret + } +} \ No newline at end of file diff --git a/doric-h5/src/shader/DoricRefreshableNode.ts b/doric-h5/src/shader/DoricRefreshableNode.ts new file mode 100644 index 00000000..1f22d841 --- /dev/null +++ b/doric-h5/src/shader/DoricRefreshableNode.ts @@ -0,0 +1,18 @@ +import { DoricSuperNode, DVModel } from "./DoricViewNode"; + +export class DoricRefreshableNode extends DoricSuperNode { + blendSubNode(model: DVModel) { + + } + + getSubNodeById(viewId: string) { + return undefined + } + + build() { + const ret = document.createElement('div') + return ret + } + + +} \ No newline at end of file diff --git a/doric-h5/src/shader/DoricTextNode.ts b/doric-h5/src/shader/DoricTextNode.ts index 69ffd790..e362ba0e 100644 --- a/doric-h5/src/shader/DoricTextNode.ts +++ b/doric-h5/src/shader/DoricTextNode.ts @@ -12,7 +12,7 @@ export class DoricTextNode extends DoricViewNode { return div } - blendProps(v: HTMLParagraphElement, propName: string, prop: any) { + blendProps(v: HTMLElement, propName: string, prop: any) { switch (propName) { case 'text': this.textElement.innerText = prop diff --git a/doric-h5/src/shader/DoricViewNode.ts b/doric-h5/src/shader/DoricViewNode.ts index 41141a5c..1e7ebf82 100644 --- a/doric-h5/src/shader/DoricViewNode.ts +++ b/doric-h5/src/shader/DoricViewNode.ts @@ -309,7 +309,7 @@ export abstract class DoricViewNode { 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) } }