jsbox-cview 1.6.5 → 1.6.6

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.5",
+  "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],
+});

package/tsconfig.json

@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2017",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2021",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */