feat:Refreshable +list

demo/src/ListDemo.ts

@@ -1,15 +1,11 @@
-import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text } from "doric";
-const colors = [
-    "#f0932b",
-    "#eb4d4b",
-    "#6ab04c",
-    "#e056fd",
-    "#686de0",
-    "#30336b",
-]
+import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, Text, refreshable, Refreshable, ListItem } from "doric";
+import { rotatedArrow, colors } from "./utils";
+import { isObject } from "util";
 @Entry
 class ListPanel extends Panel {
     build(rootView: Group): void {
+        let refreshView: Refreshable
+        let offset = Math.ceil(Math.random() * colors.length)
         vlayout([
             text({
                 text: "ListDemo",
@@ -23,9 +19,14 @@ class ListPanel extends Panel {
                 textAlignment: gravity().center(),
                 height: 50,
             }),
-            list({
-                itemCount: 1000,
-                renderItem: (idx: number) => {
+            refreshView = refreshable({
+                onRefresh: () => {
+                    refreshView.setRefreshing(context, false).then(() => {
+                        (refreshView.content as List).also(it => {
+                            it.reset()
+                            offset = Math.ceil(Math.random() * colors.length)
+                            it.itemCount = 40
+                            it.renderItem = (idx: number) => {
                                 let counter!: Text
                                 return listItem(
                                     hlayout([
@@ -64,7 +65,7 @@ class ListPanel extends Panel {
                                             }
                                         }
                                         it.gravity = gravity().center()
-                            it.bgColor = Color.parse(colors[idx % colors.length])
+                                        it.bgColor = colors[(idx + offset) % colors.length]
                                         let clicked = 0
                                         it.onClick = () => {
                                             counter.text = `Item Clicked ${++clicked}`
@@ -87,12 +88,21 @@ class ListPanel extends Panel {
                                             })
                                     }
                                 })
+                            }
+                        })
+                    })
                 },
+                header: rotatedArrow(context),
+                content: list({
+                    itemCount: 0,
+                    renderItem: () => new ListItem,
                     layoutConfig: {
                         widthSpec: LayoutSpec.AT_MOST,
                         heightSpec: LayoutSpec.AT_MOST,
                     },
                 }),
+            }),
+
         ]).also(it => {
             it.layoutConfig = {
                 widthSpec: LayoutSpec.AT_MOST,

js-framework/src/ui/list.ts

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