js:change apis of declarable

doric-demo/src/DraggableDemo.ts

@@ -1,37 +1,40 @@
-import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, stack} from "doric";
+import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, stack, text } from "doric";
 import { title } from "./utils";
 @Entry
 class DraggableDemo extends Panel {
     build(root: Group) {
-        let text = (new Text).also(it => {
+        let textView: Text
-            it.layoutConfig = layoutConfig().just().configAlignment(Gravity.Center)
+        let drag = draggable(
-            it.width = 100
+            textView = text({
-            it.height = 30
+                layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
-            it.textColor = Color.parse('#ff0000')
+                width: 100,
-            it.onClick = () => {
+                height: 30,
+                textColor: Color.RED,
+                onClick: () => {
                     modal(context).toast('Clicked')
                 }
-        })
+            }),
-        let drag: Draggable
+            {
-        drag = draggable({
                 onDrag: (x: number, y: number) => {
-                text.text = "x: " + x.toFixed(0) + " y: " + y.toFixed(0)
+                    textView.text = "x: " + x.toFixed(0) + " y: " + y.toFixed(0)
-            }
+                },
-        }, [ text ]).apply({
                 layoutConfig: layoutConfig().just(),
                 width: 100,
                 height: 100,
                 backgroundColor: Color.WHITE
             })
-        vlayout([
+        vlayout(
+            [
                 title("Draggable Demo"),
-            stack([
+                stack(
+                    [
                         drag,
-            ]).apply({
+                    ],
+                    {
                         layoutConfig: layoutConfig().most()
                     })
-        ])
+            ],
-            .apply({
+            {
                 layoutConfig: layoutConfig().most(),
                 backgroundColor: Color.BLACK
             })

doric-demo/src/LayoutDemo.ts

@@ -99,7 +99,8 @@ class LayoutDemo extends Panel {
                         it.gravity = gravity().center()
                     }),
                     label("Horizontal Layout(Weight)"),
-                    hlayout([
+                    hlayout(
+                        [
                             boxStr('weight=1', 3).apply({
                                 layoutConfig: {
                                     widthSpec: LayoutSpec.JUST,
@@ -109,7 +110,8 @@ class LayoutDemo extends Panel {
                             }),
                             box(2),
                             box(4),
-                    ]).apply({
+                        ],
+                        {
                             width: 200,
                             height: 30,
                             layoutConfig: {
@@ -118,8 +120,9 @@ class LayoutDemo extends Panel {
                             },
                             backgroundColor: Color.parse('#eeeeee'),
                             gravity: gravity().center(),
-                    } as IHLayout),
+                        }),
-                    hlayout([
+                    hlayout(
+                        [
                             box(3),
                             boxStr('weight=1', 2).apply({
                                 layoutConfig: {
@@ -129,7 +132,8 @@ class LayoutDemo extends Panel {
                                 }
                             }),
                             box(4),
-                    ]).apply({
+                        ],
+                        {
                             width: 200,
                             height: 30,
                             layoutConfig: {
@@ -138,8 +142,10 @@ class LayoutDemo extends Panel {
                             },
                             backgroundColor: Color.parse('#eeeeee'),
                             gravity: gravity().center(),
-                    } as IHLayout),
+                        }
-                    hlayout([
+                    ),
+                    hlayout(
+                        [
                             box(3),
                             box(2),
                             boxStr('weight=1', 4).apply({
@@ -149,7 +155,8 @@ class LayoutDemo extends Panel {
                                     weight: 1,
                                 }
                             }),
-                    ]).apply({
+                        ],
+                        {
                             width: 200,
                             height: 30,
                             layoutConfig: {
@@ -158,7 +165,8 @@ class LayoutDemo extends Panel {
                             },
                             backgroundColor: Color.parse('#eeeeee'),
                             gravity: gravity().center(),
-                    } as IHLayout),
+                        }
+                    ),
                     hlayout([
                         boxStr('weight=1', 3).apply({
                             layoutConfig: {
@@ -175,7 +183,8 @@ class LayoutDemo extends Panel {
                             }
                         }),
                         box(4),
-                    ]).apply({
+                    ],
+                        {
                             width: 200,
                             height: 30,
                             layoutConfig: {
@@ -184,7 +193,8 @@ class LayoutDemo extends Panel {
                             },
                             backgroundColor: Color.parse('#eeeeee'),
                             gravity: gravity().center(),
-                    } as IHLayout),
+                        }
+                    ),
                     hlayout([
                         boxStr('weight=1', 3).apply({
                             layoutConfig: {

doric-js/bundle/doric-lib.js

@@ -605,28 +605,43 @@ class VLayout extends LinearLayout {
 }
 class HLayout extends LinearLayout {
 }
-function stack(views) {
+function stack(views, config) {
     const ret = new Stack;
     ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
     return ret;
 }
-function hlayout(views) {
+function hlayout(views, config) {
     const ret = new HLayout;
     ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
     return ret;
 }
-function vlayout(views) {
+function vlayout(views, config) {
     const ret = new VLayout;
     ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
     return ret;
 }
 
@@ -1305,10 +1320,22 @@ function list(config) {
     }
     return ret;
 }
-function listItem(item) {
+function listItem(item, config) {
     return (new ListItem).also((it) => {
-        it.layoutConfig = layoutConfig().most().configHeight(exports.LayoutSpec.FIT);
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
             it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it);
+            }
+        }
     });
 }
 
@@ -1385,12 +1412,6 @@ __decorate$6([
     Property,
     __metadata$6("design:type", Function)
 ], Slider.prototype, "onPageSlided", void 0);
-function slideItem(item) {
-    return (new SlideItem).also((it) => {
-        it.layoutConfig = layoutConfig().fit();
-        it.addChild(item);
-    });
-}
 function slider(config) {
     const ret = new Slider;
     for (let key in config) {
@@ -1398,6 +1419,24 @@ function slider(config) {
     }
     return ret;
 }
+function slideItem(item, config) {
+    return (new SlideItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
+            it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it);
+            }
+        }
+    });
+}
 
 /*
  * Copyright [2019] [Doric.Pub]
@@ -1591,10 +1630,22 @@ function flowlayout(config) {
     }
     return ret;
 }
-function flowItem(item) {
+function flowItem(item, config) {
     return (new FlowLayoutItem).also((it) => {
         it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
             it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it);
+            }
+        }
     });
 }
 
@@ -1709,14 +1760,21 @@ __decorate$b([
     Property,
     __metadata$b("design:type", Function)
 ], Draggable.prototype, "onDrag", void 0);
-function draggable(config, views) {
+function draggable(views, config) {
     const ret = new Draggable;
     ret.layoutConfig = layoutConfig().fit();
+    if (views instanceof View) {
+        ret.addChild(views);
+    }
+    else {
+        views.forEach(e => {
+            ret.addChild(e);
+        });
+    }
+    if (config) {
         for (let key in config) {
             Reflect.set(ret, key, Reflect.get(config, key, config), ret);
         }
-    for (let v of views) {
-        ret.addChild(v);
     }
     return ret;
 }

doric-js/bundle/doric-vm.js

@@ -2053,28 +2053,43 @@ class VLayout extends LinearLayout {
 }
 class HLayout extends LinearLayout {
 }
-function stack(views) {
+function stack(views, config) {
     const ret = new Stack;
     ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
     return ret;
 }
-function hlayout(views) {
+function hlayout(views, config) {
     const ret = new HLayout;
     ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
     return ret;
 }
-function vlayout(views) {
+function vlayout(views, config) {
     const ret = new VLayout;
     ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
     return ret;
 }
 
@@ -2753,10 +2768,22 @@ function list(config) {
     }
     return ret;
 }
-function listItem(item) {
+function listItem(item, config) {
     return (new ListItem).also((it) => {
-        it.layoutConfig = layoutConfig().most().configHeight(exports.LayoutSpec.FIT);
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
             it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it);
+            }
+        }
     });
 }
 
@@ -2833,12 +2860,6 @@ __decorate$6([
     Property,
     __metadata$6("design:type", Function)
 ], Slider.prototype, "onPageSlided", void 0);
-function slideItem(item) {
-    return (new SlideItem).also((it) => {
-        it.layoutConfig = layoutConfig().fit();
-        it.addChild(item);
-    });
-}
 function slider(config) {
     const ret = new Slider;
     for (let key in config) {
@@ -2846,6 +2867,24 @@ function slider(config) {
     }
     return ret;
 }
+function slideItem(item, config) {
+    return (new SlideItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
+            it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it);
+            }
+        }
+    });
+}
 
 /*
  * Copyright [2019] [Doric.Pub]
@@ -3039,10 +3078,22 @@ function flowlayout(config) {
     }
     return ret;
 }
-function flowItem(item) {
+function flowItem(item, config) {
     return (new FlowLayoutItem).also((it) => {
         it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
             it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it);
+            }
+        }
     });
 }
 
@@ -3157,14 +3208,21 @@ __decorate$b([
     Property,
     __metadata$b("design:type", Function)
 ], Draggable.prototype, "onDrag", void 0);
-function draggable(config, views) {
+function draggable(views, config) {
     const ret = new Draggable;
     ret.layoutConfig = layoutConfig().fit();
+    if (views instanceof View) {
+        ret.addChild(views);
+    }
+    else {
+        views.forEach(e => {
+            ret.addChild(e);
+        });
+    }
+    if (config) {
         for (let key in config) {
             Reflect.set(ret, key, Reflect.get(config, key, config), ret);
         }
-    for (let v of views) {
-        ret.addChild(v);
     }
     return ret;
 }

doric-js/index.d.ts

@@ -413,9 +413,9 @@ declare module 'doric/lib/src/widget/layouts' {
     }
     export class HLayout extends LinearLayout implements IHLayout {
     }
-    export function stack(views: View[]): Stack;
+    export function stack(views: View[], config?: IStack): Stack;
-    export function hlayout(views: View[]): HLayout;
+    export function hlayout(views: View[], config?: IHLayout): HLayout;
-    export function vlayout(views: View[]): VLayout;
+    export function vlayout(views: View[], config?: IVLayout): VLayout;
     export {};
 }
 
@@ -472,8 +472,11 @@ declare module 'doric/lib/src/widget/image' {
 
 declare module 'doric/lib/src/widget/list' {
     import { View, Superview, IView, NativeViewModel } from "doric/lib/src/ui/view";
-    import { Stack } from "doric/lib/src/widget/layouts";
+    import { Stack, IStack } from "doric/lib/src/widget/layouts";
-    export class ListItem extends Stack {
+    export interface IListItem extends IStack {
+        identifier?: string;
+    }
+    export class ListItem extends Stack implements IListItem {
         /**
           * Set to reuse native view
           */
@@ -497,14 +500,17 @@ declare module 'doric/lib/src/widget/list' {
         toModel(): NativeViewModel;
     }
     export function list(config: IList): List;
-    export function listItem(item: View): ListItem;
+    export function listItem(item: View | View[], config?: IListItem): ListItem;
 }
 
 declare module 'doric/lib/src/widget/slider' {
     import { Superview, View, IView } from "doric/lib/src/ui/view";
-    import { Stack } from "doric/lib/src/widget/layouts";
+    import { Stack, IStack } from "doric/lib/src/widget/layouts";
     import { BridgeContext } from "doric/lib/src/runtime/global";
-    export class SlideItem extends Stack {
+    export interface ISlideItem extends IStack {
+        identifier?: string;
+    }
+    export class SlideItem extends Stack implements ISlideItem {
         /**
           * Set to reuse native view
           */
@@ -526,8 +532,8 @@ declare module 'doric/lib/src/widget/slider' {
         slidePage(context: BridgeContext, page: number, smooth?: boolean): Promise<any>;
         getSlidedPage(context: BridgeContext): Promise<number>;
     }
-    export function slideItem(item: View): SlideItem;
     export function slider(config: ISlider): Slider;
+    export function slideItem(item: View | View[], config?: ISlideItem): SlideItem;
 }
 
 declare module 'doric/lib/src/widget/scroller' {
@@ -574,9 +580,12 @@ declare module 'doric/lib/src/widget/refreshable' {
 }
 
 declare module 'doric/lib/src/widget/flowlayout' {
-    import { Stack } from 'doric/lib/src/widget/layouts';
+    import { Stack, IStack } from 'doric/lib/src/widget/layouts';
     import { IView, Superview, View, NativeViewModel } from 'doric/lib/src/ui/view';
-    export class FlowLayoutItem extends Stack {
+    export interface IFlowLayoutItem extends IStack {
+        identifier?: string;
+    }
+    export class FlowLayoutItem extends Stack implements IFlowLayoutItem {
         /**
          * Set to reuse native view
          */
@@ -606,7 +615,7 @@ declare module 'doric/lib/src/widget/flowlayout' {
         toModel(): NativeViewModel;
     }
     export function flowlayout(config: IFlowLayout): FlowLayout;
-    export function flowItem(item: View): FlowLayoutItem;
+    export function flowItem(item: View | View[], config?: IFlowLayoutItem): FlowLayoutItem;
 }
 
 declare module 'doric/lib/src/widget/input' {
@@ -663,7 +672,7 @@ declare module 'doric/lib/src/widget/draggable' {
     export class Draggable extends Stack implements IDraggable {
         onDrag?: (x: number, y: number) => void;
     }
-    export function draggable(config: IDraggable, views: View[]): Draggable;
+    export function draggable(views: View | View[], config?: IDraggable): Draggable;
 }
 
 declare module 'doric/lib/src/native/modal' {

doric-js/lib/src/widget/draggable.d.ts

@@ -6,4 +6,4 @@ export interface IDraggable extends IStack {
 export declare class Draggable extends Stack implements IDraggable {
     onDrag?: (x: number, y: number) => void;
 }
-export declare function draggable(config: IDraggable, views: View[]): Draggable;
+export declare function draggable(views: View | View[], config?: IDraggable): Draggable;

doric-js/lib/src/widget/draggable.js

@@ -22,7 +22,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Property } from "../ui/view";
+import { Property, View } from "../ui/view";
 import { Stack } from "../widget/layouts";
 import { layoutConfig } from "../util/layoutconfig";
 export class Draggable extends Stack {
@@ -31,14 +31,21 @@ __decorate([
     Property,
     __metadata("design:type", Function)
 ], Draggable.prototype, "onDrag", void 0);
-export function draggable(config, views) {
+export function draggable(views, config) {
     const ret = new Draggable;
     ret.layoutConfig = layoutConfig().fit();
+    if (views instanceof View) {
+        ret.addChild(views);
+    }
+    else {
+        views.forEach(e => {
+            ret.addChild(e);
+        });
+    }
+    if (config) {
         for (let key in config) {
             Reflect.set(ret, key, Reflect.get(config, key, config), ret);
         }
-    for (let v of views) {
-        ret.addChild(v);
     }
     return ret;
 }

doric-js/lib/src/widget/flowlayout.d.ts

@@ -1,6 +1,9 @@
-import { Stack } from './layouts';
+import { Stack, IStack } from './layouts';
 import { IView, Superview, View, NativeViewModel } from '../ui/view';
-export declare class FlowLayoutItem extends Stack {
+export interface IFlowLayoutItem extends IStack {
+    identifier?: string;
+}
+export declare class FlowLayoutItem extends Stack implements IFlowLayoutItem {
     /**
     * Set to reuse native view
     */
@@ -34,4 +37,4 @@ export declare class FlowLayout extends Superview implements IFlowLayout {
     toModel(): NativeViewModel;
 }
 export declare function flowlayout(config: IFlowLayout): FlowLayout;
-export declare function flowItem(item: View): FlowLayoutItem;
+export declare function flowItem(item: View | View[], config?: IFlowLayoutItem): FlowLayoutItem;

doric-js/lib/src/widget/flowlayout.js

@@ -23,7 +23,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
  * limitations under the License.
  */
 import { Stack } from './layouts';
-import { Property, Superview } from '../ui/view';
+import { Property, Superview, View } from '../ui/view';
 import { layoutConfig } from '../util/index.util';
 export class FlowLayoutItem extends Stack {
 }
@@ -123,9 +123,21 @@ export function flowlayout(config) {
     }
     return ret;
 }
-export function flowItem(item) {
+export function flowItem(item, config) {
     return (new FlowLayoutItem).also((it) => {
         it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
             it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it);
+            }
+        }
     });
 }

doric-js/lib/src/widget/layouts.d.ts

@@ -22,7 +22,7 @@ export interface IHLayout extends IView {
 }
 export declare class HLayout extends LinearLayout implements IHLayout {
 }
-export declare function stack(views: View[]): Stack;
+export declare function stack(views: View[], config?: IStack): Stack;
-export declare function hlayout(views: View[]): HLayout;
+export declare function hlayout(views: View[], config?: IHLayout): HLayout;
-export declare function vlayout(views: View[]): VLayout;
+export declare function vlayout(views: View[], config?: IVLayout): VLayout;
 export {};

doric-js/lib/src/widget/layouts.js

@@ -43,27 +43,42 @@ export class VLayout extends LinearLayout {
 }
 export class HLayout extends LinearLayout {
 }
-export function stack(views) {
+export function stack(views, config) {
     const ret = new Stack;
     ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
     return ret;
 }
-export function hlayout(views) {
+export function hlayout(views, config) {
     const ret = new HLayout;
     ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
     return ret;
 }
-export function vlayout(views) {
+export function vlayout(views, config) {
     const ret = new VLayout;
     ret.layoutConfig = layoutConfig().fit();
     for (let v of views) {
         ret.addChild(v);
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
     return ret;
 }

doric-js/lib/src/widget/list.d.ts

@@ -1,6 +1,9 @@
 import { View, Superview, IView, NativeViewModel } from "../ui/view";
-import { Stack } from "./layouts";
+import { Stack, IStack } from "./layouts";
-export declare class ListItem extends Stack {
+export interface IListItem extends IStack {
+    identifier?: string;
+}
+export declare class ListItem extends Stack implements IListItem {
     /**
      * Set to reuse native view
      */
@@ -28,4 +31,4 @@ export declare class List extends Superview implements IList {
     toModel(): NativeViewModel;
 }
 export declare function list(config: IList): List;
-export declare function listItem(item: View): ListItem;
+export declare function listItem(item: View | View[], config?: IListItem): ListItem;

doric-js/lib/src/widget/list.js

@@ -22,9 +22,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { Property, Superview } from "../ui/view";
+import { View, Property, Superview } from "../ui/view";
 import { Stack } from "./layouts";
-import { layoutConfig, LayoutSpec } from "../util/layoutconfig";
+import { layoutConfig } from "../util/layoutconfig";
 export class ListItem extends Stack {
 }
 __decorate([
@@ -113,9 +113,21 @@ export function list(config) {
     }
     return ret;
 }
-export function listItem(item) {
+export function listItem(item, config) {
     return (new ListItem).also((it) => {
-        it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT);
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
             it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it);
+            }
+        }
     });
 }

doric-js/lib/src/widget/slider.d.ts

@@ -1,7 +1,10 @@
 import { Superview, View, IView } from "../ui/view";
-import { Stack } from "./layouts";
+import { Stack, IStack } from "./layouts";
 import { BridgeContext } from "../runtime/global";
-export declare class SlideItem extends Stack {
+export interface ISlideItem extends IStack {
+    identifier?: string;
+}
+export declare class SlideItem extends Stack implements ISlideItem {
     /**
      * Set to reuse native view
      */
@@ -27,5 +30,5 @@ export declare class Slider extends Superview implements ISlider {
     slidePage(context: BridgeContext, page: number, smooth?: boolean): Promise<any>;
     getSlidedPage(context: BridgeContext): Promise<number>;
 }
-export declare function slideItem(item: View): SlideItem;
 export declare function slider(config: ISlider): Slider;
+export declare function slideItem(item: View | View[], config?: ISlideItem): SlideItem;

doric-js/lib/src/widget/slider.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { Superview, Property } from "../ui/view";
+import { Superview, View, Property } from "../ui/view";
 import { Stack } from "./layouts";
 import { layoutConfig } from "../util/layoutconfig";
 export class SlideItem extends Stack {
@@ -74,12 +74,6 @@ __decorate([
     Property,
     __metadata("design:type", Function)
 ], Slider.prototype, "onPageSlided", void 0);
-export function slideItem(item) {
-    return (new SlideItem).also((it) => {
-        it.layoutConfig = layoutConfig().fit();
-        it.addChild(item);
-    });
-}
 export function slider(config) {
     const ret = new Slider;
     for (let key in config) {
@@ -87,3 +81,21 @@ export function slider(config) {
     }
     return ret;
 }
+export function slideItem(item, config) {
+    return (new SlideItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
+            it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it);
+            }
+        }
+    });
+}

doric-js/src/widget/draggable.ts

@@ -26,14 +26,20 @@ export class Draggable extends Stack implements IDraggable {
     onDrag?: (x: number, y: number) => void
 }
 
-export function draggable(config: IDraggable, views: View[]) {
+export function draggable(views: View | View[], config?: IDraggable) {
     const ret = new Draggable
     ret.layoutConfig = layoutConfig().fit()
+    if (views instanceof View) {
+        ret.addChild(views)
+    } else {
+        views.forEach(e => {
+            ret.addChild(e)
+        })
+    }
+    if (config) {
         for (let key in config) {
             Reflect.set(ret, key, Reflect.get(config, key, config), ret)
         }
-    for (let v of views) {
-        ret.addChild(v)
     }
     return ret
 }

doric-js/src/widget/flowlayout.ts

@@ -13,17 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Stack } from './layouts'
+import { Stack, IStack } from './layouts'
 import { Property, IView, Superview, View, NativeViewModel } from '../ui/view'
 import { layoutConfig } from '../util/index.util'
 
-export class FlowLayoutItem extends Stack {
+export interface IFlowLayoutItem extends IStack {
+    identifier?: string
+}
+
+export class FlowLayoutItem extends Stack implements IFlowLayoutItem {
     /**
     * Set to reuse native view
     */
     @Property
     identifier?: string
 }
+
+
 export interface IFlowLayout extends IView {
     renderItem: (index: number) => FlowLayoutItem
 
@@ -121,9 +127,20 @@ export function flowlayout(config: IFlowLayout) {
     return ret
 }
 
-export function flowItem(item: View) {
+export function flowItem(item: View | View[], config?: IFlowLayoutItem) {
     return (new FlowLayoutItem).also((it) => {
         it.layoutConfig = layoutConfig().fit()
+        if (item instanceof View) {
             it.addChild(item)
+        } else {
+            item.forEach(e => {
+                it.addChild(e)
+            })
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it)
+            }
+        }
     })
 }

doric-js/src/widget/layouts.ts

@@ -51,29 +51,44 @@ export interface IHLayout extends IView {
 export class HLayout extends LinearLayout implements IHLayout {
 }
 
-export function stack(views: View[]) {
+export function stack(views: View[], config?: IStack) {
     const ret = new Stack
     ret.layoutConfig = layoutConfig().fit()
     for (let v of views) {
         ret.addChild(v)
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+        }
+    }
     return ret
 }
 
-export function hlayout(views: View[]) {
+export function hlayout(views: View[], config?: IHLayout) {
     const ret = new HLayout
     ret.layoutConfig = layoutConfig().fit()
     for (let v of views) {
         ret.addChild(v)
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+        }
+    }
     return ret
 }
 
-export function vlayout(views: View[]) {
+export function vlayout(views: View[], config?: IVLayout) {
     const ret = new VLayout
     ret.layoutConfig = layoutConfig().fit()
     for (let v of views) {
         ret.addChild(v)
     }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+        }
+    }
     return ret
 }

doric-js/src/widget/list.ts

@@ -15,10 +15,14 @@
  */
 
 import { View, Property, Superview, IView, NativeViewModel } from "../ui/view";
-import { Stack } from "./layouts";
+import { Stack, IStack } from "./layouts";
 import { layoutConfig, LayoutSpec } from "../util/layoutconfig";
 
-export class ListItem extends Stack {
+export interface IListItem extends IStack {
+    identifier?: string
+}
+
+export class ListItem extends Stack implements IListItem {
     /**
      * Set to reuse native view
      */
@@ -109,9 +113,21 @@ export function list(config: IList) {
     return ret
 }
 
-export function listItem(item: View) {
+export function listItem(item: View | View[], config?: IListItem) {
     return (new ListItem).also((it) => {
-        it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT)
+        it.layoutConfig = layoutConfig().fit()
+        if (item instanceof View) {
             it.addChild(item)
+        } else {
+            item.forEach(e => {
+                it.addChild(e)
             })
         }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it)
+            }
+        }
+    })
+}
+

doric-js/src/widget/slider.ts

@@ -1,9 +1,14 @@
 import { Superview, View, Property, IView } from "../ui/view";
-import { Stack } from "./layouts";
+import { Stack, IStack } from "./layouts";
 import { layoutConfig } from "../util/layoutconfig";
 import { BridgeContext } from "../runtime/global";
 
-export class SlideItem extends Stack {
+
+export interface ISlideItem extends IStack {
+    identifier?: string
+}
+
+export class SlideItem extends Stack implements ISlideItem {
     /**
      * Set to reuse native view
      */
@@ -75,13 +80,6 @@ export class Slider extends Superview implements ISlider {
 
 }
 
-export function slideItem(item: View) {
-    return (new SlideItem).also((it) => {
-        it.layoutConfig = layoutConfig().fit()
-        it.addChild(item)
-    })
-}
-
 export function slider(config: ISlider) {
     const ret = new Slider
     for (let key in config) {
@@ -89,3 +87,21 @@ export function slider(config: ISlider) {
     }
     return ret
 }
+
+export function slideItem(item: View | View[], config?: ISlideItem) {
+    return (new SlideItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit()
+        if (item instanceof View) {
+            it.addChild(item)
+        } else {
+            item.forEach(e => {
+                it.addChild(e)
+            })
+        }
+        if (config) {
+            for (let key in config) {
+                Reflect.set(it, key, Reflect.get(config, key, config), it)
+            }
+        }
+    })
+}