jsbox-cview 1.6.4 → 1.6.6

package/dist/test/form-dialog.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const form_dialog_1 = require("../components/dialogs/form-dialog");
 $ui.render({
@@ -19,8 +10,8 @@ $ui.render({
             },
             layout: $layout.center,
             events: {
-                tapped: () => __awaiter(void 0, void 0, void 0, function* () {
-                    const values = yield (0, form_dialog_1.formDialog)({
+                tapped: async () => {
+                    const values = await (0, form_dialog_1.formDialog)({
                         sections: [
                             {
                                 title: "Section 1",
@@ -53,7 +44,7 @@ $ui.render({
                         title: "Values",
                         message: JSON.stringify(values, null, 2),
                     });
-                }),
+                },
             },
         },
     ],

package/dist/test/oc-webview.js

@@ -0,0 +1,195 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const oc_webview_1 = require("../components/oc-webview");
+const initialURL = "https://www.example.com";
+const normalizeURL = (value) => {
+    const url = value.trim();
+    if (!url)
+        return initialURL;
+    if (/^[a-z][a-z\d+\-.]*:\/\//i.test(url))
+        return url;
+    return `https://${url}`;
+};
+const currentURL = (sender) => {
+    const nsurl = sender.invoke("URL");
+    return nsurl ? nsurl.invoke("absoluteString").rawValue() : "";
+};
+const currentTitle = (sender) => {
+    const title = sender.invoke("title");
+    return title ? title.rawValue() : "";
+};
+const syncAddress = (sender) => {
+    const input = $("oc-webview-url");
+    if (!input)
+        return;
+    const url = currentURL(sender);
+    if (url)
+        input.text = url;
+};
+const logState = (event, sender, error) => {
+    const url = currentURL(sender);
+    const title = currentTitle(sender);
+    const message = error ? ` error=${error.localizedDescription}` : "";
+    console.log(`[${event}] url=${url} title=${title}${message}`);
+};
+const localStorageScript = `
+(() => {
+  const data = {};
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key !== null) data[key] = localStorage.getItem(key);
+  }
+  return JSON.stringify(data);
+})()
+`;
+const webView = new oc_webview_1.OCWebView({
+    props: {
+        url: initialURL,
+    },
+    layout: (make, view) => {
+        make.top.equalTo($("oc-webview-toolbar").bottom);
+        make.left.right.bottom.inset(0);
+    },
+    events: {
+        didStart: (sender) => {
+            syncAddress(sender);
+            logState("didStart", sender);
+        },
+        didFinish: async (sender) => {
+            syncAddress(sender);
+            logState("didFinish", sender);
+            try {
+                const localStorage = await webView.exec(localStorageScript);
+                console.log(`[localStorage] ${localStorage || "{}"}`);
+            }
+            catch (error) {
+                console.log(`[localStorage] error=${error?.localizedDescription || error}`);
+            }
+        },
+        didFail: (sender, error) => {
+            syncAddress(sender);
+            logState("didFail", sender, error);
+        },
+    },
+});
+const loadURL = (value) => {
+    const url = normalizeURL(value);
+    const input = $("oc-webview-url");
+    if (input)
+        input.text = url;
+    const nsurl = $objc("NSURL").invoke("URLWithString:", url);
+    const request = $objc("NSURLRequest").invoke("requestWithURL:", nsurl);
+    webView.webView.invoke("loadRequest:", request);
+};
+$ui.render({
+    views: [
+        {
+            type: "view",
+            props: {
+                id: "oc-webview-toolbar",
+            },
+            layout: (make, view) => {
+                make.top.equalTo(view.super.safeAreaTop);
+                make.left.right.inset(0);
+                make.height.equalTo(88);
+            },
+            views: [
+                {
+                    type: "input",
+                    props: {
+                        id: "oc-webview-url",
+                        text: initialURL,
+                        type: $kbType.url,
+                        bgcolor: $color("secondarySurface"),
+                        radius: 8,
+                        placeholder: "输入网址后回车",
+                    },
+                    layout: (make, view) => {
+                        make.top.inset(12);
+                        make.left.right.inset(12);
+                        make.height.equalTo(36);
+                    },
+                    events: {
+                        returned: (sender) => {
+                            loadURL(sender.text);
+                        },
+                    },
+                },
+                {
+                    type: "view",
+                    props: {},
+                    layout: (make, view) => {
+                        make.top.equalTo(view.prev.bottom).offset(8);
+                        make.left.right.bottom.inset(12);
+                    },
+                    views: [
+                        {
+                            type: "button",
+                            props: {
+                                title: "后退",
+                            },
+                            layout: (make, view) => {
+                                make.left.top.bottom.inset(0);
+                                make.width.equalTo(72);
+                            },
+                            events: {
+                                tapped: () => {
+                                    webView.goBack();
+                                },
+                            },
+                        },
+                        {
+                            type: "button",
+                            props: {
+                                title: "前进",
+                            },
+                            layout: (make, view) => {
+                                make.left.equalTo(view.prev.right).offset(8);
+                                make.top.bottom.equalTo(view.prev);
+                                make.width.equalTo(72);
+                            },
+                            events: {
+                                tapped: () => {
+                                    webView.goForward();
+                                },
+                            },
+                        },
+                        {
+                            type: "button",
+                            props: {
+                                title: "刷新",
+                            },
+                            layout: (make, view) => {
+                                make.left.equalTo(view.prev.right).offset(8);
+                                make.top.bottom.equalTo(view.prev);
+                                make.width.equalTo(72);
+                            },
+                            events: {
+                                tapped: () => {
+                                    webView.reload();
+                                },
+                            },
+                        },
+                        {
+                            type: "button",
+                            props: {
+                                title: "分享",
+                            },
+                            layout: (make, view) => {
+                                make.left.equalTo(view.prev.right).offset(8);
+                                make.top.bottom.equalTo(view.prev);
+                                make.width.equalTo(72);
+                            },
+                            events: {
+                                tapped: () => {
+                                    $share.sheet(currentURL(webView.webView) || initialURL);
+                                },
+                            },
+                        },
+                    ],
+                },
+            ],
+        },
+        webView.definition,
+    ],
+});

package/dist/test/refresh-button.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const refresh_button_1 = require("../components/refresh-button");
 const refreshButton = new refresh_button_1.RefreshButton({
@@ -23,11 +14,11 @@ const refreshButton = new refresh_button_1.RefreshButton({
         make.centerX.equalTo(view.super);
     },
     events: {
-        tapped: () => __awaiter(void 0, void 0, void 0, function* () {
+        tapped: async () => {
             refreshButton.loading = true;
-            yield $wait(2);
+            await $wait(2);
             refreshButton.loading = false;
-        }),
+        },
     },
 });
 $ui.render({

package/dist/utils/l10n.js

@@ -1,7 +1,7 @@
 "use strict";
 // 用于自定义的国际化支持
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.l10n = void 0;
+exports.l10n = l10n;
 const language = $device.info.language;
 const strings = {
     "zh-Hans": {
@@ -41,4 +41,3 @@ function l10n(key) {
     const value = strings[language][key];
     return value || key;
 }
-exports.l10n = l10n;

package/dist/utils/path.js

@@ -1,7 +1,14 @@
 "use strict";
 // 用于处理路径的工具函数
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFileSize = exports.getModificationDate = exports.getCreationDate = exports.join = exports.extname = exports.basename = exports.dirname = exports.split = void 0;
+exports.split = split;
+exports.dirname = dirname;
+exports.basename = basename;
+exports.extname = extname;
+exports.join = join;
+exports.getCreationDate = getCreationDate;
+exports.getModificationDate = getModificationDate;
+exports.getFileSize = getFileSize;
 function _splitProtocol(path) {
     const regex = /^\w+:\/\//;
     const result = regex.exec(path);
@@ -37,15 +44,12 @@ function split(path) {
         return [protocol + remainingPath.slice(0, lastIndex), remainingPath.slice(lastIndex + 1)];
     }
 }
-exports.split = split;
 function dirname(path) {
     return split(path)[0];
 }
-exports.dirname = dirname;
 function basename(path) {
     return split(path)[1];
 }
-exports.basename = basename;
 function extname(path) {
     const _basename = basename(path);
     if (!_basename)
@@ -58,7 +62,6 @@ function extname(path) {
         return "." + components.slice(-1)[0];
     }
 }
-exports.extname = extname;
 // 拼接目录
 function join(...args) {
     return args
@@ -73,7 +76,6 @@ function join(...args) {
         .filter((x) => x.length)
         .join("/");
 }
-exports.join = join;
 function _getAttributes(path) {
     if (!$file.exists(path))
         throw new Error("invalid path");
@@ -89,16 +91,13 @@ function getCreationDate(path) {
         return 0;
     return NSFileCreationDate.getTime();
 }
-exports.getCreationDate = getCreationDate;
 function getModificationDate(path) {
     const { NSFileModificationDate } = _getAttributes(path);
     if (!NSFileModificationDate)
         return 0;
     return NSFileModificationDate.getTime();
 }
-exports.getModificationDate = getModificationDate;
 function getFileSize(path) {
     const { NSFileSize } = _getAttributes(path);
     return NSFileSize || 0;
 }
-exports.getFileSize = getFileSize;

package/dist/utils/rect.js

@@ -1,7 +1,14 @@
 "use strict";
 // 用于处理矩形的工具函数
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inset = exports.translate = exports.union = exports.intersection = exports.intersects = exports.containsRect = exports.containsPoint = exports.center = void 0;
+exports.center = center;
+exports.containsPoint = containsPoint;
+exports.containsRect = containsRect;
+exports.intersects = intersects;
+exports.intersection = intersection;
+exports.union = union;
+exports.translate = translate;
+exports.inset = inset;
 /**
  * When called without arguments, return the center of the rectangle.
  * When a Point is passed as an argument, the rectangle’s x and y values
@@ -16,7 +23,6 @@ function center(rect, point) {
     rect.y = py - h / 2;
     return point;
 }
-exports.center = center;
 /**
  * Return true if the given point lies within the bounds of the rectangle,
  * false otherwise.
@@ -26,7 +32,6 @@ function containsPoint(rect, point) {
     const { x: px, y: py } = point;
     return x <= px && px <= x + w && y <= py && py <= y + h;
 }
-exports.containsPoint = containsPoint;
 /**
  * Return true if the given rectangle lies entirely within the bounds of
  * this rectangle, false otherwise.
@@ -36,7 +41,6 @@ function containsRect(rect, otherRect) {
     const { x: x1, y: y1, width: w1, height: h1 } = otherRect;
     return x <= x1 && y <= y1 && x1 + w1 <= x + w && y1 + h1 <= y + h;
 }
-exports.containsRect = containsRect;
 /**
  * Return true if this rectangle intersects with the other rectangle,
  * false otherwise.
@@ -46,7 +50,6 @@ function intersects(rect, otherRect) {
     const { x: x1, y: y1, width: w1, height: h1 } = otherRect;
     return x < x1 + w1 && x1 < x + w && y < y1 + h1 && y1 < y + h;
 }
-exports.intersects = intersects;
 /**
  * Return a $rect that corresponds to the intersection of this rectangle with
  * the other one.
@@ -60,7 +63,6 @@ function intersection(rect, otherRect) {
     const nh = Math.min(y + h, y1 + h1) - ny;
     return $rect(nx, ny, nw, nh);
 }
-exports.intersection = intersection;
 /**
  * Return the smallest $rect that encloses both rectangles.
  */
@@ -73,7 +75,6 @@ function union(rect, otherRect) {
     const nh = Math.max(y + h, y1 + h1) - ny;
     return $rect(nx, ny, nw, nh);
 }
-exports.union = union;
 /**
  * Equivalent to $rect(r.x + x, r.y + y, r.w, r.h)
  */
@@ -82,7 +83,6 @@ function translate(rect, point) {
     const { x: x1, y: y1 } = point;
     return $rect(x + x1, y + y1, width, height);
 }
-exports.translate = translate;
 /**
  * Return a $rect that is adjusted by the given edge insets.
  */
@@ -91,4 +91,3 @@ function inset(rect, insets) {
     const { top, left, bottom, right } = insets;
     return $rect(x + left, y + top, width - left - right, height - top - bottom);
 }
-exports.inset = inset;

package/dist/utils/uitools.js

@@ -1,7 +1,12 @@
 "use strict";
 // 用于UI相关的工具函数
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setLayer = exports.layerCommonOptions = exports.absoluteFrame = exports.getTextHeight = exports.getTextWidth = exports.getWindowSize = void 0;
+exports.layerCommonOptions = void 0;
+exports.getWindowSize = getWindowSize;
+exports.getTextWidth = getTextWidth;
+exports.getTextHeight = getTextHeight;
+exports.absoluteFrame = absoluteFrame;
+exports.setLayer = setLayer;
 /**
  * 立即获得window size
  */
@@ -9,7 +14,6 @@ function getWindowSize() {
     const window = $objc("UIWindow").$keyWindow().jsValue();
     return window.size;
 }
-exports.getWindowSize = getWindowSize;
 /**
  * 获取单行字符串应有的宽度
  * 默认额外添加3 inset
@@ -22,7 +26,6 @@ function getTextWidth(text, { font = $font(17), inset = 3 } = {}) {
         lineSpacing: 0,
     }).width) + inset);
 }
-exports.getTextWidth = getTextWidth;
 /**
  * 获取字符串指定宽度后应有的高度
  * 默认额外添加3 inset
@@ -35,7 +38,6 @@ function getTextHeight(text, { width = 300, font = $font(17), inset = 3, lineSpa
         lineSpacing,
     }).height) + inset);
 }
-exports.getTextHeight = getTextHeight;
 /**
  * 计算某个view在某个上级view（若不指定则为UIWindow）上的绝对frame
  * 此方法不考虑旋转变形等特殊情况
@@ -52,7 +54,6 @@ function absoluteFrame(view, endView) {
     }
     return frame;
 }
-exports.absoluteFrame = absoluteFrame;
 exports.layerCommonOptions = {
     none: {
         cornerRadius: 0,
@@ -102,4 +103,3 @@ function setLayer(view, { cornerRadius = 0, shadowRadius = 0, shadowOpacity = 0,
     layer.invoke("setShadowOffset", shadowOffset);
     layer.invoke("setShadowColor", shadowColor.ocValue().invoke("CGColor"));
 }
-exports.setLayer = setLayer;

package/index.ts

@@ -2,6 +2,7 @@ export * from "./components/base";
 export * from "./components/custom-navigation-bar";
 export * from "./components/dynamic-contextmenu-view";
 export * from "./components/dynamic-itemsize-matrix";
+export * from "./components/dynamic-itemsize-section-matrix";
 export * from "./components/dynamic-preference-listview";
 export * from "./components/dynamic-rowheight-list";
 export * from "./components/enhanced-imageview";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",
@@ -10,8 +10,9 @@
   "bugs": "https://github.com/Gandum2077/JSBox-CView/issues",
   "main": "dist/index.js",
   "scripts": {
-    "test": "tsc && node ./dist/test.js",
-    "build": "tsc"
+    "build:debug": "tsc && npx browserify ${npm_config_entry:-./dist/index.js} > test.js",
+    "build": "tsc",
+    "format": "prettier --write ."
   },
   "keywords": [],
   "author": "Gandum2077",

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

@@ -0,0 +1,142 @@
+import {
+  DynamicItemSizeSectionMatrix,
+  DynamicItemSizeSectionMatrixSection,
+} from "../components/dynamic-itemsize-section-matrix";
+
+const makeItem = (sectionName: string, index: number) => {
+  return {
+    symbol: { symbol: index % 2 === 0 ? "sparkles" : "square.grid.2x2" },
+    title: { text: `${sectionName} ${index}` },
+    subtitle: { text: `Item index ${index}` },
+    badge: { text: `${index}` },
+  };
+};
+
+const sections: DynamicItemSizeSectionMatrixSection[] = [
+  {
+    title: "Pinned",
+    items: [makeItem("Pinned", 1), makeItem("Pinned", 2), makeItem("Pinned", 3)],
+  },
+  {
+    title: "Long Section Title To Verify The Custom Title Cell Uses Dynamic Height\nLine 2\nLine 3",
+    items: [makeItem("Recent", 1), makeItem("Recent", 2), makeItem("Recent", 3), makeItem("Recent", 4)],
+  },
+  {
+    title: "",
+    items: [makeItem("Untitled", 1), makeItem("Untitled", 2)],
+  },
+];
+
+const matrix = new DynamicItemSizeSectionMatrix({
+  props: {
+    spacing: 8,
+    minItemWidth: $device.isIpad ? 180 : 142,
+    maxColumns: $device.isIpad ? 4 : 2,
+    data: sections,
+    template: {
+      views: [
+        {
+          type: "view",
+          props: {
+            bgcolor: $color("yellow"),
+            cornerRadius: 8,
+          },
+          layout: $layout.fill,
+          views: [
+            {
+              type: "image",
+              props: {
+                id: "symbol",
+                contentMode: $contentMode.scaleAspectFit,
+                tintColor: $color("tint"),
+              },
+              layout: (make, view) => {
+                make.left.top.inset(12);
+                make.size.equalTo($size(32, 32));
+              },
+            },
+            {
+              type: "label",
+              props: {
+                id: "badge",
+                align: $align.center,
+                font: $font(12),
+                textColor: $color("white"),
+                bgcolor: $color("tint"),
+                cornerRadius: 10,
+              },
+              layout: (make, view) => {
+                make.top.right.inset(12);
+                make.size.equalTo($size(28, 20));
+              },
+            },
+            {
+              type: "label",
+              props: {
+                id: "title",
+                font: $font("bold", 15),
+                textColor: $color("primaryText"),
+              },
+              layout: (make, view) => {
+                make.left.right.inset(12);
+                make.top.equalTo(view.prev.prev.bottom).offset(10);
+                make.height.equalTo(20);
+              },
+            },
+            {
+              type: "label",
+              props: {
+                id: "subtitle",
+                font: $font(12),
+                textColor: $color("secondaryText"),
+              },
+              layout: (make, view) => {
+                make.left.right.inset(12);
+                make.top.equalTo(view.prev.bottom).offset(4);
+                make.bottom.inset(12);
+              },
+            },
+          ],
+        },
+      ],
+    },
+  },
+  layout: $layout.fill,
+  events: {
+    itemHeight: (width) => Math.max(112, width * 0.72),
+    didSelect: (sender, indexPath, data) => {
+      const section = matrix.data[indexPath.section];
+      const title = (data.title as { text: string }).text;
+      $ui.toast(`${section.title || "Untitled"} / ${title}`);
+    },
+    didLongPress: (sender, indexPath, data) => {
+      const title = (data.title as { text: string }).text;
+      $ui.alert(`Long pressed ${title}`);
+    },
+  },
+});
+
+$ui.render({
+  props: {
+    navButtons: [
+      {
+        symbol: "plus",
+        handler: () => {
+          const nextIndex = matrix.data[0].items.length + 1;
+          matrix.insert({
+            indexPath: $indexPath(0, matrix.data[0].items.length),
+            value: makeItem("Pinned", nextIndex),
+          });
+        },
+      },
+      {
+        symbol: "trash",
+        handler: () => {
+          if (matrix.data[0].items.length === 0) return;
+          matrix.delete($indexPath(0, matrix.data[0].items.length - 1));
+        },
+      },
+    ],
+  },
+  views: [matrix.definition],
+});