jsbox-cview 1.4.4 → 1.5.1

package/components/dynamic-contextmenu-view.ts

@@ -0,0 +1,99 @@
+import { Base } from "./base";
+import { cvid } from "../utils/cvid";
+
+type MenuItem = {
+  title: string;
+  symbol: string;
+  handler: () => void;
+  destructive?: boolean;
+}
+
+const RegisteredOCClassName: Set<string> = new Set()
+
+/**
+ * 动态上下文菜单视图，此视图是为了弥补JSBox中无法动态调整上下文菜单的缺陷而设计的。
+ * 
+ * 此视图除了一般UIView的props, layout, events, views四个参数外，还有必须的特殊参数：
+ * 1. classname?: string OC类名，如果不指定则会自动生成一个唯一的类名。
+ *    如果有不同的DynamicContextMenuView实例使用相同的OC类，那么无法确定弹出的contextMenu是绑定了哪个实例。换言之，实例A弹出的Menu可能是绑定的实例B。
+ *    如果这样做，必须使用下面generateContextMenu的sender参数来定位。
+ * 2. generateContextMenu: (sender: UIView) => { title: string; items: MenuItem[]; } 生成上下文菜单的回调函数。
+ * 
+ */
+export class DynamicContextMenuView extends Base<UIView, UiTypes.RuntimeOptions> {
+  private generateContextMenu: (sender: UIView) => { title: string; items: MenuItem[]; };
+  private _ocClassName: string;
+  _defineView: () => UiTypes.RuntimeOptions;
+  
+  constructor({ classname, generateContextMenu, props, layout, events, views }: {
+    classname?: string;
+    generateContextMenu: (sender: UIView) => { title: string; items: MenuItem[]; };
+    props: UiTypes.BaseViewProps;
+    layout?: (make: MASConstraintMaker, view: UIView) => void;
+    events?: UiTypes.BaseViewEvents;
+    views?: UiTypes.AllViewOptions[];
+  }) {
+    super();
+    this._ocClassName = classname || `DynamicContextMenuView_${cvid.newId}`;
+    this.generateContextMenu = generateContextMenu;
+    const runtimeView = this.createRuntimeView();
+    this._defineView = () => {
+      return {
+        type: "runtime",
+        props: {
+          ...props,
+          id: this.id,
+          view: runtimeView
+        },
+        layout,
+        events,
+        views
+      }
+    }
+  }
+
+  private defineOCClass() {
+    if (RegisteredOCClassName.has(this._ocClassName)) return;
+    RegisteredOCClassName.add(this._ocClassName);
+    $define({
+      type: this._ocClassName + " : UIView <UIContextMenuInteractionDelegate>",
+      events: {
+        "contextMenuInteraction:configurationForMenuAtLocation:": (interacton: any, point: JBPoint) => {
+          const view = interacton.$view().jsValue()
+          const menu = this.generateContextMenu(view);
+          return this.createContextMenuConfiguration(menu);
+        }
+      }
+    })
+  }
+
+  private createContextMenuConfiguration({ title, items }: { title: string, items: MenuItem[] }) {
+    return $objc("UIContextMenuConfiguration").$configurationWithIdentifier_previewProvider_actionProvider(
+      null,
+      null,
+      $block("UIMenu *, NSArray *", () => {
+        const actions = items.map(item => {
+          const action = $objc("UIAction").$actionWithTitle_image_identifier_handler(
+            item.title,
+            item.symbol,
+            null,
+            $block("void, UIAction *", () => item.handler())
+          );
+          if (item.destructive) action.$setAttributes(1 << 1);
+          return action;
+        })
+        return $objc("UIMenu").$menuWithTitle_children(title, actions);
+      })
+    );
+  }
+
+  private createRuntimeView() {
+    this.defineOCClass();
+    const view = $objc(this._ocClassName).invoke("alloc.init");
+    const interaction = $objc("UIContextMenuInteraction")
+      .invoke("alloc")
+      .invoke("initWithDelegate", view);
+    view.$addInteraction(interaction);
+    return view;
+  }
+}

package/dist/components/dynamic-contextmenu-view.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicContextMenuView = void 0;
+const base_1 = require("./base");
+const cvid_1 = require("../utils/cvid");
+const RegisteredOCClassName = new Set();
+/**
+ * 动态上下文菜单视图，此视图是为了弥补JSBox中无法动态调整上下文菜单的缺陷而设计的。
+ *
+ * 此视图除了一般UIView的props, layout, events, views四个参数外，还有必须的特殊参数：
+ * 1. classname?: string OC类名，如果不指定则会自动生成一个唯一的类名。
+ *    如果有不同的DynamicContextMenuView实例使用相同的OC类，那么无法确定弹出的contextMenu是绑定了哪个实例。换言之，实例A弹出的Menu可能是绑定的实例B。
+ *    如果这样做，必须使用下面generateContextMenu的sender参数来定位。
+ * 2. generateContextMenu: (sender: UIView) => { title: string; items: MenuItem[]; } 生成上下文菜单的回调函数。
+ *
+ */
+class DynamicContextMenuView extends base_1.Base {
+    constructor({ classname, generateContextMenu, props, layout, events, views }) {
+        super();
+        this._ocClassName = classname || `DynamicContextMenuView_${cvid_1.cvid.newId}`;
+        this.generateContextMenu = generateContextMenu;
+        const runtimeView = this.createRuntimeView();
+        this._defineView = () => {
+            return {
+                type: "runtime",
+                props: Object.assign(Object.assign({}, props), { id: this.id, view: runtimeView }),
+                layout,
+                events,
+                views
+            };
+        };
+    }
+    defineOCClass() {
+        if (RegisteredOCClassName.has(this._ocClassName))
+            return;
+        RegisteredOCClassName.add(this._ocClassName);
+        $define({
+            type: this._ocClassName + " : UIView <UIContextMenuInteractionDelegate>",
+            events: {
+                "contextMenuInteraction:configurationForMenuAtLocation:": (interacton, point) => {
+                    const view = interacton.$view().jsValue();
+                    const menu = this.generateContextMenu(view);
+                    return this.createContextMenuConfiguration(menu);
+                }
+            }
+        });
+    }
+    createContextMenuConfiguration({ title, items }) {
+        return $objc("UIContextMenuConfiguration").$configurationWithIdentifier_previewProvider_actionProvider(null, null, $block("UIMenu *, NSArray *", () => {
+            const actions = items.map(item => {
+                const action = $objc("UIAction").$actionWithTitle_image_identifier_handler(item.title, item.symbol, null, $block("void, UIAction *", () => item.handler()));
+                if (item.destructive)
+                    action.$setAttributes(1 << 1);
+                return action;
+            });
+            return $objc("UIMenu").$menuWithTitle_children(title, actions);
+        }));
+    }
+    createRuntimeView() {
+        this.defineOCClass();
+        const view = $objc(this._ocClassName).invoke("alloc.init");
+        const interaction = $objc("UIContextMenuInteraction")
+            .invoke("alloc")
+            .invoke("initWithDelegate", view);
+        view.$addInteraction(interaction);
+        return view;
+    }
+}
+exports.DynamicContextMenuView = DynamicContextMenuView;

package/dist/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/base"), exports);
 __exportStar(require("./components/custom-navigation-bar"), exports);
+__exportStar(require("./components/dynamic-contextmenu-view"), exports);
 __exportStar(require("./components/dynamic-itemsize-matrix"), exports);
 __exportStar(require("./components/dynamic-preference-listview"), exports);
 __exportStar(require("./components/dynamic-rowheight-list"), exports);

package/dist/test/dynamic-contextmenu-view.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const dynamic_contextmenu_view_1 = require("../components/dynamic-contextmenu-view");
+let menuIndex = 0;
+const menuList = [
+    {
+        title: "菜单1",
+        items: [
+            {
+                title: "变成菜单1",
+                symbol: "plus",
+                handler: () => {
+                    menuIndex = 0;
+                }
+            },
+            {
+                title: "变成菜单2",
+                symbol: "plus",
+                destructive: true,
+                handler: () => {
+                    menuIndex = 1;
+                }
+            }
+        ]
+    },
+    {
+        title: "菜单2",
+        items: [
+            {
+                title: "变成菜单1",
+                symbol: "plus",
+                handler: () => {
+                    menuIndex = 0;
+                }
+            },
+            {
+                title: "变成菜单2",
+                symbol: "plus",
+                handler: () => {
+                    menuIndex = 1;
+                }
+            }
+        ]
+    }
+];
+const view = new dynamic_contextmenu_view_1.DynamicContextMenuView({
+    generateContextMenu: (sender) => {
+        return menuList[menuIndex];
+    },
+    props: {},
+    layout: (make, view) => {
+        make.center.equalTo(view.super);
+        make.size.equalTo($size(100, 100));
+    },
+    views: [{
+            type: "label",
+            props: {
+                text: "长按我",
+                textColor: $color("black"),
+                align: $align.center
+            },
+            layout: $layout.center
+        }]
+});
+$ui.render({
+    views: [view.definition]
+});

package/index.ts

@@ -1,5 +1,6 @@
 export * from './components/base';
 export * from './components/custom-navigation-bar';
+export * from './components/dynamic-contextmenu-view';
 export * from './components/dynamic-itemsize-matrix';
 export * from './components/dynamic-preference-listview';
 export * from './components/dynamic-rowheight-list';

package/package.json

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

package/test/dynamic-contextmenu-view.ts

@@ -0,0 +1,68 @@
+import { DynamicContextMenuView } from "../components/dynamic-contextmenu-view";
+
+let menuIndex = 0;
+const menuList = [
+  {
+    title: "菜单1",
+    items: [
+      {
+        title: "变成菜单1",
+        symbol: "plus",
+        handler: () => {
+          menuIndex = 0;
+        }
+      },
+      {
+        title: "变成菜单2",
+        symbol: "plus",
+        destructive: true,
+        handler: () => {
+          menuIndex = 1;
+        }
+      }
+    ]
+  },
+  {
+    title: "菜单2",
+    items: [
+      {
+        title: "变成菜单1",
+        symbol: "plus",
+        handler: () => {
+          menuIndex = 0;
+        }
+      },
+      {
+        title: "变成菜单2",
+        symbol: "plus",
+        handler: () => {
+          menuIndex = 1;
+        }
+      }
+    ]
+  }
+]
+
+const view = new DynamicContextMenuView({
+  generateContextMenu: (sender) => {
+    return menuList[menuIndex]
+  },
+  props: {},
+  layout: (make, view) => {
+    make.center.equalTo(view.super);
+    make.size.equalTo($size(100, 100));
+  },
+  views: [{
+    type: "label",
+    props: {
+      text: "长按我",
+      textColor: $color("black"),
+      align: $align.center
+    },
+    layout: $layout.center
+  }]
+});
+
+$ui.render({
+  views: [view.definition]
+})