jsbox-cview 1.6.4 → 1.6.6

package/components/dynamic-itemsize-section-matrix.ts

@@ -0,0 +1,363 @@
+import { getTextHeight } from "../utils/uitools";
+import { Base } from "./base";
+import { Matrix } from "./single-views";
+
+export interface DynamicItemSizeSectionMatrixSection {
+  title: string;
+  items: Record<string, unknown>[];
+}
+
+export interface DynamicItemSizeSectionMatrixProps extends Omit<
+  UiTypes.MatrixProps,
+  "data" | "itemSize" | "autoItemSize" | "estimatedItemSize" | "columns" | "square" | "waterfall" | "reorder" | "menu"
+> {
+  data?: DynamicItemSizeSectionMatrixSection[];
+  fixedItemHeight?: number;
+  minItemWidth?: number;
+  maxColumns?: number;
+  spacing?: number;
+}
+
+export interface DynamicItemSizeSectionMatrixEvents extends Omit<
+  UiTypes.MatrixEvents,
+  "itemSize" | "reorderBegan" | "reorderMoved" | "canMoveItem" | "reorderFinished"
+> {
+  itemHeight?: (width: number) => number;
+}
+
+function _getColumnsAndItemSizeWidth(
+  containerWidth: number,
+  minItemWidth: number,
+  maxColumns: number,
+  spacing: number,
+) {
+  if (minItemWidth > containerWidth - 2 * spacing) {
+    return {
+      columns: 1,
+      itemSizeWidth: containerWidth - 2 * spacing,
+    };
+  }
+  const columns = Math.max(
+    Math.min(Math.floor((containerWidth - spacing) / (minItemWidth + spacing)), maxColumns),
+    1, // 最少一列
+  );
+  const itemSizeWidth = Math.max(
+    Math.floor((containerWidth - spacing * (columns + 1)) / columns),
+    minItemWidth, // 最小宽度
+  );
+  return {
+    columns,
+    itemSizeWidth,
+  };
+}
+
+function _getTextHeight(text: string, width: number) {
+  return getTextHeight(text, {
+    width,
+    font: $font(13),
+    inset: 0,
+  });
+}
+
+/**
+ * # CView Dynamic ItemSize Section Matrix
+ *
+ * 此组件是为了在 Dynamic ItemSize Matrix 的基础上添加 SectionTitle
+ *
+ * - 使用此组件必须在每个section中添加title，如果title为空字符串，依然添加高度35的空格(包含spacing)
+ * - sectionTitle的字体为font(13)，左右边距为16（不含spacing），即总宽度为 totalWidth - 2 * spacing - 32
+ * - 由于它必然和底下的item会有spacing，所以不建议spacing设的太大，那样会很违和
+ * - sectionTitle会使得section之间的间隔增加自身的高度
+ * - matrix事件会自动调整indexPath，包括didSelect、didLongPress、forEachItem
+ * - matrix的方法都在该组件中重新实现，自动调整indexPath
+ * - 不支持matrix原有的重新排序、自动大小功能，为防止sectionTitle暴露，也不支持menu
+ * - 不支持Dynamic ItemSize Matrix的dynamicHeightEnabled、heightToWidth
+ *
+ * ## 动态调整 itemSize
+ *
+ * 动态的改变自己的 itemSize，从而使得 spacing 被优先满足。
+ * 思路为在 matrix 上层套一个 superView，在旋转的时候 superView 会调用 matrix.relayout()
+ * 和 matrix.reload()，从而触发 itemSize 事件
+ *
+ * 其排布逻辑是这样的:
+ *
+ * 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 的全部属性。
+ *
+ * 但data的类型调整为：
+ * { title: string; items: Record<string, unknown>[] }
+ *
+ * 特殊属性:
+ *
+ * - fixedItemHeight 固定 itemSize 高度
+ * - minItemWidth 最小的 itemSize 宽度
+ * - maxColumns 最大列数
+ * - spacing
+ *
+ * events:
+ *
+ * 可以使用 matrix 除 itemSize 以外的全部事件
+ *
+ * 其他特殊事件:
+ *
+ * - itemHeight: width => height 通过 itemWidth 动态计算 itemHeight
+ *
+ *
+ * 方法:
+ * - get data
+ * - set data
+ * - reload(): void;
+ * - object(indexPath: NSIndexPath): any;
+ * - insert(args: { indexPath: NSIndexPath;value: any; } ): void;
+ * - delete(indexPathOrIndex: NSIndexPath | number): void;
+ * - cell(indexPath: NSIndexPath): AllUIView;
+ * - scrollTo(args: { indexPath: NSIndexPath; animated?: boolean }): void;
+ */
+export class DynamicItemSizeSectionMatrix extends Base<UIView, UiTypes.ViewOptions> {
+  _defineView: () => UiTypes.ViewOptions;
+  private _props: DynamicItemSizeSectionMatrixProps;
+  private _data: DynamicItemSizeSectionMatrixSection[];
+  private _events: DynamicItemSizeSectionMatrixEvents;
+  private _itemSizeWidth: number;
+  private _itemSizeHeight: number;
+  private _totalWidth: number = 0;
+  private _columns: number = 1;
+  private _fixedItemHeight: number;
+  private _minItemWidth: number;
+  private _maxColumns: number;
+  private _spacing: number;
+  matrix: Matrix;
+  constructor({
+    props,
+    layout,
+    events,
+  }: {
+    props: DynamicItemSizeSectionMatrixProps;
+    layout: (make: MASConstraintMaker, view: UIView) => void;
+    events: DynamicItemSizeSectionMatrixEvents;
+  }) {
+    super();
+    this._props = props;
+    this._data = this._props.data ?? [];
+    this._events = events;
+    this._itemSizeWidth = 0;
+    this._itemSizeHeight = 0;
+    this._fixedItemHeight = this._props.fixedItemHeight ?? 96;
+    this._minItemWidth = this._props.minItemWidth ?? 96;
+    this._maxColumns = this._props.maxColumns ?? 5;
+    this._spacing = this._props.spacing ?? 6;
+    const { itemHeight, didSelect, didLongPress, forEachItem, ...otherEvents } = this._events;
+    this.matrix = new Matrix({
+      props: {
+        ...props,
+        data: this._mapData(this._data),
+        template: this._mapTemplate(props.template),
+      },
+      layout: $layout.fill,
+      events: {
+        ...otherEvents,
+        itemSize: (_sender, indexPath) => {
+          if (this._totalWidth === 0) {
+            return $size(0, 0);
+          }
+          if (indexPath.item === 0) {
+            const width = Math.max(this._totalWidth - 2 * this._spacing, 32);
+            const textHeight = _getTextHeight(this._data[indexPath.section].title, width - 32);
+            const height = textHeight + 35 - this._spacing * (indexPath.section === 0 ? 1 : 2);
+            return $size(width, height);
+          } else {
+            return $size(this._itemSizeWidth, this._itemSizeHeight);
+          }
+        },
+        didSelect: didSelect
+          ? (sender, indexPath) => {
+              if (indexPath.item === 0) {
+                return;
+              } else {
+                didSelect(
+                  sender,
+                  $indexPath(indexPath.section, indexPath.item - 1),
+                  this._data[indexPath.section].items[indexPath.item - 1],
+                );
+              }
+            }
+          : undefined,
+        didLongPress: didLongPress
+          ? (sender, indexPath) => {
+              if (indexPath.item === 0) {
+                return;
+              } else {
+                didLongPress(
+                  sender,
+                  $indexPath(indexPath.section, indexPath.item - 1),
+                  this._data[indexPath.section].items[indexPath.item - 1],
+                );
+              }
+            }
+          : undefined,
+        forEachItem: forEachItem
+          ? (sender, indexPath) => {
+              if (indexPath.item === 0) {
+                return;
+              } else {
+                forEachItem(sender, $indexPath(indexPath.section, indexPath.item - 1));
+              }
+            }
+          : undefined,
+      },
+    });
+    this._defineView = () => {
+      return {
+        type: "view",
+        props: {
+          id: this.id,
+          bgcolor: $color("clear"),
+        },
+        layout,
+        views: [this.matrix.definition],
+        events: {
+          layoutSubviews: (sender) => {
+            sender.relayout();
+            if (sender.frame.width === this._totalWidth) return;
+            this._totalWidth = sender.frame.width;
+            const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(
+              this._totalWidth,
+              this._minItemWidth,
+              this._maxColumns,
+              this._spacing,
+            );
+            this._columns = columns;
+            this._itemSizeWidth = itemSizeWidth;
+            this._itemSizeHeight = this._events.itemHeight
+              ? this._events.itemHeight(this._itemSizeWidth)
+              : this._fixedItemHeight;
+            this.matrix.view.reload();
+          },
+        },
+      };
+    };
+  }
+
+  private _mapData(data: DynamicItemSizeSectionMatrixSection[]) {
+    return data.map((n) => {
+      const mappedItems = n.items.map((n) => {
+        return {
+          __section_title__: { hidden: true },
+          __original_template__: { hidden: false },
+          ...n,
+        };
+      });
+      return {
+        title: "",
+        items: [
+          {
+            __section_title__: { hidden: false },
+            __section_title_label__: { text: n.title },
+            __original_template__: { hidden: true },
+          },
+          ...mappedItems,
+        ],
+      };
+    });
+  }
+
+  private _mapTemplate(template: UiTypes.MatrixProps["template"]): UiTypes.MatrixProps["template"] {
+    if (!template) return;
+    const newTemplate: UiTypes.MatrixProps["template"] = {
+      views: [
+        {
+          type: "view",
+          props: {
+            id: "__section_title__",
+          },
+          layout: $layout.fill,
+          views: [
+            { 
+              // 在这里放一个透明且无效果的button，从而取消item自己的highlight效果
+              type: "button",
+              props: {
+                bgcolor: $color("clear"),
+              },
+              layout: $layout.fill,
+            },
+            {
+              type: "label",
+              props: {
+                id: "__section_title_label__",
+                bgcolor: $color("clear"),
+                font: $font(13),
+                textColor: $color("secondaryText"),
+                lines: 0,
+              },
+              layout: (make, view) => {
+                make.left.right.inset(16);
+                make.bottom.inset(0);
+              },
+            },
+          ],
+        },
+        {
+          type: "view",
+          props: {
+            ...template.props,
+            id: "__original_template__",
+          },
+          layout: $layout.fill,
+          views: template.views,
+        },
+      ],
+    };
+
+    return newTemplate;
+  }
+
+  get data() {
+    return this._data;
+  }
+
+  set data(data) {
+    this._data = data;
+    this.matrix.view.data = this._mapData(data);
+    this.reload();
+  }
+
+  reload() {
+    this.matrix.view.reload();
+  }
+
+  object(indexPath: NSIndexPath) {
+    return this._data?.[indexPath.section]?.items[indexPath.item];
+  }
+
+  insert({ indexPath, value }: { indexPath: NSIndexPath; value: any }) {
+    this._data?.[indexPath.section]?.items.splice(indexPath.item, 0, value);
+    this.matrix.view.data = this._mapData(this._data);
+    this.reload();
+  }
+
+  delete(indexPath: NSIndexPath): void {
+    this._data?.[indexPath.section]?.items.splice(indexPath.item, 1);
+    this.matrix.view.data = this._mapData(this._data);
+    this.reload();
+  }
+
+  cell(indexPath: NSIndexPath): AllUIView {
+    return this.matrix.view.cell($indexPath(indexPath.section, indexPath.item + 1));
+  }
+
+  scrollTo({ indexPath, animated }: { indexPath: NSIndexPath; animated?: boolean }): void {
+    this.matrix.view.scrollTo({
+      indexPath: $indexPath(indexPath.section, indexPath.item + 1),
+      animated,
+    });
+  }
+}

package/components/oc-webview.ts

@@ -29,11 +29,13 @@ import { Base } from "./base";
  * - goForward()
  * - stopLoading()
  * - reload()
+ * - evaluateJavaScript(script)
  *
  */
 export class OCWebView extends Base<UIView, UiTypes.RuntimeOptions> {
   _defineView: () => UiTypes.RuntimeOptions;
   webView: any; // 实际为WKWebView OC类型
+  private _originUrl: string;
   constructor({
     props,
     layout,
@@ -53,6 +55,7 @@ export class OCWebView extends Base<UIView, UiTypes.RuntimeOptions> {
     config.invoke("setWebsiteDataStore:", $objc("WKWebsiteDataStore").invoke("defaultDataStore"));
     const webView = $objc("WKWebView").invoke("alloc.initWithFrame:configuration:", $rect(0, 0, 0, 0), config);
     this.webView = webView;
+    this._originUrl = props.url;
 
     this._defineView = () => {
       return {
@@ -101,6 +104,17 @@ export class OCWebView extends Base<UIView, UiTypes.RuntimeOptions> {
     return nsurl ? nsurl.invoke("absoluteString").rawValue() : "";
   }
 
+  set url(urlStr: string) {
+    const url = $objc("NSURL").invoke("URLWithString:", urlStr);
+    const req = $objc("NSURLRequest").invoke("requestWithURL:", url);
+    this.webView.invoke("loadRequest:", req);
+  }
+
+  get title(): string {
+    const title = this.webView.invoke("title");
+    return title ? title.rawValue() : "";
+  }
+
   get canGoBack(): boolean {
     return this.webView.invoke("canGoBack");
   }
@@ -124,4 +138,40 @@ export class OCWebView extends Base<UIView, UiTypes.RuntimeOptions> {
   reload() {
     this.webView.invoke("reload");
   }
+
+  reloadFromOrigin() {
+    this.url = this._originUrl;
+  }
+
+  exec<T = any>(script: string): Promise<T> {
+    return new Promise((resolve, reject) => {
+      this.webView.invoke(
+        "evaluateJavaScript:completionHandler:",
+        script,
+        $block("void, id, NSError *", (result: any, error: any) => {
+          const jsError = error ? error.jsValue() : null;
+          if (jsError) {
+            reject(jsError);
+            return;
+          }
+          if (!result) {
+            resolve(result);
+            return;
+          }
+          if (typeof result.jsValue === "function") {
+            resolve(result.jsValue());
+            return;
+          }
+          resolve(result);
+        }),
+      );
+    });
+  }
+
+  eval({ script, handler }: { script: string; handler: (result: any, error?: NSError) => void }) {
+    this.exec(script).then(
+      (result) => handler(result),
+      (error) => handler(undefined, error),
+    );
+  }
 }

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.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.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/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/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.js

@@ -1,6 +1,6 @@
 "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, }) {
@@ -76,4 +76,3 @@ function listDialog({ items, multiSelectEnabled, value, values = [], title, }) {
         sheet.present();
     });
 }
-exports.listDialog = listDialog;

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.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.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 {