jsbox-cview 1.5.3 → 1.5.4

package/components/dynamic-itemsize-matrix.ts

@@ -22,6 +22,35 @@ interface DynamicItemSizeMatrixPropsPartial extends UiTypes.MatrixProps {
   dynamicHeightEnabled?: boolean;
 }
 
+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
+  };
+}
+
 /**
  * # CView Dynamic ItemSize Matrix
  * 
@@ -71,6 +100,7 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
   private _itemSizeWidth: number;
   private _itemSizeHeight: number;
   private _totalWidth: number = 0;
+  private _columns: number = 1;
   matrix: Matrix;
   _defineView: () => UiTypes.ViewOptions;
 
@@ -117,13 +147,13 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
           layoutSubviews: sender => {
             sender.relayout();
             if (sender.frame.width === this._totalWidth) return;
-            const { itemSizeWidth } = this._getColumnsAndItemSizeWidth(
+            const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(
               sender.frame.width,
               this._props.minItemWidth,
               this._props.maxColumns,
               this._props.spacing
             );
-  
+            this._columns = columns;
             this._itemSizeWidth = itemSizeWidth;
             this._itemSizeHeight = this._events.itemHeight
               ? this._events.itemHeight(this._itemSizeWidth)
@@ -142,38 +172,8 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
     }
   }
   
-  // 此为纯函数
-  _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
-    };
-  }
-
   heightToWidth(width: number) {
-    const { columns, itemSizeWidth } = this._getColumnsAndItemSizeWidth(
+    const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(
       width,
       this._props.minItemWidth,
       this._props.maxColumns,
@@ -194,4 +194,12 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
     this._props.data = data;
     this.matrix.view.data = data;
   }
+
+  get columns() {
+    return this._columns;
+  }
+
+  get itemSize() {
+    return $size(this._itemSizeWidth, this._itemSizeHeight);
+  }
 }

package/components/sheet.ts

@@ -107,6 +107,6 @@ export class Sheet<T extends Base<U, R>, U extends AllUIView, R extends UiTypes.
   }
 
   dismiss() {
-    this._PSViewController.invoke("dismissModalViewControllerAnimated", true);
+    this._PSViewController.invoke("dismissModalViewControllerAnimated", this._animated);
   }
 }

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

@@ -14,6 +14,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicItemSizeMatrix = void 0;
 const base_1 = require("./base");
 const single_views_1 = require("./single-views");
+function _getColumnsAndItemSizeWidth(containerWidth, minItemWidth, maxColumns, spacing) {
+    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
+    };
+}
 /**
  * # CView Dynamic ItemSize Matrix
  *
@@ -61,6 +77,7 @@ class DynamicItemSizeMatrix extends base_1.Base {
     constructor({ props, layout, events = {} }) {
         super();
         this._totalWidth = 0;
+        this._columns = 1;
         this._props = Object.assign({ 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"]);
@@ -85,7 +102,8 @@ class DynamicItemSizeMatrix extends base_1.Base {
                         sender.relayout();
                         if (sender.frame.width === this._totalWidth)
                             return;
-                        const { itemSizeWidth } = this._getColumnsAndItemSizeWidth(sender.frame.width, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
+                        const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(sender.frame.width, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
+                        this._columns = columns;
                         this._itemSizeWidth = itemSizeWidth;
                         this._itemSizeHeight = this._events.itemHeight
                             ? this._events.itemHeight(this._itemSizeWidth)
@@ -103,25 +121,8 @@ class DynamicItemSizeMatrix extends base_1.Base {
             };
         };
     }
-    // 此为纯函数
-    _getColumnsAndItemSizeWidth(containerWidth, minItemWidth, maxColumns, spacing) {
-        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
-        };
-    }
     heightToWidth(width) {
-        const { columns, itemSizeWidth } = this._getColumnsAndItemSizeWidth(width, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
+        const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(width, this._props.minItemWidth, this._props.maxColumns, this._props.spacing);
         const rows = Math.ceil(this._props.data.length / columns);
         const itemSizeHeight = this._events.itemHeight
             ? this._events.itemHeight(itemSizeWidth)
@@ -135,5 +136,11 @@ class DynamicItemSizeMatrix extends base_1.Base {
         this._props.data = data;
         this.matrix.view.data = data;
     }
+    get columns() {
+        return this._columns;
+    }
+    get itemSize() {
+        return $size(this._itemSizeWidth, this._itemSizeHeight);
+    }
 }
 exports.DynamicItemSizeMatrix = DynamicItemSizeMatrix;

package/dist/components/sheet.js

@@ -75,7 +75,7 @@ class Sheet {
             .invoke("presentModalViewController:animated", this._PSViewController, this._animated);
     }
     dismiss() {
-        this._PSViewController.invoke("dismissModalViewControllerAnimated", true);
+        this._PSViewController.invoke("dismissModalViewControllerAnimated", this._animated);
     }
 }
 exports.Sheet = Sheet;

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

@@ -52,7 +52,13 @@ const matrix = new dynamic_itemsize_matrix_1.DynamicItemSizeMatrix({
     },
     events: {
         itemHeight: width => width * 1.414 + 20,
-        didSelect: (sender, indexPath, data) => { }
+        didSelect: (sender, indexPath, data) => { },
+        didScroll: sender => {
+            matrix.columns;
+            console.log(sender.contentOffset.y);
+            console.log(Math.ceil(sender.contentOffset.y / (matrix.itemSize.height + 5)));
+            console.log(Math.ceil(sender.contentOffset.y / (matrix.itemSize.height + 5)) * matrix.columns);
+        },
     }
 });
 $ui.render({
@@ -64,5 +70,5 @@ $ui.render({
             }
         ]
     },
-    views: [matrix.definition]
+    views: [matrix.definition],
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",
@@ -19,6 +19,6 @@
   "devDependencies": {
     "@types/node": "^20.11.17",
     "browserify": "^17.0.0",
-    "jsbox-types": "^1.0.30"
+    "jsbox-types": "^1.0.31"
   }
 }

package/test/dynamic-itemsize-matrix.ts

@@ -51,7 +51,13 @@ const matrix = new DynamicItemSizeMatrix({
   },
   events: {
     itemHeight: width => width * 1.414 + 20,
-    didSelect: (sender, indexPath, data) => { }
+    didSelect: (sender, indexPath, data) => { },
+    didScroll: sender => { 
+      matrix.columns
+      console.log(sender.contentOffset.y)
+      console.log(Math.ceil(sender.contentOffset.y / (matrix.itemSize.height + 5)))
+      console.log(Math.ceil(sender.contentOffset.y / (matrix.itemSize.height + 5)) * matrix.columns)
+    },
   }
 });
 
@@ -64,5 +70,5 @@ $ui.render({
       }
     ]
   },
-  views: [matrix.definition]
+  views: [matrix.definition],
 });