jsbox-cview 1.5.16 → 1.5.18

package/components/refresh-button.ts

@@ -0,0 +1,82 @@
+import { Base } from "./base";
+
+/**
+ * 创建一个刷新按钮，平时显示一个刷新的symbol，刷新时显示一个loading的symbol
+ * props:
+ *   - tintColor
+ *   - enabled
+ *   - hidden
+ * events:
+ *   - tapped
+ */
+export class RefreshButton extends Base<UIButtonView, UiTypes.ButtonOptions> {
+  _defineView: () => UiTypes.ButtonOptions;
+  _loading: boolean = false;
+  constructor({
+    props,
+    layout,
+    events = {}
+  }: {
+    props?: {
+      tintColor?: UIColor;
+      enabled?: boolean;
+      hidden?: boolean;
+    };
+    layout?: (make: MASConstraintMaker, view: UIButtonView) => void;
+    events?: UiTypes.BaseViewEvents<UIButtonView>;
+  }) {
+    super();
+    this._defineView = () => {
+      return {
+        type: "button",
+        props: {
+          id: this.id,
+          bgcolor: $color("clear"),
+          enabled: props?.enabled ?? true,
+          hidden: props?.hidden ?? false,
+        },
+        layout,
+        events,
+        views: [
+          {
+            type: "image",
+            props: {
+              id: this.id + "_image",
+              symbol: "arrow.clockwise",
+              tintColor: props?.tintColor ?? $color("primaryText"),
+              contentMode: 1,
+              hidden: this._loading,
+            },
+            layout: (make, view) => {
+              make.edges.insets($insets(12.5, 12.5, 12.5, 12.5));
+              make.center.equalTo(view.super);
+            }
+          },
+          {
+            type: "spinner",
+            props: {
+              id: this.id + "_spinner",
+              loading: this._loading,
+              hidden: !this._loading,
+            },
+            layout: (make, view) => {
+              make.center.equalTo(view.super);
+            }
+          }
+        ]
+      }
+    }
+  }
+
+  get loading() {
+    return this._loading;
+  }
+
+  set loading(value: boolean) {
+    this._loading = value;
+    $(this.id + "_image").hidden = value;
+    $(this.id + "_spinner").hidden = !value;
+    ($(this.id + "_spinner") as UISpinnerView).loading = value;
+    this.view.enabled = !value;
+  }
+}

package/components/symbol-button.ts

@@ -79,8 +79,7 @@ export class SymbolButton extends Base<UIButtonView, UiTypes.ButtonOptions> {
             },
             layout: (make, view: UIImageView) => {
               make.edges.insets(this._props.insets);
-              make.centerX.equalTo(view.super);
-              make.width.equalTo(view.height);
+              make.center.equalTo(view.super);
             }
           }
         ],

package/dist/components/refresh-button.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RefreshButton = void 0;
+const base_1 = require("./base");
+/**
+ * 创建一个刷新按钮，平时显示一个刷新的symbol，刷新时显示一个loading的symbol
+ * props:
+ *   - tintColor
+ *   - enabled
+ *   - hidden
+ * events:
+ *   - tapped
+ */
+class RefreshButton extends base_1.Base {
+    constructor({ props, layout, events = {} }) {
+        super();
+        this._loading = false;
+        this._defineView = () => {
+            var _a, _b, _c;
+            return {
+                type: "button",
+                props: {
+                    id: this.id,
+                    bgcolor: $color("clear"),
+                    enabled: (_a = props === null || props === void 0 ? void 0 : props.enabled) !== null && _a !== void 0 ? _a : true,
+                    hidden: (_b = props === null || props === void 0 ? void 0 : props.hidden) !== null && _b !== void 0 ? _b : false,
+                },
+                layout,
+                events,
+                views: [
+                    {
+                        type: "image",
+                        props: {
+                            id: this.id + "_image",
+                            symbol: "arrow.clockwise",
+                            tintColor: (_c = props === null || props === void 0 ? void 0 : props.tintColor) !== null && _c !== void 0 ? _c : $color("primaryText"),
+                            contentMode: 1,
+                            hidden: this._loading,
+                        },
+                        layout: (make, view) => {
+                            make.edges.insets($insets(12.5, 12.5, 12.5, 12.5));
+                            make.center.equalTo(view.super);
+                        }
+                    },
+                    {
+                        type: "spinner",
+                        props: {
+                            id: this.id + "_spinner",
+                            loading: this._loading,
+                            hidden: !this._loading,
+                        },
+                        layout: (make, view) => {
+                            make.center.equalTo(view.super);
+                        }
+                    }
+                ]
+            };
+        };
+    }
+    get loading() {
+        return this._loading;
+    }
+    set loading(value) {
+        this._loading = value;
+        $(this.id + "_image").hidden = value;
+        $(this.id + "_spinner").hidden = !value;
+        $(this.id + "_spinner").loading = value;
+        this.view.enabled = !value;
+    }
+}
+exports.RefreshButton = RefreshButton;

package/dist/components/symbol-button.js

@@ -52,8 +52,7 @@ class SymbolButton extends base_1.Base {
                         },
                         layout: (make, view) => {
                             make.edges.insets(this._props.insets);
-                            make.centerX.equalTo(view.super);
-                            make.width.equalTo(view.height);
+                            make.center.equalTo(view.super);
                         }
                     }
                 ],

package/dist/index.js

@@ -26,6 +26,7 @@ __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/refresh-button"), exports);
 __exportStar(require("./components/rotating-view"), exports);
 __exportStar(require("./components/searchbar"), exports);
 __exportStar(require("./components/sheet"), exports);

package/dist/test/refresh-button.js

@@ -0,0 +1,35 @@
+"use strict";
+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 });
+const refresh_button_1 = require("../components/refresh-button");
+const refreshButton = new refresh_button_1.RefreshButton({
+    props: {
+        tintColor: $color("primaryText"),
+        enabled: true,
+        hidden: false
+    },
+    layout: (make, view) => {
+        make.width.equalTo(50);
+        make.height.equalTo(50);
+        make.top.inset(100);
+        make.centerX.equalTo(view.super);
+    },
+    events: {
+        tapped: () => __awaiter(void 0, void 0, void 0, function* () {
+            refreshButton.loading = true;
+            yield $wait(2);
+            refreshButton.loading = false;
+        })
+    }
+});
+$ui.render({
+    views: [refreshButton.definition]
+});

package/index.ts

@@ -10,6 +10,7 @@ export * from './components/image-pager';
 export * from './components/page-control';
 export * from './components/pageviewer-titlebar';
 export * from './components/pageviewer';
+export * from './components/refresh-button';
 export * from './components/rotating-view';
 export * from './components/searchbar';
 export * from './components/sheet';

package/package.json

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

package/test/refresh-button.ts

@@ -0,0 +1,26 @@
+import { RefreshButton } from "../components/refresh-button";
+
+const refreshButton = new RefreshButton({
+  props: {
+    tintColor: $color("primaryText"),
+    enabled: true,
+    hidden: false
+  },
+  layout: (make, view) => {
+    make.width.equalTo(50);
+    make.height.equalTo(50);
+    make.top.inset(100);
+    make.centerX.equalTo(view.super);
+  },
+  events: {
+    tapped: async () => {
+      refreshButton.loading = true;
+      await $wait(2);
+      refreshButton.loading = false;
+    }
+  }
+});
+
+$ui.render({
+  views: [refreshButton.definition]
+});