jsbox-cview 1.0.0 → 1.1.0

package/dist/components/single-views.js

@@ -0,0 +1,429 @@
+"use strict";
+/**
+ * 实现单个视图的定义
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Runtime = exports.Code = exports.Chart = exports.Lottie = exports.Markdown = exports.Canvas = exports.Picker = exports.DatePicker = exports.Gradient = exports.Blur = exports.Matrix = exports.List = exports.Web = exports.Map = exports.Menu = exports.Tab = exports.Stack = exports.Scroll = exports.Video = exports.Image = exports.Text = exports.Stepper = exports.Gallery = exports.Progress = exports.Spinner = exports.Switch = exports.Slider = exports.Input = exports.Button = exports.Label = exports.MaskView = exports.ContentView = exports.RootView = exports.SingleView = void 0;
+const base_1 = require("./base");
+class SingleView extends base_1.Base {
+    constructor({ type, props, layout, events, views }) {
+        super();
+        this._type = type || "view";
+        this._props = props;
+        this._layout = layout;
+        this._events = events;
+        this._views = views;
+        this._defineView = () => {
+            return {
+                type: this._type,
+                props: Object.assign(Object.assign({}, this._props), { id: this.id }),
+                layout: this._layout,
+                events: this._events,
+                views: this._views
+            };
+        };
+    }
+}
+exports.SingleView = SingleView;
+class RootView extends SingleView {
+    constructor({ layout = $layout.fill, events, views }) {
+        super({
+            type: "view",
+            props: { bgcolor: $color("clear") },
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.RootView = RootView;
+class ContentView extends SingleView {
+    constructor({ props, layout = $layout.fillSafeArea, events = {}, views }) {
+        super({
+            type: "view",
+            props: Object.assign({ bgcolor: $color("primarySurface") }, props),
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.ContentView = ContentView;
+/**
+ * 遮挡视图，使得下面的view无法操作并且整体变暗。
+ * 设计上此视图不单独使用，而是作为一个子视图
+ * events:
+ *   - tapped 点击事件，通常用于dismiss
+ */
+class MaskView extends SingleView {
+    constructor({ props, layout = $layout.fill, events, views }) {
+        super({
+            type: "view",
+            props: Object.assign(Object.assign({ bgcolor: $rgba(0, 0, 0, 0.2) }, props), { userInteractionEnabled: true }),
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.MaskView = MaskView;
+class Label extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "label",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Label = Label;
+class Button extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "button",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Button = Button;
+class Input extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "input",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Input = Input;
+class Slider extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "slider",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Slider = Slider;
+class Switch extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "switch",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Switch = Switch;
+class Spinner extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "spinner",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Spinner = Spinner;
+class Progress extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "progress",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Progress = Progress;
+class Gallery extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "gallery",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Gallery = Gallery;
+class Stepper extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "stepper",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Stepper = Stepper;
+class Text extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "text",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Text = Text;
+class Image extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "image",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Image = Image;
+class Video extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "video",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Video = Video;
+class Scroll extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "scroll",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Scroll = Scroll;
+class Stack extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "stack",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Stack = Stack;
+class Tab extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "tab",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Tab = Tab;
+class Menu extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "menu",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Menu = Menu;
+class Map extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "map",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Map = Map;
+class Web extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "web",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Web = Web;
+class List extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "list",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.List = List;
+class Matrix extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "matrix",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Matrix = Matrix;
+class Blur extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "blur",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Blur = Blur;
+class Gradient extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "gradient",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Gradient = Gradient;
+class DatePicker extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "date-picker",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.DatePicker = DatePicker;
+class Picker extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "picker",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Picker = Picker;
+class Canvas extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "canvas",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Canvas = Canvas;
+class Markdown extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "markdown",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Markdown = Markdown;
+class Lottie extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "lottie",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Lottie = Lottie;
+class Chart extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "chart",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Chart = Chart;
+class Code extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "code",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Code = Code;
+class Runtime extends SingleView {
+    constructor({ props, layout, events, views }) {
+        super({
+            type: "runtime",
+            props,
+            layout,
+            events,
+            views
+        });
+    }
+}
+exports.Runtime = Runtime;

package/dist/components/spinners/loading-double-rings.js

@@ -0,0 +1,104 @@
+"use strict";
+/**
+ * # cview LoadingDoubleRings
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DoubleRings = void 0;
+const base_1 = require("../base");
+class CanvasComponet extends base_1.Base {
+    constructor({ tintColor, startAngle, radiusReduction }) {
+        super();
+        this._tintColor = tintColor;
+        this.startAngle = startAngle;
+        this._radiusReduction = radiusReduction;
+        this._defineView = () => {
+            return {
+                type: "canvas",
+                props: {
+                    id: this.id
+                },
+                layout: $layout.fill,
+                events: {
+                    draw: (view, ctx) => {
+                        ctx.strokeColor = this._tintColor;
+                        const radius = Math.min(view.frame.width, view.frame.height);
+                        ctx.setLineWidth(20);
+                        ctx.setLineCap(1);
+                        ctx.setLineJoin(1);
+                        ctx.addArc(radius / 2, radius / 2, radius / 2 - 20 - this._radiusReduction, this.startAngle, this.startAngle + (Math.PI * 2 * 1) / 4, true);
+                        ctx.strokePath();
+                    }
+                }
+            };
+        };
+    }
+    redraw() {
+        this.view.ocValue().invoke("setNeedsDisplay");
+    }
+}
+class DoubleRings extends base_1.Base {
+    constructor({ colors = [$color("#f5542e"), $color("#f2c327")], layout }) {
+        super();
+        const interval = 1 / 60;
+        this._defineView = () => {
+            const canvas1 = new CanvasComponet({
+                tintColor: colors[0],
+                radiusReduction: 0,
+                startAngle: (-Math.PI * 3) / 4
+            });
+            const canvas2 = new CanvasComponet({
+                tintColor: colors[0],
+                radiusReduction: 0,
+                startAngle: Math.PI / 4
+            });
+            const canvas3 = new CanvasComponet({
+                tintColor: colors[1],
+                radiusReduction: 25,
+                startAngle: -Math.PI / 4
+            });
+            const canvas4 = new CanvasComponet({
+                tintColor: colors[1],
+                radiusReduction: 25,
+                startAngle: (Math.PI * 3) / 4
+            });
+            return {
+                type: "view",
+                props: {
+                    id: this.id
+                },
+                views: [
+                    canvas1.definition,
+                    canvas2.definition,
+                    canvas3.definition,
+                    canvas4.definition
+                ],
+                layout,
+                events: {
+                    ready: (sender) => __awaiter(this, void 0, void 0, function* () {
+                        while (sender.super) {
+                            canvas1.startAngle += Math.PI * interval * -2;
+                            canvas1.redraw();
+                            canvas2.startAngle += Math.PI * interval * -2;
+                            canvas2.redraw();
+                            canvas3.startAngle += Math.PI * interval * 2;
+                            canvas3.redraw();
+                            canvas4.startAngle += Math.PI * interval * 2;
+                            canvas4.redraw();
+                            yield $wait(interval);
+                        }
+                    })
+                }
+            };
+        };
+    }
+}
+exports.DoubleRings = DoubleRings;

package/dist/components/spinners/loading-dual-ring.js

@@ -0,0 +1,82 @@
+"use strict";
+/**
+ * # cview LoadingDualRing
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DualRing = void 0;
+const base_1 = require("../base");
+class CanvasComponet extends base_1.Base {
+    constructor({ tintColor, startAngle }) {
+        super();
+        this._tintColor = tintColor;
+        this.startAngle = startAngle;
+        this._defineView = () => {
+            return {
+                type: "canvas",
+                props: {
+                    id: this.id
+                },
+                layout: $layout.fill,
+                events: {
+                    draw: (view, ctx) => {
+                        ctx.strokeColor = this._tintColor;
+                        const radius = Math.min(view.frame.width, view.frame.height);
+                        ctx.setLineWidth(20);
+                        ctx.setLineCap(1);
+                        ctx.setLineJoin(1);
+                        ctx.addArc(radius / 2, radius / 2, radius / 2 - 20, this.startAngle, this.startAngle + (Math.PI * 2 * 1) / 4, true);
+                        ctx.strokePath();
+                    }
+                }
+            };
+        };
+    }
+    redraw() {
+        this.view.ocValue().invoke("setNeedsDisplay");
+    }
+}
+class DualRing extends base_1.Base {
+    constructor({ colors = [$color("#f5542e"), $color("#f2c327")], layout }) {
+        super();
+        const interval = 1 / 60;
+        this._defineView = () => {
+            const canvas1 = new CanvasComponet({
+                tintColor: colors[0],
+                startAngle: (-Math.PI * 3) / 4
+            });
+            const canvas2 = new CanvasComponet({
+                tintColor: colors[1],
+                startAngle: Math.PI / 4
+            });
+            return {
+                type: "view",
+                props: {
+                    id: this.id
+                },
+                views: [canvas1.definition, canvas2.definition],
+                layout,
+                events: {
+                    ready: (sender) => __awaiter(this, void 0, void 0, function* () {
+                        while (sender.super) {
+                            canvas1.startAngle += Math.PI * interval * 2;
+                            canvas1.redraw();
+                            canvas2.startAngle += Math.PI * interval * 2;
+                            canvas2.redraw();
+                            yield $wait(interval);
+                        }
+                    })
+                }
+            };
+        };
+    }
+}
+exports.DualRing = DualRing;

package/dist/components/spinners/loading-wedges.js

@@ -0,0 +1,104 @@
+"use strict";
+/**
+ * # cview LoadingWedges
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wedges = void 0;
+const base_1 = require("../base");
+class CanvasComponet extends base_1.Base {
+    constructor({ tintColor, startAngle }) {
+        super();
+        this._tintColor = tintColor;
+        this.startAngle = startAngle;
+        this._defineView = () => {
+            return {
+                type: "canvas",
+                props: {
+                    id: this.id,
+                    alpha: 0.8
+                },
+                layout: $layout.fill,
+                events: {
+                    draw: (view, ctx) => {
+                        ctx.fillColor = this._tintColor;
+                        const radius = Math.min(view.frame.width, view.frame.height);
+                        ctx.addArc(radius / 2, radius / 2, radius / 2, this.startAngle, this.startAngle + (Math.PI * 2 * 1) / 4, true);
+                        ctx.addLineToPoint(radius / 2, radius / 2);
+                        ctx.closePath();
+                        ctx.fillPath();
+                    }
+                }
+            };
+        };
+    }
+    redraw() {
+        this.view.ocValue().invoke("setNeedsDisplay");
+    }
+}
+class Wedges extends base_1.Base {
+    constructor({ colors = [
+        $color("#f5542e"),
+        $color("#f2c327"),
+        $color("#008b6e"),
+        $color("#00aede")
+    ], layout }) {
+        super();
+        const interval = 1 / 60;
+        this._defineView = () => {
+            const canvas1 = new CanvasComponet({
+                tintColor: colors[0],
+                startAngle: -Math.PI / 2
+            });
+            const canvas2 = new CanvasComponet({
+                tintColor: colors[1],
+                startAngle: 0
+            });
+            const canvas3 = new CanvasComponet({
+                tintColor: colors[2],
+                startAngle: Math.PI / 2
+            });
+            const canvas4 = new CanvasComponet({
+                tintColor: colors[3],
+                startAngle: Math.PI
+            });
+            return {
+                type: "view",
+                props: {
+                    id: this.id
+                },
+                views: [
+                    canvas1.definition,
+                    canvas2.definition,
+                    canvas3.definition,
+                    canvas4.definition
+                ],
+                layout,
+                events: {
+                    ready: (sender) => __awaiter(this, void 0, void 0, function* () {
+                        while (sender.super) {
+                            canvas1.startAngle += Math.PI * interval * 4;
+                            canvas1.redraw();
+                            canvas2.startAngle += Math.PI * interval * 3;
+                            canvas2.redraw();
+                            canvas3.startAngle += Math.PI * interval * 2;
+                            canvas3.redraw();
+                            canvas4.startAngle += Math.PI * interval * 1;
+                            canvas4.redraw();
+                            yield $wait(interval);
+                        }
+                    })
+                }
+            };
+        };
+    }
+}
+exports.Wedges = Wedges;