tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

js:change apis of declarable

Browse Source
This commit is contained in:
pengfei.zhou 2020-01-04 19:13:15 +08:00 committed by osborn
parent ce4f9203f2
commit 3b82935b24
20 changed files with 478 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
doric-demo/src/DraggableDemo.ts
View File

@ -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"; import { title } from "./utils";
@Entry @Entry
class DraggableDemo extends Panel { class DraggableDemo extends Panel {
build(root: Group) { 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,
modal(context).toast('Clicked') 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) onDrag: (x: number, y: number) => {
} textView.text = "x: " + x.toFixed(0) + " y: " + y.toFixed(0)
}, [ text ]).apply({ },
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
width: 100, width: 100,
height: 100, height: 100,
backgroundColor: Color.WHITE backgroundColor: Color.WHITE
})
vlayout([
title("Draggable Demo"),
stack([
drag,
]).apply({
layoutConfig: layoutConfig().most()
}) })
]) vlayout(
.apply({ [
title("Draggable Demo"),
stack(
[
drag,
],
{
layoutConfig: layoutConfig().most()
})
],
{
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
backgroundColor: Color.BLACK backgroundColor: Color.BLACK
}) })

130
doric-demo/src/LayoutDemo.ts
View File

@ -99,66 +99,74 @@ class LayoutDemo extends Panel {
it.gravity = gravity().center() it.gravity = gravity().center()
}), }),
label("Horizontal Layout(Weight)"), label("Horizontal Layout(Weight)"),
hlayout([ hlayout(
boxStr('weight=1', 3).apply({ [
boxStr('weight=1', 3).apply({
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
weight: 1,
}
}),
box(2),
box(4),
],
{
width: 200,
height: 30,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.JUST, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST,
weight: 1, },
} backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
}), }),
box(2), hlayout(
box(4), [
]).apply({ box(3),
width: 200, boxStr('weight=1', 2).apply({
height: 30, layoutConfig: {
layoutConfig: { widthSpec: LayoutSpec.JUST,
widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST, weight: 1,
}, }
backgroundColor: Color.parse('#eeeeee'), }),
gravity: gravity().center(), box(4),
} as IHLayout), ],
hlayout([ {
box(3), width: 200,
boxStr('weight=1', 2).apply({ height: 30,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.JUST, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST,
weight: 1, },
} backgroundColor: Color.parse('#eeeeee'),
}), gravity: gravity().center(),
box(4), }
]).apply({ ),
width: 200, hlayout(
height: 30, [
layoutConfig: { box(3),
widthSpec: LayoutSpec.JUST, box(2),
heightSpec: LayoutSpec.JUST, boxStr('weight=1', 4).apply({
}, layoutConfig: {
backgroundColor: Color.parse('#eeeeee'), widthSpec: LayoutSpec.JUST,
gravity: gravity().center(), heightSpec: LayoutSpec.JUST,
} as IHLayout), weight: 1,
hlayout([ }
box(3), }),
box(2), ],
boxStr('weight=1', 4).apply({ {
width: 200,
height: 30,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.JUST, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST,
weight: 1, },
} backgroundColor: Color.parse('#eeeeee'),
}), gravity: gravity().center(),
]).apply({ }
width: 200, ),
height: 30,
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
},
backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(),
} as IHLayout),
hlayout([ hlayout([
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
@ -175,16 +183,18 @@ class LayoutDemo extends Panel {
} }
}), }),
box(4), box(4),
]).apply({ ],
width: 200, {
height: 30, width: 200,
layoutConfig: { height: 30,
widthSpec: LayoutSpec.JUST, layoutConfig: {
heightSpec: LayoutSpec.JUST, widthSpec: LayoutSpec.JUST,
}, heightSpec: LayoutSpec.JUST,
backgroundColor: Color.parse('#eeeeee'), },
gravity: gravity().center(), backgroundColor: Color.parse('#eeeeee'),
} as IHLayout), gravity: gravity().center(),
}
),
hlayout([ hlayout([
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {

96
doric-js/bundle/doric-lib.js
View File

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

96
doric-js/bundle/doric-vm.js
View File

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

35
doric-js/index.d.ts vendored
View File

@ -413,9 +413,9 @@ declare module 'doric/lib/src/widget/layouts' {
} }
export class HLayout extends LinearLayout implements IHLayout { 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 {}; export {};
} }
@ -472,8 +472,11 @@ declare module 'doric/lib/src/widget/image' {
declare module 'doric/lib/src/widget/list' { declare module 'doric/lib/src/widget/list' {
import { View, Superview, IView, NativeViewModel } from "doric/lib/src/ui/view"; 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 * Set to reuse native view
*/ */
@ -497,14 +500,17 @@ declare module 'doric/lib/src/widget/list' {
toModel(): NativeViewModel; toModel(): NativeViewModel;
} }
export function list(config: IList): List; 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' { declare module 'doric/lib/src/widget/slider' {
import { Superview, View, IView } from "doric/lib/src/ui/view"; 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"; 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 * 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>; slidePage(context: BridgeContext, page: number, smooth?: boolean): Promise<any>;
getSlidedPage(context: BridgeContext): Promise<number>; getSlidedPage(context: BridgeContext): Promise<number>;
} }
export function slideItem(item: View): SlideItem;
export function slider(config: ISlider): Slider; export function slider(config: ISlider): Slider;
export function slideItem(item: View | View[], config?: ISlideItem): SlideItem;
} }
declare module 'doric/lib/src/widget/scroller' { 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' { 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'; 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 * Set to reuse native view
*/ */
@ -606,7 +615,7 @@ declare module 'doric/lib/src/widget/flowlayout' {
toModel(): NativeViewModel; toModel(): NativeViewModel;
} }
export function flowlayout(config: IFlowLayout): FlowLayout; 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' { 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 { export class Draggable extends Stack implements IDraggable {
onDrag?: (x: number, y: number) => void; 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' { declare module 'doric/lib/src/native/modal' {

2
doric-js/lib/src/widget/draggable.d.ts vendored
View File

@ -6,4 +6,4 @@ export interface IDraggable extends IStack {
export declare class Draggable extends Stack implements IDraggable { export declare class Draggable extends Stack implements IDraggable {
onDrag?: (x: number, y: number) => void; 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;

19
doric-js/lib/src/widget/draggable.js
View File

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

9
doric-js/lib/src/widget/flowlayout.d.ts vendored
View File

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

18
doric-js/lib/src/widget/flowlayout.js
View File

@ -23,7 +23,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
* limitations under the License. * limitations under the License.
*/ */
import { Stack } from './layouts'; import { Stack } from './layouts';
import { Property, Superview } from '../ui/view'; import { Property, Superview, View } from '../ui/view';
import { layoutConfig } from '../util/index.util'; import { layoutConfig } from '../util/index.util';
export class FlowLayoutItem extends Stack { export class FlowLayoutItem extends Stack {
} }
@ -123,9 +123,21 @@ export function flowlayout(config) {
} }
return ret; return ret;
} }
export function flowItem(item) { export function flowItem(item, config) {
return (new FlowLayoutItem).also((it) => { return (new FlowLayoutItem).also((it) => {
it.layoutConfig = layoutConfig().fit(); 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);
}
}
}); });
} }

6
doric-js/lib/src/widget/layouts.d.ts vendored
View File

@ -22,7 +22,7 @@ export interface IHLayout extends IView {
} }
export declare class HLayout extends LinearLayout implements IHLayout { 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 {}; export {};

21
doric-js/lib/src/widget/layouts.js
View File

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

9
doric-js/lib/src/widget/list.d.ts vendored
View File

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

22
doric-js/lib/src/widget/list.js
View File

@ -22,9 +22,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
var __metadata = (this && this.__metadata) || function (k, v) { var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(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 { Stack } from "./layouts";
import { layoutConfig, LayoutSpec } from "../util/layoutconfig"; import { layoutConfig } from "../util/layoutconfig";
export class ListItem extends Stack { export class ListItem extends Stack {
} }
__decorate([ __decorate([
@ -113,9 +113,21 @@ export function list(config) {
} }
return ret; return ret;
} }
export function listItem(item) { export function listItem(item, config) {
return (new ListItem).also((it) => { return (new ListItem).also((it) => {
it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT); 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);
}
}
}); });
} }

9
doric-js/lib/src/widget/slider.d.ts vendored
View File

@ -1,7 +1,10 @@
import { Superview, View, IView } from "../ui/view"; import { Superview, View, IView } from "../ui/view";
import { Stack } from "./layouts"; import { Stack, IStack } from "./layouts";
import { BridgeContext } from "../runtime/global"; 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 * 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>; slidePage(context: BridgeContext, page: number, smooth?: boolean): Promise<any>;
getSlidedPage(context: BridgeContext): Promise<number>; getSlidedPage(context: BridgeContext): Promise<number>;
} }
export declare function slideItem(item: View): SlideItem;
export declare function slider(config: ISlider): Slider; export declare function slider(config: ISlider): Slider;
export declare function slideItem(item: View | View[], config?: ISlideItem): SlideItem;

26
doric-js/lib/src/widget/slider.js
View File

@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
var __metadata = (this && this.__metadata) || function (k, v) { var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(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 { Stack } from "./layouts";
import { layoutConfig } from "../util/layoutconfig"; import { layoutConfig } from "../util/layoutconfig";
export class SlideItem extends Stack { export class SlideItem extends Stack {
@ -74,12 +74,6 @@ __decorate([
Property, Property,
__metadata("design:type", Function) __metadata("design:type", Function)
], Slider.prototype, "onPageSlided", void 0); ], 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) { export function slider(config) {
const ret = new Slider; const ret = new Slider;
for (let key in config) { for (let key in config) {
@ -87,3 +81,21 @@ export function slider(config) {
} }
return ret; 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);
}
}
});
}

16
doric-js/src/widget/draggable.ts
View File

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

25
doric-js/src/widget/flowlayout.ts
View File

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

21
doric-js/src/widget/layouts.ts
View File

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

26
doric-js/src/widget/list.ts
View File

@ -15,10 +15,14 @@
*/ */
import { View, Property, Superview, IView, NativeViewModel } from "../ui/view"; import { View, Property, Superview, IView, NativeViewModel } from "../ui/view";
import { Stack } from "./layouts"; import { Stack, IStack } from "./layouts";
import { layoutConfig, LayoutSpec } from "../util/layoutconfig"; 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 * Set to reuse native view
*/ */
@ -109,9 +113,21 @@ export function list(config: IList) {
return ret return ret
} }
export function listItem(item: View) { export function listItem(item: View | View[], config?: IListItem) {
return (new ListItem).also((it) => { return (new ListItem).also((it) => {
it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT) 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)
}
}
}) })
} }

34
doric-js/src/widget/slider.ts
View File

@ -1,9 +1,14 @@
import { Superview, View, Property, IView } from "../ui/view"; import { Superview, View, Property, IView } from "../ui/view";
import { Stack } from "./layouts"; import { Stack, IStack } from "./layouts";
import { layoutConfig } from "../util/layoutconfig"; import { layoutConfig } from "../util/layoutconfig";
import { BridgeContext } from "../runtime/global"; 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 * 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) { export function slider(config: ISlider) {
const ret = new Slider const ret = new Slider
for (let key in config) { for (let key in config) {
@ -89,3 +87,21 @@ export function slider(config: ISlider) {
} }
return 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)
}
}
})
}