jsbox-cview 1.2.5 → 1.2.7

package/components/dynamic-itemsize-matrix.ts

@@ -165,11 +165,15 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
         Math.floor((totalWidth - spacing) / (minItemWidth + spacing)),
         maxColumns
       ),
-      1
+      1  // 最少一列
     );
+    const itemSizeWidth =  Math.max(
+      Math.floor((totalWidth - spacing * (columns + 1)) / columns), 
+      minItemWidth  // 最小宽度
+    )
     return {
       columns,
-      itemSizeWidth: Math.floor((totalWidth - spacing * (columns + 1)) / columns)
+      itemSizeWidth
     };
   }
 
@@ -187,4 +191,13 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
       : this._props.fixedItemHeight;
     return rows * itemSizeHeight + (rows + 1) * this._props.spacing;
   }
+
+  get data() {
+    return this.matrix.view.data;
+  }
+
+  set data(data) {
+    this._props.data = data;
+    this.matrix.view.data = data;
+  }
 }

package/components/pageviewer.ts

@@ -50,7 +50,6 @@ export class PageViewer extends Base<UIView, UiTypes.ViewOptions> {
     this._pageWidth = 0;
     this._floatPage = this._props.page;
     const contentViews = this._props.cviews.map(n => {
-      n._layout = $layout.fill;
       return new ContentView({
         views: [n.definition],
         layout: (make, view) => {
@@ -93,7 +92,7 @@ export class PageViewer extends Base<UIView, UiTypes.ViewOptions> {
       return {
         type: "view",
         props: { id: this.id },
-        layout: this._layout,
+        layout,
         views: [this.scroll.definition],
         events: {
           layoutSubviews: sender => {

package/controller/pageviewer-controller.ts

@@ -44,7 +44,7 @@ export class PageViewerController extends BaseController {
     };
     this.cviews.pageviewer = new PageViewer({
       props: {
-        page: this._props.index,
+        page: this._props.index || 0,
         cviews: this._props.items.map(n => n.controller.rootView)
       },
       layout: (make, view) => {
@@ -58,7 +58,7 @@ export class PageViewerController extends BaseController {
     this.cviews.titlebar = new PageViewerTitleBar({
       props: {
         items: this._props.items.map(n => n.title),
-        index: this._props.index
+        index: this._props.index || 0
       },
       layout: $layout.fill,
       events: {

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

@@ -111,10 +111,13 @@ class DynamicItemSizeMatrix extends base_1.Base {
         const totalWidth = maxTotalWidth
             ? Math.min(maxTotalWidth, containerWidth)
             : containerWidth;
-        const columns = Math.max(Math.min(Math.floor((totalWidth - spacing) / (minItemWidth + spacing)), maxColumns), 1);
+        const columns = Math.max(Math.min(Math.floor((totalWidth - spacing) / (minItemWidth + spacing)), maxColumns), 1 // 最少一列
+        );
+        const itemSizeWidth = Math.max(Math.floor((totalWidth - spacing * (columns + 1)) / columns), minItemWidth // 最小宽度
+        );
         return {
             columns,
-            itemSizeWidth: Math.floor((totalWidth - spacing * (columns + 1)) / columns)
+            itemSizeWidth
         };
     }
     heightToWidth(width) {
@@ -125,5 +128,12 @@ class DynamicItemSizeMatrix extends base_1.Base {
             : this._props.fixedItemHeight;
         return rows * itemSizeHeight + (rows + 1) * this._props.spacing;
     }
+    get data() {
+        return this.matrix.view.data;
+    }
+    set data(data) {
+        this._props.data = data;
+        this.matrix.view.data = data;
+    }
 }
 exports.DynamicItemSizeMatrix = DynamicItemSizeMatrix;

package/dist/components/pageviewer.js

@@ -25,7 +25,6 @@ class PageViewer extends base_1.Base {
         this._pageWidth = 0;
         this._floatPage = this._props.page;
         const contentViews = this._props.cviews.map(n => {
-            n._layout = $layout.fill;
             return new single_views_1.ContentView({
                 views: [n.definition],
                 layout: (make, view) => {
@@ -68,7 +67,7 @@ class PageViewer extends base_1.Base {
             return {
                 type: "view",
                 props: { id: this.id },
-                layout: this._layout,
+                layout,
                 views: [this.scroll.definition],
                 events: {
                     layoutSubviews: sender => {

package/dist/controller/pageviewer-controller.js

@@ -25,7 +25,7 @@ class PageViewerController extends base_controller_1.BaseController {
         this.cviews = {};
         this.cviews.pageviewer = new pageviewer_1.PageViewer({
             props: {
-                page: this._props.index,
+                page: this._props.index || 0,
                 cviews: this._props.items.map(n => n.controller.rootView)
             },
             layout: (make, view) => {
@@ -39,7 +39,7 @@ class PageViewerController extends base_controller_1.BaseController {
         this.cviews.titlebar = new pageviewer_titlebar_1.PageViewerTitleBar({
             props: {
                 items: this._props.items.map(n => n.title),
-                index: this._props.index
+                index: this._props.index || 0
             },
             layout: $layout.fill,
             events: {

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

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const dynamic_itemsize_matrix_1 = require("../components/dynamic-itemsize-matrix");
+const matrix = new dynamic_itemsize_matrix_1.DynamicItemSizeMatrix({
+    props: {
+        spacing: 5,
+        minItemWidth: $device.isIpad ? 140 : 118,
+        maxColumns: 10,
+        template: {
+            views: [
+                {
+                    type: "label",
+                    props: {
+                        id: "label",
+                        align: $align.center,
+                        font: $font(13)
+                    },
+                    layout: (make, view) => {
+                        make.left.right.bottom.inset(0);
+                        make.height.equalTo(20);
+                    }
+                },
+                {
+                    type: "image",
+                    props: {
+                        symbol: "sun.dust",
+                        bgcolor: $color("backgroundColor", "secondarySurface"),
+                        contentMode: $contentMode.scaleAspectFit
+                    },
+                    layout: (make, view) => {
+                        make.top.left.right.equalTo(0);
+                        make.bottom.equalTo(view.prev.top);
+                    }
+                }
+            ]
+        },
+        data: [...Array(100)].map((n, i) => {
+            return {
+                label: { text: i + 1 }
+            };
+        }),
+        footer: {
+            type: "view",
+            props: {
+                height: 20
+            }
+        }
+    },
+    layout: (make, view) => {
+        make.left.right.equalTo(view.super.safeArea);
+        make.top.bottom.equalTo(view.super);
+    },
+    events: {
+        itemHeight: width => width * 1.414 + 20,
+        didSelect: (sender, indexPath, data) => { }
+    }
+});
+$ui.render({
+    props: {
+        navButtons: [
+            {
+                symbol: "plus",
+                handler: () => matrix.data = [{ label: { text: "New" } }]
+            }
+        ]
+    },
+    views: [matrix.definition]
+});

package/dist/test/pageviewer-controller.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const pageviewer_controller_1 = require("../controller/pageviewer-controller");
+const base_controller_1 = require("../controller/base-controller");
+const items = [{
+        controller: new base_controller_1.BaseController({ props: { bgcolor: $color("red") } }),
+        title: "Page 1"
+    }, {
+        controller: new base_controller_1.BaseController({ props: { bgcolor: $color("yellow") } }),
+        title: "Page 2"
+    }];
+const pageViewerController = new pageviewer_controller_1.PageViewerController({
+    props: {
+        items
+    }
+});
+pageViewerController.uirender({});

package/dist/test/pageviewer-titlebar.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const pageviewer_titlebar_1 = require("../components/pageviewer-titlebar");
+const pageViewerTitleBar = new pageviewer_titlebar_1.PageViewerTitleBar({
+    props: {
+        items: ["Page 1", "Page 2", "Page 3"],
+        index: 0
+    },
+    layout: (make, view) => {
+        make.left.right.inset(0);
+        make.top.equalTo(view.super.safeAreaTop);
+        make.height.equalTo(44);
+    },
+    events: {}
+});
+$ui.render({
+    views: [pageViewerTitleBar.definition]
+});

package/dist/test/pageviewer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const pageviewer_1 = require("../components/pageviewer");
+const single_views_1 = require("../components/single-views");
+const pageViewer = new pageviewer_1.PageViewer({
+    props: {
+        page: 0,
+        cviews: [
+            new single_views_1.ContentView({ props: { bgcolor: $color("red") }, layout: $layout.fill }),
+            new single_views_1.ContentView({ props: { bgcolor: $color("green") }, layout: $layout.fill }),
+            new single_views_1.ContentView({ props: { bgcolor: $color("blue") }, layout: $layout.fill })
+        ]
+    },
+    layout: $layout.fill,
+    events: {
+        floatPageChanged: (cview, floatPage) => {
+            console.log(floatPage);
+        }
+    }
+});
+$ui.render({
+    views: [pageViewer.definition]
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",

package/test/dynamic-itemsize-matrix.ts

@@ -0,0 +1,68 @@
+import { DynamicItemSizeMatrix } from "../components/dynamic-itemsize-matrix";
+
+const matrix = new DynamicItemSizeMatrix({
+  props: {
+    spacing: 5,
+    minItemWidth: $device.isIpad ? 140 : 118,
+    maxColumns: 10,
+    template: {
+      views: [
+        {
+          type: "label",
+          props: {
+            id: "label",
+            align: $align.center,
+            font: $font(13)
+          },
+          layout: (make, view) => {
+            make.left.right.bottom.inset(0);
+            make.height.equalTo(20);
+          }
+        },
+        {
+          type: "image",
+          props: {
+            symbol: "sun.dust",
+            bgcolor: $color("backgroundColor", "secondarySurface"),
+            contentMode: $contentMode.scaleAspectFit
+          },
+          layout: (make, view) => {
+            make.top.left.right.equalTo(0);
+            make.bottom.equalTo(view.prev.top);
+          }
+        }
+      ]
+    },
+    data: [...Array(100)].map((n, i) => {
+      return {
+        label: { text: i + 1 }
+      };
+    }),
+    footer: {
+      type: "view",
+      props: {
+        height: 20
+      }
+    }
+  },
+  layout: (make, view) => {
+    make.left.right.equalTo(view.super.safeArea);
+    make.top.bottom.equalTo(view.super);
+  },
+  events: {
+    itemHeight: width => width * 1.414 + 20,
+    didSelect: (sender, indexPath, data) => { }
+  }
+});
+
+$ui.render({
+  props: {
+    navButtons: [
+      {
+        symbol: "plus",
+        handler: () => matrix.data = [{ label: { text: "New" } }]
+      }
+    ]
+  },
+  views: [matrix.definition]
+});

package/test/pageviewer-controller.ts

@@ -0,0 +1,19 @@
+import { PageViewerController } from "../controller/pageviewer-controller";
+import { BaseController } from "../controller/base-controller";
+import { PageViewer } from "../components/pageviewer";
+
+const items = [{
+  controller: new BaseController({props: {bgcolor: $color("red")}}),
+  title: "Page 1"
+}, {
+  controller: new BaseController({props: {bgcolor: $color("yellow")}}),
+  title: "Page 2"
+}]
+
+const pageViewerController = new PageViewerController({
+  props: {
+    items
+  }
+});
+
+pageViewerController.uirender({});

package/test/pageviewer-titlebar.ts

@@ -0,0 +1,19 @@
+import { PageViewerTitleBar } from "../components/pageviewer-titlebar";
+
+const pageViewerTitleBar = new PageViewerTitleBar({
+  props: {
+    items: ["Page 1", "Page 2", "Page 3"],
+    index: 0
+  },
+  layout: (make, view) => {
+    make.left.right.inset(0);
+    make.top.equalTo(view.super.safeAreaTop);
+    make.height.equalTo(44);
+  },
+  events: {
+  }
+});
+
+$ui.render({
+  views: [pageViewerTitleBar.definition]
+});

package/test/pageviewer.ts

@@ -0,0 +1,22 @@
+import { PageViewer } from "../components/pageviewer";
+import { ContentView } from "../components/single-views";
+const pageViewer = new PageViewer({
+  props: {
+    page: 0,
+    cviews: [
+      new ContentView({ props: { bgcolor: $color("red") }, layout: $layout.fill }),
+      new ContentView({ props: { bgcolor: $color("green") }, layout: $layout.fill }),
+      new ContentView({ props: { bgcolor: $color("blue") }, layout: $layout.fill })
+    ]
+  },
+  layout: $layout.fill,
+  events: {
+    floatPageChanged: (cview, floatPage) => {
+      console.log(floatPage);
+    }
+  }
+});
+
+$ui.render({
+  views: [pageViewer.definition]
+});