js: add horizontal list declaration

doric-js/index.d.ts

@@ -1408,6 +1408,65 @@ declare module "doric" {
 	}
 	export function blurEffect(views: View | View[], config?: Partial<BlurEffect>): BlurEffect;
 	export function aeroEffect(views: View | View[], config?: Partial<AeroEffect>): AeroEffect;
+	export class HorizontalListItem extends Stack {
+		/**
+		 * Set to reuse native view
+		 */
+		identifier?: string;
+	}
+	export class HorizontalList extends Superview {
+		private cachedViews;
+		allSubviews(): HorizontalListItem[];
+		itemCount: number;
+		renderItem: (index: number) => HorizontalListItem;
+		batchCount: number;
+		onLoadMore?: () => void;
+		loadMore?: boolean;
+		loadMoreView?: HorizontalListItem;
+		onScroll?: (offset: {
+			x: number;
+			y: number;
+		}) => void;
+		onScrollEnd?: (offset: {
+			x: number;
+			y: number;
+		}) => void;
+		scrolledPosition?: number;
+		scrollable?: boolean;
+		/**
+		 * Take effect only on iOS
+		 */
+		bounces?: boolean;
+		canDrag?: boolean;
+		beforeDragging?: (from: number) => void;
+		onDragging?: (from: number, to: number) => void;
+		onDragged?: (from: number, to: number) => void;
+		scrollToItem(context: BridgeContext, index: number, config?: {
+			animated?: boolean;
+		}): Promise<any>;
+		/**
+		 * @param context
+		 * @returns Returns array of visible view's index.
+		 */
+		findVisibleItems(context: BridgeContext): Promise<number[]>;
+		/**
+		 * @param context
+		 * @returns Returns array of completely visible view's index.
+		 */
+		findCompletelyVisibleItems(context: BridgeContext): Promise<number[]>;
+		/**
+		 * Reload all list items.
+		 * @param context
+		 * @returns
+		 */
+		reload(context: BridgeContext): Promise<void>;
+		reset(): void;
+		private getItem;
+		private renderBunchedItems;
+		toModel(): NativeViewModel;
+	}
+	export function horizontalList(config: Partial<HorizontalList>): HorizontalList;
+	export function horizontalListItem(item: View | View[], config?: Partial<HorizontalListItem>): HorizontalListItem;
 	export function modal(context: BridgeContext): {
 		toast: (msg: string, gravity?: Gravity) => void;
 		alert: (arg: string | {

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

@@ -0,0 +1,62 @@
+import { View, Superview, NativeViewModel } from "../ui/view";
+import { Stack } from "./layouts";
+import { BridgeContext } from "../runtime/global";
+export declare class HorizontalListItem extends Stack {
+    /**
+     * Set to reuse native view
+     */
+    identifier?: string;
+}
+export declare class HorizontalList extends Superview {
+    private cachedViews;
+    allSubviews(): HorizontalListItem[];
+    itemCount: number;
+    renderItem: (index: number) => HorizontalListItem;
+    batchCount: number;
+    onLoadMore?: () => void;
+    loadMore?: boolean;
+    loadMoreView?: HorizontalListItem;
+    onScroll?: (offset: {
+        x: number;
+        y: number;
+    }) => void;
+    onScrollEnd?: (offset: {
+        x: number;
+        y: number;
+    }) => void;
+    scrolledPosition?: number;
+    scrollable?: boolean;
+    /**
+     * Take effect only on iOS
+     */
+    bounces?: boolean;
+    canDrag?: boolean;
+    beforeDragging?: (from: number) => void;
+    onDragging?: (from: number, to: number) => void;
+    onDragged?: (from: number, to: number) => void;
+    scrollToItem(context: BridgeContext, index: number, config?: {
+        animated?: boolean;
+    }): Promise<any>;
+    /**
+     * @param context
+     * @returns Returns array of visible view's index.
+     */
+    findVisibleItems(context: BridgeContext): Promise<number[]>;
+    /**
+     * @param context
+     * @returns Returns array of completely visible view's index.
+     */
+    findCompletelyVisibleItems(context: BridgeContext): Promise<number[]>;
+    /**
+     * Reload all list items.
+     * @param context
+     * @returns
+     */
+    reload(context: BridgeContext): Promise<void>;
+    reset(): void;
+    private getItem;
+    private renderBunchedItems;
+    toModel(): NativeViewModel;
+}
+export declare function horizontalList(config: Partial<HorizontalList>): HorizontalList;
+export declare function horizontalListItem(item: View | View[], config?: Partial<HorizontalListItem>): HorizontalListItem;

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

@@ -0,0 +1,177 @@
+/*
+ * Copyright [2022] [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 { View, Property, Superview } from "../ui/view";
+import { Stack } from "./layouts";
+import { layoutConfig } from "../util/layoutconfig";
+export class HorizontalListItem extends Stack {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], HorizontalListItem.prototype, "identifier", void 0);
+export class HorizontalList extends Superview {
+    constructor() {
+        super(...arguments);
+        this.cachedViews = new Map;
+        this.itemCount = 0;
+        this.batchCount = 15;
+    }
+    allSubviews() {
+        const ret = [...this.cachedViews.values()];
+        if (this.loadMoreView) {
+            ret.push(this.loadMoreView);
+        }
+        return ret;
+    }
+    scrollToItem(context, index, config) {
+        const animated = config === null || config === void 0 ? void 0 : config.animated;
+        return this.nativeChannel(context, 'scrollToItem')({ index, animated, });
+    }
+    /**
+     * @param context
+     * @returns Returns array of visible view's index.
+     */
+    findVisibleItems(context) {
+        return this.nativeChannel(context, 'findVisibleItems')();
+    }
+    /**
+     * @param context
+     * @returns Returns array of completely visible view's index.
+     */
+    findCompletelyVisibleItems(context) {
+        return this.nativeChannel(context, 'findCompletelyVisibleItems')();
+    }
+    /**
+     * Reload all list items.
+     * @param context
+     * @returns
+     */
+    reload(context) {
+        return this.nativeChannel(context, 'reload')();
+    }
+    reset() {
+        this.cachedViews.clear();
+        this.itemCount = 0;
+    }
+    getItem(itemIdx) {
+        let view = this.renderItem(itemIdx);
+        view.superview = this;
+        this.cachedViews.set(`${itemIdx}`, view);
+        return view;
+    }
+    renderBunchedItems(start, length) {
+        return new Array(Math.max(0, 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)
+], HorizontalList.prototype, "itemCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "renderItem", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], HorizontalList.prototype, "batchCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onLoadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "loadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", HorizontalListItem)
+], HorizontalList.prototype, "loadMoreView", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onScroll", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onScrollEnd", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], HorizontalList.prototype, "scrolledPosition", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "scrollable", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "bounces", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "canDrag", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "beforeDragging", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onDragging", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onDragged", void 0);
+export function horizontalList(config) {
+    const ret = new HorizontalList;
+    ret.apply(config);
+    return ret;
+}
+export function horizontalListItem(item, config) {
+    return (new HorizontalListItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
+            it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            it.apply(config);
+        }
+    });
+}

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

@@ -12,3 +12,4 @@ export * from './draggable';
 export * from './switch';
 export * from './gesture';
 export * from './effect';
+export * from './horizontalList';

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

@@ -27,3 +27,4 @@ export * from './draggable';
 export * from './switch';
 export * from './gesture';
 export * from './effect';
+export * from './horizontalList';

doric-js/src/widget/horizontalList.ts

@@ -0,0 +1,172 @@
+/*
+ * Copyright [2022] [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, Superview, NativeViewModel } from "../ui/view";
+import { Stack } from "./layouts";
+import { layoutConfig } from "../util/layoutconfig";
+import { BridgeContext } from "../runtime/global";
+import { Color } from "../util/color";
+
+export class HorizontalListItem extends Stack {
+    /**
+     * Set to reuse native view
+     */
+    @Property
+    identifier?: string
+
+    // @Property
+    // actions?: {
+    //     title: string,
+    //     backgroundColor?: Color,
+    //     callback: () => void,
+    // }[]
+}
+
+export class HorizontalList extends Superview {
+    private cachedViews: Map<string, HorizontalListItem> = new Map
+
+    allSubviews() {
+        const ret = [...this.cachedViews.values()]
+        if (this.loadMoreView) {
+            ret.push(this.loadMoreView)
+        }
+        return ret
+    }
+
+    @Property
+    itemCount = 0
+
+    @Property
+    renderItem!: (index: number) => HorizontalListItem
+
+    @Property
+    batchCount = 15
+
+    @Property
+    onLoadMore?: () => void
+
+    @Property
+    loadMore?: boolean
+
+    @Property
+    loadMoreView?: HorizontalListItem
+
+    @Property
+    onScroll?: (offset: { x: number, y: number }) => void
+
+    @Property
+    onScrollEnd?: (offset: { x: number, y: number }) => void
+
+    @Property
+    scrolledPosition?: number
+
+    @Property
+    scrollable?: boolean
+    /**
+     * Take effect only on iOS
+     */
+    @Property
+    bounces?: boolean
+
+    @Property
+    canDrag?: boolean
+
+    @Property
+    beforeDragging?: (from: number) => void
+
+    @Property
+    onDragging?: (from: number, to: number) => void
+
+    @Property
+    onDragged?: (from: number, to: number) => void
+
+    scrollToItem(context: BridgeContext, index: number, config?: { animated?: boolean, }) {
+        const animated = config?.animated
+        return this.nativeChannel(context, 'scrollToItem')({ index, animated, }) as Promise<any>
+    }
+    /**
+     * @param context 
+     * @returns Returns array of visible view's index.
+     */
+    findVisibleItems(context: BridgeContext) {
+        return this.nativeChannel(context, 'findVisibleItems')() as Promise<number[]>
+    }
+    /**
+     * @param context 
+     * @returns Returns array of completely visible view's index.
+     */
+    findCompletelyVisibleItems(context: BridgeContext) {
+        return this.nativeChannel(context, 'findCompletelyVisibleItems')() as Promise<number[]>
+    }
+
+    /**
+     * Reload all list items.
+     * @param context 
+     * @returns 
+     */
+    reload(context: BridgeContext) {
+        return this.nativeChannel(context, 'reload')() as Promise<void>
+    }
+
+    reset() {
+        this.cachedViews.clear()
+        this.itemCount = 0
+    }
+
+    private getItem(itemIdx: number) {
+        let view = this.renderItem(itemIdx)
+        view.superview = this
+        this.cachedViews.set(`${itemIdx}`, view)
+        return view
+    }
+
+    private renderBunchedItems(start: number, length: number) {
+        return new Array(Math.max(0, Math.min(length, this.itemCount - start))).fill(0).map((_, idx) => {
+            const listItem = this.getItem(start + idx)
+            return listItem.toModel()
+        })
+    }
+
+    toModel(): NativeViewModel {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId
+        }
+        return super.toModel()
+    }
+}
+
+export function horizontalList(config: Partial<HorizontalList>) {
+    const ret = new HorizontalList
+    ret.apply(config)
+    return ret
+}
+
+export function horizontalListItem(item: View | View[], config?: Partial<HorizontalListItem>) {
+    return (new HorizontalListItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit()
+        if (item instanceof View) {
+            it.addChild(item)
+        } else {
+            item.forEach(e => {
+                it.addChild(e)
+            })
+        }
+        if (config) {
+            it.apply(config)
+        }
+    })
+}
+

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

@@ -27,3 +27,4 @@ export * from './draggable'
 export * from './switch'
 export * from './gesture'
 export * from './effect'
+export * from './horizontalList'