tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

h5:List support loadmore

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-28 15:19:43 +08:00 committed by osborn
parent dd12ca765b
commit 06dd2ce7c5
5 changed files with 262 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
doric-h5/dist/DoricPlayground.js vendored
View File

File diff suppressed because one or more lines are too long

110
doric-h5/dist/ListDemo.js vendored Normal file
View File

@ -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

110
doric-h5/dist/index.js vendored
View File

@ -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);

2
doric-h5/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

40
doric-h5/src/shader/DoricListNode.ts
View File

@ -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[]
this.childNodes = ret.map(e => {
const ret = this.callJSResponse("renderBunchedItems", this.childNodes.length, this.itemCount) as DVModel[]
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
}
}