jsbox-cview 1.0.0 → 1.1.0

package/dist/controller/pageviewer-controller.js

@@ -0,0 +1,63 @@
+"use strict";
+/**
+ * # CView PageViewer Controller
+ *
+ * 一个可以左右滑动翻页的控制器。
+ *
+ * Props:
+ *
+ * - 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: {
+                id: props.id,
+                bgcolor: props.bgcolor
+            }, layout, events });
+        this._props = props;
+        this.cviews = {};
+        this.cviews.pageviewer = new pageviewer_1.PageViewer({
+            props: {
+                page: this._props.index,
+                cviews: this._props.items.map(n => n.controller.rootView)
+            },
+            layout: (make, view) => {
+                make.left.right.bottom.inset(0);
+                make.top.equalTo(view.prev.bottom);
+            },
+            events: {
+                floatPageChanged: (cview, floatPage) => (this.cviews.titlebar.floatedIndex = floatPage)
+            }
+        });
+        this.cviews.titlebar = new pageviewer_titlebar_1.PageViewerTitleBar({
+            props: {
+                items: this._props.items.map(n => n.title),
+                index: this._props.index
+            },
+            layout: $layout.fill,
+            events: {
+                changed: (cview, index) => this.cviews.pageviewer.scrollToPage(index)
+            }
+        });
+        this.cviews.navbar = new custom_navigation_bar_1.CustomNavigationBar({
+            props: Object.assign(Object.assign({}, this._props.navBarProps), { titleView: this.cviews.titlebar })
+        });
+        this.rootView.views = [this.cviews.navbar, this.cviews.pageviewer];
+    }
+    get index() {
+        return this._props.index || 0;
+    }
+    set index(num) {
+        this.cviews.titlebar.index = num;
+        this.cviews.pageviewer.page = num;
+        this._props.index = num;
+    }
+}
+exports.PageViewerController = PageViewerController;

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

@@ -0,0 +1,48 @@
+"use strict";
+/** # CView PresentedPageController
+ *
+ * ## Props
+ *
+ * - presentMode?: number = 1
+ * - animated?: boolean = true
+ * - interactiveDismissalDisabled?: boolean = false
+ * - bgcolor?: UIColor = $color("secondarySurface")
+ *
+ * ## 专用方法
+ *
+ * - present() 在 `sheet.present()` 之后会先后执行 `load()` 和 `appear()`
+ * - dismiss()
+ *
+ * ## 布局
+ * 此控制器的 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: {
+                id: props === null || props === void 0 ? void 0 : props.id
+            }, 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,
+            interactiveDismissalDisabled: (props === null || props === void 0 ? void 0 : props.interactiveDismissalDisabled) || false,
+            bgcolor: (props === null || props === void 0 ? void 0 : props.bgcolor) || $color("secondarySurface"),
+            cview: this.rootView,
+            dismissalHandler: () => this.remove()
+        });
+    }
+    present() {
+        if (this._sheet)
+            this._sheet.present();
+        this.load();
+        this.appear();
+    }
+    dismiss() {
+        if (this._sheet)
+            this._sheet.dismiss();
+    }
+}
+exports.PresentedPageController = PresentedPageController;

package/dist/controller/splitview-controller.js

@@ -0,0 +1,252 @@
+"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");
+const base_1 = require("../components/base");
+const single_views_1 = require("../components/single-views");
+const cvid_1 = require("../utils/cvid");
+class SecondaryView extends base_1.Base {
+    constructor({ props, layout, views = [] }) {
+        super();
+        this._props = Object.assign({ bgcolor: $color("groupedBackground", "secondarySurface") }, props);
+        this._layouts = {
+            hidden: (make, view) => {
+                make.top.bottom.inset(0);
+                make.right.equalTo(view.super.left);
+                make.width.greaterThanOrEqualTo(250);
+                make.width.equalTo(view.super).dividedBy(2.5).priority(999);
+            },
+            shown: (make, view) => {
+                make.top.bottom.inset(0);
+                make.left.equalTo(view.super.left);
+                make.width.greaterThanOrEqualTo(250);
+                make.width.equalTo(view.super).dividedBy(2.5).priority(999);
+            }
+        };
+        this.line = new single_views_1.ContentView({
+            props: {
+                bgcolor: $color("separatorColor")
+            },
+            layout: (make, view) => {
+                make.top.bottom.right.inset(0);
+                make.width.equalTo(0.5);
+            }
+        });
+        this._defineView = () => {
+            return {
+                type: "view",
+                props: Object.assign(Object.assign({}, this._props), { id: this.id }),
+                layout,
+                views: [...views, this.line.definition]
+            };
+        };
+    }
+    add(view) {
+        super.add(view);
+        this.line.view.moveToFront();
+    }
+    show() {
+        this.view.remakeLayout(this._layouts.shown);
+        $ui.animate({
+            duration: 0.3,
+            animation: () => this.view.relayout()
+        });
+    }
+    hide() {
+        this.view.remakeLayout(this._layouts.hidden);
+        $ui.animate({
+            duration: 0.3,
+            animation: () => this.view.relayout()
+        });
+    }
+}
+class MaskView extends base_1.Base {
+    constructor({ props, layout = $layout.fill }) {
+        super();
+        this._props = Object.assign({ bgcolor: $color("clear") }, props);
+        this._shown = false;
+        this._dismissEvent = () => {
+            if (!this._shown)
+                return;
+            if (this._props.dismissHandler)
+                this._props.dismissHandler();
+        };
+        this._defineView = () => {
+            return {
+                type: "view",
+                props: Object.assign(Object.assign({}, this._props), { hidden: true, id: this.id }),
+                layout,
+                events: {
+                    ready: sender => this._addGesture(sender, this._dismissEvent)
+                }
+            };
+        };
+    }
+    _addGesture(view, event) {
+        const objectId = cvid_1.cvid.newId;
+        $define({
+            type: objectId + ": NSObject",
+            events: {
+                swipeEvent: event,
+                tapEvent: event
+            }
+        });
+        const object = $objc(objectId).$new();
+        $objc_retain(object); // 此步骤是必须的，否则将很快被系统释放掉，但是必须在关闭时手动释放掉，否则再次启动可能会有问题
+        this._gestureObject = object;
+        const swipeGestureRecognizer = $objc("UISwipeGestureRecognizer")
+            .$alloc()
+            .$initWithTarget_action(object, "swipeEvent");
+        swipeGestureRecognizer.$setDirection(1 << 1); // 从右向左划动
+        const tapGestureRecognizer = $objc("UITapGestureRecognizer")
+            .$alloc()
+            .$initWithTarget_action(object, "tapEvent");
+        view.ocValue().$addGestureRecognizer(tapGestureRecognizer);
+        view.ocValue().$addGestureRecognizer(swipeGestureRecognizer);
+    }
+    releaseGestureObject() {
+        if (this._gestureObject)
+            $objc_release(this._gestureObject);
+    }
+    show() {
+        this._shown = true;
+        this.view.moveToFront();
+        this.view.hidden = false;
+    }
+    hide() {
+        this._shown = false;
+        this.view.hidden = true;
+    }
+}
+class SplitViewController extends base_controller_1.BaseController {
+    constructor({ props, layout, events }) {
+        super({
+            props: {
+                id: props.id,
+                bgcolor: props.bgcolor
+            }, layout, events
+        });
+        this._sideBarShown = false;
+        this.cviews = {};
+        this.cviews.secondaryView = new SecondaryView({
+            props: {
+                bgcolor: props.items[1].bgcolor || $color("clear")
+            },
+            layout: (make, view) => {
+                make.top.bottom.inset(0);
+                make.right.equalTo(view.super.left);
+                make.width.equalTo(view.super).dividedBy(3);
+            },
+            views: [
+                props.items[1].controller.rootView.definition
+            ]
+        });
+        this.cviews.maskView = new MaskView({
+            props: {
+                dismissHandler: () => (this.sideBarShown = false)
+            }
+        });
+        this.cviews.primaryView = new single_views_1.ContentView({
+            props: {
+                bgcolor: props.items[0].bgcolor || $color("clear")
+            },
+            layout: (make, view) => {
+                make.top.bottom.inset(0);
+                make.left.equalTo(view.prev.right);
+                make.width.equalTo(view.super);
+            },
+            views: [
+                props.items[0].controller.rootView.definition,
+                this.cviews.maskView.definition
+            ]
+        });
+        this._screenEdgePanGestureObject = this._defineGestureObject(() => {
+            if (!this.sideBarShown)
+                this.sideBarShown = true;
+        });
+        this.rootView.views = [this.cviews.secondaryView, this.cviews.primaryView];
+    }
+    load() {
+        super.load();
+        this._renewScreenEdgePanGesture();
+    }
+    remove() {
+        $objc_release(this._screenEdgePanGestureObject);
+        this.cviews.maskView.releaseGestureObject();
+        super.remove();
+    }
+    uirender() {
+        const props = {
+            navBarHidden: true,
+            statusBarStyle: 0
+        };
+        super.uirender(props);
+    }
+    uipush() {
+        const props = {
+            navBarHidden: true,
+            statusBarStyle: 0
+        };
+        super.uipush(props);
+    }
+    _defineGestureObject(event) {
+        const objectId = cvid_1.cvid.newId;
+        $define({
+            type: objectId + ": NSObject",
+            events: {
+                screenEdgePanEvent: event
+            }
+        });
+        const object = $objc(objectId).$new();
+        $objc_retain(object);
+        return object;
+    }
+    _renewScreenEdgePanGesture() {
+        const UIScreenEdgePanGestureRecognizer = $ui.controller.view
+            .ocValue()
+            .$gestureRecognizers()
+            .$firstObject();
+        UIScreenEdgePanGestureRecognizer.invoke("removeTarget:action:", null, null);
+        const NewUIScreenEdgePanGestureRecognizer = $objc("UIScreenEdgePanGestureRecognizer")
+            .$alloc()
+            .$initWithTarget_action(this._screenEdgePanGestureObject, "screenEdgePanEvent");
+        NewUIScreenEdgePanGestureRecognizer.$setEdges(1 << 1);
+        this.rootView.view
+            .ocValue()
+            .$addGestureRecognizer(NewUIScreenEdgePanGestureRecognizer);
+    }
+    _showSideBar() {
+        this.cviews.secondaryView.show();
+        this.cviews.maskView.show();
+    }
+    _hideSideBar() {
+        this.cviews.secondaryView.hide();
+        this.cviews.maskView.hide();
+    }
+    get sideBarShown() {
+        return this._sideBarShown;
+    }
+    set sideBarShown(bool) {
+        if (this._sideBarShown === bool)
+            return;
+        if (bool) {
+            this._showSideBar();
+        }
+        else {
+            this._hideSideBar();
+        }
+        this._sideBarShown = bool;
+    }
+}
+exports.SplitViewController = SplitViewController;

package/dist/controller/tabbar-controller.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabBarController = void 0;
+/**
+ * # CView TabBar Controller
+ *
+ * TabBarController 是一个 PagingController
+ *
+ * ## 属性
+ *
+ * - items: {title?: string,
+ *           symbol?: string,
+ *           image?: UIImage,
+ *           tintColor?: UIColor,
+ *           bgcolor?: UIColor,
+ *           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({
+            props: {
+                id: props.id,
+                bgcolor: props.bgcolor
+            }, layout, events
+        });
+        this._props = {
+            items: props.items,
+            index: props.index || 0
+        };
+        this.cviews = {};
+        this.cviews.tabbar = new tabbar_1.TabBar({
+            props: {
+                items: this._props.items,
+                index: this._props.index
+            },
+            events: {
+                changed: (cview, index) => (this.index = index)
+            }
+        });
+        this.pages = this._props.items.map((n, i) => {
+            return new single_views_1.ContentView({
+                props: {
+                    bgcolor: n.bgcolor || this._props.bgcolor,
+                    hidden: i !== this._props.index
+                },
+                layout: $layout.fill,
+                views: [n.controller.rootView.definition]
+            });
+        });
+        this.cviews.pageContentView = new single_views_1.ContentView({
+            props: {
+                bgcolor: $color("clear")
+            },
+            layout: $layout.fill,
+            views: this.pages.map(n => n.definition)
+        });
+        this.rootView.views = [this.cviews.pageContentView, this.cviews.tabbar];
+    }
+    set index(num) {
+        this.cviews.tabbar.index = num;
+        this.pages.forEach((n, i) => {
+            n.view.hidden = i !== num;
+        });
+        this._props.index = num;
+    }
+    get index() {
+        return this._props.index || 0;
+    }
+}
+exports.TabBarController = TabBarController;

package/dist/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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/image-pager"), exports);
+__exportStar(require("./components/page-control"), exports);
+__exportStar(require("./components/pageviewer-titlebar"), exports);
+__exportStar(require("./components/pageviewer"), exports);
+__exportStar(require("./components/rotating-view"), exports);
+__exportStar(require("./components/searchbar"), exports);
+__exportStar(require("./components/sheet"), exports);
+__exportStar(require("./components/single-views"), exports);
+__exportStar(require("./components/static-preference-listview"), exports);
+__exportStar(require("./components/symbol-button"), exports);
+__exportStar(require("./components/tabbar"), exports);
+__exportStar(require("./controller/base-controller"), exports);
+__exportStar(require("./controller/controller-router"), exports);
+__exportStar(require("./controller/pageviewer-controller"), exports);
+__exportStar(require("./controller/presented-page-controller"), exports);
+__exportStar(require("./controller/splitview-controller"), exports);
+__exportStar(require("./controller/tabbar-controller"), exports);
+__exportStar(require("./utils/colors"), exports);
+__exportStar(require("./utils/cvid"), exports);
+__exportStar(require("./utils/l10n"), exports);
+__exportStar(require("./utils/path"), exports);
+__exportStar(require("./utils/rect"), exports);
+__exportStar(require("./utils/uitools"), exports);
+__exportStar(require("./components/alert/input-alert"), exports);
+__exportStar(require("./components/alert/login-alert"), exports);
+__exportStar(require("./components/alert/plain-alert"), exports);
+__exportStar(require("./components/alert/uialert"), exports);
+__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.js

@@ -0,0 +1 @@
+"use strict";

package/dist/utils/colors.js

@@ -0,0 +1,15 @@
+"use strict";
+// 自定义的语义化颜色
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sectionHeaderColor = exports.gold = exports.searchBarBgcolor = exports.searchBarSymbolColor = exports.footBarDefaultSegmentColor = exports.sheetNavBarColor = void 0;
+exports.sheetNavBarColor = $color("tint", $color("tertiarySurface"));
+exports.footBarDefaultSegmentColor = $color("#b7bec6", "#6e6e6e");
+//fixedSecondarySurface: $color("#f2f2f7", $color("secondarySurface")), // 让 secondarySurface 在light mode下可以和纯白区分
+exports.searchBarSymbolColor = $color("#777", "#aaa");
+exports.searchBarBgcolor = $color("backgroundColor", "secondarySurface");
+exports.gold = $color("#ffd700");
+exports.sectionHeaderColor = $color({
+    light: "#666666",
+    dark: "#acacac",
+    black: "#ababab"
+});

package/dist/utils/cvid.js

@@ -0,0 +1,28 @@
+"use strict";
+// cvid 用于生成唯一的 id
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cvid = void 0;
+/**
+ * 生成指定长度的随机字符串
+ */
+function makeid(length) {
+    let result = "";
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    var charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}
+class CVID {
+    constructor({ prefix = "id_", startIndex = 0 } = {}) {
+        this._prefix = prefix;
+        this._index = startIndex;
+    }
+    get newId() {
+        const id = this._prefix + this._index;
+        this._index++;
+        return id;
+    }
+}
+exports.cvid = new CVID({ prefix: makeid(8) + "_" });

package/dist/utils/l10n.js

@@ -0,0 +1,44 @@
+"use strict";
+// 用于自定义的国际化支持
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.l10n = void 0;
+const language = $device.info.language;
+const strings = {
+    "zh-Hans": {
+        "DUPLICATE_VALUES": "取值重复",
+        "DONE": "完成",
+        "ADD": "添加",
+        "SEARCH": "搜索",
+        "PREVIOUS": "上一步",
+        "NEXT": "下一步",
+        "REMOVE": "移除",
+        "EDIT": "编辑",
+        "FINISHED": "完成",
+        "INVALID_VALUES": "取值不合法",
+        "CANCEL": "取消",
+        "CLIPBOARD": "剪贴板",
+        "OK": "好的"
+    },
+    "en": {
+        "DUPLICATE_VALUES": "Duplicate values",
+        "DONE": "Done",
+        "ADD": "Add",
+        "SEARCH": "Search",
+        "PREVIOUS": "Previous",
+        "NEXT": "Next",
+        "REMOVE": "Remove",
+        "EDIT": "Edit",
+        "FINISHED": "Finished",
+        "INVALID_VALUES": "Invalid values",
+        "CANCEL": "Cancel",
+        "CLIPBOARD": "Clipboard",
+        "OK": "OK"
+    }
+};
+function l10n(key) {
+    if (!strings[language])
+        return key;
+    const value = strings[language][key];
+    return value || key;
+}
+exports.l10n = l10n;