jsbox-cview 1.5.9 → 1.5.10

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/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.9",
+  "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({});