add input and stick demo

index.ts

@@ -18,4 +18,6 @@ export default [
     'src/AnimatorDemo',
     'src/ComplicatedAnimations',
     'src/ComplicatedDemo',
+    'src/InputDemo',
+    'src/StickDemo'
 ]

src/InputDemo.ts

@@ -0,0 +1,47 @@
+import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log } from "doric";
+import { title, colors } from "./utils";
+@Entry
+class InputDemo extends Panel {
+    build(root: Group) {
+        scroller(
+            vlayout([
+                title("Input Demo"),
+                (new Input).also(it => {
+                    it.layoutConfig = layoutConfig().exactly().h(LayoutSpec.WRAP_CONTENT)
+                    it.width = 300
+                    it.multiline = false
+                    it.hintText = "HintText"
+                    it.textAlignment = Gravity.Left
+                    it.onTextChange = (s) => {
+                        log(`onTextChange:${s}`)
+                    }
+                    it.onFocusChange = (f) => {
+                        log(`onFocusChange:${f}`)
+                    }
+                }),
+                (new Input).also(it => {
+                    it.layoutConfig = layoutConfig().wrap()
+                    it.hintText = "HintText"
+                    it.hintTextColor = colors[2]
+                    it.textAlignment = Gravity.Left
+                    it.textColor = colors[3]
+                    it.onTextChange = (s) => {
+                        log(`onTextChange:${s}`)
+                    }
+                    it.onFocusChange = (f) => {
+                        log(`onFocusChange:${f}`)
+                    }
+                    it.backgroundColor = colors[1].alpha(0.3)
+                }),
+            ])
+                .also(it => {
+                    it.space = 10
+                    it.layoutConfig = layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT)
+                }))
+            .apply({
+                layoutConfig: layoutConfig().atmost()
+            })
+            .in(root)
+    }
+
+}

src/StickDemo.ts

@@ -0,0 +1,124 @@
+import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log, stack, hlayout, text, IHLayout, CENTER, slider, slideItem, modal, Slider, Text, Color, View, Stack, animate, flowlayout, FlowLayoutItem, NestedSlider } from "doric";
+import { title, colors } from "./utils";
+
+function tab(idx: number, title: string, sliderView: Slider) {
+    return text({
+        text: title,
+        layoutConfig: layoutConfig().exactly().wg(1),
+        height: 41,
+        onClick: () => {
+            sliderView.slidePage(context, 0, true)
+        },
+    })
+}
+
+@Entry
+class StickDemo extends Panel {
+    private tabs!: Text[]
+    private indicator!: View
+    private sliderView!: NestedSlider
+    build(root: Group) {
+        this.indicator = new Stack
+        this.indicator.backgroundColor = colors[0]
+        this.indicator.width = 20
+        this.indicator.height = 2
+
+        scroller(
+            vlayout([
+                stack([]).apply({
+                    layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY),
+                    height: 200,
+                    backgroundColor: colors[0],
+                }),
+                stack([
+                    hlayout([
+                        ...this.tabs = [0, 1, 2].map(idx => {
+                            return text({
+                                text: `Tab  ${idx}`,
+                                layoutConfig: layoutConfig().exactly().wg(1),
+                                height: 41,
+                                onClick: () => {
+                                    this.sliderView.slidePage(context, idx, true)
+                                },
+                            })
+                        })
+                    ]).apply({
+                        layoutConfig: layoutConfig().atmost(),
+                        gravity: Gravity.Center,
+                    } as IHLayout),
+                    this.indicator,
+                ]).apply({
+                    layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY),
+                    height: 57,
+                }),
+
+                (new NestedSlider).also(v => {
+                    this.sliderView = v;
+                    v.onPageSlided = (idx) => {
+                        this.refreshTabs(idx)
+                    }
+                    [0, 1, 2].map(idx => {
+                        return flowlayout({
+                            layoutConfig: layoutConfig().exactly(),
+                            width: root.width,
+                            height: root.height - 57,
+                            itemCount: 100,
+                            columnCount: 2,
+                            columnSpace: 10,
+                            rowSpace: 10,
+                            renderItem: (itemIdx) => {
+                                return new FlowLayoutItem().apply({
+                                    backgroundColor: colors[itemIdx % colors.length],
+                                    height: 50,
+                                    layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
+                                }).also(it => {
+                                    it.addChild(text({
+                                        text: `In Page ${idx},${itemIdx}`,
+                                        textColor: Color.WHITE,
+                                        textSize: 20,
+                                        layoutConfig: layoutConfig().wrap().a(Gravity.Center)
+                                    }).also(v => {
+                                        v.onClick = () => {
+                                            v.text = "Clicked"
+                                        }
+                                    }))
+                                })
+                            },
+                        })
+                    }).forEach(e => {
+                        v.addSlideItem(e)
+                    })
+                }).apply({
+                    layoutConfig: layoutConfig().exactly(),
+                    width: root.width,
+                    height: root.height - 57,
+                }),
+            ])
+                .also(it => {
+                    it.layoutConfig = layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT)
+                }))
+            .apply({
+                layoutConfig: layoutConfig().atmost()
+            })
+            .in(root)
+        this.indicator.centerX = this.getRootView().width / this.tabs.length / 2
+        this.refreshTabs(0)
+    }
+
+    refreshTabs(page: number) {
+        this.tabs.forEach((e, idx) => {
+            if (idx == page) {
+                e.textColor = colors[0]
+            } else {
+                e.textColor = Color.BLACK
+            }
+        })
+        this.indicator.layoutConfig = layoutConfig().exactly().a(Gravity.Bottom).m({ bottom: 13 })
+        animate(this)({
+            animations: () => {
+                this.indicator.centerX = this.getRootView().width / this.tabs.length * (page + 0.5)
+            },
+            duration: 300,
+        })
+    }
+}