jsbox-cview 1.5.9 → 1.5.11

package/controller/splitview-controller.ts

@@ -169,15 +169,17 @@ interface SplitViewControllerProps extends BaseControllerProps {
  * 
  * 此控制器加载后，会禁用原本的ScreenEdgePanGesture，此控制器应该作为根控制器使用
  * 
- * ## Props
+ * @param options.props.items: { controller: Controller, bgcolor: UIColor }[] 其中第一个放在主视图上, 第二个放在次视图上
  * 
- * - 只写 items: { controller: Controller, bgcolor: UIColor }[] 其中第一个放在主视图上, 第二个放在次视图上
- * - 读写 sideBarShown: boolean = false 侧栏是否显示
+ * @property sideBarShown: boolean = false 侧栏是否显示
+ * @property canShowSidebar: boolean = true 是否启动显示侧栏的动作（若为false，依然可以用sideBarShown来控制侧栏的显示）
  */
 export class SplitViewController extends BaseController {
   private _screenEdgePanGestureObject: any;
   private _sideBarShown: boolean;
   private _canShowSidebar: boolean;
+  private _primaryController: BaseController;
+  private _secondaryController: BaseController;
   cviews: {
     primaryView: ContentView;
     secondaryView: SecondaryView;
@@ -196,6 +198,8 @@ export class SplitViewController extends BaseController {
     });
     this._sideBarShown = false;
     this._canShowSidebar = true;
+    this._primaryController = props.items[0].controller;
+    this._secondaryController = props.items[1].controller;
     this.cviews = {} as {
       primaryView: ContentView;
       secondaryView: SecondaryView;
@@ -322,6 +326,13 @@ export class SplitViewController extends BaseController {
       this._hideSideBar();
     }
     this._sideBarShown = bool;
+    if (bool) {
+      this._primaryController.disappear();
+      this._secondaryController.appear();
+    } else {
+      this._primaryController.appear();
+      this._secondaryController.disappear();
+    }
   }
 
   get canShowSidebar() {

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,31 @@ 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);
+        },
+        didDisappear: () => {
+          this._props.items[this.index].controller.disappear();
+          this._events.didDisappear?.(this);
+        }
+      }
     });
     this._props = {
       items: props.items,
       index: props.index || 0
     };
+    this._events = events;
     this.cviews = {} as {
       tabbar: TabBar;
       pageContentView: ContentView;
@@ -61,7 +80,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/splitview-controller.js

@@ -126,10 +126,10 @@ class MaskView extends base_1.Base {
  *
  * 此控制器加载后，会禁用原本的ScreenEdgePanGesture，此控制器应该作为根控制器使用
  *
- * ## Props
+ * @param options.props.items: { controller: Controller, bgcolor: UIColor }[] 其中第一个放在主视图上, 第二个放在次视图上
  *
- * - 只写 items: { controller: Controller, bgcolor: UIColor }[] 其中第一个放在主视图上, 第二个放在次视图上
- * - 读写 sideBarShown: boolean = false 侧栏是否显示
+ * @property sideBarShown: boolean = false 侧栏是否显示
+ * @property canShowSidebar: boolean = true 是否启动显示侧栏的动作（若为false，依然可以用sideBarShown来控制侧栏的显示）
  */
 class SplitViewController extends base_controller_1.BaseController {
     constructor({ props, layout, events }) {
@@ -141,6 +141,8 @@ class SplitViewController extends base_controller_1.BaseController {
         });
         this._sideBarShown = false;
         this._canShowSidebar = true;
+        this._primaryController = props.items[0].controller;
+        this._secondaryController = props.items[1].controller;
         this.cviews = {};
         this.cviews.secondaryView = new SecondaryView({
             props: {
@@ -250,6 +252,14 @@ class SplitViewController extends base_controller_1.BaseController {
             this._hideSideBar();
         }
         this._sideBarShown = bool;
+        if (bool) {
+            this._primaryController.disappear();
+            this._secondaryController.appear();
+        }
+        else {
+            this._primaryController.appear();
+            this._secondaryController.disappear();
+        }
     }
     get canShowSidebar() {
         return this._canShowSidebar;

package/dist/controller/tabbar-controller.js

@@ -25,12 +25,23 @@ 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);
+                }, didDisappear: () => {
+                    var _a, _b;
+                    this._props.items[this.index].controller.disappear();
+                    (_b = (_a = this._events).didDisappear) === 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 +49,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/splitview-controller.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const splitview_controller_1 = require("../controller/splitview-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");
+                }
+            }
+        }),
+        bgcolor: $color("red")
+    }, {
+        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");
+                }
+            }
+        }),
+        bgcolor: $color("green")
+    }];
+const pageViewerController = new splitview_controller_1.SplitViewController({
+    props: {
+        items
+    },
+    events: {}
+});
+pageViewerController.uirender();

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.11",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",

package/test/splitview-controller.ts

@@ -0,0 +1,41 @@
+import { SplitViewController } from "../controller/splitview-controller";
+import { BaseController } from "../controller/base-controller";
+
+const items = [{
+  controller: new BaseController({
+    props: { bgcolor: $color("red") },
+    events: {
+      didAppear: () => {
+        console.log("Page 1 did appear");
+      },
+      didDisappear: () => {
+        console.log("Page 1 did disappear");
+      }
+    }
+  }),
+  bgcolor: $color("red")
+}, {
+  controller: new BaseController({ 
+    props: { bgcolor: $color("yellow") },
+    events: {
+      didAppear: () => {
+        console.log("Page 2 did appear");
+      },
+      didDisappear: () => {
+        console.log("Page 2 did disappear");
+      }
+    }
+  }),
+  bgcolor: $color("green")
+}]
+
+const pageViewerController = new SplitViewController({
+  props: {
+    items
+  },
+  events: {
+
+  }
+});
+
+pageViewerController.uirender();

package/test/tabbar-controller.ts

@@ -0,0 +1,46 @@
+import { TabBarController } from "../controller/tabbar-controller";
+import { BaseController } from "../controller/base-controller";
+
+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({});