jsbox-cview 1.0.0 → 1.1.0

package/dist/components/custom-navigation-bar.js

@@ -0,0 +1,519 @@
+"use strict";
+/**
+ * # CView Custom NavigationBar
+ *
+ * 仿制 navBar
+ *
+ * ## features:
+ *
+ * - 拥有隐藏、最小化、普通、扩展四种布局方式
+ *   - 隐藏: 什么都不显示
+ *   - 最小化: safeAreaHeight 为 25, 只显示 titleView, 若用 title, font 为\$font(14)
+ *   - 普通: safeAreaHeight 为 50, 显示 titleView, leftBarButtonItems 或 popButton, rightBarButtonItems, 若用 title, font 为\$font("bold", 17)
+ *   - 扩展: safeAreaHeight 为 100, 除上面的之外, 再显示一个 toolView
+ * - 自动适应全面屏和非全面屏
+ *
+ * ## Arguments
+ *
+ * props:
+ *
+ * - 读写 style: number 0, 1, 2, 3，指定布局
+ * - 读写 title: string 但必须使用此种方案才可以在生成后写入，自动创建 Label 作为 titleView
+ * - titleView: cview 自定义的 titleView
+ * - popButtonEnabled: boolean 返回上一级的按钮，若为 true，则 leftBarButtonItems 忽略
+ * - popButtonTitle: string 返回上一级的按钮标题
+ * - popToRootEnabled: boolean popButton 是否可以长按返回到顶级
+ * - leftBarButtonItems: cview[]
+ *   | {symbol: string, handler: () => void, tintColor?: UIColor}[]
+ *   | {title: string, handler: () => void, tintColor?: UIColor}[]
+ *   | {image: UIImage, handler: () => void, tintColor?: UIColor}[]
+ *   如果用的是 cview，其布局将被重新指定，即不需要（也不能）指定布局。可以通过 cview.width 来指定应有的宽度，如果没有此属性，则宽度为 50
+ *   建议最多放两个
+ * - rightBarButtonItems 定义同上，建议最多放两个
+ * - toolView: cview 在 expanded 模式下才会显现的
+ * - tintColor: UIColor 这将作用于 title, popButton, 自动创建的 barButton
+ * - bgcolor: UIColor 如不设置，则自动使用 blur(style 10)，如果设置则没有 blur 效果
+ *
+ * events:
+ *
+ * - hidden: cview => void  hide()时执行
+ * - minimized: cview => void  minimize()时执行
+ * - restored: cview => void  restore()时执行
+ * - expanded: cview => void  expand()时执行
+ * - popHandler: cview => void  返回上一级时执行，需要popButtonEnabled
+ * - popToRootHandler: cview => void  返回顶级时执行，需要popButtonEnabled和popToRootEnabled
+ * - titleTapped: cview => void 点击标题时执行，需要使用title
+ *
+ * methods:
+ *
+ * - hide() 隐藏布局
+ * - minimize() 最小化布局
+ * - restore() 普通布局
+ * - expand() 扩展布局
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomNavigationBar = void 0;
+const base_1 = require("./base");
+const single_views_1 = require("./single-views");
+const symbol_button_1 = require("./symbol-button");
+const uitools_1 = require("../utils/uitools");
+const navBarStyles = {
+    hidden: 0,
+    minimized: 1,
+    normal: 2,
+    expanded: 3
+};
+const navBarLayouts = [
+    (make, view) => {
+        make.left.right.top.inset(0);
+        make.height.equalTo(0);
+    },
+    (make, view) => {
+        make.left.right.top.inset(0);
+        make.bottom.equalTo(view.super.safeAreaTop).inset(-25);
+    },
+    (make, view) => {
+        make.left.right.top.inset(0);
+        make.bottom.equalTo(view.super.safeAreaTop).inset(-50);
+    },
+    (make, view) => {
+        make.left.right.top.inset(0);
+        make.bottom.equalTo(view.super.safeAreaTop).inset(-100);
+    }
+];
+class CustomNavigationBar extends base_1.Base {
+    constructor({ props = {}, events = {} } = {}) {
+        super();
+        this._props = Object.assign({ leftBarButtonItems: [], rightBarButtonItems: [], style: navBarStyles.normal, tintColor: $color("primaryText") }, props);
+        this._events = events;
+        this.cviews = {};
+        this._defineView = () => {
+            /*
+            设计思路
+            一共5个子视图:
+              - contentView  下有3个子视图
+                  - leftItemView  popButton或者leftButtonItems
+                  - rightItemView  rightButtonItems
+                  - titleView
+              - toolView
+            */
+            // leftItemView
+            let leftInset = 0;
+            if (this._props.popButtonEnabled) {
+                const titleWidth = this._props.popButtonTitle
+                    ? (0, uitools_1.getTextWidth)(this._props.popButtonTitle)
+                    : 0;
+                leftInset = titleWidth + 35;
+                const views = [];
+                const chevronOptions = {
+                    type: "view",
+                    props: {},
+                    layout: (make) => {
+                        make.left.top.bottom.inset(0);
+                        make.width.equalTo(35);
+                    },
+                    views: [
+                        {
+                            type: "image",
+                            props: {
+                                symbol: "chevron.left",
+                                contentMode: 1,
+                                tintColor: this._props.tintColor
+                            },
+                            layout: (make) => make.edges.insets($insets(12.5, 10, 12.5, 0))
+                        }
+                    ]
+                };
+                views.push(chevronOptions);
+                if (this._props.popButtonTitle) {
+                    const popButtonTitleOptions = {
+                        type: "label",
+                        props: {
+                            align: $align.left,
+                            text: this._props.popButtonTitle,
+                            font: $font(17),
+                            textColor: this._props.tintColor
+                        },
+                        layout: (make, view) => {
+                            make.top.bottom.right.inset(0);
+                            make.left.equalTo(view.prev.right);
+                        }
+                    };
+                    views.push(popButtonTitleOptions);
+                }
+                this.cviews.leftItemView = new single_views_1.Button({
+                    props: {
+                        bgcolor: $color("clear"),
+                        cornerRadius: 0
+                    },
+                    views,
+                    layout: (make, view) => {
+                        make.width.equalTo(leftInset);
+                        make.left.top.bottom.inset(0);
+                    },
+                    events: {
+                        tapped: sender => {
+                            if (this._events.popHandler)
+                                this._events.popHandler(this);
+                            $ui.pop();
+                        },
+                        longPressed: this._props.popToRootEnabled
+                            ? sender => {
+                                if (this._events.popToRootHandler)
+                                    this._events.popToRootHandler(this);
+                                $ui.popToRoot();
+                            }
+                            : undefined
+                    }
+                });
+            }
+            else {
+                leftInset = this._calculateItemViewWidth(this._props.leftBarButtonItems);
+                this.cviews.leftItemView = new single_views_1.ContentView({
+                    props: {
+                        bgcolor: undefined
+                    },
+                    layout: (make, view) => {
+                        make.width.equalTo(leftInset);
+                        make.left.top.bottom.inset(0);
+                    },
+                    views: this._createCviewsOnItemView(this._props.leftBarButtonItems).map(n => n.definition)
+                });
+            }
+            // rightItemView
+            const rightInset = this._calculateItemViewWidth(this._props.rightBarButtonItems);
+            this.cviews.rightItemView = new single_views_1.ContentView({
+                props: {
+                    bgcolor: undefined
+                },
+                layout: (make, view) => {
+                    make.width.equalTo(rightInset);
+                    make.right.top.bottom.inset(0);
+                },
+                views: this._createCviewsOnItemView(this._props.rightBarButtonItems).map(n => n.definition)
+            });
+            // titleView
+            const titleViewInset = Math.max(leftInset, rightInset);
+            if (this._props.title) {
+                this.cviews.titleViewWrapper = new single_views_1.Label({
+                    props: {
+                        text: this._props.title,
+                        font: $font("bold", 17),
+                        align: $align.center,
+                        textColor: this._props.tintColor,
+                        userInteractionEnabled: true
+                    },
+                    layout: (make, view) => {
+                        make.left.right.inset(titleViewInset);
+                        make.top.bottom.inset(0);
+                    },
+                    events: {
+                        tapped: sender => {
+                            if (this._events.titleTapped)
+                                this._events.titleTapped(this);
+                        }
+                    }
+                });
+            }
+            else {
+                this.cviews.titleViewWrapper = new single_views_1.ContentView({
+                    props: {
+                        bgcolor: undefined
+                    },
+                    layout: (make, view) => {
+                        make.left.right.inset(titleViewInset);
+                        make.top.bottom.inset(0);
+                    },
+                    views: this._props.titleView && [this._props.titleView.definition]
+                });
+            }
+            // contentView
+            this.cviews.contentView = new single_views_1.ContentView({
+                props: {
+                    bgcolor: undefined
+                },
+                layout: (make, view) => {
+                    make.top.inset(0);
+                    make.left.right.inset(5);
+                    make.height.equalTo(50);
+                },
+                views: [
+                    this.cviews.titleViewWrapper.definition,
+                    this.cviews.leftItemView.definition,
+                    this.cviews.rightItemView.definition
+                ]
+            });
+            // toolView
+            this.cviews.toolViewWrapper = new single_views_1.ContentView({
+                props: {
+                    bgcolor: undefined
+                },
+                layout: (make, view) => {
+                    make.left.right.bottom.equalTo(view.super);
+                    make.top.equalTo(view.super).inset(50);
+                },
+                views: this._props.toolView && [this._props.toolView.definition]
+            });
+            return {
+                type: this._props.bgcolor ? "view" : "blur",
+                props: {
+                    id: this.id,
+                    style: this._props.bgcolor ? undefined : 10,
+                    bgcolor: this._props.bgcolor
+                },
+                layout: navBarLayouts[this._props.style],
+                events: {
+                    ready: () => (this.style = this.style)
+                },
+                views: [
+                    {
+                        type: "view",
+                        props: {},
+                        layout: $layout.fillSafeArea,
+                        views: [
+                            this.cviews.contentView.definition,
+                            this.cviews.toolViewWrapper.definition
+                        ]
+                    },
+                    {
+                        type: "view",
+                        props: {
+                            bgcolor: $color("separatorColor")
+                        },
+                        layout: (make, view) => {
+                            make.bottom.left.right.inset(0);
+                            make.height.equalTo(0.5);
+                        }
+                    }
+                ]
+            };
+        };
+    }
+    _calculateItemViewWidth(items) {
+        if (!items || items.length === 0)
+            return 0;
+        let width = 0;
+        items.forEach(n => {
+            if (n.cview)
+                width += n.width || 50;
+            else if (n.title)
+                width += (0, uitools_1.getTextWidth)(n.title, { inset: 20 });
+            else
+                width += 50;
+        });
+        return width;
+    }
+    _createCviewsOnItemView(items) {
+        return items.map(n => {
+            if (n.cview) {
+                const width = n.width || 50;
+                n.cview._layout = (make, view) => {
+                    make.top.bottom.inset(0);
+                    make.width.equalTo(width);
+                    make.left.equalTo((view.prev && view.prev.right) || 0);
+                };
+                return n.cview;
+            }
+            else if (n.title) {
+                const width = (0, uitools_1.getTextWidth)(n.title, { inset: 20 });
+                return new single_views_1.Button({
+                    props: {
+                        title: n.title,
+                        bgcolor: $color("clear"),
+                        titleColor: n.tintColor || this._props.tintColor,
+                        cornerRadius: 0
+                    },
+                    layout: (make, view) => {
+                        make.top.bottom.inset(0);
+                        make.width.equalTo(width);
+                        make.left.equalTo((view.prev && view.prev.right) || 0);
+                    },
+                    events: {
+                        tapped: n.handler
+                    }
+                });
+            }
+            else if (n.symbol || n.image) {
+                return new symbol_button_1.SymbolButton({
+                    props: {
+                        symbol: n.symbol,
+                        image: n.image,
+                        tintColor: n.tintColor || this._props.tintColor
+                    },
+                    layout: (make, view) => {
+                        make.top.bottom.inset(0);
+                        make.width.equalTo(50);
+                        make.left.equalTo((view.prev && view.prev.right) || 0);
+                    },
+                    events: {
+                        tapped: n.handler
+                    }
+                });
+            }
+            else {
+                throw Error("Invalid BarButtonItem");
+            }
+        });
+    }
+    get title() {
+        return this._props.title || "";
+    }
+    set title(title) {
+        if (this._props.title === undefined)
+            return;
+        this._props.title = title;
+        if ("text" in this.cviews.titleViewWrapper.view)
+            this.cviews.titleViewWrapper.view.text = title;
+    }
+    hide(animated = true) {
+        this.view.hidden = false;
+        this.cviews.leftItemView.view.hidden = true;
+        this.cviews.rightItemView.view.hidden = true;
+        this.cviews.toolViewWrapper.view.hidden = true;
+        this.cviews.titleViewWrapper.view.hidden = true;
+        this.view.remakeLayout(navBarLayouts[navBarStyles.hidden]);
+        this.cviews.contentView.view.updateLayout(make => make.height.equalTo(0));
+        if (animated) {
+            $ui.animate({
+                duration: 0.3,
+                animation: () => {
+                    this.view.relayout();
+                    this.cviews.contentView.view.relayout();
+                },
+                completion: () => {
+                    this.view.hidden = true;
+                    if (this._events.hidden)
+                        this._events.hidden(this);
+                }
+            });
+        }
+        else {
+            this.view.hidden = true;
+            if (this._events.hidden)
+                this._events.hidden(this);
+        }
+    }
+    minimize(animated = true) {
+        this.view.hidden = false;
+        this.cviews.leftItemView.view.hidden = true;
+        this.cviews.rightItemView.view.hidden = true;
+        this.cviews.toolViewWrapper.view.hidden = true;
+        this.cviews.titleViewWrapper.view.hidden = false;
+        this.view.remakeLayout(navBarLayouts[navBarStyles.minimized]);
+        this.cviews.contentView.view.updateLayout(make => make.height.equalTo(25));
+        if (animated) {
+            $ui.animate({
+                duration: 0.3,
+                animation: () => {
+                    this.view.relayout();
+                    this.cviews.contentView.view.relayout();
+                    if (this._props.title && "font" in this.cviews.titleViewWrapper.view)
+                        this.cviews.titleViewWrapper.view.font = $font("bold", 14);
+                },
+                completion: () => {
+                    if (this._events.minimized)
+                        this._events.minimized(this);
+                }
+            });
+        }
+        else {
+            if (this._props.title && "font" in this.cviews.titleViewWrapper.view)
+                this.cviews.titleViewWrapper.view.font = $font("bold", 14);
+            if (this._events.minimized)
+                this._events.minimized(this);
+        }
+    }
+    restore(animated = true) {
+        this.view.hidden = false;
+        this.cviews.titleViewWrapper.view.hidden = false;
+        //this.cviews.toolViewWrapper.view.hidden = true;
+        this.view.remakeLayout(navBarLayouts[navBarStyles.normal]);
+        this.cviews.contentView.view.updateLayout(make => make.height.equalTo(50));
+        if (animated) {
+            $ui.animate({
+                duration: 0.3,
+                animation: () => {
+                    this.view.relayout();
+                    this.cviews.contentView.view.relayout();
+                    if (this._props.title && "font" in this.cviews.titleViewWrapper.view)
+                        this.cviews.titleViewWrapper.view.font = $font("bold", 17);
+                },
+                completion: () => {
+                    this.cviews.leftItemView.view.hidden = false;
+                    this.cviews.rightItemView.view.hidden = false;
+                    if (this._events.restored)
+                        this._events.restored(this);
+                }
+            });
+        }
+        else {
+            this.cviews.leftItemView.view.hidden = false;
+            this.cviews.rightItemView.view.hidden = false;
+            if (this._props.title && "font" in this.cviews.titleViewWrapper.view)
+                this.cviews.titleViewWrapper.view.font = $font("bold", 17);
+            if (this._events.restored)
+                this._events.restored(this);
+        }
+    }
+    expand(animated = true) {
+        this.view.hidden = false;
+        this.cviews.toolViewWrapper.view.hidden = false;
+        this.cviews.titleViewWrapper.view.hidden = false;
+        this.view.remakeLayout(navBarLayouts[navBarStyles.expanded]);
+        this.cviews.contentView.view.updateLayout(make => make.height.equalTo(50));
+        if (animated) {
+            $ui.animate({
+                duration: 0.3,
+                animation: () => {
+                    this.view.relayout();
+                    this.cviews.contentView.view.relayout();
+                    if (this._props.title && "font" in this.cviews.titleViewWrapper.view)
+                        this.cviews.titleViewWrapper.view.font = $font("bold", 17);
+                },
+                completion: () => {
+                    this.cviews.leftItemView.view.hidden = false;
+                    this.cviews.rightItemView.view.hidden = false;
+                    //this.cviews.toolViewWrapper.view.hidden = false;
+                    if (this._events.expanded)
+                        this._events.expanded(this);
+                }
+            });
+        }
+        else {
+            this.cviews.leftItemView.view.hidden = false;
+            this.cviews.rightItemView.view.hidden = false;
+            //this.cviews.toolViewWrapper.view.hidden = false;
+            if (this._props.title && "font" in this.cviews.titleViewWrapper.view)
+                this.cviews.titleViewWrapper.view.font = $font("bold", 17);
+            if (this._events.expanded)
+                this._events.expanded(this);
+        }
+    }
+    get style() {
+        return this._props.style;
+    }
+    set style(num) {
+        this._props.style = num;
+        switch (num) {
+            case 0: {
+                this.hide();
+                break;
+            }
+            case 1: {
+                this.minimize();
+                break;
+            }
+            case 2: {
+                this.restore();
+                break;
+            }
+            case 3: {
+                this.expand();
+                break;
+            }
+            default:
+                break;
+        }
+    }
+}
+exports.CustomNavigationBar = CustomNavigationBar;

package/dist/components/dialogs/dialog-sheet.js

@@ -0,0 +1,67 @@
+"use strict";
+/**
+ * # cview DialogSheet
+ *
+ * dialog所需要的sheet
+ *
+ * ## 参数
+ * - `title` 标题
+ * - `cview` CView
+ * - `doneHandler` 完成时的回调
+ * - `presentMode` presentMode
+ * - `bgcolor` 背景颜色
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogSheet = void 0;
+const sheet_1 = require("../sheet");
+const custom_navigation_bar_1 = require("../custom-navigation-bar");
+const l10n_1 = require("../../utils/l10n");
+const single_views_1 = require("../single-views");
+class DialogSheet extends sheet_1.Sheet {
+    constructor(props) {
+        super({
+            presentMode: props.presentMode || ($device.isIpad ? 2 : 1),
+            bgcolor: props.bgcolor
+        });
+        this._props = props;
+        this._done = false;
+    }
+    promisify(resolve, reject) {
+        this.resolve = resolve;
+        this.reject = reject;
+    }
+    present() {
+        this._dismissalHandler = () => {
+            if (!this._done && this.reject)
+                this.reject("cancel");
+        };
+        const _navbar = new custom_navigation_bar_1.CustomNavigationBar({
+            props: {
+                title: this._props.title,
+                leftBarButtonItems: [
+                    { symbol: "xmark", handler: () => this.dismiss() }
+                ],
+                rightBarButtonItems: [
+                    { title: (0, l10n_1.l10n)("DONE"), handler: () => this.done() }
+                ]
+            }
+        });
+        this._props.cview._layout = (make, view) => {
+            make.bottom.equalTo(view.super);
+            make.left.right.equalTo(view.super.safeArea);
+            make.top.equalTo(view.prev.bottom);
+        };
+        this._cview = new single_views_1.ContentView({
+            props: { bgcolor: $color("clear") },
+            views: [_navbar.definition, this._props.cview.definition]
+        });
+        super.present();
+    }
+    done() {
+        this._done = true;
+        if (this.resolve && this._props.doneHandler)
+            this.resolve(this._props.doneHandler());
+        this.dismiss();
+    }
+}
+exports.DialogSheet = DialogSheet;

package/dist/components/dialogs/form-dialog.js

@@ -0,0 +1,24 @@
+"use strict";
+/**
+ * # CView Form Dialog
+ *
+ * 显示一个表单
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formDialog = void 0;
+const static_preference_listview_1 = require("../static-preference-listview");
+const dialog_sheet_1 = require("./dialog-sheet");
+function formDialog({ sections, title }) {
+    const view = new static_preference_listview_1.PreferenceListView({ sections });
+    const sheet = new dialog_sheet_1.DialogSheet({
+        title,
+        bgcolor: $color("insetGroupedBackground"),
+        cview: view,
+        doneHandler: () => view.values
+    });
+    return new Promise((resolve, reject) => {
+        sheet.promisify(resolve, reject);
+        sheet.present();
+    });
+}
+exports.formDialog = formDialog;

package/dist/components/dialogs/list-dialog.js

@@ -0,0 +1,87 @@
+"use strict";
+/**
+ * # CView List Dialog
+ *
+ * 显示一个列表以供选择
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listDialog = void 0;
+const dialog_sheet_1 = require("./dialog-sheet");
+const single_views_1 = require("../single-views");
+function listDialog({ items, multiSelectEnabled, value, values = [], title }) {
+    if (value)
+        values = [value];
+    const listView = new single_views_1.List({
+        props: {
+            style: 2,
+            data: items.map((n, i) => {
+                return {
+                    label: { text: n },
+                    image: { hidden: !values.includes(i) }
+                };
+            }),
+            template: {
+                views: [
+                    {
+                        type: "label",
+                        props: {
+                            id: "label"
+                        },
+                        layout: (make, view) => {
+                            make.top.bottom.inset(0);
+                            make.left.inset(20);
+                            make.right.inset(50);
+                        }
+                    },
+                    {
+                        type: "image",
+                        props: {
+                            id: "image",
+                            symbol: "checkmark",
+                            contentMode: 1,
+                            tintColor: $color("systemLink")
+                        },
+                        layout: (make, view) => {
+                            make.top.bottom.right.inset(10);
+                            make.width.equalTo(30);
+                        }
+                    }
+                ]
+            }
+        },
+        events: {
+            didSelect: (sender, indexPath) => {
+                const data = sender.data;
+                if (multiSelectEnabled) {
+                    data[indexPath.item].image.hidden = !data[indexPath.item].image
+                        .hidden;
+                }
+                else {
+                    data.forEach((n, i) => {
+                        n.image.hidden = i !== indexPath.item;
+                    });
+                }
+                sender.data = data;
+            }
+        }
+    });
+    const sheet = new dialog_sheet_1.DialogSheet({
+        title,
+        bgcolor: $color("insetGroupedBackground"),
+        cview: listView,
+        doneHandler: () => {
+            const filtered = listView.view.data
+                .map((n, i) => (n.image.hidden ? -1 : i))
+                .filter(n => n !== -1);
+            if (multiSelectEnabled)
+                return filtered;
+            else
+                return filtered[0];
+        }
+    });
+    return new Promise((resolve, reject) => {
+        sheet.promisify(resolve, reject);
+        sheet.present();
+    });
+}
+exports.listDialog = listDialog;