feat:render subview's change to apply listview's item change

js-framework/src/ui/declarative.ts

@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { View, } from './view'
+import { View, LayoutSpec } from './view'
 import { Stack, HLayout, VLayout } from './layout'
 import { IText, IImage, Text, Image } from './widgets'
+import { IList, List } from './listview'
 
 export function text(config: IText) {
     const ret = new Text
@@ -35,6 +36,10 @@ export function image(config: IImage) {
 
 export function stack(views: View[]) {
     const ret = new Stack
+    ret.layoutConfig = {
+        widthSpec: LayoutSpec.WRAP_CONTENT,
+        heightSpec: LayoutSpec.WRAP_CONTENT,
+    }
     for (let v of views) {
         ret.addChild(v)
     }
@@ -43,6 +48,10 @@ export function stack(views: View[]) {
 
 export function hlayout(views: View[]) {
     const ret = new HLayout
+    ret.layoutConfig = {
+        widthSpec: LayoutSpec.WRAP_CONTENT,
+        heightSpec: LayoutSpec.WRAP_CONTENT,
+    }
     for (let v of views) {
         ret.addChild(v)
     }
@@ -51,8 +60,20 @@ export function hlayout(views: View[]) {
 
 export function vlayout(views: View[]) {
     const ret = new VLayout
+    ret.layoutConfig = {
+        widthSpec: LayoutSpec.WRAP_CONTENT,
+        heightSpec: LayoutSpec.WRAP_CONTENT,
+    }
     for (let v of views) {
         ret.addChild(v)
     }
     return ret
+}
+
+export function list(config: IList) {
+    const ret = new List
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    }
+    return ret
 }

js-framework/src/ui/listview.ts

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import { View, Property, LayoutSpec, Superview } from "./view";
-import { Model } from "../util/types";
-import { O_TRUNC } from "constants";
+import { View, Property, LayoutSpec, Superview, IView } from "./view";
 import { Stack } from "./layout";
-import { loge } from "../util/log";
+
 export function listItem(item: View) {
     return (new ListItem).also((it) => {
         it.layoutConfig = {
@@ -37,7 +35,13 @@ export class ListItem extends Stack {
     identifier?: string
 }
 
-export class List extends Superview {
+export interface IList extends IView {
+    renderItem: (index: number) => ListItem
+    itemCount: number
+    batchCount?: number
+}
+
+export class List extends Superview implements IList {
     private cachedViews: Map<string, ListItem> = new Map
 
     allSubviews() {

js-framework/src/ui/panel.ts

@@ -15,7 +15,7 @@
  */
 import './../runtime/global'
 import { View, Group } from "./view";
-import { loge, log } from '../util/log';
+import { loge } from '../util/log';
 import { Model } from '../util/types';
 import { Root } from './layout';
 
@@ -113,13 +113,13 @@ export abstract class Panel {
     }
 
     private hookBeforeNativeCall() {
+        this.__root__.clean()
     }
 
     private hookAfterNativeCall() {
         if (this.__root__.isDirty()) {
             const model = this.__root__.toModel()
             this.nativeRender(model)
-            this.__root__.clean()
         }
     }
 

js-framework/src/ui/view.ts

@@ -278,6 +278,13 @@ export abstract class Superview extends View {
         return false
     }
 
+    clean() {
+        for (let v of this.allSubviews()) {
+            v.clean()
+        }
+        super.clean()
+    }
+
     toModel() {
         const subviews = []
         for (let v of this.allSubviews()) {
@@ -315,7 +322,7 @@ export abstract class Group extends Superview {
                 return e.toModel()
             } else {
                 //Dont need return model
-                return {}
+                return undefined
             }
         })
         return this.nativeViewModel

js-framework/src/util/types.ts

@@ -35,7 +35,7 @@ export function obj2Model(obj: Model): Model {
     }
 }
 
-type _M = string | number | boolean | Modeling | { [index: string]: Model | undefined }
+type _M = string | number | boolean | Modeling | { [index: string]: Model } | undefined
 export type Model = _M | Array<_M>
 
 export type Binder<T> = (v: T) => void