jsbox-cview 1.5.15 → 1.5.17

package/components/flowlayout.ts

@@ -29,10 +29,10 @@ import { Base } from "./base";
  * - set items(items: FlowlayoutItem[])  设置子视图
  * - get items(): FlowlayoutItem[]  获取子视图
  */
-export class Flowlayout extends Base<UIView, UiTypes.ViewOptions> {
+export class Flowlayout<T extends FlowlayoutItem> extends Base<UIView, UiTypes.ViewOptions> {
   private _width: number; // 缓存宽度，用于判断是否需要重新布局
   private _props: {
-    items: FlowlayoutItem[];
+    items: T[];
     spacing: number;
     itemHeight: number;
     fixedRows?: number;
@@ -40,16 +40,16 @@ export class Flowlayout extends Base<UIView, UiTypes.ViewOptions> {
     menu?: UiTypes.ContextMenuOptions;
     bgcolor?: UIColor;
   }
-  private _wrappers: WrapperView[];
+  private _wrappers: WrapperView<T>[];
   private _events?: {
-    didSelect?: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void;
-    didLongPress?: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void;
+    didSelect?: (sender: Flowlayout<T>, index: number, item: T) => void;
+    didLongPress?: (sender: Flowlayout<T>, index: number, item: T) => void;
   }
   _defineView: () => UiTypes.ViewOptions;
 
   constructor({ props, layout, events }: {
     props: {
-      items: FlowlayoutItem[];
+      items: T[];
       spacing: number;
       itemHeight: number;
       fixedRows?: number;
@@ -59,8 +59,8 @@ export class Flowlayout extends Base<UIView, UiTypes.ViewOptions> {
     };
     layout: (make: MASConstraintMaker, view: UIView) => void;
     events?: {
-      didSelect?: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void;
-      didLongPress?: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void;
+      didSelect?: (sender: Flowlayout<T>, index: number, item: T) => void;
+      didLongPress?: (sender: Flowlayout<T>, index: number, item: T) => void;
     }
   }) {
     super();
@@ -95,15 +95,15 @@ export class Flowlayout extends Base<UIView, UiTypes.ViewOptions> {
     });
   }
 
-  cell(index: number): FlowlayoutItem {
+  cell(index: number): T {
     return this._props.items[index];
   }
 
-  get items(): FlowlayoutItem[] {
+  get items(): T[] {
     return this._props.items;
   }
 
-  set items(items: FlowlayoutItem[]) {
+  set items(items: T[]) {
     this._props.items = items;
     this._wrappers = items.map((item, index) => new WrapperView({
       item,
@@ -176,9 +176,9 @@ interface FlowlayoutItem extends Base<any, any> {
   itemWidth: () => number;
 }
 
-class WrapperView extends Base<UIView, UiTypes.ViewOptions> {
+class WrapperView<T extends FlowlayoutItem> extends Base<UIView, UiTypes.ViewOptions> {
   _defineView: () => UiTypes.ViewOptions;
-  item: FlowlayoutItem;
+  item: T;
   constructor({
     item,
     menu,
@@ -187,11 +187,11 @@ class WrapperView extends Base<UIView, UiTypes.ViewOptions> {
     flowlayout,
     index
   }: {
-    item: FlowlayoutItem;
+    item: T;
     menu?: UiTypes.ContextMenuOptions;
-    didSelect?: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void;
-    didLongPress?: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void;
-    flowlayout: Flowlayout;
+    didSelect?: (sender: Flowlayout<T>, index: number, item: T) => void;
+    didLongPress?: (sender: Flowlayout<T>, index: number, item: T) => void;
+    flowlayout: Flowlayout<T>;
     index: number;
   }) {
     super();

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.enabled) !== null && _a !== void 0 ? _a : true,
+                    hidden: (_b = props.hidden) !== null && _b !== void 0 ? _b : false,
+                },
+                layout,
+                events,
+                views: [
+                    {
+                        type: "image",
+                        props: {
+                            id: this.id + "_image",
+                            symbol: "arrow.clockwise",
+                            tintColor: (_c = 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.15",
+  "version": "1.5.17",
   "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]
+});