js:change apis of declarable

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()
-    for (let key in config) {
-        Reflect.set(ret, key, Reflect.get(config, key, config), ret)
+    if (views instanceof View) {
+        ret.addChild(views)
+    } else {
+        views.forEach(e => {
+            ret.addChild(e)
+        })
     }
-    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/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()
-        it.addChild(item)
+        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.addChild(item)
+        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,17 +80,28 @@ 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) {
         Reflect.set(ret, key, Reflect.get(config, key, config), ret)
     }
     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)
+            }
+        }
+    })
 }