jsbox-cview 1.3.4 → 1.4.0

package/dist/controller/base-controller.js

@@ -1,4 +1,40 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseController = exports.ControllerRootView = void 0;
+const base_1 = require("../components/base");
+const single_views_1 = require("../components/single-views");
+const cvid_1 = require("../utils/cvid");
+const controller_router_1 = require("./controller-router");
+/**
+ * status
+ *   - created = 0 被创建，未被加载
+ *   - loaded = 1 被加载，显示状态未知
+ *   - appeared= 2 处于可显示状态
+ *   - disappeared = 3 处于不显示状态
+ *   - removed = 4 根视图被移除
+ * 其中只有 2 和 3 可以相互转化，其他不可以
+ */
+const controllerStatus = {
+    created: 0,
+    loaded: 1,
+    appeared: 2,
+    disappeared: 3,
+    removed: 4
+};
+class ControllerRootView extends single_views_1.ContentView {
+    constructor({ props, layout, events }) {
+        super({ props, layout, events });
+    }
+    set views(views) {
+        const _views = views.map(v => {
+            if (v instanceof base_1.Base)
+                return v.definition;
+            return v;
+        });
+        this._views = _views;
+    }
+}
+exports.ControllerRootView = ControllerRootView;
 /**
  * # CView Base Controller
  *
@@ -58,42 +94,6 @@
  *
  * - rootView 可以直接通过 rootView.views 设置其_views 属性，其中元素可以为 view 定义也可以为 cview
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseController = exports.ControllerRootView = void 0;
-const base_1 = require("../components/base");
-const single_views_1 = require("../components/single-views");
-const cvid_1 = require("../utils/cvid");
-const controller_router_1 = require("./controller-router");
-/**
- * status
- *   - created = 0 被创建，未被加载
- *   - loaded = 1 被加载，显示状态未知
- *   - appeared= 2 处于可显示状态
- *   - disappeared = 3 处于不显示状态
- *   - removed = 4 根视图被移除
- * 其中只有 2 和 3 可以相互转化，其他不可以
- */
-const controllerStatus = {
-    created: 0,
-    loaded: 1,
-    appeared: 2,
-    disappeared: 3,
-    removed: 4
-};
-class ControllerRootView extends single_views_1.ContentView {
-    constructor({ props, layout, events }) {
-        super({ props, layout, events });
-    }
-    set views(views) {
-        const _views = views.map(v => {
-            if (v instanceof base_1.Base)
-                return v.definition;
-            return v;
-        });
-        this._views = _views;
-    }
-}
-exports.ControllerRootView = ControllerRootView;
 class BaseController {
     constructor({ props, layout = $layout.fill, events = {} } = {}) {
         this._props = props || {};

package/dist/controller/controller-router.js

@@ -1,4 +1,6 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.router = void 0;
 /**
  * 控制器的路由器，用于管理控制器的集合和操作。
  *
@@ -13,8 +15,6 @@
  * - `get(id: string)`：根据控制器的ID获取控制器。
  *
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.router = void 0;
 class Router {
     constructor() {
         this._set = new Set();

package/dist/controller/pageviewer-controller.js

@@ -1,4 +1,10 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageViewerController = void 0;
+const base_controller_1 = require("./base-controller");
+const pageviewer_1 = require("../components/pageviewer");
+const pageviewer_titlebar_1 = require("../components/pageviewer-titlebar");
+const custom_navigation_bar_1 = require("../components/custom-navigation-bar");
 /**
  * # CView PageViewer Controller
  *
@@ -9,18 +15,14 @@
  * - items: { controller: Controller, title: string }[]
  * - navBarProps: {} 可用于 navBar 的其他属性，不包括 title 和 titleView
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageViewerController = void 0;
-const base_controller_1 = require("./base-controller");
-const pageviewer_1 = require("../components/pageviewer");
-const pageviewer_titlebar_1 = require("../components/pageviewer-titlebar");
-const custom_navigation_bar_1 = require("../components/custom-navigation-bar");
 class PageViewerController extends base_controller_1.BaseController {
     constructor({ props, layout, events = {} }) {
-        super({ props: {
+        super({
+            props: {
                 id: props.id,
                 bgcolor: props.bgcolor
-            }, layout, events });
+            }, layout, events
+        });
         this._props = props;
         this.cviews = {};
         this.cviews.pageviewer = new pageviewer_1.PageViewer({

package/dist/controller/presented-page-controller.js

@@ -1,4 +1,8 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PresentedPageController = void 0;
+const base_controller_1 = require("./base-controller");
+const sheet_1 = require("../components/sheet");
 /** # CView PresentedPageController
  *
  * ## Props
@@ -16,15 +20,13 @@
  * ## 布局
  * 此控制器的 layout 必定为 `$layout.fill`，无需自行设定
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PresentedPageController = void 0;
-const base_controller_1 = require("./base-controller");
-const sheet_1 = require("../components/sheet");
 class PresentedPageController extends base_controller_1.BaseController {
     constructor({ props, layout, events } = {}) {
-        super({ props: {
+        super({
+            props: {
                 id: props === null || props === void 0 ? void 0 : props.id
-            }, layout, events });
+            }, layout, events
+        });
         this._sheet = new sheet_1.Sheet({
             presentMode: (props === null || props === void 0 ? void 0 : props.presentMode) || 1,
             animated: (props === null || props === void 0 ? void 0 : props.animated) || true,

package/dist/controller/splitview-controller.js

@@ -1,15 +1,4 @@
 "use strict";
-/** # CView SplitView Controller
- *
- * 实现左右分栏布局的控制器, 本身不提供除了分割线以外的视觉效果
- *
- * 此控制器加载后，会禁用原本的ScreenEdgePanGesture，此控制器应该作为根控制器使用
- *
- * ## Props
- *
- * - 只写 items: { controller: Controller, bgcolor: UIColor }[] 其中第一个放在主视图上, 第二个放在次视图上
- * - 读写 sideBarShown: boolean = false 侧栏是否显示
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitViewController = void 0;
 const base_controller_1 = require("./base-controller");
@@ -129,6 +118,17 @@ class MaskView extends base_1.Base {
         this.view.hidden = true;
     }
 }
+/** # CView SplitView Controller
+ *
+ * 实现左右分栏布局的控制器, 本身不提供除了分割线以外的视觉效果
+ *
+ * 此控制器加载后，会禁用原本的ScreenEdgePanGesture，此控制器应该作为根控制器使用
+ *
+ * ## Props
+ *
+ * - 只写 items: { controller: Controller, bgcolor: UIColor }[] 其中第一个放在主视图上, 第二个放在次视图上
+ * - 读写 sideBarShown: boolean = false 侧栏是否显示
+ */
 class SplitViewController extends base_controller_1.BaseController {
     constructor({ props, layout, events }) {
         super({
@@ -138,6 +138,7 @@ class SplitViewController extends base_controller_1.BaseController {
             }, layout, events
         });
         this._sideBarShown = false;
+        this._canShowSidebar = true;
         this.cviews = {};
         this.cviews.secondaryView = new SecondaryView({
             props: {
@@ -172,7 +173,7 @@ class SplitViewController extends base_controller_1.BaseController {
             ]
         });
         this._screenEdgePanGestureObject = this._defineGestureObject(() => {
-            if (!this.sideBarShown)
+            if (!this.sideBarShown && this._canShowSidebar)
                 this.sideBarShown = true;
         });
         this.rootView.views = [this.cviews.secondaryView, this.cviews.primaryView];
@@ -248,5 +249,11 @@ class SplitViewController extends base_controller_1.BaseController {
         }
         this._sideBarShown = bool;
     }
+    get canShowSidebar() {
+        return this._canShowSidebar;
+    }
+    set canShowSidebar(bool) {
+        this._canShowSidebar = bool;
+    }
 }
 exports.SplitViewController = SplitViewController;

package/dist/controller/tabbar-controller.js

@@ -1,6 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBarController = void 0;
+const base_controller_1 = require("./base-controller");
+const single_views_1 = require("../components/single-views");
+const tabbar_1 = require("../components/tabbar");
 /**
  * # CView TabBar Controller
  *
@@ -16,9 +19,6 @@ exports.TabBarController = void 0;
  *           controller: Controller}[]
  * - index: number = 0
  */
-const base_controller_1 = require("./base-controller");
-const single_views_1 = require("../components/single-views");
-const tabbar_1 = require("../components/tabbar");
 class TabBarController extends base_controller_1.BaseController {
     constructor({ props, layout, events = {} }) {
         super({

package/dist/index.js

@@ -14,13 +14,13 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components/artificial-flowlayout"), exports);
 __exportStar(require("./components/base"), exports);
 __exportStar(require("./components/custom-navigation-bar"), exports);
 __exportStar(require("./components/dynamic-itemsize-matrix"), exports);
 __exportStar(require("./components/dynamic-preference-listview"), exports);
 __exportStar(require("./components/dynamic-rowheight-list"), exports);
 __exportStar(require("./components/enhanced-imageview"), exports);
+__exportStar(require("./components/flowlayout"), exports);
 __exportStar(require("./components/image-pager"), exports);
 __exportStar(require("./components/page-control"), exports);
 __exportStar(require("./components/pageviewer-titlebar"), exports);
@@ -52,7 +52,6 @@ __exportStar(require("./components/dialogs/dialog-sheet"), exports);
 __exportStar(require("./components/dialogs/form-dialog"), exports);
 __exportStar(require("./components/dialogs/list-dialog"), exports);
 __exportStar(require("./components/dialogs/text-dialog"), exports);
-__exportStar(require("./components/spinners/loading-double-rings"), exports);
 __exportStar(require("./components/spinners/loading-dual-ring"), exports);
 __exportStar(require("./components/spinners/loading-wedges"), exports);
 __exportStar(require("./components/spinners/spinner-androidstyle"), exports);

package/dist/test/flowlayout.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const flowlayout_1 = require("../components/flowlayout");
+const single_views_1 = require("../components/single-views");
+class FlowlayoutItem extends single_views_1.Label {
+    constructor(text) {
+        super({
+            props: {
+                text: text,
+                borderWidth: 1,
+            },
+            layout: $layout.fill
+        });
+        this._text = text;
+    }
+    itemWidth() {
+        return this._text.length * 10;
+    }
+}
+const flowlayout = new flowlayout_1.Flowlayout({
+    props: {
+        items: [new FlowlayoutItem('Hello'), new FlowlayoutItem('World'), new FlowlayoutItem('Flowlayout')],
+        spacing: 10,
+        itemHeight: 30,
+        fixedRows: 2,
+        fixedHeight: true,
+        menu: {
+            items: [{
+                    symbol: "plus",
+                    handler: sender => console.log("here")
+                }]
+        }
+    },
+    layout: (make, view) => {
+        make.left.right.inset(10);
+        make.top.inset(100);
+        make.height.equalTo(70);
+    },
+    events: {
+        didSelect: (sender, index, item) => {
+            $ui.alert(item.view.text);
+        }
+    }
+});
+$ui.render({
+    props: {
+        navButtons: [
+            {
+                symbol: "plus",
+                handler: () => {
+                    flowlayout.items = [
+                        new FlowlayoutItem('Hello'),
+                        new FlowlayoutItem('World'),
+                        new FlowlayoutItem('Flowlayout'),
+                        new FlowlayoutItem('New Item'),
+                        new FlowlayoutItem('Hello'),
+                        new FlowlayoutItem('World'),
+                        new FlowlayoutItem('FlowlayoutFlowlayoutFlowlayout'),
+                        new FlowlayoutItem('New Item'),
+                        new FlowlayoutItem('Hello'),
+                        new FlowlayoutItem('World'),
+                        new FlowlayoutItem('FlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayout'),
+                        new FlowlayoutItem('New Item'),
+                        new FlowlayoutItem('Hello'),
+                        new FlowlayoutItem('World'),
+                        new FlowlayoutItem('FlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayout'),
+                        new FlowlayoutItem('New Item'),
+                    ];
+                }
+            }
+        ],
+    },
+    views: [flowlayout.definition]
+});

package/index.ts

@@ -1,10 +1,10 @@
-export * from './components/artificial-flowlayout';
 export * from './components/base';
 export * from './components/custom-navigation-bar';
 export * from './components/dynamic-itemsize-matrix';
 export * from './components/dynamic-preference-listview';
 export * from './components/dynamic-rowheight-list';
 export * from './components/enhanced-imageview';
+export * from './components/flowlayout';
 export * from './components/image-pager';
 export * from './components/page-control';
 export * from './components/pageviewer-titlebar';
@@ -36,7 +36,6 @@ export * from './components/dialogs/dialog-sheet';
 export * from './components/dialogs/form-dialog';
 export * from './components/dialogs/list-dialog';
 export * from './components/dialogs/text-dialog';
-export * from './components/spinners/loading-double-rings';
 export * from './components/spinners/loading-dual-ring';
 export * from './components/spinners/loading-wedges';
 export * from './components/spinners/spinner-androidstyle';

package/package.json

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

package/test/flowlayout.ts

@@ -0,0 +1,77 @@
+import { Flowlayout } from '../components/flowlayout';
+import { Label } from '../components/single-views';
+
+class FlowlayoutItem extends Label {
+  private _text: string;
+  constructor(text: string) {
+    super({
+      props: {
+        text: text,
+        borderWidth: 1,
+      },
+      layout: $layout.fill
+    });
+    this._text = text;
+  }
+
+  itemWidth() {
+    return this._text.length * 10;
+  }
+}
+
+const flowlayout = new Flowlayout({
+  props: {
+    items: [new FlowlayoutItem('Hello'), new FlowlayoutItem('World'), new FlowlayoutItem('Flowlayout')],
+    spacing: 10,
+    itemHeight: 30,
+    fixedRows: 2,
+    fixedHeight: true,
+    menu: {
+      items: [{
+        symbol: "plus",
+        handler: sender => console.log("here")
+      }]
+    }
+  },
+  layout: (make, view) => {
+    make.left.right.inset(10);
+    make.top.inset(100);
+    make.height.equalTo(70);
+  },
+  events: {
+    didSelect: (sender, index, item) =>{
+      $ui.alert(item.view.text);
+    }
+  }
+});
+
+$ui.render({
+  props: {
+    navButtons:[
+      {
+        symbol: "plus",
+        handler: () => {
+          flowlayout.items = [
+            new FlowlayoutItem('Hello'), 
+            new FlowlayoutItem('World'), 
+            new FlowlayoutItem('Flowlayout'), 
+            new FlowlayoutItem('New Item'),
+            new FlowlayoutItem('Hello'), 
+            new FlowlayoutItem('World'), 
+            new FlowlayoutItem('FlowlayoutFlowlayoutFlowlayout'), 
+            new FlowlayoutItem('New Item'),
+            new FlowlayoutItem('Hello'), 
+            new FlowlayoutItem('World'), 
+            new FlowlayoutItem('FlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayout'), 
+            new FlowlayoutItem('New Item'),
+            new FlowlayoutItem('Hello'), 
+            new FlowlayoutItem('World'), 
+            new FlowlayoutItem('FlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayoutFlowlayout'), 
+            new FlowlayoutItem('New Item'),
+          ];
+        }
+      }
+    ],
+  },
+  views: [flowlayout.definition]
+});