jsbox-cview 1.5.21 → 1.5.23

package/components/dialogs/list-dialog.ts

@@ -1,30 +1,36 @@
-import { DialogSheet } from './dialog-sheet';
-import { List } from '../single-views';
+import { DialogSheet } from "./dialog-sheet";
+import { List } from "../single-views";
 
 /**
  * 显示一个列表以供选择
- * 
+ *
  * @param items 选项
  * @param multiSelectEnabled 是否允许多选
  * @param value 默认选中的选项
  * @param values 默认选中的选项, 配合multiSelectEnabled使用
  * @param title 标题
  */
-export function listDialog({ items, multiSelectEnabled, value, values = [], title }: {
+export function listDialog({
+  items,
+  multiSelectEnabled,
+  value,
+  values = [],
+  title,
+}: {
   items: string[];
   multiSelectEnabled?: boolean;
   value?: number;
   values?: number[];
   title: string;
 }): Promise<number | number[]> {
-  if (value) values = [value]
+  if (value) values = [value];
   const listView = new List({
     props: {
       style: 2,
       data: items.map((n, i) => {
         return {
           label: { text: n },
-          image: { hidden: !values.includes(i) }
+          image: { hidden: !values.includes(i) },
         };
       }),
       template: {
@@ -32,13 +38,13 @@ export function listDialog({ items, multiSelectEnabled, value, values = [], titl
           {
             type: "label",
             props: {
-              id: "label"
+              id: "label",
             },
             layout: (make, view) => {
               make.top.bottom.inset(0);
               make.left.inset(20);
               make.right.inset(50);
-            }
+            },
           },
           {
             type: "image",
@@ -46,31 +52,31 @@ export function listDialog({ items, multiSelectEnabled, value, values = [], titl
               id: "image",
               symbol: "checkmark",
               contentMode: 1,
-              tintColor: $color("systemLink")
+              tintColor: $color("systemLink"),
             },
             layout: (make, view) => {
               make.top.bottom.right.inset(10);
               make.width.equalTo(30);
-            }
-          }
-        ]
-      }
+            },
+          },
+        ],
+      },
     },
     events: {
       didSelect: (sender, indexPath) => {
         const data = sender.data;
         if (multiSelectEnabled) {
-          data[indexPath.item].image.hidden = !data[indexPath.item].image
-            .hidden;
+          data[indexPath.item].image.hidden =
+            !data[indexPath.item].image.hidden;
         } else {
           data.forEach((n, i) => {
             n.image.hidden = i !== indexPath.item;
           });
         }
         sender.data = data;
-      }
-    }
-  })
+      },
+    },
+  });
   const sheet = new DialogSheet({
     title,
     bgcolor: $color("insetGroupedBackground"),
@@ -78,10 +84,10 @@ export function listDialog({ items, multiSelectEnabled, value, values = [], titl
     doneHandler: () => {
       const filtered = listView.view.data
         .map((n, i) => (n.image.hidden ? -1 : i))
-        .filter(n => n !== -1);
+        .filter((n) => n !== -1);
       if (multiSelectEnabled) return filtered;
       else return filtered[0];
-    }
+    },
   });
   return new Promise((resolve, reject) => {
     sheet.promisify(resolve, reject);

package/components/dialogs/text-dialog.ts

@@ -8,7 +8,12 @@ import { DialogSheet } from "./dialog-sheet";
  * @param placeholder 占位符
  * @param editable 是否可编辑
  */
-export function textDialog({ title, text = "", placeholder = "", editable = true }: {
+export function textDialog({
+  title,
+  text = "",
+  placeholder = "",
+  editable = true,
+}: {
   title: string;
   text?: string;
   placeholder?: string;
@@ -18,22 +23,22 @@ export function textDialog({ title, text = "", placeholder = "", editable = true
     props: {
       text,
       placeholder,
-      editable
+      editable,
     },
     events: {
-      ready: sender => {
-        if (sender.editable) sender.focus()
-      }
-    }
+      ready: (sender) => {
+        if (sender.editable) sender.focus();
+      },
+    },
   });
 
   const sheet = new DialogSheet({
     title,
     cview: textView,
-    doneHandler: () => textView.view.text
+    doneHandler: () => textView.view.text,
   });
   return new Promise((resolve, reject) => {
     sheet.promisify(resolve, reject);
     sheet.present();
   });
-}
+}

package/components/dynamic-contextmenu-view.ts

@@ -6,28 +6,47 @@ type MenuItem = {
   symbol: string;
   handler: () => void;
   destructive?: boolean;
-}
+};
 
-const RegisteredOCClassName: Set<string> = new Set()
+const RegisteredOCClassName: Set<string> = new Set();
 
 /**
  * 动态上下文菜单视图，此视图是为了弥补JSBox中无法动态调整上下文菜单的缺陷而设计的。
- * 
+ *
  * 此视图除了一般UIView的props, layout, events, views四个参数外，还有必须的特殊参数：
  * 1. classname?: string OC类名，如果不指定则会自动生成一个唯一的类名。
- *    如果有不同的DynamicContextMenuView实例使用相同的OC类，那么无法确定弹出的contextMenu是绑定了哪个实例。换言之，实例A弹出的Menu可能是绑定的实例B。
+ *    如果有不同的DynamicContextMenuView实例使用相同的OC类，
+ *    那么无法确定弹出的contextMenu是绑定了哪个实例。
+ *    换言之，实例A弹出的Menu可能是绑定的实例B。
  *    如果这样做，必须使用下面generateContextMenu的sender参数来定位。
- * 2. generateContextMenu: (sender: UIView) => { title: string; items: MenuItem[]; } 生成上下文菜单的回调函数。
- * 
+ * 2. generateContextMenu: (sender: UIView) => { title: string; items: MenuItem[]; }
+ *    生成上下文菜单的回调函数。
+ *
  */
-export class DynamicContextMenuView extends Base<UIView, UiTypes.RuntimeOptions> {
-  private 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 }: {
+
+  constructor({
+    classname,
+    generateContextMenu,
+    props,
+    layout,
+    events,
+    views,
+  }: {
     classname?: string;
-    generateContextMenu: (sender: UIView) => { title: string; items: MenuItem[]; };
+    generateContextMenu: (sender: UIView) => {
+      title: string;
+      items: MenuItem[];
+    };
     props: UiTypes.BaseViewProps;
     layout?: (make: MASConstraintMaker, view: UIView) => void;
     events?: UiTypes.BaseViewEvents;
@@ -43,13 +62,13 @@ export class DynamicContextMenuView extends Base<UIView, UiTypes.RuntimeOptions>
         props: {
           ...props,
           id: this.id,
-          view: runtimeView
+          view: runtimeView,
         },
         layout,
         events,
-        views
-      }
-    }
+        views,
+      };
+    };
   }
 
   private defineOCClass() {
@@ -58,22 +77,35 @@ export class DynamicContextMenuView extends Base<UIView, UiTypes.RuntimeOptions>
     $define({
       type: this._ocClassName + " : UIView <UIContextMenuInteractionDelegate>",
       events: {
-        "contextMenuInteraction:configurationForMenuAtLocation:": (interacton: any, point: JBPoint) => {
-          const view = interacton.$view().jsValue()
+        "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(
+  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(
+        const actions = items.map((item) => {
+          const action = $objc(
+            "UIAction"
+          ).$actionWithTitle_image_identifier_handler(
             item.title,
             item.symbol,
             null,
@@ -81,7 +113,7 @@ export class DynamicContextMenuView extends Base<UIView, UiTypes.RuntimeOptions>
           );
           if (item.destructive) action.$setAttributes(1 << 1);
           return action;
-        })
+        });
         return $objc("UIMenu").$menuWithTitle_children(title, actions);
       })
     );

package/components/dynamic-itemsize-matrix.ts

@@ -1,4 +1,4 @@
-import { Base } from './base';
+import { Base } from "./base";
 import { Matrix } from "./single-views";
 
 interface DynamicItemSizeMatrixProps extends UiTypes.MatrixProps {
@@ -31,7 +31,7 @@ function _getColumnsAndItemSizeWidth(
   if (minItemWidth > containerWidth - 2 * spacing) {
     return {
       columns: 1,
-      itemSizeWidth: containerWidth - 2 * spacing
+      itemSizeWidth: containerWidth - 2 * spacing,
     };
   }
   const columns = Math.max(
@@ -39,58 +39,60 @@ function _getColumnsAndItemSizeWidth(
       Math.floor((containerWidth - spacing) / (minItemWidth + spacing)),
       maxColumns
     ),
-    1  // 最少一列
+    1 // 最少一列
+  );
+  const itemSizeWidth = Math.max(
+    Math.floor((containerWidth - spacing * (columns + 1)) / columns),
+    minItemWidth // 最小宽度
   );
-  const itemSizeWidth =  Math.max(
-    Math.floor((containerWidth - spacing * (columns + 1)) / columns), 
-    minItemWidth  // 最小宽度
-  )
   return {
     columns,
-    itemSizeWidth
+    itemSizeWidth,
   };
 }
 
 /**
  * # CView Dynamic ItemSize Matrix
- * 
+ *
  * 此组件是为了解决让 Matrix 的 ItemSize 跟随重新布局而动态变化的问题
- * 
+ *
  * 动态的改变自己的 itemSize，从而使得 spacing 被优先满足。
- * 思路为在 matrix 上层套一个 superView，在旋转的时候 superView 会调用 matrix.relayout() 和 matrix.reload()
- * 从而触发 itemSize 事件
- * 
+ * 思路为在 matrix 上层套一个 superView，在旋转的时候 superView 会调用 matrix.relayout()
+ * 和 matrix.reload()，从而触发 itemSize 事件
+ *
  * 此视图的高度可以自动调整，需要 dynamicHeightEnabled 设为 true，且 layout 中要有关于 height 的约束
- * 
+ *
  * 其排布逻辑是这样的:
- * 
- * 1. 由 minItemWidth，spacing，maxColumns 这三个参数决定 cloumns，并结合 totalWidth 确定 itemSize.width
+ *
+ * 1. 由 minItemWidth，spacing，maxColumns 这三个参数决定 cloumns，
+ *    并结合 totalWidth 确定 itemSize.width
  * 2. 确定 itemHeight 有两种方法:
  *    - fixedItemHeight 固定高度，优先级第二
  *    - event: itemHeight(width) => height 通过 width 动态计算，优先级最高
- * 3. 如果 minItemWidth 比 totalWidth - 2 * spacing 还要小，那么 itemSize.width 会被设定为 totalWidth - 2 * spacing，以保证item不会超出边框
- * 
+ * 3. 如果 minItemWidth 比 totalWidth - 2 * spacing 还要小，那么 itemSize.width
+ *    会被设定为 totalWidth - 2 * spacing，以保证item不会超出边框
+ *
  * props:
- * 
+ *
  * 可以使用 matrix 的全部属性
- * 
+ *
  * 特殊属性:
- * 
+ *
  * - fixedItemHeight 固定 itemSize 高度
  * - minItemWidth 最小的 itemSize 宽度
  * - maxColumns 最大列数
  * - spacing
  * - dynamicHeightEnabled 此项为 true，那么 scrollEnabled 自动设为 false，且高度可以自动调整
- *   
+ *
  * events:
- * 
+ *
  * 可以使用 matrix 除 itemSize 以外的全部事件
- * 
+ *
  * 其他特殊事件:
- * 
+ *
  * - itemHeight: width => height 通过 itemWidth 动态计算 itemHeight
- * 
- * 
+ *
+ *
  * 方法:
  * - heightToWidth(width) 计算特定width时的应有的高度
  */
@@ -104,11 +106,14 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
   matrix: Matrix;
   _defineView: () => UiTypes.ViewOptions;
 
-  constructor({ props, layout, events = {} }: {
+  constructor({
+    props,
+    layout,
+    events = {},
+  }: {
     props: DynamicItemSizeMatrixPropsPartial;
     layout: (make: MASConstraintMaker, view: UIView) => void;
     events: DynamicItemSizeMatrixEvents;
-  
   }) {
     super();
     this._props = {
@@ -117,7 +122,7 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
       maxColumns: 5,
       spacing: 6,
       dynamicHeightEnabled: false,
-      ...props
+      ...props,
     };
     this._events = events;
     const { itemHeight, heightChanged, ...rest } = this._events;
@@ -127,24 +132,24 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
     this.matrix = new Matrix({
       props: {
         ...this._props,
-        scrollEnabled: !this._props.dynamicHeightEnabled
+        scrollEnabled: !this._props.dynamicHeightEnabled,
       },
       layout: $layout.fill,
       events: {
         ..._matrixEvents,
-        itemSize: sender => $size(this._itemSizeWidth, this._itemSizeHeight)
-      }
+        itemSize: (sender) => $size(this._itemSizeWidth, this._itemSizeHeight),
+      },
     });
     this._defineView = () => {
       return {
         type: "view",
         props: {
           bgcolor: $color("clear"),
-          id: this.id
+          id: this.id,
         },
         layout,
         events: {
-          layoutSubviews: sender => {
+          layoutSubviews: (sender) => {
             sender.relayout();
             if (sender.frame.width === this._totalWidth) return;
             const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(
@@ -161,17 +166,17 @@ export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
             this.matrix.view.reload();
             if (this._props.dynamicHeightEnabled) {
               const height = this.heightToWidth(sender.frame.width);
-              sender.updateLayout(make => make.height.equalTo(height));
+              sender.updateLayout((make) => make.height.equalTo(height));
               if (this._events.heightChanged)
                 this._events.heightChanged(this, height);
             }
-          }
+          },
         },
-        views: [this.matrix.definition]
+        views: [this.matrix.definition],
       };
-    }
+    };
   }
-  
+
   heightToWidth(width: number) {
     const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(
       width,