111 lines
4.5 KiB
JavaScript
111 lines
4.5 KiB
JavaScript
'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).configAlignment(doric.Gravity.Center),
|
|
height: 50,
|
|
}));
|
|
}),
|
|
]).apply({
|
|
layoutConfig: doric.layoutConfig().most(),
|
|
}).in(rootView);
|
|
}
|
|
};
|
|
ListPanel = __decorate([
|
|
Entry
|
|
], ListPanel);
|
|
//# sourceMappingURL=ListDemo.js.map
|