add list drag demo (include data integrity)

2022-06-17 17:11:51 +08:00 · 2022-06-17 17:11:51 +08:00 · d405f60c7f
commit d405f60c7f
parent 63398a47f1
1 changed files with 43 additions and 0 deletions
--- a/doric-demo/src/ListDragDemo.ts
+++ b/doric-demo/src/ListDragDemo.ts
@ -0,0 +1,43 @@
+import { Panel, Group, layoutConfig, Color, stack, list, listItem, text, loge } from "doric"
+import { colors } from "./utils"
+
+@Entry
+class ListDragDemo 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<any>, index: number, ...elements: Array<any>) {
+            array.splice(index, 0, ...elements);
+        }
+
+        stack(
+            [
+                list({
+                    itemCount: this.data.length,
+                    renderItem: (idx) => {
+                        return listItem(text({
+                            text: `Item :${this.data[idx]}`,
+                            layoutConfig: layoutConfig().just(),
+                            width: root.width,
+                            height: 50,
+                            textColor: Color.WHITE,
+                            backgroundColor: colors[idx % colors.length],
+                        }))
+                    },
+                    layoutConfig: layoutConfig().most(),
+                    canDrag: true,
+                    onDragged: (from, to) => {
+                        const tmp = this.data[from]
+                        this.data.splice(from, 1)
+                        insertAt(this.data, to, tmp)
+                        loge(this.data)
+                    }
+                })
+            ],
+            {
+                layoutConfig: layoutConfig().most()
+            }
+        ).in(root)
+    }
+}