js:add lib and .d.ts

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

@@ -0,0 +1,43 @@
+import { Stack } from './layouts';
+import { IView, Superview, View } from '../ui/view';
+export declare class FlowLayoutItem extends Stack {
+    /**
+    * Set to reuse native view
+    */
+    identifier?: string;
+}
+export interface IFlowLayout extends IView {
+    renderItem: (index: number) => FlowLayoutItem;
+    itemCount: number;
+    batchCount?: number;
+    columnCount?: number;
+    columnSpace?: number;
+    rowSpace?: number;
+}
+export declare class FlowLayout extends Superview implements IFlowLayout {
+    private cachedViews;
+    private ignoreDirtyCallOnce;
+    allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[];
+    columnCount: number;
+    columnSpace?: number;
+    rowSpace?: number;
+    itemCount: number;
+    renderItem: (index: number) => FlowLayoutItem;
+    batchCount: number;
+    onLoadMore?: () => void;
+    loadMore?: boolean;
+    loadMoreView?: FlowLayoutItem;
+    reset(): void;
+    private getItem;
+    isDirty(): boolean;
+    private renderBunchedItems;
+    toModel(): {
+        id: string;
+        type: string;
+        props: {
+            [index: string]: import("../util/types").Model;
+        };
+    };
+}
+export declare function flowlayout(config: IFlowLayout): FlowLayout;
+export declare function flowItem(item: View): FlowLayoutItem;

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

@@ -0,0 +1,131 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Stack } from './layouts';
+import { Property, Superview } from '../ui/view';
+import { layoutConfig } from '../util/index.util';
+export class FlowLayoutItem extends Stack {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], FlowLayoutItem.prototype, "identifier", void 0);
+export class FlowLayout extends Superview {
+    constructor() {
+        super(...arguments);
+        this.cachedViews = new Map;
+        this.ignoreDirtyCallOnce = false;
+        this.columnCount = 2;
+        this.itemCount = 0;
+        this.batchCount = 15;
+    }
+    allSubviews() {
+        if (this.loadMoreView) {
+            return [...this.cachedViews.values(), this.loadMoreView];
+        }
+        else {
+            return this.cachedViews.values();
+        }
+    }
+    reset() {
+        this.cachedViews.clear();
+        this.itemCount = 0;
+    }
+    getItem(itemIdx) {
+        let view = this.renderItem(itemIdx);
+        view.superview = this;
+        this.cachedViews.set(`${itemIdx}`, view);
+        return view;
+    }
+    isDirty() {
+        if (this.ignoreDirtyCallOnce) {
+            this.ignoreDirtyCallOnce = false;
+            //Ignore the dirty call once.
+            return false;
+        }
+        return super.isDirty();
+    }
+    renderBunchedItems(start, length) {
+        this.ignoreDirtyCallOnce = true;
+        return new Array(Math.min(length, this.itemCount - start)).fill(0).map((_, idx) => {
+            const listItem = this.getItem(start + idx);
+            return listItem.toModel();
+        });
+    }
+    toModel() {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
+        }
+        return super.toModel();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], FlowLayout.prototype, "columnCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], FlowLayout.prototype, "columnSpace", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], FlowLayout.prototype, "rowSpace", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], FlowLayout.prototype, "itemCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], FlowLayout.prototype, "renderItem", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], FlowLayout.prototype, "batchCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], FlowLayout.prototype, "onLoadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], FlowLayout.prototype, "loadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", FlowLayoutItem)
+], FlowLayout.prototype, "loadMoreView", void 0);
+export function flowlayout(config) {
+    const ret = new FlowLayout;
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+export function flowItem(item) {
+    return (new FlowLayoutItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit();
+        it.addChild(item);
+    });
+}

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

@@ -0,0 +1,27 @@
+import { IView, View } from "../ui/view";
+export declare enum ScaleType {
+    ScaleToFill = 0,
+    ScaleAspectFit = 1,
+    ScaleAspectFill = 2
+}
+export interface IImage extends IView {
+    imageUrl?: string;
+    imageBase64?: string;
+    scaleType?: ScaleType;
+    isBlur?: boolean;
+    loadCallback?: (image: {
+        width: number;
+        height: number;
+    } | undefined) => void;
+}
+export declare class Image extends View implements IImage {
+    imageUrl?: string;
+    imageBase64?: string;
+    scaleType?: ScaleType;
+    isBlur?: boolean;
+    loadCallback?: (image: {
+        width: number;
+        height: number;
+    } | undefined) => void;
+}
+export declare function image(config: IImage): Image;

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

@@ -0,0 +1,62 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { View, Property } from "../ui/view";
+import { layoutConfig } from "../util/layoutconfig";
+export var ScaleType;
+(function (ScaleType) {
+    ScaleType[ScaleType["ScaleToFill"] = 0] = "ScaleToFill";
+    ScaleType[ScaleType["ScaleAspectFit"] = 1] = "ScaleAspectFit";
+    ScaleType[ScaleType["ScaleAspectFill"] = 2] = "ScaleAspectFill";
+})(ScaleType || (ScaleType = {}));
+export class Image extends View {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Image.prototype, "imageUrl", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Image.prototype, "imageBase64", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], Image.prototype, "scaleType", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], Image.prototype, "isBlur", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], Image.prototype, "loadCallback", void 0);
+export function image(config) {
+    const ret = new Image;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}

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

@@ -0,0 +1,10 @@
+export * from './layouts';
+export * from './text';
+export * from './image';
+export * from './list';
+export * from './slider';
+export * from './scroller';
+export * from './refreshable';
+export * from './flowlayout';
+export * from './input';
+export * from './nestedSlider';

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

@@ -0,0 +1,25 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './layouts';
+export * from './text';
+export * from './image';
+export * from './list';
+export * from './slider';
+export * from './scroller';
+export * from './refreshable';
+export * from './flowlayout';
+export * from './input';
+export * from './nestedSlider';

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

@@ -0,0 +1,31 @@
+import { View, IView } from "../ui/view";
+import { Color } from "../util/color";
+import { Gravity } from "../util/gravity";
+import { BridgeContext } from "../runtime/global";
+export interface IInput extends IView {
+    text?: string;
+    textColor?: Color;
+    textSize?: number;
+    hintText?: string;
+    hintTextColor?: Color;
+    multilines?: boolean;
+    textAlignment?: Gravity;
+    onTextChange?: (text: string) => void;
+    onFocusChange?: (focused: boolean) => void;
+}
+export declare class Input extends View implements IInput {
+    text?: string;
+    textColor?: Color;
+    textSize?: number;
+    hintText?: string;
+    hintTextColor?: Color;
+    multiline?: boolean;
+    textAlignment?: Gravity;
+    onTextChange?: (text: string) => void;
+    onFocusChange?: (focused: boolean) => void;
+    getText(context: BridgeContext): Promise<string>;
+    setSelection(context: BridgeContext, start: number, end?: number): Promise<string>;
+    requestFocus(context: BridgeContext): Promise<any>;
+    releaseFocus(context: BridgeContext): Promise<any>;
+}
+export declare function input(config: IInput): Input;

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

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { View, Property } from "../ui/view";
+import { Color } from "../util/color";
+import { Gravity } from "../util/gravity";
+import { layoutConfig } from "../util/index.util";
+export class Input extends View {
+    getText(context) {
+        return this.nativeChannel(context, 'getText')();
+    }
+    setSelection(context, start, end = start) {
+        return this.nativeChannel(context, 'setSelection')({
+            start,
+            end,
+        });
+    }
+    requestFocus(context) {
+        return this.nativeChannel(context, 'requestFocus')();
+    }
+    releaseFocus(context) {
+        return this.nativeChannel(context, 'releaseFocus')();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Input.prototype, "text", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color)
+], Input.prototype, "textColor", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], Input.prototype, "textSize", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Input.prototype, "hintText", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color)
+], Input.prototype, "hintTextColor", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], Input.prototype, "multiline", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Gravity)
+], Input.prototype, "textAlignment", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], Input.prototype, "onTextChange", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], Input.prototype, "onFocusChange", void 0);
+export function input(config) {
+    const ret = new Input;
+    ret.layoutConfig = layoutConfig().just();
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}

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

@@ -0,0 +1,28 @@
+import { Group, IView, View } from "../ui/view";
+import { Gravity } from "../util/gravity";
+export interface IStack extends IView {
+}
+export declare class Stack extends Group implements IStack {
+}
+export declare class Root extends Stack {
+}
+declare class LinearLayout extends Group {
+    space?: number;
+    gravity?: Gravity;
+}
+export interface IVLayout extends IView {
+    space?: number;
+    gravity?: Gravity;
+}
+export declare class VLayout extends LinearLayout implements VLayout {
+}
+export interface IHLayout extends IView {
+    space?: number;
+    gravity?: Gravity;
+}
+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 {};

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

@@ -0,0 +1,69 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Group, Property } from "../ui/view";
+import { Gravity } from "../util/gravity";
+import { layoutConfig } from "../util/layoutconfig";
+export class Stack extends Group {
+}
+export class Root extends Stack {
+}
+class LinearLayout extends Group {
+}
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], LinearLayout.prototype, "space", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Gravity)
+], LinearLayout.prototype, "gravity", void 0);
+export class VLayout extends LinearLayout {
+}
+export class HLayout extends LinearLayout {
+}
+export function stack(views) {
+    const ret = new Stack;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let v of views) {
+        ret.addChild(v);
+    }
+    return ret;
+}
+export function hlayout(views) {
+    const ret = new HLayout;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let v of views) {
+        ret.addChild(v);
+    }
+    return ret;
+}
+export function vlayout(views) {
+    const ret = new VLayout;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let v of views) {
+        ret.addChild(v);
+    }
+    return ret;
+}

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

@@ -0,0 +1,37 @@
+import { View, Superview, IView } from "../ui/view";
+import { Stack } from "./layouts";
+export declare class ListItem extends Stack {
+    /**
+     * Set to reuse native view
+     */
+    identifier?: string;
+}
+export interface IList extends IView {
+    renderItem: (index: number) => ListItem;
+    itemCount: number;
+    batchCount?: number;
+}
+export declare class List extends Superview implements IList {
+    private cachedViews;
+    private ignoreDirtyCallOnce;
+    allSubviews(): IterableIterator<ListItem> | ListItem[];
+    itemCount: number;
+    renderItem: (index: number) => ListItem;
+    batchCount: number;
+    onLoadMore?: () => void;
+    loadMore?: boolean;
+    loadMoreView?: ListItem;
+    reset(): void;
+    private getItem;
+    isDirty(): boolean;
+    private renderBunchedItems;
+    toModel(): {
+        id: string;
+        type: string;
+        props: {
+            [index: string]: import("../..").Model;
+        };
+    };
+}
+export declare function list(config: IList): List;
+export declare function listItem(item: View): ListItem;

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

@@ -0,0 +1,121 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { Stack } from "./layouts";
+import { layoutConfig, LayoutSpec } from "../util/layoutconfig";
+export class ListItem extends Stack {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], ListItem.prototype, "identifier", void 0);
+export class List extends Superview {
+    constructor() {
+        super(...arguments);
+        this.cachedViews = new Map;
+        this.ignoreDirtyCallOnce = false;
+        this.itemCount = 0;
+        this.batchCount = 15;
+    }
+    allSubviews() {
+        if (this.loadMoreView) {
+            return [...this.cachedViews.values(), this.loadMoreView];
+        }
+        else {
+            return this.cachedViews.values();
+        }
+    }
+    reset() {
+        this.cachedViews.clear();
+        this.itemCount = 0;
+    }
+    getItem(itemIdx) {
+        let view = this.cachedViews.get(`${itemIdx}`);
+        if (view === undefined) {
+            view = this.renderItem(itemIdx);
+            view.superview = this;
+            this.cachedViews.set(`${itemIdx}`, view);
+        }
+        return view;
+    }
+    isDirty() {
+        if (this.ignoreDirtyCallOnce) {
+            this.ignoreDirtyCallOnce = false;
+            //Ignore the dirty call once.
+            return false;
+        }
+        return super.isDirty();
+    }
+    renderBunchedItems(start, length) {
+        this.ignoreDirtyCallOnce = true;
+        return new Array(Math.min(length, this.itemCount - start)).fill(0).map((_, idx) => {
+            const listItem = this.getItem(start + idx);
+            return listItem.toModel();
+        });
+    }
+    toModel() {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
+        }
+        return super.toModel();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], List.prototype, "itemCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], List.prototype, "renderItem", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], List.prototype, "batchCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], List.prototype, "onLoadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], List.prototype, "loadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", ListItem)
+], List.prototype, "loadMoreView", void 0);
+export function list(config) {
+    const ret = new List;
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+export function listItem(item) {
+    return (new ListItem).also((it) => {
+        it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT);
+        it.addChild(item);
+    });
+}

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

@@ -0,0 +1,8 @@
+import { Group, View } from '../ui/view';
+import { BridgeContext } from '../runtime/global';
+export declare class NestedSlider extends Group {
+    onPageSlided?: (index: number) => void;
+    addSlideItem(view: View): void;
+    slidePage(context: BridgeContext, page: number, smooth?: boolean): Promise<any>;
+    getSlidedPage(context: BridgeContext): Promise<number>;
+}

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

@@ -0,0 +1,40 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Group, Property } from '../ui/view';
+export class NestedSlider extends Group {
+    addSlideItem(view) {
+        this.addChild(view);
+    }
+    slidePage(context, page, smooth = false) {
+        return this.nativeChannel(context, "slidePage")({ page, smooth });
+    }
+    getSlidedPage(context) {
+        return this.nativeChannel(context, "getSlidedPage")();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], NestedSlider.prototype, "onPageSlided", void 0);

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

@@ -0,0 +1,33 @@
+import { View, Superview, IView } from "../ui/view";
+import { List } from "./list";
+import { Scroller } from "./scroller";
+import { BridgeContext } from "../runtime/global";
+export interface IRefreshable extends IView {
+    content: View;
+    header?: View;
+    onRefresh?: () => void;
+}
+export declare class Refreshable extends Superview implements IRefreshable {
+    content: List | Scroller;
+    header?: View;
+    onRefresh?: () => void;
+    allSubviews(): View[];
+    setRefreshable(context: BridgeContext, refreshable: boolean): Promise<any>;
+    setRefreshing(context: BridgeContext, refreshing: boolean): Promise<any>;
+    isRefreshable(context: BridgeContext): Promise<boolean>;
+    isRefreshing(context: BridgeContext): Promise<boolean>;
+    toModel(): {
+        id: string;
+        type: string;
+        props: {
+            [index: string]: import("../..").Model;
+        };
+    };
+}
+export declare function refreshable(config: IRefreshable): Refreshable;
+export interface IPullable {
+    startAnimation(): void;
+    stopAnimation(): void;
+    setPullingDistance(distance: number): void;
+}
+export declare function pullable(v: View, config: IPullable): View;

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

@@ -0,0 +1,55 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { layoutConfig } from "../util/layoutconfig";
+export class Refreshable extends Superview {
+    allSubviews() {
+        const ret = [this.content];
+        if (this.header) {
+            ret.push(this.header);
+        }
+        return ret;
+    }
+    setRefreshable(context, refreshable) {
+        return this.nativeChannel(context, 'setRefreshable')(refreshable);
+    }
+    setRefreshing(context, refreshing) {
+        return this.nativeChannel(context, 'setRefreshing')(refreshing);
+    }
+    isRefreshable(context) {
+        return this.nativeChannel(context, 'isRefreshable')();
+    }
+    isRefreshing(context) {
+        return this.nativeChannel(context, 'isRefreshing')();
+    }
+    toModel() {
+        this.dirtyProps.content = this.content.viewId;
+        this.dirtyProps.header = (this.header || {}).viewId;
+        return super.toModel();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], Refreshable.prototype, "onRefresh", void 0);
+export function refreshable(config) {
+    const ret = new Refreshable;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+export function pullable(v, config) {
+    Reflect.set(v, 'startAnimation', config.startAnimation);
+    Reflect.set(v, 'stopAnimation', config.stopAnimation);
+    Reflect.set(v, 'setPullingDistance', config.setPullingDistance);
+    return v;
+}

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

@@ -0,0 +1,16 @@
+import { Superview, View, IView } from '../ui/view';
+export declare function scroller(content: View): Scroller;
+export interface IScroller extends IView {
+    content: View;
+}
+export declare class Scroller extends Superview implements IScroller {
+    content: View;
+    allSubviews(): View[];
+    toModel(): {
+        id: string;
+        type: string;
+        props: {
+            [index: string]: import("../..").Model;
+        };
+    };
+}

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Superview } from '../ui/view';
+import { layoutConfig } from '../util/layoutconfig';
+export function scroller(content) {
+    return (new Scroller).also(v => {
+        v.layoutConfig = layoutConfig().fit();
+        v.content = content;
+    });
+}
+export class Scroller extends Superview {
+    allSubviews() {
+        return [this.content];
+    }
+    toModel() {
+        this.dirtyProps.content = this.content.viewId;
+        return super.toModel();
+    }
+}

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

@@ -0,0 +1,31 @@
+import { Superview, View, IView } from "../ui/view";
+import { Stack } from "./layouts";
+import { BridgeContext } from "../runtime/global";
+export declare class SlideItem extends Stack {
+    /**
+     * Set to reuse native view
+     */
+    identifier?: string;
+}
+export interface ISlider extends IView {
+    renderPage: (index: number) => SlideItem;
+    itemCount: number;
+    batchCount?: number;
+    onPageSlided?: (index: number) => void;
+}
+export declare class Slider extends Superview implements ISlider {
+    private cachedViews;
+    private ignoreDirtyCallOnce;
+    allSubviews(): IterableIterator<SlideItem>;
+    itemCount: number;
+    renderPage: (index: number) => SlideItem;
+    batchCount: number;
+    onPageSlided?: (index: number) => void;
+    private getItem;
+    isDirty(): boolean;
+    private renderBunchedItems;
+    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;

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

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { Stack } from "./layouts";
+import { layoutConfig } from "../util/layoutconfig";
+export class SlideItem extends Stack {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], SlideItem.prototype, "identifier", void 0);
+export class Slider extends Superview {
+    constructor() {
+        super(...arguments);
+        this.cachedViews = new Map;
+        this.ignoreDirtyCallOnce = false;
+        this.itemCount = 0;
+        this.batchCount = 3;
+    }
+    allSubviews() {
+        return this.cachedViews.values();
+    }
+    getItem(itemIdx) {
+        let view = this.cachedViews.get(`${itemIdx}`);
+        if (view === undefined) {
+            view = this.renderPage(itemIdx);
+            view.superview = this;
+            this.cachedViews.set(`${itemIdx}`, view);
+        }
+        return view;
+    }
+    isDirty() {
+        if (this.ignoreDirtyCallOnce) {
+            this.ignoreDirtyCallOnce = false;
+            //Ignore the dirty call once.
+            return false;
+        }
+        return super.isDirty();
+    }
+    renderBunchedItems(start, length) {
+        this.ignoreDirtyCallOnce = true;
+        return new Array(Math.min(length, this.itemCount - start)).fill(0).map((_, idx) => {
+            const slideItem = this.getItem(start + idx);
+            return slideItem.toModel();
+        });
+    }
+    slidePage(context, page, smooth = false) {
+        return this.nativeChannel(context, "slidePage")({ page, smooth });
+    }
+    getSlidedPage(context) {
+        return this.nativeChannel(context, "getSlidedPage")();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], Slider.prototype, "itemCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], Slider.prototype, "renderPage", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], Slider.prototype, "batchCount", void 0);
+__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) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}

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

@@ -0,0 +1,18 @@
+import { IView, View } from "../ui/view";
+import { Color } from "../util/color";
+import { Gravity } from "../util/gravity";
+export interface IText extends IView {
+    text?: string;
+    textColor?: Color;
+    textSize?: number;
+    maxLines?: number;
+    textAlignment?: Gravity;
+}
+export declare class Text extends View implements IText {
+    text?: string;
+    textColor?: Color;
+    textSize?: number;
+    maxLines?: number;
+    textAlignment?: Gravity;
+}
+export declare function text(config: IText): Text;

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

@@ -0,0 +1,58 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/*
+ * Copyright [2019] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { View, Property } from "../ui/view";
+import { Color } from "../util/color";
+import { Gravity } from "../util/gravity";
+import { layoutConfig } from "../util/layoutconfig";
+export class Text extends View {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], Text.prototype, "text", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Color)
+], Text.prototype, "textColor", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], Text.prototype, "textSize", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], Text.prototype, "maxLines", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Gravity)
+], Text.prototype, "textAlignment", void 0);
+export function text(config) {
+    const ret = new Text;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}