jsbox-cview 1.0.0

package/components/dynamic-rowheight-list.ts

@@ -0,0 +1,62 @@
+/** 
+ * # cview Dynamic RowHeight List
+ * 
+ * 可以自动更新 rowHeight 的 list
+ * 
+ * 核心策略为 list 的所有行均为 cview，且每一个 cview 需要实现一个方法：heightToWidth(width: number) => number  
+ * 通过这个方法汇报自己在某个宽度的时候所需要的高度，这必须任何时候均立即可用；
+ * 如果这个方法不可用，那么行高设为 44
+ * 
+ * 特别参数
+ * sections: {title: string, rows: cview[]}[]
+ * 
+ * 除了 props.data, props.template 和 events.rowHeight 不可用，其他均和 list 一致
+ */
+
+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;
+}
+
+export class DynamicRowHeightList extends Base<UIListView, UiTypes.ListOptions>{
+  _sections: {title: string, rows: DynamicRowHeightListCView[]}[];
+  _defineView: () => UiTypes.ListOptions;
+  constructor({ sections, props, layout, events }: {
+    sections: {title: string, rows: DynamicRowHeightListCView[]}[];
+    props: DynamicRowHeightListProps;
+    layout: (make: MASConstraintMaker, view: UIListView) => void;
+    events: DynamicRowHeightListEvents;
+  }) {
+    super();
+    this._sections = sections;
+    this._defineView = () => {
+      const data = this._sections.map(n => ({
+        title: n.title,
+        rows: n.rows.map(r => r.definition)
+      }));
+      return {
+        type: "list",
+        props: {
+          data,
+          ...props
+        },
+        layout,
+        events: {
+          rowHeight: (sender, indexPath) => {
+            const cview = this._sections[indexPath.section].rows[indexPath.row];
+            if (
+              cview.heightToWidth &&
+              typeof cview.heightToWidth === "function"
+            )
+              return cview.heightToWidth(sender.frame.width);
+            else return 44;
+          },
+          ...events
+        }
+      };
+    }
+  }
+}

package/components/enhanced-imageview.ts

@@ -0,0 +1,128 @@
+/**
+ * 此组件是为了加强 imageView，实现以下目的：
+ *  1. 点击实现上下翻页
+ *  2. 双指放大缩小（但不可以双击放大缩小）
+ * 
+ * 请注意：此组件使用了Runtime代码重新设置了Tapped事件。
+ * 与以前使用touchesEnded事件来实现相比，可以避免在滑动手指时误触发。
+ * 但因此带来了副作用：必须在关闭前通过releaseGestureObject释放掉此视图中自定义的NSObject，否则再次启动可能会有问题。
+ * 
+ * Props:
+ *  src: string, 图片地址
+ *  maxZoomScale: number, 最大缩放倍数，默认为2
+ * 
+ * Events:
+ * upperLocationTouched: (sender: EnhancedImageView) => void, 上半部分被点击
+ * lowerLocationTouched: (sender: EnhancedImageView) => void, 下半部分被点击
+ */
+import { Base } from "./base";
+import { Scroll } from "./single-views";
+import { cvid } from "../utils/cvid";
+
+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/image-pager.ts

@@ -0,0 +1,177 @@
+/**
+ * 与内置的Gallery组件相比，ImagePager组件可以动态刷新，适用于图片数量较多的场景，以及需要动态加载图片列表的场景
+ * 
+ * # Props
+ * srcs: string[] - 图片地址列表
+ * page: number - 当前页码
+ * 
+ * # Events
+ * changed: (page: number) => void - 页码变化时触发
+ * tapped: (sender: ImagePager) => void - 点击图片时触发
+ */
+import { Base } from "./base";
+import { Matrix } from "./single-views";
+
+export class ImagePager extends Base<UIView, UiTypes.ViewOptions> {
+  _props: {
+    srcs: string[];
+    page: number;
+  };
+  _matrix: Matrix;
+  _pageLoadRecorder: { [key: number]: boolean };
+  _defineView: () => UiTypes.ViewOptions;
+  constructor({ props, layout, events = {} }: {
+    props: {
+      srcs?: string[];
+      page?: number;
+    };
+    layout: (make: MASConstraintMaker, view: UIView) => void;
+    events: {
+      changed?: (page: number) => void;
+      tapped?: (sender: ImagePager) => void;
+    };
+
+  }) {
+    super();
+    this._props = {
+      srcs: [],
+      page: 0,
+      ...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: true
+              },
+              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();
+          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,
+          userInteractionEnabled: true
+        },
+        layout,
+        views: [this._matrix.definition],
+        events: {
+          layoutSubviews: sender => {
+            this._pageLoadRecorder = {};
+            sender.relayout();
+            this._matrix.view.reload();
+            this.page = this.page;
+            $delay(0.1, () => this.loadsrc(this.page, true));
+            $delay(0.3, () => this.loadsrc(this.page, true));
+          },
+          tapped: sender => {
+            const cell = this._matrix.view.cell($indexPath(0, this.page));
+            if (!cell) return;
+            const scroll = cell.get("scroll") as UIScrollView;
+            const zoomScale = scroll.zoomScale;
+            $delay(0.3, () => {
+              const zoomScale1 = scroll.zoomScale;
+              if (zoomScale === zoomScale1 && events.tapped)
+                events.tapped(this);
+            });
+          }
+        }
+      };
+    }
+  }
+
+  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;
+  }
+}

package/components/page-control.ts

@@ -0,0 +1,91 @@
+/**
+ * # CView PageControl
+ * 
+ * 基于 Runtime 构建 PageControl
+ * 
+ * 请注意本视图如果没有足够的横向宽度，会显示不全
+ * ## Props
+ * 
+ * - 只写 numberOfPages: numnber
+ * - 读写 currentPage: number
+ * - 只写 pageIndicatorTintColor?: JSBoxColor
+ * - 只写 currentPageIndicatorTintColor?: JSBoxColor
+ * - 其他通用属性
+ * 
+ * ## Events
+ * 
+ * changed: (cview: Cview, currentPage: number) => void
+ */
+
+import { Runtime } from "./single-views";
+
+export class PageControl extends Runtime {
+  private _numberOfPages: number;
+  private _currentPage: number;
+  private _pageIndicatorTintColor?: UIColor;
+  private _currentPageIndicatorTintColor?: UIColor;
+  private _changed?: (sender: PageControl, currentPage: number) => void;
+  private _pageControl: any;
+  constructor({ props, layout, events = {} }: {
+    props: {
+      numberOfPages?: number;
+      currentPage?: number;
+      pageIndicatorTintColor?: UIColor;
+      currentPageIndicatorTintColor?: UIColor;
+    };
+    layout: (make: MASConstraintMaker, view: UIView) => void;
+    events?: {
+      changed?: (sender: PageControl, currentPage: number) => void;
+    }
+  }) {
+    const {
+      numberOfPages = 3,
+      currentPage = 0,
+      pageIndicatorTintColor,
+      currentPageIndicatorTintColor,
+      ...restProps
+    } = props;
+    const { changed, ...restEvents } = events;
+    super({ props: restProps, layout, events: restEvents });
+    this._numberOfPages = numberOfPages;
+    this._currentPage = currentPage;
+    this._pageIndicatorTintColor = pageIndicatorTintColor;
+    this._currentPageIndicatorTintColor = currentPageIndicatorTintColor;
+    this._changed = changed;
+    this._pageControl = this._createPageControl();
+    if (this._props) this._props.view = this._pageControl;
+  }
+
+  _createPageControl() {
+    const pageControl = $objc("UIPageControl").$new();
+    pageControl.$setNumberOfPages(this._numberOfPages);
+    pageControl.$setCurrentPage(this._currentPage);
+    if (this._pageIndicatorTintColor)
+      pageControl.$setPageIndicatorTintColor(
+        this._pageIndicatorTintColor.ocValue()
+      );
+    if (this._currentPageIndicatorTintColor)
+      pageControl.$setCurrentPageIndicatorTintColor(
+        this._currentPageIndicatorTintColor.ocValue()
+      );
+
+    pageControl.$addEventHandler({
+      events: $UIEvent.valueChanged,
+      handler: $block("void", () => {
+        const currentPage = pageControl.$currentPage();
+        this._currentPage = currentPage
+        if (this._changed) this._changed(this, currentPage);
+      })
+    });
+    return pageControl;
+  }
+
+  get currentPage() {
+    return this._currentPage;
+  }
+
+  set currentPage(num) {
+    this._currentPage = num
+    if (this._pageControl) this._pageControl.$setCurrentPage(num);
+  }
+}

package/components/pageviewer-titlebar.ts

@@ -0,0 +1,170 @@
+/** 
+ * # CView PageViewer TitleBar
+ *
+ * props:
+ *
+ * - 只写 items: string[]
+ * - 读写 index: number
+ * - 只写 selectedItemColor
+ * - 只写 defaultItemColor
+ *
+ * events:
+ *
+ * - changed: (cview, index) => void 在点击变更 index 的时候回调
+ */
+
+import { Base } from './base';
+import { ContentView, Label, Stack } from "./single-views";
+//const { getTextWidth } = require("cview-util-ui");
+
+function weightedAverageColors(c0: UIColor, c1: UIColor, w: number) {
+  const red = c0.components.red * w + c1.components.red * (1 - w);
+  const green = c0.components.green * w + c1.components.green * (1 - w);
+  const blue = c0.components.blue * w + c1.components.blue * (1 - w);
+  return $rgb(red, green, blue);
+}
+
+interface PageViewerTitleBarProps {
+  items: string[];
+  index?: number;
+  selectedItemColor?: UIColor;
+  defaultItemColor?: UIColor;
+}
+
+interface PageViewerTitleBarEvents extends UiTypes.BaseViewEvents {
+  changed?: (cview: PageViewerTitleBar, index: number) => void;
+}
+
+export class PageViewerTitleBar extends Base<UIView, UiTypes.ViewOptions> {
+  private _props: Required<PageViewerTitleBarProps>;
+  private _floatedIndex: number;
+  private _lineStartLocationPercentage: number;
+  labels: Label[];
+  stack: Stack;
+  placeholderView: ContentView;
+  line: ContentView;
+
+  _defineView: () => UiTypes.ViewOptions;
+
+  constructor({ props, layout, events = {} }: {
+    props: PageViewerTitleBarProps;
+    layout: (make: MASConstraintMaker, view: UIView) => void;
+    events: PageViewerTitleBarEvents;
+  }) {
+    super();
+    this._props = {
+      index: 0,
+      selectedItemColor: $color("systemLink"),
+      defaultItemColor: $color("secondaryText"),
+      ...props
+    };
+    const { changed, ...restEvents } = events;
+    this._floatedIndex = this._props.index;
+    this._lineStartLocationPercentage = this._floatedIndex / this._props.items.length;
+    this.labels = this._props.items.map((n, i) => {
+      return new Label({
+        props: {
+          text: n,
+          font: $font("bold", 17),
+          textColor:
+            i === this.index
+              ? this._props.selectedItemColor
+              : this._props.defaultItemColor,
+          align: $align.center,
+          userInteractionEnabled: true
+        },
+        events: {
+          tapped: sender => {
+            this.index = i;
+            if (changed) changed(this, i);
+          }
+        }
+      });
+    });
+    this.stack = new Stack({
+      props: {
+        axis: $stackViewAxis.horizontal,
+        distribution: $stackViewDistribution.fillEqually,
+        stack: {
+          views: this.labels.map(n => n.definition)
+        }
+      },
+      layout: $layout.fill
+    });
+    this.placeholderView = new ContentView({
+      props: {
+        bgcolor: $color("clear")
+      },
+      layout: (make, view) => {
+        make.left.bottom.inset(0);
+        make.width.equalTo(view.super).multipliedBy(this._floatedIndex / this._props.items.length);
+      }
+    });
+    this.line = new ContentView({
+      props: {
+        bgcolor: this._props.selectedItemColor
+      },
+      layout: (make, view) => {
+        make.height.equalTo(4);
+        make.width.equalTo(view.super).dividedBy(this._props.items.length);
+        make.bottom.inset(0);
+        make.left.equalTo(view.prev.right);
+      }
+    });
+    this._defineView = () => {
+      return {
+        type: "view",
+        props: {
+          id: this.id
+        },
+        layout,
+        events: restEvents,
+        views: [
+          this.stack.definition,
+          this.placeholderView.definition,
+          this.line.definition
+        ]
+      };
+    }
+  }
+
+  get lineStartLocationPercentage() {
+    return this._lineStartLocationPercentage;
+  }
+
+  set lineStartLocationPercentage(percent) {
+    this._lineStartLocationPercentage = percent;
+    this.placeholderView.view.remakeLayout((make, view) => {
+      make.left.bottom.inset(0);
+      make.width.equalTo(view.super).multipliedBy(percent);
+    });
+  }
+
+  get floatedIndex() {
+    return this._floatedIndex;
+  }
+
+  set floatedIndex(floatedIndex) {
+    this._floatedIndex = floatedIndex;
+    this.lineStartLocationPercentage = floatedIndex / this._props.items.length;
+    this.labels.forEach((n, i) => {
+      if (Math.abs(floatedIndex - i) < 1) {
+        n.view.textColor = weightedAverageColors(
+          this._props.selectedItemColor,
+          this._props.defaultItemColor,
+          floatedIndex - i > 0 ? 1 - (floatedIndex - i) : 1 - (i - floatedIndex)
+        );
+      } else {
+        n.view.textColor = this._props.defaultItemColor;
+      }
+    });
+  }
+
+  get index() {
+    return this._props.index;
+  }
+
+  set index(index) {
+    this._props.index = index;
+  }
+}