jsbox-cview 1.5.8 → 1.5.10

package/components/image-pager.ts

@@ -11,6 +11,7 @@ export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
   _props: {
     srcs: string[];
     page: number;
+    doubleTapToZoom: boolean;
   };
   _matrix: Matrix;
   _pageLoadRecorder: { [key: number]: boolean };
@@ -21,6 +22,7 @@ export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
    * @param props 
    * - srcs: string[] - 图片地址列表
    * - page: number - 当前页码
+   * - doubleTapToZoom: boolean - 是否双击放大，默认为true
    * @param layout
    * @param events 
    * - changed: (page: number) => void - 页码变化时触发
@@ -30,6 +32,7 @@ export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
     props: {
       srcs?: string[];
       page?: number;
+      doubleTapToZoom?: boolean;
     };
     layout: (make: MASConstraintMaker, view: UIView) => void;
     events: {
@@ -42,6 +45,7 @@ export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
     this._props = {
       srcs: [],
       page: 0,
+      doubleTapToZoom: true,
       ...props
     };
     this._pageLoadRecorder = {};
@@ -60,7 +64,7 @@ export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
                 id: "scroll",
                 zoomEnabled: true,
                 maxZoomScale: 3,
-                doubleTapToZoom: true
+                doubleTapToZoom: this._props.doubleTapToZoom
               },
               layout: $layout.fill,
               views: [
@@ -84,6 +88,7 @@ export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
         ready: sender => {
           // 如果没有此处的relayout，则会出现莫名其妙的bug
           sender.relayout();
+          if (!this._matrix.view) return;
           this.page = this.page;
           this.loadsrc(this.page);
         },
@@ -112,8 +117,7 @@ export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
       return {
         type: "view",
         props: {
-          id: this.id,
-          userInteractionEnabled: true
+          id: this.id
         },
         layout,
         views: [this._matrix.definition],
@@ -121,21 +125,11 @@ export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
           layoutSubviews: sender => {
             this._pageLoadRecorder = {};
             sender.relayout();
+            if (!this._matrix.view) return;
             this._matrix.view.reload();
             this.page = this.page;
             $delay(0.1, () => this.loadsrc(this.page, true));
             $delay(0.3, () => this.loadsrc(this.page, true));
-          },
-          tapped: sender => {
-            const cell = this._matrix.view.cell($indexPath(0, this.page));
-            if (!cell) return;
-            const scroll = cell.get("scroll") as UIScrollView;
-            const zoomScale = scroll.zoomScale;
-            $delay(0.3, () => {
-              const zoomScale1 = scroll.zoomScale;
-              if (zoomScale === zoomScale1 && events.tapped)
-                events.tapped(this);
-            });
           }
         }
       };

package/controller/tabbar-controller.ts

@@ -14,6 +14,11 @@ interface TabBarControllerProps extends BaseControllerProps {
   index?: number;
 }
 
+interface TabBarControllerEvents extends BaseControllerEvents {
+  changed?: (controller: TabBarController, index: number) => void;
+  doubleTapped?: (controller: TabBarController, index: number) => void;
+}
+
 /** 
  * # CView TabBar Controller
  *
@@ -31,6 +36,7 @@ interface TabBarControllerProps extends BaseControllerProps {
  */
 export class TabBarController extends BaseController {
   _props: TabBarControllerProps;
+  _events: TabBarControllerEvents;
   cviews: {
     tabbar: TabBar;
     pageContentView: ContentView;
@@ -39,18 +45,27 @@ export class TabBarController extends BaseController {
   constructor({ props, layout, events = {} }: {
     props: TabBarControllerProps;
     layout?: (make: MASConstraintMaker, view: UIView) => void;
-    events?: BaseControllerEvents;
+    events?: TabBarControllerEvents;
   }) {
     super({
       props: {
         id: props.id,
         bgcolor: props.bgcolor
-      }, layout, events
+      }, 
+      layout,
+      events: {
+        ...events,
+        didAppear: () => {
+          this._props.items[this.index].controller.appear();
+          this._events.didAppear?.(this);
+        }
+      }
     });
     this._props = {
       items: props.items,
       index: props.index || 0
     };
+    this._events = events;
     this.cviews = {} as {
       tabbar: TabBar;
       pageContentView: ContentView;
@@ -61,7 +76,15 @@ export class TabBarController extends BaseController {
         index: this._props.index
       },
       events: {
-        changed: (cview, index) => (this.index = index)
+        changed: (cview, index) => {
+          this.index = index;
+          this._props.items.find(item=>item.controller.status === 2)?.controller.disappear();
+          this._props.items[index].controller.appear();
+          this._events.changed?.(this, index);
+        },
+        doubleTapped: (cview, index) => {
+          this._events.doubleTapped?.(this, index);
+        }
       }
     });
 

package/dist/components/image-pager.js

@@ -15,6 +15,7 @@ class ImagePager extends base_1.Base {
      * @param props
      * - srcs: string[] - 图片地址列表
      * - page: number - 当前页码
+     * - doubleTapToZoom: boolean - 是否双击放大，默认为true
      * @param layout
      * @param events
      * - changed: (page: number) => void - 页码变化时触发
@@ -22,7 +23,7 @@ class ImagePager extends base_1.Base {
      */
     constructor({ props, layout, events = {} }) {
         super();
-        this._props = Object.assign({ srcs: [], page: 0 }, props);
+        this._props = Object.assign({ srcs: [], page: 0, doubleTapToZoom: true }, props);
         this._pageLoadRecorder = {};
         this._matrix = new single_views_1.Matrix({
             props: {
@@ -39,7 +40,7 @@ class ImagePager extends base_1.Base {
                                 id: "scroll",
                                 zoomEnabled: true,
                                 maxZoomScale: 3,
-                                doubleTapToZoom: true
+                                doubleTapToZoom: this._props.doubleTapToZoom
                             },
                             layout: $layout.fill,
                             views: [
@@ -63,6 +64,8 @@ class ImagePager extends base_1.Base {
                 ready: sender => {
                     // 如果没有此处的relayout，则会出现莫名其妙的bug
                     sender.relayout();
+                    if (!this._matrix.view)
+                        return;
                     this.page = this.page;
                     this.loadsrc(this.page);
                 },
@@ -91,8 +94,7 @@ class ImagePager extends base_1.Base {
             return {
                 type: "view",
                 props: {
-                    id: this.id,
-                    userInteractionEnabled: true
+                    id: this.id
                 },
                 layout,
                 views: [this._matrix.definition],
@@ -100,22 +102,12 @@ class ImagePager extends base_1.Base {
                     layoutSubviews: sender => {
                         this._pageLoadRecorder = {};
                         sender.relayout();
+                        if (!this._matrix.view)
+                            return;
                         this._matrix.view.reload();
                         this.page = this.page;
                         $delay(0.1, () => this.loadsrc(this.page, true));
                         $delay(0.3, () => this.loadsrc(this.page, true));
-                    },
-                    tapped: sender => {
-                        const cell = this._matrix.view.cell($indexPath(0, this.page));
-                        if (!cell)
-                            return;
-                        const scroll = cell.get("scroll");
-                        const zoomScale = scroll.zoomScale;
-                        $delay(0.3, () => {
-                            const zoomScale1 = scroll.zoomScale;
-                            if (zoomScale === zoomScale1 && events.tapped)
-                                events.tapped(this);
-                        });
                     }
                 }
             };

package/dist/controller/tabbar-controller.js

@@ -25,12 +25,19 @@ class TabBarController extends base_controller_1.BaseController {
             props: {
                 id: props.id,
                 bgcolor: props.bgcolor
-            }, layout, events
+            },
+            layout,
+            events: Object.assign(Object.assign({}, events), { didAppear: () => {
+                    var _a, _b;
+                    this._props.items[this.index].controller.appear();
+                    (_b = (_a = this._events).didAppear) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+                } })
         });
         this._props = {
             items: props.items,
             index: props.index || 0
         };
+        this._events = events;
         this.cviews = {};
         this.cviews.tabbar = new tabbar_1.TabBar({
             props: {
@@ -38,7 +45,17 @@ class TabBarController extends base_controller_1.BaseController {
                 index: this._props.index
             },
             events: {
-                changed: (cview, index) => (this.index = index)
+                changed: (cview, index) => {
+                    var _a, _b, _c;
+                    this.index = index;
+                    (_a = this._props.items.find(item => item.controller.status === 2)) === null || _a === void 0 ? void 0 : _a.controller.disappear();
+                    this._props.items[index].controller.appear();
+                    (_c = (_b = this._events).changed) === null || _c === void 0 ? void 0 : _c.call(_b, this, index);
+                },
+                doubleTapped: (cview, index) => {
+                    var _a, _b;
+                    (_b = (_a = this._events).doubleTapped) === null || _b === void 0 ? void 0 : _b.call(_a, this, index);
+                }
             }
         });
         this.pages = this._props.items.map((n, i) => {

package/dist/test/tabbar-controller.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tabbar_controller_1 = require("../controller/tabbar-controller");
+const base_controller_1 = require("../controller/base-controller");
+const items = [{
+        controller: new base_controller_1.BaseController({
+            props: { bgcolor: $color("red") },
+            events: {
+                didAppear: () => {
+                    console.log("Page 1 did appear");
+                },
+                didDisappear: () => {
+                    console.log("Page 1 did disappear");
+                }
+            }
+        }),
+        title: "Page 1"
+    }, {
+        controller: new base_controller_1.BaseController({
+            props: { bgcolor: $color("yellow") },
+            events: {
+                didAppear: () => {
+                    console.log("Page 2 did appear");
+                },
+                didDisappear: () => {
+                    console.log("Page 2 did disappear");
+                }
+            }
+        }),
+        title: "Page 2"
+    }];
+const pageViewerController = new tabbar_controller_1.TabBarController({
+    props: {
+        items
+    },
+    events: {
+        changed: (sender, index) => {
+            console.log(`Index changed to ${index}`);
+        },
+        doubleTapped: (sender, index) => {
+            console.log(`Double tapped on index ${index}`);
+        }
+    }
+});
+pageViewerController.uirender({});

package/package.json

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

package/test/tabbar-controller.ts

@@ -0,0 +1,47 @@
+import { TabBarController } from "../controller/tabbar-controller";
+import { BaseController } from "../controller/base-controller";
+import { PageViewer } from "../components/pageviewer";
+
+const items = [{
+  controller: new BaseController({
+    props: { bgcolor: $color("red") },
+    events: {
+      didAppear: () => {
+        console.log("Page 1 did appear");
+      },
+      didDisappear: () => {
+        console.log("Page 1 did disappear");
+      }
+    }
+  }),
+  title: "Page 1"
+}, {
+  controller: new BaseController({ 
+    props: { bgcolor: $color("yellow") },
+    events: {
+      didAppear: () => {
+        console.log("Page 2 did appear");
+      },
+      didDisappear: () => {
+        console.log("Page 2 did disappear");
+      }
+    }
+  }),
+  title: "Page 2"
+}]
+
+const pageViewerController = new TabBarController({
+  props: {
+    items
+  },
+  events: {
+    changed: (sender, index) => {
+      console.log(`Index changed to ${index}`);
+    },
+    doubleTapped: (sender, index) => {
+      console.log(`Double tapped on index ${index}`);
+    }
+  }
+});
+
+pageViewerController.uirender({});