jsbox-cview 1.6.5 → 1.6.7

package/components/dialogs/dialog-sheet.ts

@@ -1,111 +0,0 @@
-import { Sheet } from "../sheet";
-
-import { CustomNavigationBar } from "../custom-navigation-bar";
-import { l10n } from "../../utils/l10n";
-import { ContentView } from "../single-views";
-import { Base } from "../base";
-
-/**
- * dialog所需要的sheet
- *
- * @param title 标题
- * @param cview 内容视图
- * @param doneHandler 完成时的回调
- * @param presentMode 显示模式
- * @param bgcolor 背景颜色
- * @param doneButtonHidden 是否隐藏完成按钮, 默认为false，如果隐藏则需要自行实现完成逻辑
- * @param doneButtonValidator 完成按钮验证器，返回true则执行完成逻辑，返回false则不执行
- * @param doneButtonTitle 完成按钮标题，默认为"完成"
- */
-export class DialogSheet extends Sheet<ContentView, UIView, UiTypes.ViewOptions> {
-  _props: {
-    title: string;
-    cview: Base<any, any>;
-    doneHandler?: () => any;
-    presentMode?: number;
-    bgcolor?: UIColor;
-    doneButtonHidden?: boolean;
-    doneButtonValidator?: () => boolean;
-    doneButtonTitle?: string;
-  };
-  _done: boolean;
-  private _navbar?: CustomNavigationBar;
-  resolve?: (value: any) => void;
-  reject?: (reason: any) => void;
-
-  constructor(props: {
-    title: string;
-    cview: Base<any, any>;
-    doneHandler?: () => any;
-    presentMode?: number;
-    bgcolor?: UIColor;
-    doneButtonHidden?: boolean;
-    doneButtonValidator?: () => boolean;
-    doneButtonTitle?: string;
-  }) {
-    super({
-      presentMode: props.presentMode || ($device.isIpad ? 2 : 1),
-      bgcolor: props.bgcolor,
-    });
-    this._props = props;
-    this._done = false;
-  }
-
-  promisify(resolve: (value: any) => void, reject: (reason: any) => void) {
-    this.resolve = resolve;
-    this.reject = reject;
-  }
-
-  present() {
-    this._dismissalHandler = () => {
-      if (!this._done && this.reject) this.reject("cancel");
-    };
-    this._navbar = new CustomNavigationBar({
-      props: {
-        title: this._props.title,
-        leftBarButtonItems: [{ symbol: "xmark", handler: () => this.dismiss() }],
-        rightBarButtonItems: this._props.doneButtonHidden
-          ? []
-          : [
-              {
-                title: this._props.doneButtonTitle || l10n("DONE"),
-                handler: () => {
-                  if (this._props.doneButtonValidator) {
-                    if (this._props.doneButtonValidator()) {
-                      this.done();
-                    } else {
-                      return;
-                    }
-                  }
-                  this.done();
-                },
-              },
-            ],
-      },
-    });
-    this._props.cview._layout = (make, view) => {
-      make.left.right.bottom.equalTo(view.super);
-      make.top.equalTo(view.prev.bottom);
-    };
-    this._cview = new ContentView({
-      props: { bgcolor: $color("clear") },
-      views: [this._navbar.definition, this._props.cview.definition],
-    });
-    super.present();
-  }
-
-  done() {
-    this._done = true;
-    if (this.resolve && this._props.doneHandler) this.resolve(this._props.doneHandler());
-    this.dismiss();
-  }
-
-  get title() {
-    return this._props.title;
-  }
-
-  set title(title: string) {
-    this._props.title = title;
-    if (this._navbar) this._navbar.title = title;
-  }
-}

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);
-  }
-}