jsbox-cview 1.5.0 → 1.5.1

package/components/dynamic-contextmenu-view.ts

@@ -1,4 +1,5 @@
 import { Base } from "./base";
+import { cvid } from "../utils/cvid";
 
 type MenuItem = {
   title: string;
@@ -9,93 +10,33 @@ type MenuItem = {
 
 const RegisteredOCClassName: Set<string> = new Set()
 
-function defineOCClass({ classname, menuList }: {
-  classname: string;
-  menuList: { title: string; items: MenuItem[] }[]
-}) {
-  if (RegisteredOCClassName.has(classname)) return;
-  RegisteredOCClassName.add(classname);
-  $define({
-    type: classname + " : UIView <UIContextMenuInteractionDelegate>",
-    events: {
-      "contextMenuInteraction:configurationForMenuAtLocation:": (interacton: any, point: JBPoint) => {
-        console.log(interacton.$view().jsValue().info)
-        const menuIndex = (interacton.$view().jsValue().info?.menuIndex ?? 0) as number;
-        if (menuIndex < 0 || menuIndex >= menuList.length) return
-        return createContextMenuConfiguration(menuList[menuIndex]);
-      }
-    }
-  })
-}
-
-function createUIAction(item: MenuItem) {
-  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;
-};
-
-function createContextMenuConfiguration({ title, items }: { title: string, items: MenuItem[] }) {
-  return $objc("UIContextMenuConfiguration").$configurationWithIdentifier_previewProvider_actionProvider(
-    null,
-    null,
-    $block("UIMenu *, NSArray *", () => {
-      const actions = items.map(item => createUIAction(item))
-      return $objc("UIMenu").$menuWithTitle_children(title, actions);
-    })
-  );
-}
-
-function createRuntimeView(classname: string, menuList: { title: string; items: MenuItem[] }[]) {
-  defineOCClass({ classname, menuList });
-  const view = $objc(classname).invoke("alloc.init");
-  const interaction = $objc("UIContextMenuInteraction")
-    .invoke("alloc")
-    .invoke("initWithDelegate", view);
-    view.$addInteraction(interaction);
-  return view;
-}
-
 /**
  * 动态上下文菜单视图，此视图是为了弥补JSBox中无法动态调整上下文菜单的缺陷而设计的。
  * 
- * 由于OC类的注册是全局性的，所以需要特殊的处理来避免重复注册类：对于使用同一套动态上下文菜单的View，应该注册为同一个类。
- * 用menuList列表来记录所需的动态上下文菜单，通过props.info.menuIndex来指定当前视图需要使用的菜单。
- * 
- * 此视图除了一般UIView的props, layout, events, views四个参数外，还有三个必须的特殊参数：
- * 1. ocClassName: string OC类名，用于注册OC类，一个类名只能注册一次，重复注册会被忽略。
- *    这和menuList是配套的，同一套menuList用同一个类名。
- * 2. menuList: { title: string; items: MenuItem[] }[] 菜单列表，每个菜单项包含一个标题和一个MenuItem数组。
- * 3. props.info: { menuIndex: number } 用于指定当前视图的菜单索引，从0开始。info中可以包含其他参数。
+ * 此视图除了一般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<UILabelView, UiTypes.RuntimeOptions> {
-  private _menuList: { 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({ ocClassName, menuList, props, layout, events, views = [] }: {
-    ocClassName: string;
-    menuList: { title: string; items: MenuItem[] }[];
+  
+  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[];
+    views?: UiTypes.AllViewOptions[];
   }) {
     super();
-    if (!props.info || props.info?.menuIndex === undefined || props.info?.menuIndex === null) {
-      throw new Error("props.info.menuIndex is required");
-    }
-    if (typeof props.info.menuIndex !== "number") {
-      throw new Error("props.info.menuIndex must be a number");
-    }
-    if (props.info.menuIndex < 0 || props.info.menuIndex >= menuList.length) {
-      throw new Error("props.info.menuIndex is out of range");
-    }
-    this._menuList = menuList;
-    const runtimeView = createRuntimeView(ocClassName, menuList);
+    this._ocClassName = classname || `DynamicContextMenuView_${cvid.newId}`;
+    this.generateContextMenu = generateContextMenu;
+    const runtimeView = this.createRuntimeView();
     this._defineView = () => {
       return {
         type: "runtime",
@@ -111,15 +52,48 @@ export class DynamicContextMenuView extends Base<UILabelView, UiTypes.RuntimeOpt
     }
   }
 
-  set menuIndex(index: number) {
-    if (index < 0 || index >= this._menuList.length) {
-      throw new Error("menuIndex is out of range");
-    }
-    // 必须重新赋值info，否则info不会改变
-    this.view.info = { ...this.view.info, menuIndex: index };
+  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);
+        }
+      }
+    })
   }
 
-  get menuIndex(): number {
-    return this.view.info.menuIndex;
+  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

@@ -2,75 +2,24 @@
 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();
-function defineOCClass({ classname, menuList }) {
-    if (RegisteredOCClassName.has(classname))
-        return;
-    RegisteredOCClassName.add(classname);
-    $define({
-        type: classname + " : UIView <UIContextMenuInteractionDelegate>",
-        events: {
-            "contextMenuInteraction:configurationForMenuAtLocation:": (interacton, point) => {
-                var _a, _b;
-                console.log(interacton.$view().jsValue().info);
-                const menuIndex = ((_b = (_a = interacton.$view().jsValue().info) === null || _a === void 0 ? void 0 : _a.menuIndex) !== null && _b !== void 0 ? _b : 0);
-                if (menuIndex < 0 || menuIndex >= menuList.length)
-                    return;
-                return createContextMenuConfiguration(menuList[menuIndex]);
-            }
-        }
-    });
-}
-function createUIAction(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;
-}
-;
-function createContextMenuConfiguration({ title, items }) {
-    return $objc("UIContextMenuConfiguration").$configurationWithIdentifier_previewProvider_actionProvider(null, null, $block("UIMenu *, NSArray *", () => {
-        const actions = items.map(item => createUIAction(item));
-        return $objc("UIMenu").$menuWithTitle_children(title, actions);
-    }));
-}
-function createRuntimeView(classname, menuList) {
-    defineOCClass({ classname, menuList });
-    const view = $objc(classname).invoke("alloc.init");
-    const interaction = $objc("UIContextMenuInteraction")
-        .invoke("alloc")
-        .invoke("initWithDelegate", view);
-    view.$addInteraction(interaction);
-    return view;
-}
 /**
  * 动态上下文菜单视图，此视图是为了弥补JSBox中无法动态调整上下文菜单的缺陷而设计的。
  *
- * 由于OC类的注册是全局性的，所以需要特殊的处理来避免重复注册类：对于使用同一套动态上下文菜单的View，应该注册为同一个类。
- * 用menuList列表来记录所需的动态上下文菜单，通过props.info.menuIndex来指定当前视图需要使用的菜单。
- *
- * 此视图除了一般UIView的props, layout, events, views四个参数外，还有三个必须的特殊参数：
- * 1. ocClassName: string OC类名，用于注册OC类，一个类名只能注册一次，重复注册会被忽略。
- *    这和menuList是配套的，同一套menuList用同一个类名。
- * 2. menuList: { title: string; items: MenuItem[] }[] 菜单列表，每个菜单项包含一个标题和一个MenuItem数组。
- * 3. props.info: { menuIndex: number } 用于指定当前视图的菜单索引，从0开始。info中可以包含其他参数。
+ * 此视图除了一般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({ ocClassName, menuList, props, layout, events, views = [] }) {
-        var _a, _b;
+    constructor({ classname, generateContextMenu, props, layout, events, views }) {
         super();
-        if (!props.info || ((_a = props.info) === null || _a === void 0 ? void 0 : _a.menuIndex) === undefined || ((_b = props.info) === null || _b === void 0 ? void 0 : _b.menuIndex) === null) {
-            throw new Error("props.info.menuIndex is required");
-        }
-        if (typeof props.info.menuIndex !== "number") {
-            throw new Error("props.info.menuIndex must be a number");
-        }
-        if (props.info.menuIndex < 0 || props.info.menuIndex >= menuList.length) {
-            throw new Error("props.info.menuIndex is out of range");
-        }
-        this._menuList = menuList;
-        const runtimeView = createRuntimeView(ocClassName, menuList);
+        this._ocClassName = classname || `DynamicContextMenuView_${cvid_1.cvid.newId}`;
+        this.generateContextMenu = generateContextMenu;
+        const runtimeView = this.createRuntimeView();
         this._defineView = () => {
             return {
                 type: "runtime",
@@ -81,15 +30,40 @@ class DynamicContextMenuView extends base_1.Base {
             };
         };
     }
-    set menuIndex(index) {
-        if (index < 0 || index >= this._menuList.length) {
-            throw new Error("menuIndex is out of range");
-        }
-        // 必须重新赋值info，否则info不会改变
-        this.view.info = Object.assign(Object.assign({}, this.view.info), { menuIndex: index });
+    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);
+        }));
     }
-    get menuIndex() {
-        return this.view.info.menuIndex;
+    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/test/dynamic-contextmenu-view.js

@@ -1,6 +1,7 @@
 "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",
@@ -9,7 +10,7 @@ const menuList = [
                 title: "变成菜单1",
                 symbol: "plus",
                 handler: () => {
-                    view.menuIndex = 0;
+                    menuIndex = 0;
                 }
             },
             {
@@ -17,7 +18,7 @@ const menuList = [
                 symbol: "plus",
                 destructive: true,
                 handler: () => {
-                    view.menuIndex = 1;
+                    menuIndex = 1;
                 }
             }
         ]
@@ -29,27 +30,24 @@ const menuList = [
                 title: "变成菜单1",
                 symbol: "plus",
                 handler: () => {
-                    view.menuIndex = 0;
+                    menuIndex = 0;
                 }
             },
             {
                 title: "变成菜单2",
                 symbol: "plus",
                 handler: () => {
-                    view.menuIndex = 1;
+                    menuIndex = 1;
                 }
             }
         ]
     }
 ];
 const view = new dynamic_contextmenu_view_1.DynamicContextMenuView({
-    ocClassName: "testView",
-    menuList,
-    props: {
-        info: {
-            menuIndex: 0
-        }
+    generateContextMenu: (sender) => {
+        return menuList[menuIndex];
     },
+    props: {},
     layout: (make, view) => {
         make.center.equalTo(view.super);
         make.size.equalTo($size(100, 100));

package/package.json

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

package/test/dynamic-contextmenu-view.ts

@@ -1,5 +1,6 @@
 import { DynamicContextMenuView } from "../components/dynamic-contextmenu-view";
 
+let menuIndex = 0;
 const menuList = [
   {
     title: "菜单1",
@@ -8,7 +9,7 @@ const menuList = [
         title: "变成菜单1",
         symbol: "plus",
         handler: () => {
-          view.menuIndex = 0;
+          menuIndex = 0;
         }
       },
       {
@@ -16,7 +17,7 @@ const menuList = [
         symbol: "plus",
         destructive: true,
         handler: () => {
-          view.menuIndex = 1;
+          menuIndex = 1;
         }
       }
     ]
@@ -28,14 +29,14 @@ const menuList = [
         title: "变成菜单1",
         symbol: "plus",
         handler: () => {
-          view.menuIndex = 0;
+          menuIndex = 0;
         }
       },
       {
         title: "变成菜单2",
         symbol: "plus",
         handler: () => {
-          view.menuIndex = 1;
+          menuIndex = 1;
         }
       }
     ]
@@ -43,13 +44,10 @@ const menuList = [
 ]
 
 const view = new DynamicContextMenuView({
-  ocClassName: "testView",
-  menuList,
-  props: {
-    info: {
-      menuIndex: 0
-    }
+  generateContextMenu: (sender) => {
+    return menuList[menuIndex]
   },
+  props: {},
   layout: (make, view) => {
     make.center.equalTo(view.super);
     make.size.equalTo($size(100, 100));