jsbox-cview 1.6.6 → 1.6.7

package/components/dynamic-rowheight-list.ts

@@ -1,77 +0,0 @@
-import { Base } from "./base";
-
-interface DynamicRowHeightListProps extends Omit<UiTypes.ListProps, "data" | "template"> {}
-interface DynamicRowHeightListEvents extends Omit<UiTypes.ListEvents, "rowHeight"> {}
-interface DynamicRowHeightListCView extends Base<any, any> {
-  heightToWidth: (width: number) => number;
-}
-
-/**
- * # cview Dynamic RowHeight List
- *
- * 可以自动更新 rowHeight 的 list
- *
- * 核心策略为 list 的所有行均为 cview，且每一个 cview 需要实现一个方法：
- * heightToWidth(width: number) => number
- * 通过这个方法汇报自己在某个宽度的时候所需要的高度，这必须任何时候均立即可用；
- *
- * 特别参数
- * sections: {title: string, rows: cview[]}[]
- * rows: cview[]
- * 两者不能同时存在，否则rows不起作用
- *
- * 除了 props.data, props.template 和 events.rowHeight 不可用，其他均和 list 一致
- */
-export class DynamicRowHeightList extends Base<UIListView, UiTypes.ListOptions> {
-  _defineView: () => UiTypes.ListOptions;
-  constructor({
-    sections,
-    rows,
-    props,
-    layout,
-    events,
-  }: {
-    sections?: { title: string; rows: DynamicRowHeightListCView[] }[];
-    rows?: DynamicRowHeightListCView[];
-    props: DynamicRowHeightListProps;
-    layout: (make: MASConstraintMaker, view: UIListView) => void;
-    events: DynamicRowHeightListEvents;
-  }) {
-    super();
-    this._defineView = () => {
-      let data: any;
-      if (sections && sections.length > 0) {
-        data = sections.map((n) => ({
-          title: n.title,
-          rows: n.rows.map((r) => r.definition),
-        }));
-      } else if (rows && rows.length > 0) {
-        data = rows.map((r) => r.definition);
-      } else {
-        throw new Error("sections or rows must be provided");
-      }
-      return {
-        type: "list",
-        props: {
-          id: this.id,
-          data,
-          ...props,
-        },
-        layout,
-        events: {
-          rowHeight: (sender, indexPath) => {
-            if (sections) {
-              const cview = sections[indexPath.section].rows[indexPath.row];
-              return cview.heightToWidth(sender.frame.width);
-            } else if (rows) {
-              return rows[indexPath.row].heightToWidth(sender.frame.width);
-            } else {
-              throw new Error("sections or rows must be provided");
-            }
-          },
-          ...events,
-        },
-      };
-    };
-  }
-}

package/components/enhanced-imageview.ts

@@ -1,132 +0,0 @@
-import { Base } from "./base";
-import { Scroll } from "./single-views";
-import { cvid } from "../utils/cvid";
-
-/**
- * 此组件是为了加强 imageView，实现以下目的：
- *  1. 点击实现上下翻页
- *  2. 双指放大缩小（但不可以双击放大缩小）
- *
- * 请注意：此组件使用了Runtime代码重新设置了Tapped事件。
- * 与以前使用touchesEnded事件来实现相比，可以避免在滑动手指时误触发。
- * 但因此带来了副作用：必须在关闭前通过releaseGestureObject释放掉此视图中自定义的NSObject，
- * 否则再次启动可能会有问题。
- *
- * Props:
- *  src: string, 图片地址
- *  maxZoomScale: number, 最大缩放倍数，默认为2
- *
- * Events:
- * upperLocationTouched: (sender: EnhancedImageView) => void, 上半部分被点击
- * lowerLocationTouched: (sender: EnhancedImageView) => void, 下半部分被点击
- */
-export class EnhancedImageView extends Base<UIView, UiTypes.ViewOptions> {
-  private _props: { src: string; maxZoomScale: number };
-  private _scroll: Scroll;
-  private _gestureObject: any;
-  _defineView: () => UiTypes.ViewOptions;
-
-  constructor({
-    props,
-    layout,
-    events = {},
-  }: {
-    props: { src: string; maxZoomScale?: number };
-    layout: (make: MASConstraintMaker, view: UIView) => void;
-    events?: {
-      upperLocationTouched?: (sender: EnhancedImageView) => void;
-      lowerLocationTouched?: (sender: EnhancedImageView) => void;
-    };
-  }) {
-    super();
-    this._props = { maxZoomScale: 2, ...props };
-    this._scroll = new Scroll({
-      props: {
-        zoomEnabled: true,
-        doubleTapToZoom: false,
-        maxZoomScale: this._props.maxZoomScale,
-      },
-      layout: $layout.fill,
-      views: [
-        {
-          type: "image",
-          props: {
-            id: "image",
-            src: this._props.src,
-            contentMode: 1,
-          },
-          layout: $layout.fill,
-        },
-      ],
-      events: {
-        ready: (view) => {
-          $delay(0.1, () =>
-            this._addGesture(view, (gesture: any) => {
-              const location = gesture.$locationInView(view.ocValue());
-              const realLocation = $point(location.x - view.bounds.x, location.y - view.bounds.y);
-              const frame = this.view.frame;
-              if (realLocation.y <= frame.height / 2) {
-                if (events.upperLocationTouched) events.upperLocationTouched(this);
-              } else {
-                if (events.lowerLocationTouched) events.lowerLocationTouched(this);
-              }
-            }),
-          );
-        },
-      },
-    });
-    this._defineView = () => {
-      return {
-        type: "view",
-        props: {
-          id: this.id,
-        },
-        views: [this._scroll.definition],
-        layout,
-        events: {
-          layoutSubviews: (sender) => {
-            $delay(0.1, () => (this.src = this.src));
-            $delay(0.3, () => (this.src = this.src));
-          },
-        },
-      };
-    };
-  }
-
-  private _addGesture(view: AllUIView, event: (gesture: any) => void) {
-    const objectId = cvid.newId;
-    $define({
-      type: objectId + ": NSObject",
-      events: {
-        tapped: event,
-      },
-    });
-    const object = $objc(objectId).$new();
-    $objc_retain(object); // 此步骤是必须的，否则将很快被系统释放掉，
-    // 但是必须在关闭时手动释放掉，否则再次启动可能会有问题
-    this._gestureObject = object;
-    const tapGestureRecognizer = $objc("UITapGestureRecognizer")
-      .$alloc()
-      .$initWithTarget_action(this._gestureObject, "tapped:");
-    view.ocValue().$addGestureRecognizer(tapGestureRecognizer);
-  }
-
-  releaseGestureObject() {
-    if (this._gestureObject) $objc_release(this._gestureObject);
-  }
-
-  get src() {
-    return this._props.src;
-  }
-
-  set src(src) {
-    this._props.src = src;
-    const view = this._scroll.view.get("image") as UIImageView;
-    view.src = src;
-  }
-
-  get image() {
-    const view = this._scroll.view.get("image") as UIImageView;
-    return view.image;
-  }
-}

package/components/flowlayout.ts

@@ -1,248 +0,0 @@
-import { Base } from "./base";
-
-/**
- * 流式布局：间距固定，项目高度固定但宽度不定，左对齐，自动换行，不能滚动。
- *
- * 注意事项:
- * 1. 此控件默认是可变高度的，但前提是布局中必须有关于高度的约束。
- *    如果不需要可变高度，可以设置fixedHeight为true
- * 1. 此控件的边缘是不留白的，这和Matrix不同
- * 2. itemWidth 如果超过总宽度，会被设定为总宽度
- * 3. maxRows 可以控制最大行数，如果超过则会被截断
- *
- * ## 属性
- * 属性的写法尽可能和Matrix的风格保持一致
- * - items: FlowlayoutItem[] 关键参数，必须实现一个方法itemWidth(): number, 用于告知自身理想的宽度
- * - spacing: number
- * - itemHeight: number
- * - maxRows?: number
- * - fixedHeight?: boolean
- * - menu?: UiTypes.ContextMenuOptions
- * - bgcolor?: UIColor
- *
- * ## 事件
- * - didSelect: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void
- * - didLongPress: (sender: Flowlayout, index: number, item: FlowlayoutItem) => void
- *
- * ## 方法
- * - heightToWidth(width: number): height: number  根据宽度计算其应有的高度
- * - cell(index: number): FlowlayoutItem  获取对应位置的 cview
- * - set items(items: FlowlayoutItem[])  设置子视图
- * - get items(): FlowlayoutItem[]  获取子视图
- */
-export class Flowlayout<T extends FlowlayoutItem> extends Base<UIView, UiTypes.ViewOptions> {
-  private _width: number; // 缓存宽度，用于判断是否需要重新布局
-  private _props: {
-    items: T[];
-    spacing: number;
-    itemHeight: number;
-    fixedRows?: number;
-    fixedHeight?: boolean;
-    menu?: UiTypes.ContextMenuOptions<UIView>;
-    bgcolor?: UIColor;
-  };
-  private _wrappers: WrapperView<T>[];
-  private _events?: {
-    didSelect?: (sender: Flowlayout<T>, index: number, item: T) => void;
-    didLongPress?: (sender: Flowlayout<T>, index: number, item: T) => void;
-  };
-  _defineView: () => UiTypes.ViewOptions;
-
-  constructor({
-    props,
-    layout,
-    events,
-  }: {
-    props: {
-      items: T[];
-      spacing: number;
-      itemHeight: number;
-      fixedRows?: number;
-      fixedHeight?: boolean;
-      menu?: UiTypes.ContextMenuOptions<UIView>;
-      bgcolor?: UIColor;
-    };
-    layout: (make: MASConstraintMaker, view: UIView) => void;
-    events?: {
-      didSelect?: (sender: Flowlayout<T>, index: number, item: T) => void;
-      didLongPress?: (sender: Flowlayout<T>, index: number, item: T) => void;
-    };
-  }) {
-    super();
-    this._width = 0;
-    this._props = props;
-    this._events = events;
-    this._wrappers = props.items.map(
-      (item, index) =>
-        new WrapperView({
-          item,
-          menu: props.menu,
-          didSelect: events?.didSelect,
-          didLongPress: events?.didLongPress,
-          flowlayout: this,
-          index,
-        }),
-    );
-    this._defineView = () => ({
-      type: "view",
-      props: {
-        id: this.id,
-        bgcolor: props.bgcolor,
-      },
-      layout,
-      events: {
-        layoutSubviews: (sender) => {
-          if (this._width !== sender.frame.width) {
-            this._width = sender.frame.width;
-            const height = this._layoutWrappers();
-            if (!this._props.fixedHeight) sender.updateLayout((make) => make.height.equalTo(height));
-          }
-        },
-      },
-      views: this._wrappers.map((wrapper) => wrapper.definition),
-    });
-  }
-
-  cell(index: number): T {
-    return this._props.items[index];
-  }
-
-  get items(): T[] {
-    return this._props.items;
-  }
-
-  set items(items: T[]) {
-    this._props.items = items;
-    this._wrappers = items.map(
-      (item, index) =>
-        new WrapperView({
-          item,
-          menu: this._props.menu,
-          didSelect: this._events?.didSelect,
-          didLongPress: this._events?.didLongPress,
-          flowlayout: this,
-          index,
-        }),
-    );
-    this.view.views.forEach((v) => v.remove());
-    this._wrappers.forEach((wrapper) => this.view.add(wrapper.definition));
-    const height = this._layoutWrappers();
-    if (!this._props.fixedHeight) this.view.updateLayout((make) => make.height.equalTo(height));
-  }
-
-  _layoutWrappers(): number {
-    const totalWidth = this._width;
-    const itemHeight = this._props.itemHeight;
-    const itemSpacing = this._props.spacing;
-    let x = 0;
-    let y = 0;
-    let line = 1;
-    this._wrappers.forEach((wrapper, index) => {
-      const itemWidth = wrapper.item.itemWidth();
-      const width = Math.min(itemWidth, totalWidth);
-      if (x + width > totalWidth) {
-        x = 0;
-        y += itemHeight + itemSpacing;
-        line++;
-      }
-      if (this._props.fixedRows && line > this._props.fixedRows) {
-        wrapper.hidden = true;
-      } else {
-        wrapper.hidden = false;
-      }
-      wrapper.frame = $rect(x, y, width, itemHeight);
-      x += width + itemSpacing;
-    });
-    if (this._props.fixedRows && line > this._props.fixedRows) {
-      return this._props.fixedRows * (itemHeight + itemSpacing) - itemSpacing;
-    }
-    return y + itemHeight;
-  }
-
-  heightToWidth(width: number): number {
-    const totalWidth = width;
-    const itemHeight = this._props.itemHeight;
-    const itemSpacing = this._props.spacing;
-    let x = 0;
-    let y = 0;
-    let line = 1;
-    this._wrappers.forEach((wrapper, index) => {
-      const itemWidth = wrapper.item.itemWidth();
-      const width = Math.min(itemWidth, totalWidth);
-      if (x + width > totalWidth) {
-        x = 0;
-        y += itemHeight + itemSpacing;
-        line++;
-      }
-      x += width + itemSpacing;
-    });
-    if (this._props.fixedRows && line > this._props.fixedRows) {
-      return this._props.fixedRows * (itemHeight + itemSpacing) - itemSpacing;
-    }
-    return y + itemHeight;
-  }
-}
-
-interface FlowlayoutItem extends Base<any, any> {
-  itemWidth: () => number;
-}
-
-class WrapperView<T extends FlowlayoutItem> extends Base<UIView, UiTypes.ViewOptions> {
-  _defineView: () => UiTypes.ViewOptions;
-  item: T;
-  constructor({
-    item,
-    menu,
-    didSelect,
-    didLongPress,
-    flowlayout,
-    index,
-  }: {
-    item: T;
-    menu?: UiTypes.ContextMenuOptions<UIView>;
-    didSelect?: (sender: Flowlayout<T>, index: number, item: T) => void;
-    didLongPress?: (sender: Flowlayout<T>, index: number, item: T) => void;
-    flowlayout: Flowlayout<T>;
-    index: number;
-  }) {
-    super();
-    this.item = item;
-    const props: UiTypes.ViewProps = {
-      id: this.id,
-      frame: $rect(0, 0, 0, 0),
-      userInteractionEnabled: true,
-    };
-    if (menu) {
-      props.menu = menu;
-    }
-    this._defineView = () => ({
-      type: "view",
-      props,
-      views: [item.definition],
-      events: {
-        tapped: (sender) => {
-          if (didSelect) didSelect(flowlayout, index, item);
-        },
-        longPressed: (sender) => {
-          if (didLongPress) didLongPress(flowlayout, index, item);
-        },
-      },
-    });
-  }
-
-  set frame(frame: JBRect) {
-    this.view.frame = frame;
-  }
-
-  get frame(): JBRect {
-    return this.view.frame;
-  }
-
-  set hidden(hidden: boolean) {
-    this.view.hidden = hidden;
-  }
-
-  get hidden(): boolean {
-    return this.view.hidden;
-  }
-}

package/components/image-pager.ts

@@ -1,180 +0,0 @@
-import { Base } from "./base";
-import { Matrix } from "./single-views";
-
-/**
- * 图片浏览组件
- *
- * 与内置的Gallery组件相比，ImagePager组件可以动态刷新，
- * 适用于图片数量较多的场景，以及需要动态加载图片列表的场景
- *
- */
-export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
-  _props: {
-    srcs: string[];
-    page: number;
-    doubleTapToZoom: boolean;
-  };
-  _matrix: Matrix;
-  _pageLoadRecorder: { [key: number]: boolean };
-  _defineView: () => UiTypes.ViewOptions;
-
-  /**
-   *
-   * @param props
-   * - srcs: string[] - 图片地址列表
-   * - page: number - 当前页码
-   * - doubleTapToZoom: boolean - 是否双击放大，默认为true
-   * @param layout
-   * @param events
-   * - changed: (page: number) => void - 页码变化时触发
-   * - tapped: (sender: ImagePager) => void - 点击图片时触发
-   */
-  constructor({
-    props,
-    layout,
-    events = {},
-  }: {
-    props: {
-      srcs?: string[];
-      page?: number;
-      doubleTapToZoom?: boolean;
-    };
-    layout: (make: MASConstraintMaker, view: UIView) => void;
-    events: {
-      changed?: (page: number) => void;
-      tapped?: (sender: ImagePager) => void;
-    };
-  }) {
-    super();
-    this._props = {
-      srcs: [],
-      page: 0,
-      doubleTapToZoom: true,
-      ...props,
-    };
-    this._pageLoadRecorder = {};
-    this._matrix = new Matrix({
-      props: {
-        direction: $scrollDirection.horizontal,
-        pagingEnabled: true,
-        alwaysBounceVertical: false,
-        showsVerticalIndicator: false,
-        showsHorizontalIndicator: false,
-        template: {
-          views: [
-            {
-              type: "scroll",
-              props: {
-                id: "scroll",
-                zoomEnabled: true,
-                maxZoomScale: 3,
-                doubleTapToZoom: this._props.doubleTapToZoom,
-              },
-              layout: $layout.fill,
-              views: [
-                {
-                  type: "image",
-                  props: {
-                    id: "image",
-                    contentMode: $contentMode.scaleAspectFit,
-                  },
-                },
-              ],
-            },
-          ],
-        },
-        data: this._props.srcs.map((n) => {
-          return { image: { src: n } };
-        }),
-      },
-      layout: $layout.fill,
-      events: {
-        ready: (sender) => {
-          // 如果没有此处的relayout，则会出现莫名其妙的bug
-          sender.relayout();
-          if (!this._matrix.view) return;
-          this.page = this.page;
-          this.loadsrc(this.page);
-        },
-        itemSize: (sender, indexPath) => {
-          return $size(sender.frame.width, sender.frame.height);
-        },
-        forEachItem: (view, indexPath) => {
-          const scroll = view.get("scroll") as UIScrollView;
-          scroll.zoomScale = 0;
-          //$delay(0.01, () => {});
-        },
-        willEndDragging: (sender, velocity, target) => {
-          const oldPage = this.page;
-          this._props.page = Math.round(target.x / sender.frame.width);
-          //this.loadsrc(this.page, true);
-          if (oldPage !== this.page && events.changed) events.changed(this.page);
-        },
-        didScroll: (sender) => {
-          this.loadsrc(this.page + 1, true);
-          this.loadsrc(this.page - 1, true);
-        },
-      },
-    });
-    this._defineView = () => {
-      return {
-        type: "view",
-        props: {
-          id: this.id,
-        },
-        layout,
-        views: [this._matrix.definition],
-        events: {
-          layoutSubviews: (sender) => {
-            this._pageLoadRecorder = {};
-            sender.relayout();
-            if (!this._matrix.view) return;
-            this._matrix.view.reload();
-            this.page = this.page;
-            $delay(0.1, () => this.loadsrc(this.page, true));
-            $delay(0.3, () => this.loadsrc(this.page, true));
-          },
-        },
-      };
-    };
-  }
-
-  loadsrc(page: number, forced = false) {
-    if (page < 0 || page >= this._props.srcs.length) return;
-    const cell = this._matrix.view.cell($indexPath(0, page));
-    if (!cell) return;
-    const image = cell.get("image") as UIImageView;
-    if (forced || !image.image || !this._pageLoadRecorder[page]) {
-      const scroll = cell.get("scroll") as UIScrollView;
-      scroll.zoomScale = 0;
-      this._pageLoadRecorder[page] = true;
-    }
-  }
-
-  get page() {
-    return this._props.page;
-  }
-
-  get currentImage() {
-    const cell = this._matrix.view.cell($indexPath(0, this.page));
-    if (!cell) return;
-    const image = cell.get("image") as UIImageView;
-    return image.image;
-  }
-
-  set page(page) {
-    this._matrix.view.scrollTo({
-      indexPath: $indexPath(0, page),
-      animated: false,
-    });
-    this._props.page = page;
-  }
-
-  scrollToPage(page: number) {
-    this._matrix.view.scrollTo({
-      indexPath: $indexPath(0, page),
-      animated: true,
-    });
-    this._props.page = page;
-  }
-}