jsbox-cview 1.6.6 → 1.6.8

package/components/dialogs/form-dialog.ts

@@ -1,63 +0,0 @@
-import { Base } from "../base";
-import { PreferenceListView, PreferenceSection } from "../static-preference-listview";
-import { DialogSheet } from "./dialog-sheet";
-
-class DialogSheetForm extends DialogSheet {
-  private _checkHandler: (values: { [key: string]: any }) => boolean;
-  constructor(
-    sheetProps: {
-      title: string;
-      cview: Base<any, any>;
-      doneHandler?: () => void;
-      presentMode?: number;
-      bgcolor?: UIColor;
-      doneButtonHidden?: boolean;
-    },
-    checkHandler: (values: { [key: string]: any }) => boolean,
-  ) {
-    super(sheetProps);
-    this._checkHandler = checkHandler;
-  }
-
-  done() {
-    if (this.resolve && this._props.doneHandler) {
-      const values = this._props.doneHandler();
-      const success = this._checkHandler(values);
-      if (success) {
-        this._done = true;
-        this.resolve(values);
-        this.dismiss();
-      }
-    }
-  }
-}
-
-/**
- * 显示一个表单
- * @param sections 表单分组, 请参考`PreferenceListView`中的`PreferenceSection`
- * @param title 标题
- */
-export function formDialog({
-  sections,
-  title,
-  checkHandler,
-}: {
-  sections: PreferenceSection[];
-  title: string;
-  checkHandler?: (values: { [key: string]: any }) => boolean;
-}): Promise<{ [key: string]: any }> {
-  const view = new PreferenceListView({ sections });
-  const sheet = new DialogSheetForm(
-    {
-      title,
-      bgcolor: $color("insetGroupedBackground"),
-      cview: view,
-      doneHandler: () => view.values,
-    },
-    checkHandler || (() => true),
-  );
-  return new Promise((resolve, reject) => {
-    sheet.promisify(resolve, reject);
-    sheet.present();
-  });
-}

package/components/dialogs/list-dialog.ts

@@ -1,119 +0,0 @@
-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,
-}: {
-  items: string[];
-  multiSelectEnabled: true;
-  value?: never;
-  values?: number[];
-  title: string;
-}): Promise<number[]>;
-export function listDialog({
-  items,
-  multiSelectEnabled,
-  value,
-  values,
-  title,
-}: {
-  items: string[];
-  multiSelectEnabled?: false | undefined;
-  value?: number;
-  values?: never;
-  title: string;
-}): Promise<number>;
-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];
-  const listView = new List({
-    props: {
-      style: 2,
-      data: items.map((n, i) => {
-        return {
-          label: { text: n },
-          image: { hidden: !values.includes(i) },
-        };
-      }),
-      template: {
-        views: [
-          {
-            type: "label",
-            props: {
-              id: "label",
-            },
-            layout: (make, view) => {
-              make.top.bottom.inset(0);
-              make.left.inset(20);
-              make.right.inset(50);
-            },
-          },
-          {
-            type: "image",
-            props: {
-              id: "image",
-              symbol: "checkmark",
-              contentMode: 1,
-              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;
-        } else {
-          data.forEach((n, i) => {
-            n.image.hidden = i !== indexPath.item;
-          });
-        }
-        sender.data = data;
-      },
-    },
-  });
-  const sheet = new DialogSheet({
-    title,
-    bgcolor: $color("insetGroupedBackground"),
-    cview: listView,
-    doneHandler: () => {
-      const filtered = listView.view.data.map((n, i) => (n.image.hidden ? -1 : i)).filter((n) => n !== -1);
-      if (multiSelectEnabled) return filtered;
-      else return filtered[0];
-    },
-  });
-  return new Promise((resolve, reject) => {
-    sheet.promisify(resolve, reject);
-    sheet.present();
-  });
-}

package/components/dialogs/text-dialog.ts

@@ -1,44 +0,0 @@
-import { Text } from "../single-views";
-import { DialogSheet } from "./dialog-sheet";
-
-/**
- * 返回一个Promise用于输入文本
- * @param title 标题
- * @param text 初始文本
- * @param placeholder 占位符
- * @param editable 是否可编辑
- */
-export function textDialog({
-  title,
-  text = "",
-  placeholder = "",
-  editable = true,
-}: {
-  title: string;
-  text?: string;
-  placeholder?: string;
-  editable?: boolean;
-}): Promise<string> {
-  const textView = new Text({
-    props: {
-      text,
-      placeholder,
-      editable,
-    },
-    events: {
-      ready: (sender) => {
-        if (sender.editable) sender.focus();
-      },
-    },
-  });
-
-  const sheet = new DialogSheet({
-    title,
-    cview: textView,
-    doneHandler: () => textView.view.text,
-  });
-  return new Promise((resolve, reject) => {
-    sheet.promisify(resolve, reject);
-    sheet.present();
-  });
-}

package/components/dynamic-contextmenu-view.ts

@@ -1,115 +0,0 @@
-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.ViewProps;
-    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,
-            null,
-            $block("void, UIAction *", () => item.handler()),
-          );
-          if (item.destructive) action.$setAttributes(1 << 1);
-          return action;
-        });
-        return title
-          ? $objc("UIMenu").$menuWithTitle_children(title, actions)
-          : $objc("UIMenu").$menuWithChildren(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/components/dynamic-itemsize-matrix.ts

@@ -1,206 +0,0 @@
-import { Base } from "./base";
-import { Matrix } from "./single-views";
-
-interface DynamicItemSizeMatrixProps extends UiTypes.MatrixProps {
-  fixedItemHeight: number;
-  minItemWidth: number;
-  maxColumns: number;
-  spacing: number;
-  dynamicHeightEnabled?: boolean;
-}
-
-interface DynamicItemSizeMatrixEvents extends UiTypes.MatrixEvents {
-  itemHeight?: (width: number) => number;
-  heightChanged?: (sender: DynamicItemSizeMatrix, height: number) => void;
-}
-
-interface DynamicItemSizeMatrixPropsPartial extends UiTypes.MatrixProps {
-  fixedItemHeight?: number;
-  minItemWidth?: number;
-  maxColumns?: number;
-  spacing?: number;
-  dynamicHeightEnabled?: boolean;
-}
-
-function _getColumnsAndItemSizeWidth(
-  containerWidth: number,
-  minItemWidth: number,
-  maxColumns: number,
-  spacing: number,
-) {
-  if (minItemWidth > containerWidth - 2 * spacing) {
-    return {
-      columns: 1,
-      itemSizeWidth: containerWidth - 2 * spacing,
-    };
-  }
-  const columns = Math.max(
-    Math.min(Math.floor((containerWidth - spacing) / (minItemWidth + spacing)), maxColumns),
-    1, // 最少一列
-  );
-  const itemSizeWidth = Math.max(
-    Math.floor((containerWidth - spacing * (columns + 1)) / columns),
-    minItemWidth, // 最小宽度
-  );
-  return {
-    columns,
-    itemSizeWidth,
-  };
-}
-
-/**
- * # CView Dynamic ItemSize Matrix
- *
- * 此组件是为了解决让 Matrix 的 ItemSize 跟随重新布局而动态变化的问题
- *
- * 动态的改变自己的 itemSize，从而使得 spacing 被优先满足。
- * 思路为在 matrix 上层套一个 superView，在旋转的时候 superView 会调用 matrix.relayout()
- * 和 matrix.reload()，从而触发 itemSize 事件
- *
- * 此视图的高度可以自动调整，需要 dynamicHeightEnabled 设为 true，且 layout 中要有关于 height 的约束
- *
- * 其排布逻辑是这样的:
- *
- * 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不会超出边框
- *
- * props:
- *
- * 可以使用 matrix 的全部属性
- *
- * 特殊属性:
- *
- * - fixedItemHeight 固定 itemSize 高度
- * - minItemWidth 最小的 itemSize 宽度
- * - maxColumns 最大列数
- * - spacing
- * - dynamicHeightEnabled 此项为 true，那么 scrollEnabled 自动设为 false，且高度可以自动调整
- *
- * events:
- *
- * 可以使用 matrix 除 itemSize 以外的全部事件
- *
- * 其他特殊事件:
- *
- * - itemHeight: width => height 通过 itemWidth 动态计算 itemHeight
- *
- *
- * 方法:
- * - heightToWidth(width) 计算特定width时的应有的高度
- */
-export class DynamicItemSizeMatrix extends Base<UIView, UiTypes.ViewOptions> {
-  private _props: DynamicItemSizeMatrixProps;
-  private _events: DynamicItemSizeMatrixEvents;
-  private _itemSizeWidth: number;
-  private _itemSizeHeight: number;
-  private _totalWidth: number = 0;
-  private _columns: number = 1;
-  matrix: Matrix;
-  _defineView: () => UiTypes.ViewOptions;
-
-  constructor({
-    props,
-    layout,
-    events = {},
-  }: {
-    props: DynamicItemSizeMatrixPropsPartial;
-    layout: (make: MASConstraintMaker, view: UIView) => void;
-    events: DynamicItemSizeMatrixEvents;
-  }) {
-    super();
-    this._props = {
-      fixedItemHeight: 40,
-      minItemWidth: 96,
-      maxColumns: 5,
-      spacing: 6,
-      dynamicHeightEnabled: false,
-      ...props,
-    };
-    this._events = events;
-    const { itemHeight, heightChanged, ...rest } = this._events;
-    const _matrixEvents = rest;
-    this._itemSizeWidth = 0;
-    this._itemSizeHeight = 0;
-    this.matrix = new Matrix({
-      props: {
-        ...this._props,
-        scrollEnabled: !this._props.dynamicHeightEnabled,
-      },
-      layout: $layout.fill,
-      events: {
-        ..._matrixEvents,
-        itemSize: (sender) => $size(this._itemSizeWidth, this._itemSizeHeight),
-      },
-    });
-    this._defineView = () => {
-      return {
-        type: "view",
-        props: {
-          bgcolor: $color("clear"),
-          id: this.id,
-        },
-        layout,
-        events: {
-          layoutSubviews: (sender) => {
-            sender.relayout();
-            if (sender.frame.width === this._totalWidth) return;
-            const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(
-              sender.frame.width,
-              this._props.minItemWidth,
-              this._props.maxColumns,
-              this._props.spacing,
-            );
-            this._columns = columns;
-            this._itemSizeWidth = itemSizeWidth;
-            this._itemSizeHeight = this._events.itemHeight
-              ? this._events.itemHeight(this._itemSizeWidth)
-              : this._props.fixedItemHeight;
-            this.matrix.view.reload();
-            if (this._props.dynamicHeightEnabled) {
-              const height = this.heightToWidth(sender.frame.width);
-              sender.updateLayout((make) => make.height.equalTo(height));
-              if (this._events.heightChanged) this._events.heightChanged(this, height);
-            }
-          },
-        },
-        views: [this.matrix.definition],
-      };
-    };
-  }
-
-  heightToWidth(width: number) {
-    const { columns, itemSizeWidth } = _getColumnsAndItemSizeWidth(
-      width,
-      this._props.minItemWidth,
-      this._props.maxColumns,
-      this._props.spacing,
-    );
-    const rows = this._props.data ? Math.ceil(this._props.data.length / columns) : 0;
-    const itemSizeHeight = this._events.itemHeight
-      ? this._events.itemHeight(itemSizeWidth)
-      : this._props.fixedItemHeight;
-    return rows * itemSizeHeight + (rows + 1) * this._props.spacing;
-  }
-
-  get data() {
-    return this.matrix.view.data;
-  }
-
-  set data(data) {
-    this._props.data = data;
-    this.matrix.view.data = data;
-  }
-
-  get columns() {
-    return this._columns;
-  }
-
-  get itemSize() {
-    return $size(this._itemSizeWidth, this._itemSizeHeight);
-  }
-}