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

feat:Refreshable +list

Browse Source
This commit is contained in:
pengfei.zhou 2019-11-26 14:06:44 +08:00
parent 84b9ec0f22
commit 0b1174c3fd
3 changed files with 112 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
demo/src/ListDemo.ts
View File

@ -1,15 +1,11 @@
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text } from "doric"; import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, refreshable, Refreshable, ListItem } from "doric";
const colors = [ import { rotatedArrow, colors } from "./utils";
"#f0932b", import { isObject } from "util";
"#eb4d4b",
"#6ab04c",
"#e056fd",
"#686de0",
"#30336b",
]
@Entry @Entry
class ListPanel extends Panel { class ListPanel extends Panel {
build(rootView: Group): void { build(rootView: Group): void {
let refreshView: Refreshable
let offset = Math.ceil(Math.random() * colors.length)
vlayout([ vlayout([
text({ text({
text: "ListDemo", text: "ListDemo",
@ -23,76 +19,90 @@ class ListPanel extends Panel {
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}), }),
list({ refreshView = refreshable({
itemCount: 1000, onRefresh: () => {
renderItem: (idx: number) => { refreshView.setRefreshing(context, false).then(() => {
let counter!: Text (refreshView.content as List).also(it => {
return listItem( it.reset()
hlayout([ offset = Math.ceil(Math.random() * colors.length)
text({ it.itemCount = 40
layoutConfig: { it.renderItem = (idx: number) => {
widthSpec: LayoutSpec.WRAP_CONTENT, let counter!: Text
heightSpec: LayoutSpec.EXACTLY, return listItem(
alignment: gravity().center(), hlayout([
}, text({
text: `Cell At Line ${idx}`, layoutConfig: {
textAlignment: gravity().center(), widthSpec: LayoutSpec.WRAP_CONTENT,
textColor: Color.parse("#ffffff"), heightSpec: LayoutSpec.EXACTLY,
textSize: 20, alignment: gravity().center(),
height: 50, },
}), text: `Cell At Line ${idx}`,
text({ textAlignment: gravity().center(),
textColor: Color.parse("#ffffff"), textColor: Color.parse("#ffffff"),
textSize: 20, textSize: 20,
text: "", height: 50,
}).also(it => { }),
counter = it text({
it.layoutConfig = { textColor: Color.parse("#ffffff"),
widthSpec: LayoutSpec.WRAP_CONTENT, textSize: 20,
heightSpec: LayoutSpec.WRAP_CONTENT, text: "",
margin: { }).also(it => {
left: 10, counter = it
it.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
margin: {
left: 10,
}
}
})
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.WRAP_CONTENT,
margin: {
bottom: 2,
}
}
it.gravity = gravity().center()
it.bgColor = colors[(idx + offset) % colors.length]
let clicked = 0
it.onClick = () => {
counter.text = `Item Clicked ${++clicked}`
}
})
).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.WRAP_CONTENT,
} }
} it.onClick = () => {
}) log(`Click item at ${idx}`)
]).also(it => { it.height += 10
it.layoutConfig = { it.nativeChannel(context, "getWidth")().then(
widthSpec: LayoutSpec.AT_MOST, resolve => {
heightSpec: LayoutSpec.WRAP_CONTENT, log(`resolve,${resolve}`)
margin: { },
bottom: 2, reject => {
} log(`reject,${reject}`)
} })
it.gravity = gravity().center() }
it.bgColor = Color.parse(colors[idx % colors.length]) })
let clicked = 0
it.onClick = () => {
counter.text = `Item Clicked ${++clicked}`
} }
}) })
).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
it.onClick = () => {
log(`Click item at ${idx}`)
it.height += 10
it.nativeChannel(context, "getWidth")().then(
resolve => {
log(`resolve,${resolve}`)
},
reject => {
log(`reject,${reject}`)
})
}
}) })
}, },
layoutConfig: { header: rotatedArrow(context),
widthSpec: LayoutSpec.AT_MOST, content: list({
heightSpec: LayoutSpec.AT_MOST, itemCount: 0,
}, renderItem: () => new ListItem,
layoutConfig: {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.AT_MOST,
},
}),
}), }),
]).also(it => { ]).also(it => {
it.layoutConfig = { it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.AT_MOST,

26
demo/src/utils.ts
View File

File diff suppressed because one or more lines are too long

4
js-framework/src/ui/list.ts
View File

@ -57,6 +57,10 @@ export class List extends Superview implements IList {
@Property @Property
batchCount = 15 batchCount = 15
reset() {
this.cachedViews.clear()
this.itemCount = 0
}
private getItem(itemIdx: number) { private getItem(itemIdx: number) {
let view = this.cachedViews.get(`${itemIdx}`) let view = this.cachedViews.get(`${itemIdx}`)
if (view === undefined) { if (view === undefined) {