From c1edc1376b4a651162ff7f6c72bffd9ab97a5b6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8A=B2=E9=B9=8F?= Date: Tue, 23 Aug 2022 15:41:25 +0800 Subject: [PATCH] demo: update horizontal list demo --- doric-demo/src/HorizontalListDemo.ts | 176 +++++++++++++++++++++ doric-demo/src/HorizontalListInListDemo.ts | 58 +++++++ doric-demo/src/ScrollerInListDemo.ts | 6 +- 3 files changed, 235 insertions(+), 5 deletions(-) create mode 100644 doric-demo/src/HorizontalListDemo.ts create mode 100644 doric-demo/src/HorizontalListInListDemo.ts diff --git a/doric-demo/src/HorizontalListDemo.ts b/doric-demo/src/HorizontalListDemo.ts new file mode 100644 index 00000000..48d6006b --- /dev/null +++ b/doric-demo/src/HorizontalListDemo.ts @@ -0,0 +1,176 @@ +import { Group, text, HorizontalList, gravity, Color, LayoutSpec, log, vlayout, layoutConfig, ViewHolder, ViewModel, VMPanel, loge, modal, stack, horizontalList, horizontalListItem } from "doric"; + +interface ItemModel { + text: string +} + +interface ListModel { + end: boolean + offset: number + data: ItemModel[] +} + +async function loadData(offset: number): Promise<{ + isEnd: boolean, + data: ItemModel[] +}> { + return new Promise<{ + isEnd: boolean, + data: ItemModel[] + }>(resolve => { + setTimeout(() => { + resolve({ + isEnd: offset > 100, + data: new Array(5).fill(offset).map((e, idx) => { + return { text: `Item: ${e + idx}` } + }) + }) + }, 1000) + }) +} + +class ListVH extends ViewHolder { + list!: HorizontalList + build(root: Group) { + vlayout( + [ + text({ + text: "HorizontalList Demo", + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + }, + textSize: 30, + textColor: Color.parse("#535c68"), + backgroundColor: Color.parse("#dff9fb"), + textAlignment: gravity().center(), + height: 50, + }), + this.list = horizontalList({ + itemCount: 0, + layoutConfig: { + widthSpec: LayoutSpec.MOST, + heightSpec: LayoutSpec.JUST, + weight: 1 + }, + }) + ], + { + layoutConfig: layoutConfig().most(), + backgroundColor: Color.WHITE + }).in(root) + } +} + +class ListVM extends ViewModel { + onAttached(state: ListModel, vh: ListVH) { + vh.list.apply({ + canDrag: true, + onDragging: (from, to) => { + log(`onDragging, from: ${from}, to: ${to}`) + }, + onDragged: (from, to) => { + log(`onDragged, from: ${from}, to: ${to}`) + }, + renderItem: (index) => { + const data = state.data[index] + return horizontalListItem(stack([ + text({ + text: data.text, + textSize: 20, + layoutConfig: { + widthSpec: LayoutSpec.FIT, + heightSpec: LayoutSpec.JUST, + alignment: gravity().center(), + margin: { + left: 10, + right: 10, + } + }, + height: 50, + onClick: () => { + data.text += "1" + vh.list.reload(this.context) + }, + }) + ], { + layoutConfig: layoutConfig().fitWidth().mostHeight(), + }), { + layoutConfig: { + widthSpec: LayoutSpec.FIT, + heightSpec: LayoutSpec.MOST, + }, + border: { + width: 1, + color: Color.BLACK, + } + //onClick: () => { modal(context).alert("Item Clicked " + index) } + }).apply({ + // actions: [ + // { + // title: "First", + // backgroundColor: Color.RED, + // callback: () => { + // modal(context).alert("First action " + index) + // } + // }, + // { + // title: "Second", + // backgroundColor: Color.BLUE, + // callback: () => { + // modal(context).alert("Second action " + index) + // } + // } + // ] + }) + }, + onLoadMore: async () => { + loge(`LoadMore,offset:${state.offset}`) + const ret = await loadData(state.offset) + this.updateState(state => { + state.end = ret.isEnd + state.data = state.data.concat(ret.data) + state.offset = state.data.length + }) + }, + onScrollEnd: async () => { + const ret = await vh.list.findCompletelyVisibleItems(context) + loge('completelyVisible Items is:', ret) + const ret2 = await vh.list.findVisibleItems(context) + loge('visible Items is:', ret2) + } + }) + loadData(state.offset).then(ret => { + this.updateState(state => { + state.end = ret.isEnd + state.data = state.data.concat(ret.data) + state.offset = state.data.length + }) + }) + } + + onBind(state: ListModel, vh: ListVH) { + vh.list.apply({ + itemCount: state.data.length, + loadMore: !state.end + }) + loge(`onBind,itemCount:${vh.list.itemCount}`) + } +} + +@Entry +class ListPanel extends VMPanel { + getViewModelClass() { + return ListVM + } + getViewHolderClass() { + return ListVH + } + getState() { + return { + end: true, + data: [], + offset: 0 + } + } +} \ No newline at end of file diff --git a/doric-demo/src/HorizontalListInListDemo.ts b/doric-demo/src/HorizontalListInListDemo.ts new file mode 100644 index 00000000..221bbac0 --- /dev/null +++ b/doric-demo/src/HorizontalListInListDemo.ts @@ -0,0 +1,58 @@ +import { Panel, Group, layoutConfig, stack, list, listItem, horizontalList, horizontalListItem } from "doric" +import { colors } from "./utils" + +@Entry +class HorizontalListInListDemo extends Panel { + + private data1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] + private data2 = [0, 1, 2, 3, 4, 5] + + build(root: Group) { + stack([ + list({ + itemCount: this.data1.length, + renderItem: (index1) => { + if (index1 % 3 === 0) { + return listItem( + stack([ + horizontalList({ + itemCount: this.data2.length, + renderItem: (index2) => { + return horizontalListItem( + stack([]).apply({ + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + }), + height: 80, + width: 160, + backgroundColor: colors[index1 % colors.length], + }), + ) + }, + layoutConfig: layoutConfig().most() + }) + ]).apply({ + layoutConfig: layoutConfig().just(), + height: 80, + width: Environment.screenWidth, + }), + ) + } else { + return listItem( + stack([]).apply({ + layoutConfig: layoutConfig().just(), + height: 80, + width: Environment.screenWidth, + backgroundColor: colors[index1 % colors.length], + }), + ) + } + }, + layoutConfig: layoutConfig().most(), + }) + ], { + layoutConfig: layoutConfig().most() + }).in(root) + } +} \ No newline at end of file diff --git a/doric-demo/src/ScrollerInListDemo.ts b/doric-demo/src/ScrollerInListDemo.ts index a445e4e4..014508ab 100644 --- a/doric-demo/src/ScrollerInListDemo.ts +++ b/doric-demo/src/ScrollerInListDemo.ts @@ -1,4 +1,4 @@ -import { Panel, Group, layoutConfig, Color, stack, list, listItem, text, loge, scroller, hlayout } from "doric" +import { Panel, Group, layoutConfig, stack, list, listItem, scroller, hlayout } from "doric" import { colors } from "./utils" @Entry @@ -7,10 +7,6 @@ class ScrollerInListDemo extends Panel { private data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] build(root: Group) { - function insertAt(array: Array, index: number, ...elements: Array) { - array.splice(index, 0, ...elements); - } - stack( [ list({