From 3b82935b248b97099600f918ad3e3d73f87bdf83 Mon Sep 17 00:00:00 2001 From: "pengfei.zhou" Date: Sat, 4 Jan 2020 19:13:15 +0800 Subject: [PATCH] js:change apis of declarable --- doric-demo/src/DraggableDemo.ts | 61 +++++------ doric-demo/src/LayoutDemo.ts | 130 +++++++++++++----------- doric-js/bundle/doric-lib.js | 96 +++++++++++++---- doric-js/bundle/doric-vm.js | 96 +++++++++++++---- doric-js/index.d.ts | 35 ++++--- doric-js/lib/src/widget/draggable.d.ts | 2 +- doric-js/lib/src/widget/draggable.js | 19 ++-- doric-js/lib/src/widget/flowlayout.d.ts | 9 +- doric-js/lib/src/widget/flowlayout.js | 18 +++- doric-js/lib/src/widget/layouts.d.ts | 6 +- doric-js/lib/src/widget/layouts.js | 21 +++- doric-js/lib/src/widget/list.d.ts | 9 +- doric-js/lib/src/widget/list.js | 22 +++- doric-js/lib/src/widget/slider.d.ts | 9 +- doric-js/lib/src/widget/slider.js | 26 +++-- doric-js/src/widget/draggable.ts | 16 ++- doric-js/src/widget/flowlayout.ts | 25 ++++- doric-js/src/widget/layouts.ts | 21 +++- doric-js/src/widget/list.ts | 26 ++++- doric-js/src/widget/slider.ts | 34 +++++-- 20 files changed, 478 insertions(+), 203 deletions(-) diff --git a/doric-demo/src/DraggableDemo.ts b/doric-demo/src/DraggableDemo.ts index 296aa5a0..8f81785e 100644 --- a/doric-demo/src/DraggableDemo.ts +++ b/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 => { - it.layoutConfig = layoutConfig().just().configAlignment(Gravity.Center) - it.width = 100 - it.height = 30 - it.textColor = Color.parse('#ff0000') - it.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) - } - }, [ text ]).apply({ - layoutConfig: layoutConfig().just(), - width: 100, - height: 100, - backgroundColor: Color.WHITE - }) - vlayout([ - title("Draggable Demo"), - stack([ - drag, - ]).apply({ - layoutConfig: layoutConfig().most() + let textView: Text + let drag = draggable( + textView = text({ + layoutConfig: layoutConfig().just().configAlignment(Gravity.Center), + width: 100, + height: 30, + textColor: Color.RED, + onClick: () => { + modal(context).toast('Clicked') + } + }), + { + onDrag: (x: number, y: number) => { + textView.text = "x: " + x.toFixed(0) + " y: " + y.toFixed(0) + }, + layoutConfig: layoutConfig().just(), + width: 100, + height: 100, + backgroundColor: Color.WHITE }) - ]) - .apply({ + vlayout( + [ + title("Draggable Demo"), + stack( + [ + drag, + ], + { + layoutConfig: layoutConfig().most() + }) + ], + { layoutConfig: layoutConfig().most(), backgroundColor: Color.BLACK }) diff --git a/doric-demo/src/LayoutDemo.ts b/doric-demo/src/LayoutDemo.ts index 79027d39..16a99ce3 100644 --- a/doric-demo/src/LayoutDemo.ts +++ b/doric-demo/src/LayoutDemo.ts @@ -99,66 +99,74 @@ class LayoutDemo extends Panel { it.gravity = gravity().center() }), label("Horizontal Layout(Weight)"), - hlayout([ - boxStr('weight=1', 3).apply({ + hlayout( + [ + boxStr('weight=1', 3).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + box(2), + box(4), + ], + { + width: 200, + height: 30, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, - weight: 1, - } + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), }), - box(2), - box(4), - ]).apply({ - width: 200, - height: 30, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IHLayout), - hlayout([ - box(3), - boxStr('weight=1', 2).apply({ + hlayout( + [ + box(3), + boxStr('weight=1', 2).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + box(4), + ], + { + width: 200, + height: 30, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - box(4), - ]).apply({ - width: 200, - height: 30, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IHLayout), - hlayout([ - box(3), - box(2), - boxStr('weight=1', 4).apply({ + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } + ), + hlayout( + [ + box(3), + box(2), + boxStr('weight=1', 4).apply({ + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + weight: 1, + } + }), + ], + { + width: 200, + height: 30, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, - weight: 1, - } - }), - ]).apply({ - width: 200, - height: 30, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IHLayout), + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } + ), hlayout([ boxStr('weight=1', 3).apply({ layoutConfig: { @@ -175,16 +183,18 @@ class LayoutDemo extends Panel { } }), box(4), - ]).apply({ - width: 200, - height: 30, - layoutConfig: { - widthSpec: LayoutSpec.JUST, - heightSpec: LayoutSpec.JUST, - }, - backgroundColor: Color.parse('#eeeeee'), - gravity: gravity().center(), - } as IHLayout), + ], + { + width: 200, + height: 30, + layoutConfig: { + widthSpec: LayoutSpec.JUST, + heightSpec: LayoutSpec.JUST, + }, + backgroundColor: Color.parse('#eeeeee'), + gravity: gravity().center(), + } + ), hlayout([ boxStr('weight=1', 3).apply({ layoutConfig: { diff --git a/doric-js/bundle/doric-lib.js b/doric-js/bundle/doric-lib.js index 5a05abe9..d5424c44 100644 --- a/doric-js/bundle/doric-lib.js +++ b/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.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); + } + } }); } @@ -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(); - 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); + } + } }); } @@ -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(); - for (let key in config) { - Reflect.set(ret, key, Reflect.get(config, key, config), ret); + if (views instanceof View) { + ret.addChild(views); } - for (let v of views) { - ret.addChild(v); + else { + views.forEach(e => { + ret.addChild(e); + }); + } + if (config) { + for (let key in config) { + Reflect.set(ret, key, Reflect.get(config, key, config), ret); + } } return ret; } diff --git a/doric-js/bundle/doric-vm.js b/doric-js/bundle/doric-vm.js index f2c0d1b4..c4ec820f 100644 --- a/doric-js/bundle/doric-vm.js +++ b/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.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); + } + } }); } @@ -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(); - 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); + } + } }); } @@ -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(); - for (let key in config) { - Reflect.set(ret, key, Reflect.get(config, key, config), ret); + if (views instanceof View) { + ret.addChild(views); } - for (let v of views) { - ret.addChild(v); + else { + views.forEach(e => { + ret.addChild(e); + }); + } + if (config) { + for (let key in config) { + Reflect.set(ret, key, Reflect.get(config, key, config), ret); + } } return ret; } diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts index 21084107..cf3fe0eb 100644 --- a/doric-js/index.d.ts +++ b/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 hlayout(views: View[]): HLayout; - export function vlayout(views: View[]): VLayout; + export function stack(views: View[], config?: IStack): Stack; + export function hlayout(views: View[], config?: IHLayout): HLayout; + 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"; - export class ListItem extends Stack { + import { Stack, IStack } from "doric/lib/src/widget/layouts"; + 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; getSlidedPage(context: BridgeContext): Promise; } - 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' { diff --git a/doric-js/lib/src/widget/draggable.d.ts b/doric-js/lib/src/widget/draggable.d.ts index 14d1506e..9dcb3367 100644 --- a/doric-js/lib/src/widget/draggable.d.ts +++ b/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; diff --git a/doric-js/lib/src/widget/draggable.js b/doric-js/lib/src/widget/draggable.js index ccb64118..c83c7436 100644 --- a/doric-js/lib/src/widget/draggable.js +++ b/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(); - for (let key in config) { - Reflect.set(ret, key, Reflect.get(config, key, config), ret); + if (views instanceof View) { + ret.addChild(views); } - for (let v of views) { - ret.addChild(v); + else { + views.forEach(e => { + ret.addChild(e); + }); + } + if (config) { + for (let key in config) { + Reflect.set(ret, key, Reflect.get(config, key, config), ret); + } } return ret; } diff --git a/doric-js/lib/src/widget/flowlayout.d.ts b/doric-js/lib/src/widget/flowlayout.d.ts index b49892ac..639a5117 100644 --- a/doric-js/lib/src/widget/flowlayout.d.ts +++ b/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; diff --git a/doric-js/lib/src/widget/flowlayout.js b/doric-js/lib/src/widget/flowlayout.js index c05ed7a9..02dd3f3a 100644 --- a/doric-js/lib/src/widget/flowlayout.js +++ b/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(); - 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); + } + } }); } diff --git a/doric-js/lib/src/widget/layouts.d.ts b/doric-js/lib/src/widget/layouts.d.ts index 26a3b3e5..4c9b24da 100644 --- a/doric-js/lib/src/widget/layouts.d.ts +++ b/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 hlayout(views: View[]): HLayout; -export declare function vlayout(views: View[]): VLayout; +export declare function stack(views: View[], config?: IStack): Stack; +export declare function hlayout(views: View[], config?: IHLayout): HLayout; +export declare function vlayout(views: View[], config?: IVLayout): VLayout; export {}; diff --git a/doric-js/lib/src/widget/layouts.js b/doric-js/lib/src/widget/layouts.js index 94c6c85e..7e433bdf 100644 --- a/doric-js/lib/src/widget/layouts.js +++ b/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; } diff --git a/doric-js/lib/src/widget/list.d.ts b/doric-js/lib/src/widget/list.d.ts index 595a3d0a..7cf34a45 100644 --- a/doric-js/lib/src/widget/list.d.ts +++ b/doric-js/lib/src/widget/list.d.ts @@ -1,6 +1,9 @@ import { View, Superview, IView, NativeViewModel } from "../ui/view"; -import { Stack } from "./layouts"; -export declare class ListItem extends Stack { +import { Stack, IStack } from "./layouts"; +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; diff --git a/doric-js/lib/src/widget/list.js b/doric-js/lib/src/widget/list.js index cd9e1f4e..8bfee36b 100644 --- a/doric-js/lib/src/widget/list.js +++ b/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.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); + } + } }); } diff --git a/doric-js/lib/src/widget/slider.d.ts b/doric-js/lib/src/widget/slider.d.ts index 74ef4672..bec195c5 100644 --- a/doric-js/lib/src/widget/slider.d.ts +++ b/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; getSlidedPage(context: BridgeContext): Promise; } -export declare function slideItem(item: View): SlideItem; export declare function slider(config: ISlider): Slider; +export declare function slideItem(item: View | View[], config?: ISlideItem): SlideItem; diff --git a/doric-js/lib/src/widget/slider.js b/doric-js/lib/src/widget/slider.js index 418a090c..93d2b6f3 100644 --- a/doric-js/lib/src/widget/slider.js +++ b/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); + } + } + }); +} diff --git a/doric-js/src/widget/draggable.ts b/doric-js/src/widget/draggable.ts index dabe40ab..8a9bc00f 100644 --- a/doric-js/src/widget/draggable.ts +++ b/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 } \ No newline at end of file diff --git a/doric-js/src/widget/flowlayout.ts b/doric-js/src/widget/flowlayout.ts index 662fdc18..c374716a 100644 --- a/doric-js/src/widget/flowlayout.ts +++ b/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) + } + } }) } diff --git a/doric-js/src/widget/layouts.ts b/doric-js/src/widget/layouts.ts index b0c8fa66..bc503555 100644 --- a/doric-js/src/widget/layouts.ts +++ b/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 } \ No newline at end of file diff --git a/doric-js/src/widget/list.ts b/doric-js/src/widget/list.ts index 06d88738..9d9e94c6 100644 --- a/doric-js/src/widget/list.ts +++ b/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) + } + } }) } + diff --git a/doric-js/src/widget/slider.ts b/doric-js/src/widget/slider.ts index 733faad2..b2e3d3bf 100644 --- a/doric-js/src/widget/slider.ts +++ b/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) + } + } + }) } \ No newline at end of file