jsbox-cview 1.6.5 → 1.6.7

package/README.md

@@ -17,3 +17,7 @@ CView 的视图组件是非侵入式的。换言之，你可以全部使用 CVie
 
 View 组件是收敛的，而 Controller 负责页面的构成和更新。
 它可以实现一些常用的页面构建形式，比如底部 Tab 分页，左侧滑动分页，弹出式页面等。
+
+## 示例
+
+可运行示例及使用说明见 [`examples`](./examples/README.md)。

package/dist/components/alert/input-alert.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 显示一个输入框提示
+ *
+ * @param title 标题
+ * @param message 内容
+ * @param text 输入框默认文字
+ * @param placeholder 输入框占位符
+ * @param type 输入框类型
+ * @param secure 是否安全输入
+ * @param cancelText 取消按钮文字
+ * @param confirmText 确认按钮文字
+ */
+export declare function inputAlert({ title, message, text, placeholder, type, secure, cancelText, confirmText, }: {
+    title?: string;
+    message?: string;
+    text?: string;
+    placeholder?: string;
+    type?: number;
+    secure?: boolean;
+    cancelText?: string;
+    confirmText?: string;
+}): Promise<string>;

package/dist/components/alert/input-alert.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputAlert = void 0;
+exports.inputAlert = inputAlert;
 const uialert_1 = require("./uialert");
 const l10n_1 = require("../../utils/l10n");
 /**
@@ -43,4 +43,3 @@ function inputAlert({ title = "", message = "", text = "", placeholder, type = 0
         }
     });
 }
-exports.inputAlert = inputAlert;

package/dist/components/alert/login-alert.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 显示一个登录输入框提示
+ *
+ * @param title 标题
+ * @param message 内容
+ * @param placeholder1 输入框1的占位符
+ * @param placeholder2 输入框2的占位符
+ * @param cancelText 取消按钮文字
+ * @param confirmText 确认按钮文字
+ */
+export declare function loginAlert({ title, message, placeholder1, placeholder2, cancelText, confirmText, }?: {
+    title?: string;
+    message?: string;
+    placeholder1?: string;
+    placeholder2?: string;
+    cancelText?: string;
+    confirmText?: string;
+}): Promise<{
+    username: string;
+    password: string;
+}>;

package/dist/components/alert/login-alert.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loginAlert = void 0;
+exports.loginAlert = loginAlert;
 const uialert_1 = require("./uialert");
 const l10n_1 = require("../../utils/l10n");
 /**
@@ -47,4 +47,3 @@ function loginAlert({ title = "", message = "", placeholder1 = "", placeholder2
         }
     });
 }
-exports.loginAlert = loginAlert;

package/dist/components/alert/plain-alert.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 显示一个文字提示
+ *
+ * @param title 标题
+ * @param message 内容
+ * @param cancelText 取消按钮文字
+ * @param confirmText 确认按钮文字
+ * @returns Promise
+ */
+export declare function plainAlert({ title, message, cancelText, confirmText, }?: {
+    title?: string;
+    message?: string;
+    cancelText?: string;
+    confirmText?: string;
+}): Promise<string>;

package/dist/components/alert/plain-alert.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.plainAlert = void 0;
+exports.plainAlert = plainAlert;
 const uialert_1 = require("./uialert");
 const l10n_1 = require("../../utils/l10n");
 /**
@@ -26,4 +26,3 @@ function plainAlert({ title = "", message = "", cancelText = (0, l10n_1.l10n)("C
         }
     });
 }
-exports.plainAlert = plainAlert;

package/dist/components/alert/uialert.d.ts

@@ -0,0 +1,29 @@
+export declare const UIAlertActionStyle: {
+    Default: number;
+    Cancel: number;
+    Destructive: number;
+};
+export declare const UIAlertControllerStyle: {
+    ActionSheet: number;
+    Alert: number;
+};
+export declare class UIAlertAction {
+    title: string;
+    style: number;
+    instance: any;
+    constructor(title: string, style: number | undefined, handler: Function);
+}
+/**
+ * Alert的基础类
+ */
+export declare class UIAlertController {
+    title: string;
+    message: string;
+    style: number;
+    instance: any;
+    constructor(title: string, message: string, style?: number);
+    addAction(action: UIAlertAction): void;
+    addTextField(options: any): void;
+    getText(index: number): any;
+    present(): void;
+}

package/{components/base.ts → dist/components/base.d.ts}

@@ -1,5 +1,3 @@
-import { cvid } from "../utils/cvid";
-
 /**
  *
  * 组件 Base 基类，用于创建自定义组件。CView 的所有子类都应该继承自 Base。
@@ -18,30 +16,13 @@ import { cvid } from "../utils/cvid";
  * - 通过组件化的方式，将JSBox view的定义和实例绑定，使用起来更加方便
  * - 可以便利地创建自定义组件
  */
-export abstract class Base<T extends AllUIView, R extends UiTypes.AllViewOptions> {
-  readonly id: string;
-  private _view?: T;
-  abstract _defineView: () => R;
-  _layout?: (make: MASConstraintMaker, view: T) => void;
-
-  constructor() {
-    this.id = cvid.newId;
-  }
-
-  get definition() {
-    return this._defineView();
-  }
-
-  get view() {
-    if (!this._view) this._view = $(this.id) as T;
-    return this._view;
-  }
-
-  add(view: UiTypes.AllViewOptions | Base<any, any>) {
-    if (view instanceof Base) {
-      this.view.add(view.definition);
-    } else {
-      this.view.add(view);
-    }
-  }
+export declare abstract class Base<T extends AllUIView, R extends UiTypes.AllViewOptions> {
+    readonly id: string;
+    private _view?;
+    abstract _defineView: () => R;
+    _layout?: (make: MASConstraintMaker, view: T) => void;
+    constructor();
+    get definition(): R;
+    get view(): T;
+    add(view: UiTypes.AllViewOptions | Base<any, any>): void;
 }

package/dist/components/custom-navigation-bar.d.ts

@@ -0,0 +1,117 @@
+import { Base } from "./base";
+import { ContentView, Label, Button, Blur } from "./single-views";
+export interface NavigationBarProps {
+    style: number;
+    title?: string;
+    titleView?: Base<any, any>;
+    popButtonEnabled?: boolean;
+    popButtonTitle?: string;
+    popToRootEnabled?: boolean;
+    leftBarButtonItems: BarButtonItem[];
+    rightBarButtonItems: BarButtonItem[];
+    toolView?: Base<any, any>;
+    tintColor: UIColor;
+    bgcolor?: UIColor;
+}
+interface BarButtonItem {
+    cview?: Base<any, any>;
+    width?: number;
+    title?: string;
+    symbol?: string;
+    image?: UIImage;
+    tintColor?: UIColor;
+    handler?: (sender: UIButtonView) => void;
+}
+interface NavigationBarEvents {
+    hidden?: (cview: CustomNavigationBar) => void;
+    minimized?: (cview: CustomNavigationBar) => void;
+    restored?: (cview: CustomNavigationBar) => void;
+    expanded?: (cview: CustomNavigationBar) => void;
+    popHandler?: (cview: CustomNavigationBar) => void;
+    popToRootHandler?: (cview: CustomNavigationBar) => void;
+    titleTapped?: (cview: CustomNavigationBar) => void;
+}
+interface NavigationBarCViews {
+    leftItemView?: ContentView | Button;
+    rightItemView?: ContentView;
+    titleViewWrapper?: ContentView | Label;
+    contentView?: ContentView;
+    toolViewWrapper?: ContentView;
+    bgview?: ContentView | Blur;
+    separator?: ContentView;
+}
+/**
+ * # CView Custom NavigationBar
+ *
+ * 仿制 navBar
+ *
+ * ## features:
+ *
+ * - 拥有隐藏、最小化、普通、扩展四种布局方式
+ *   - 隐藏: 什么都不显示
+ *   - 最小化: safeAreaHeight 为 25, 只显示 titleView, 若用 title, font 为\$font(14)
+ *   - 普通: safeAreaHeight 为 50, 显示 titleView, leftBarButtonItems 或 popButton,
+ *     rightBarButtonItems, 若用 title, font 为\$font("bold", 17)
+ *   - 扩展: safeAreaHeight 为 100, 除上面的之外, 再显示一个 toolView
+ * - 自动适应全面屏和非全面屏
+ *
+ * ## Arguments
+ *
+ * props:
+ *
+ * - 读写 style: number 0, 1, 2, 3，指定布局
+ * - 读写 title: string 但必须使用此种方案才可以在生成后写入，自动创建 Label 作为 titleView
+ * - titleView: cview 自定义的 titleView
+ * - popButtonEnabled: boolean 返回上一级的按钮，若为 true，则 leftBarButtonItems 忽略
+ * - popButtonTitle: string 返回上一级的按钮标题
+ * - popToRootEnabled: boolean popButton 是否可以长按返回到顶级
+ * - leftBarButtonItems: cview[]
+ *   | {symbol: string, handler: () => void, tintColor?: UIColor}[]
+ *   | {title: string, handler: () => void, tintColor?: UIColor}[]
+ *   | {image: UIImage, handler: () => void, tintColor?: UIColor}[]
+ *   如果用的是 cview，其布局将被重新指定，即不需要（也不能）指定布局。
+ *   可以通过 cview.width 来指定应有的宽度，如果没有此属性，则宽度为 50
+ *   建议最多放两个
+ * - rightBarButtonItems 定义同上，建议最多放两个
+ * - toolView: cview 在 expanded 模式下才会显现的
+ * - tintColor: UIColor 这将作用于 title, popButton, 自动创建的 barButton
+ * - bgcolor: UIColor 如不设置，则自动使用 blur(style 10)，如果设置则没有 blur 效果
+ *
+ * events:
+ *
+ * - hidden: cview => void  hide()时执行
+ * - minimized: cview => void  minimize()时执行
+ * - restored: cview => void  restore()时执行
+ * - expanded: cview => void  expand()时执行
+ * - popHandler: cview => void  返回上一级时执行，需要popButtonEnabled
+ * - popToRootHandler: cview => void  返回顶级时执行，需要popButtonEnabled和popToRootEnabled
+ * - titleTapped: cview => void 点击标题时执行，需要使用title
+ *
+ * methods:
+ *
+ * - hide() 隐藏布局
+ * - minimize() 最小化布局
+ * - restore() 普通布局
+ * - expand() 扩展布局
+ */
+export declare class CustomNavigationBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTypes.BlurOptions> {
+    _props: NavigationBarProps;
+    _events: NavigationBarEvents;
+    cviews: Required<NavigationBarCViews>;
+    _defineView: () => UiTypes.ViewOptions | UiTypes.BlurOptions;
+    constructor({ props, events, }?: {
+        props?: Partial<NavigationBarProps>;
+        events?: NavigationBarEvents;
+    });
+    private _calculateItemViewWidth;
+    private _createCviewsOnItemView;
+    get title(): string;
+    set title(title: string);
+    hide(animated?: boolean): void;
+    minimize(animated?: boolean): void;
+    restore(animated?: boolean): void;
+    expand(animated?: boolean): void;
+    get style(): number;
+    set style(num: number);
+}
+export {};

package/dist/components/custom-navigation-bar.js

@@ -86,7 +86,13 @@ const navBarLayouts = [
 class CustomNavigationBar extends base_1.Base {
     constructor({ props = {}, events = {}, } = {}) {
         super();
-        this._props = Object.assign({ leftBarButtonItems: [], rightBarButtonItems: [], style: navBarStyles.normal, tintColor: $color("primaryText") }, props);
+        this._props = {
+            leftBarButtonItems: [],
+            rightBarButtonItems: [],
+            style: navBarStyles.normal,
+            tintColor: $color("primaryText"),
+            ...props,
+        };
         this._events = events;
         this.cviews = {};
         this._defineView = () => {

package/dist/components/dialogs/dialog-sheet.d.ts

@@ -0,0 +1,46 @@
+import { Sheet } from "../sheet";
+import { ContentView } from "../single-views";
+import { Base } from "../base";
+/**
+ * dialog所需要的sheet
+ *
+ * @param title 标题
+ * @param cview 内容视图
+ * @param doneHandler 完成时的回调
+ * @param presentMode 显示模式
+ * @param bgcolor 背景颜色
+ * @param doneButtonHidden 是否隐藏完成按钮, 默认为false，如果隐藏则需要自行实现完成逻辑
+ * @param doneButtonValidator 完成按钮验证器，返回true则执行完成逻辑，返回false则不执行
+ * @param doneButtonTitle 完成按钮标题，默认为"完成"
+ */
+export declare class DialogSheet extends Sheet<ContentView, UIView, UiTypes.ViewOptions> {
+    _props: {
+        title: string;
+        cview: Base<any, any>;
+        doneHandler?: () => any;
+        presentMode?: number;
+        bgcolor?: UIColor;
+        doneButtonHidden?: boolean;
+        doneButtonValidator?: () => boolean;
+        doneButtonTitle?: string;
+    };
+    _done: boolean;
+    private _navbar?;
+    resolve?: (value: any) => void;
+    reject?: (reason: any) => void;
+    constructor(props: {
+        title: string;
+        cview: Base<any, any>;
+        doneHandler?: () => any;
+        presentMode?: number;
+        bgcolor?: UIColor;
+        doneButtonHidden?: boolean;
+        doneButtonValidator?: () => boolean;
+        doneButtonTitle?: string;
+    });
+    promisify(resolve: (value: any) => void, reject: (reason: any) => void): void;
+    present(): void;
+    done(): void;
+    get title(): string;
+    set title(title: string);
+}

package/dist/components/dialogs/dialog-sheet.js

@@ -53,7 +53,9 @@ class DialogSheet extends sheet_1.Sheet {
                                         return;
                                     }
                                 }
-                                this.done();
+                                else {
+                                    this.done();
+                                }
                             },
                         },
                     ],

package/dist/components/dialogs/form-dialog.d.ts

@@ -0,0 +1,15 @@
+import { PreferenceSection } from "../static-preference-listview";
+/**
+ * 显示一个表单
+ * @param sections 表单分组, 请参考`PreferenceListView`中的`PreferenceSection`
+ * @param title 标题
+ */
+export declare function formDialog({ sections, title, checkHandler, }: {
+    sections: PreferenceSection[];
+    title: string;
+    checkHandler?: (values: {
+        [key: string]: any;
+    }) => boolean;
+}): Promise<{
+    [key: string]: any;
+}>;

package/dist/components/dialogs/form-dialog.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formDialog = void 0;
+exports.formDialog = formDialog;
 const static_preference_listview_1 = require("../static-preference-listview");
 const dialog_sheet_1 = require("./dialog-sheet");
 class DialogSheetForm extends dialog_sheet_1.DialogSheet {
@@ -38,4 +38,3 @@ function formDialog({ sections, title, checkHandler, }) {
         sheet.present();
     });
 }
-exports.formDialog = formDialog;

package/dist/components/dialogs/list-dialog.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 显示一个列表以供选择
+ *
+ * @param items 选项
+ * @param multiSelectEnabled 是否允许多选
+ * @param value 默认选中的选项
+ * @param values 默认选中的选项, 配合multiSelectEnabled使用
+ * @param title 标题
+ */
+export declare function listDialog({ items, multiSelectEnabled, value, values, title, }: {
+    items: string[];
+    multiSelectEnabled: true;
+    value?: never;
+    values?: number[];
+    title: string;
+}): Promise<number[]>;
+export declare function listDialog({ items, multiSelectEnabled, value, values, title, }: {
+    items: string[];
+    multiSelectEnabled?: false | undefined;
+    value?: number;
+    values?: never;
+    title: string;
+}): Promise<number>;

package/dist/components/dialogs/list-dialog.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.listDialog = void 0;
+exports.listDialog = listDialog;
 const dialog_sheet_1 = require("./dialog-sheet");
 const single_views_1 = require("../single-views");
 function listDialog({ items, multiSelectEnabled, value, values = [], title, }) {
-    if (value)
+    if (value !== undefined)
         values = [value];
     const listView = new single_views_1.List({
         props: {
@@ -76,4 +76,3 @@ function listDialog({ items, multiSelectEnabled, value, values = [], title, }) {
         sheet.present();
     });
 }
-exports.listDialog = listDialog;

package/dist/components/dialogs/text-dialog.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 返回一个Promise用于输入文本
+ * @param title 标题
+ * @param text 初始文本
+ * @param placeholder 占位符
+ * @param editable 是否可编辑
+ */
+export declare function textDialog({ title, text, placeholder, editable, }: {
+    title: string;
+    text?: string;
+    placeholder?: string;
+    editable?: boolean;
+}): Promise<string>;

package/dist/components/dialogs/text-dialog.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.textDialog = void 0;
+exports.textDialog = textDialog;
 const single_views_1 = require("../single-views");
 const dialog_sheet_1 = require("./dialog-sheet");
 /**
@@ -34,4 +34,3 @@ function textDialog({ title, text = "", placeholder = "", editable = true, }) {
         sheet.present();
     });
 }
-exports.textDialog = textDialog;

package/dist/components/dynamic-contextmenu-view.d.ts

@@ -0,0 +1,40 @@
+import { Base } from "./base";
+type MenuItem = {
+    title: string;
+    symbol?: string;
+    handler: () => void;
+    destructive?: boolean;
+};
+/**
+ * 动态上下文菜单视图，此视图是为了弥补JSBox中无法动态调整上下文菜单的缺陷而设计的。
+ *
+ * 此视图除了一般UIView的props, layout, events, views四个参数外，还有必须的特殊参数：
+ * 1. classname?: string OC类名，如果不指定则会自动生成一个唯一的类名。
+ *    如果有不同的DynamicContextMenuView实例使用相同的OC类，
+ *    那么无法确定弹出的contextMenu是绑定了哪个实例。
+ *    换言之，实例A弹出的Menu可能是绑定的实例B。
+ *    如果这样做，必须使用下面generateContextMenu的sender参数来定位。
+ * 2. generateContextMenu: (sender: UIView) => { title: string; items: MenuItem[]; }
+ *    生成上下文菜单的回调函数。
+ *
+ */
+export declare class DynamicContextMenuView extends Base<UIView, UiTypes.RuntimeOptions> {
+    private generateContextMenu;
+    private _ocClassName;
+    _defineView: () => UiTypes.RuntimeOptions;
+    constructor({ classname, generateContextMenu, props, layout, events, views, }: {
+        classname?: string;
+        generateContextMenu: (sender: UIView) => {
+            title?: string;
+            items: MenuItem[];
+        };
+        props: UiTypes.ViewProps;
+        layout?: (make: MASConstraintMaker, view: UIView) => void;
+        events?: UiTypes.BaseViewEvents;
+        views?: UiTypes.AllViewOptions[];
+    });
+    private defineOCClass;
+    private createContextMenuConfiguration;
+    private createRuntimeView;
+}
+export {};

package/dist/components/dynamic-contextmenu-view.js

@@ -26,7 +26,11 @@ class DynamicContextMenuView extends base_1.Base {
         this._defineView = () => {
             return {
                 type: "runtime",
-                props: Object.assign(Object.assign({}, props), { id: this.id, view: runtimeView }),
+                props: {
+                    ...props,
+                    id: this.id,
+                    view: runtimeView,
+                },
                 layout,
                 events,
                 views,

package/dist/components/dynamic-itemsize-matrix.d.ts

@@ -0,0 +1,79 @@
+import { Base } from "./base";
+import { Matrix } from "./single-views";
+interface DynamicItemSizeMatrixEvents extends UiTypes.MatrixEvents {
+    itemHeight?: (width: number) => number;
+    heightChanged?: (sender: DynamicItemSizeMatrix, height: number) => void;
+}
+interface DynamicItemSizeMatrixPropsPartial extends UiTypes.MatrixProps {
+    fixedItemHeight?: number;
+    minItemWidth?: number;
+    maxColumns?: number;
+    spacing?: number;
+    dynamicHeightEnabled?: boolean;
+}
+/**
+ * # CView Dynamic ItemSize Matrix
+ *
+ * 此组件是为了解决让 Matrix 的 ItemSize 跟随重新布局而动态变化的问题
+ *
+ * 动态的改变自己的 itemSize，从而使得 spacing 被优先满足。
+ * 思路为在 matrix 上层套一个 superView，在旋转的时候 superView 会调用 matrix.relayout()
+ * 和 matrix.reload()，从而触发 itemSize 事件
+ *
+ * 此视图的高度可以自动调整，需要 dynamicHeightEnabled 设为 true，且 layout 中要有关于 height 的约束
+ *
+ * 其排布逻辑是这样的:
+ *
+ * 1. 由 minItemWidth，spacing，maxColumns 这三个参数决定 cloumns，
+ *    并结合 totalWidth 确定 itemSize.width
+ * 2. 确定 itemHeight 有两种方法:
+ *    - fixedItemHeight 固定高度，优先级第二
+ *    - event: itemHeight(width) => height 通过 width 动态计算，优先级最高
+ * 3. 如果 minItemWidth 比 totalWidth - 2 * spacing 还要小，那么 itemSize.width
+ *    会被设定为 totalWidth - 2 * spacing，以保证item不会超出边框
+ *
+ * props:
+ *
+ * 可以使用 matrix 的全部属性
+ *
+ * 特殊属性:
+ *
+ * - fixedItemHeight 固定 itemSize 高度
+ * - minItemWidth 最小的 itemSize 宽度
+ * - maxColumns 最大列数
+ * - spacing
+ * - dynamicHeightEnabled 此项为 true，那么 scrollEnabled 自动设为 false，且高度可以自动调整
+ *
+ * events:
+ *
+ * 可以使用 matrix 除 itemSize 以外的全部事件
+ *
+ * 其他特殊事件:
+ *
+ * - itemHeight: width => height 通过 itemWidth 动态计算 itemHeight
+ *
+ *
+ * 方法:
+ * - heightToWidth(width) 计算特定width时的应有的高度
+ */
+export declare class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
+    private _props;
+    private _events;
+    private _itemSizeWidth;
+    private _itemSizeHeight;
+    private _totalWidth;
+    private _columns;
+    matrix: Matrix;
+    _defineView: () => UiTypes.ViewOptions;
+    constructor({ props, layout, events, }: {
+        props: DynamicItemSizeMatrixPropsPartial;
+        layout: (make: MASConstraintMaker, view: UIView) => void;
+        events: DynamicItemSizeMatrixEvents;
+    });
+    heightToWidth(width: number): number;
+    get data(): any;
+    set data(data: any);
+    get columns(): number;
+    get itemSize(): JBSize;
+}
+export {};

package/dist/components/dynamic-itemsize-matrix.js

@@ -1,15 +1,4 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicItemSizeMatrix = void 0;
 const base_1 = require("./base");
@@ -78,16 +67,29 @@ class DynamicItemSizeMatrix extends base_1.Base {
         super();
         this._totalWidth = 0;
         this._columns = 1;
-        this._props = Object.assign({ fixedItemHeight: 40, minItemWidth: 96, maxColumns: 5, spacing: 6, dynamicHeightEnabled: false }, props);
+        this._props = {
+            fixedItemHeight: 40,
+            minItemWidth: 96,
+            maxColumns: 5,
+            spacing: 6,
+            dynamicHeightEnabled: false,
+            ...props,
+        };
         this._events = events;
-        const _a = this._events, { itemHeight, heightChanged } = _a, rest = __rest(_a, ["itemHeight", "heightChanged"]);
+        const { itemHeight, heightChanged, ...rest } = this._events;
         const _matrixEvents = rest;
         this._itemSizeWidth = 0;
         this._itemSizeHeight = 0;
         this.matrix = new single_views_1.Matrix({
-            props: Object.assign(Object.assign({}, this._props), { scrollEnabled: !this._props.dynamicHeightEnabled }),
+            props: {
+                ...this._props,
+                scrollEnabled: !this._props.dynamicHeightEnabled,
+            },
             layout: $layout.fill,
-            events: Object.assign(Object.assign({}, _matrixEvents), { itemSize: (sender) => $size(this._itemSizeWidth, this._itemSizeHeight) }),
+            events: {
+                ..._matrixEvents,
+                itemSize: (sender) => $size(this._itemSizeWidth, this._itemSizeHeight),
+            },
         });
         this._defineView = () => {
             return {
@@ -102,6 +104,7 @@ class DynamicItemSizeMatrix extends base_1.Base {
                         sender.relayout();
                         if (sender.frame.width === this._totalWidth)
                             return;
+                        this._totalWidth = sender.frame.width;
                         const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(sender.frame.width, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
                         this._columns = columns;
                         this._itemSizeWidth = itemSizeWidth;