add slider

js-framework/src/ui/declarative.ts

@@ -16,7 +16,8 @@
 import { View, LayoutSpec } from './view'
 import { Stack, HLayout, VLayout } from './layout'
 import { IText, IImage, Text, Image } from './widgets'
-import { IList, List } from './listview'
+import { IList, List } from './list'
+import { ISlider, Slider } from './slider'
 
 export function text(config: IText) {
     const ret = new Text
@@ -84,4 +85,12 @@ export function list(config: IList) {
         Reflect.set(ret, key, Reflect.get(config, key, config), ret)
     }
     return ret
+}
+
+export function slider(config: ISlider) {
+    const ret = new Slider
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
 }

js-framework/src/ui/slider.ts

@@ -0,0 +1,72 @@
+import { Superview, View, LayoutSpec, Property, IView } from "./view";
+import { Stack } from "./layout";
+
+export function slideItem(item: View) {
+    return (new SlideItem).also((it) => {
+        it.layoutConfig = {
+            widthSpec: LayoutSpec.WRAP_CONTENT,
+            heightSpec: LayoutSpec.WRAP_CONTENT,
+        }
+        it.addChild(item)
+    })
+}
+
+export class SlideItem extends Stack {
+    /**
+     * Set to reuse native view
+     */
+    @Property
+    identifier?: string
+}
+
+export interface ISlider extends IView {
+    renderPage: (index: number) => SlideItem
+    itemCount: number
+    batchCount?: number
+}
+
+export class Slider extends Superview implements ISlider {
+    private cachedViews: Map<string, SlideItem> = new Map
+
+    private ignoreDirtyCallOnce = false
+
+    allSubviews() {
+        return this.cachedViews.values()
+    }
+    @Property
+    itemCount = 0
+
+    @Property
+    renderPage!: (index: number) => SlideItem
+
+    @Property
+    batchCount = 3
+
+
+    private getItem(itemIdx: number) {
+        let view = this.cachedViews.get(`${itemIdx}`)
+        if (view === undefined) {
+            view = this.renderPage(itemIdx)
+            view.superview = this
+            this.cachedViews.set(`${itemIdx}`, view)
+        }
+        return view
+    }
+
+    isDirty() {
+        if (this.ignoreDirtyCallOnce) {
+            this.ignoreDirtyCallOnce = false
+            //Ignore the dirty call once.
+            return false
+        }
+        return super.isDirty()
+    }
+
+    private renderBunchedItems(start: number, length: number) {
+        this.ignoreDirtyCallOnce = true;
+        return new Array(Math.min(length, this.itemCount - start)).fill(0).map((_, idx) => {
+            const slideItem = this.getItem(start + idx)
+            return slideItem.toModel()
+        })
+    }
+}