jsbox-cview 1.6.5 → 1.6.7

package/components/oc-webview.ts

@@ -1,177 +0,0 @@
-import { Base } from "./base";
-
-/**
- * # OCWebView
- *
- * 通过OC Runtime构建的Web视图，该控件是为了解决UIWebView无法通过CloudFlare人机检测的问题
- * （TIPS：推测JSBox的网页视图实际上运行在一个iframe中，所以会出现该问题）
- *
- * ## Argumnets
- *
- * props:
- * - url: string
- *
- * layout
- *
- * events:
- * - didStart?: (sender: any) => void;
- * - didFinish?: (sender: any) => void;
- * - didFail?: (sender: any, error: NSError | null) => void;
- *
- * events中sender的any类型实际为WKWebView OC类型
- *
- * ## Methods
- *
- * - url
- * - canGoBack
- * - canGoForward
- * - goBack()
- * - goForward()
- * - stopLoading()
- * - reload()
- * - evaluateJavaScript(script)
- *
- */
-export class OCWebView extends Base<UIView, UiTypes.RuntimeOptions> {
-  _defineView: () => UiTypes.RuntimeOptions;
-  webView: any; // 实际为WKWebView OC类型
-  private _originUrl: string;
-  constructor({
-    props,
-    layout,
-    events,
-  }: {
-    props: { url: string };
-    events: {
-      didStart?: (sender: any) => void; // 此处的any实际为WKWebView OC类型
-      didFinish?: (sender: any) => void;
-      didFail?: (sender: any, error: NSError | null) => void;
-    };
-    layout: (make: MASConstraintMaker, view: UIView) => void;
-  }) {
-    super();
-    // ====== 创建 WebView ======
-    const config = $objc("WKWebViewConfiguration").invoke("new");
-    config.invoke("setWebsiteDataStore:", $objc("WKWebsiteDataStore").invoke("defaultDataStore"));
-    const webView = $objc("WKWebView").invoke("alloc.initWithFrame:configuration:", $rect(0, 0, 0, 0), config);
-    this.webView = webView;
-    this._originUrl = props.url;
-
-    this._defineView = () => {
-      return {
-        type: "runtime",
-        props: {
-          id: this.id,
-          view: webView,
-        },
-        layout,
-        events: {
-          ready: (sender) => {
-            // ====== 设置 delegate ======
-            const navDelegate = $delegate({
-              type: "WKNavigationDelegate",
-              events: {
-                "webView:didStartProvisionalNavigation:": (wv: any, nav: any) => {
-                  events.didStart && events.didStart(wv);
-                },
-                "webView:didFinishNavigation:": (wv: any, nav: any) => {
-                  events.didFinish && events.didFinish(wv);
-                },
-                "webView:didFailNavigation:withError:": (wv: any, nav: any, e: any) => {
-                  events.didFail && events.didFail(wv, e ? e.jsValue() : null);
-                },
-                "webView:didFailProvisionalNavigation:withError:": (wv: any, nav: any, e: any) => {
-                  events.didFail && events.didFail(wv, e ? e.jsValue() : null);
-                },
-              },
-            });
-
-            webView.invoke("setNavigationDelegate:", navDelegate);
-
-            // ===== 加载URL ======
-            const urlStr = props.url;
-            const url = $objc("NSURL").invoke("URLWithString:", urlStr);
-            const req = $objc("NSURLRequest").invoke("requestWithURL:", url);
-            webView.invoke("loadRequest:", req);
-          },
-        },
-      };
-    };
-  }
-
-  get url(): string {
-    const nsurl = this.webView.invoke("URL");
-    return nsurl ? nsurl.invoke("absoluteString").rawValue() : "";
-  }
-
-  set url(urlStr: string) {
-    const url = $objc("NSURL").invoke("URLWithString:", urlStr);
-    const req = $objc("NSURLRequest").invoke("requestWithURL:", url);
-    this.webView.invoke("loadRequest:", req);
-  }
-
-  get title(): string {
-    const title = this.webView.invoke("title");
-    return title ? title.rawValue() : "";
-  }
-
-  get canGoBack(): boolean {
-    return this.webView.invoke("canGoBack");
-  }
-
-  get canGoForward(): boolean {
-    return this.webView.invoke("canGoForward");
-  }
-
-  goBack() {
-    if (this.canGoBack) this.webView.invoke("goBack");
-  }
-
-  goForward() {
-    if (this.canGoForward) this.webView.invoke("goForward");
-  }
-
-  stopLoading() {
-    this.webView.invoke("stopLoading");
-  }
-
-  reload() {
-    this.webView.invoke("reload");
-  }
-
-  reloadFromOrigin() {
-    this.url = this._originUrl;
-  }
-
-  exec<T = any>(script: string): Promise<T> {
-    return new Promise((resolve, reject) => {
-      this.webView.invoke(
-        "evaluateJavaScript:completionHandler:",
-        script,
-        $block("void, id, NSError *", (result: any, error: any) => {
-          const jsError = error ? error.jsValue() : null;
-          if (jsError) {
-            reject(jsError);
-            return;
-          }
-          if (!result) {
-            resolve(result);
-            return;
-          }
-          if (typeof result.jsValue === "function") {
-            resolve(result.jsValue());
-            return;
-          }
-          resolve(result);
-        }),
-      );
-    });
-  }
-
-  eval({ script, handler }: { script: string; handler: (result: any, error?: NSError) => void }) {
-    this.exec(script).then(
-      (result) => handler(result),
-      (error) => handler(undefined, error),
-    );
-  }
-}

package/components/page-control.ts

@@ -1,93 +0,0 @@
-import { Runtime } from "./single-views";
-
-/**
- *
- * 基于 Runtime 构建 PageControl
- *
- * 请注意本视图如果没有足够的横向宽度，会显示不全
- *
- * @property currentPage: number
- *
- */
-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;
-
-  /**
-   *
-   * @param props 属性
-   * - numberOfPages: 页面数量
-   * - currentPage: 当前页面
-   * - pageIndicatorTintColor?: 页面指示器颜色
-   * - currentPageIndicatorTintColor?: 当前页面指示器颜色
-   * @param layout 布局
-   * @param events 事件
-   * - changed: (sender: PageControl, currentPage: number) => void
-   *
-   */
-  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

@@ -1,166 +0,0 @@
-import { Base } from "./base";
-import { ContentView, Label, Stack } from "./single-views";
-
-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;
-}
-
-/**
- * [PageViewer](./pageviewer.ts)配套的标题栏
- * @property index: number
- */
-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;
-
-  /**
-   *
-   * @param props 属性
-   * - items: string[]
-   * - index: number
-   * - selectedItemColor
-   * - defaultItemColor
-   * @param layout 布局
-   * @param events 事件
-   * - changed: (cview, index) => void 在点击变更 index 的时候回调
-   */
-  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;
-  }
-}

package/components/pageviewer.ts

@@ -1,125 +0,0 @@
-import { Base } from "./base";
-import { ContentView, Scroll } from "./single-views";
-
-/**
- * 与JSBox内置的Gallery功能类似，但是效果更好，可以伴随翻页实现联动效果
- * 参见[pageviewer-titlebar.ts](./pageviewer-titlebar.ts)
- *
- * @property page: number 当前页码（无动画效果）
- * @method scrollToPage(page: number) 滚动到某一页（带有动画效果）
- */
-export class PageViewer extends Base<UIView, UiTypes.ViewOptions> {
-  private _props: {
-    page: number;
-    cviews: Base<any, any>[];
-  };
-  private _events: {
-    changed?: (cview: PageViewer, page: number) => void;
-    floatPageChanged?: (cview: PageViewer, floatPage: number) => void;
-  };
-  private _pageWidth: number;
-  private _floatPage: number;
-  scroll: Scroll;
-  _defineView: () => UiTypes.ViewOptions;
-
-  /**
-   *
-   * @param props 属性
-   * - page: number
-   * - cviews: Base<any, any>[]
-   * @param layout 布局
-   * @param events 事件
-   * - changed: (cview, page) => void 页面改变时回调
-   * - floatPageChanged: (cview, floatPage) => void 滚动时回调（用于绑定其他联合滚动的控件）
-   */
-  constructor({
-    props,
-    layout,
-    events = {},
-  }: {
-    props: {
-      page?: number;
-      cviews: Base<any, any>[];
-    };
-    layout: (make: MASConstraintMaker, view: UIView) => void;
-    events: {
-      changed?: (cview: PageViewer, page: number) => void;
-      floatPageChanged?: (cview: PageViewer, floatPage: number) => void;
-    };
-  }) {
-    super();
-    this._props = {
-      page: 0,
-      ...props,
-    };
-    this._events = events;
-    this._pageWidth = 0;
-    this._floatPage = this._props.page;
-    const contentViews = this._props.cviews.map((n) => {
-      return new ContentView({
-        views: [n.definition],
-        layout: (make, view) => {
-          make.height.width.equalTo(view.super);
-          make.left.equalTo(view.prev ? view.prev.right : view.super);
-          make.top.equalTo(view.super);
-        },
-      });
-    });
-    this.scroll = new Scroll({
-      props: {
-        alwaysBounceVertical: false,
-        alwaysBounceHorizontal: true,
-        showsHorizontalIndicator: false,
-        pagingEnabled: true,
-      },
-      events: {
-        layoutSubviews: (sender) => {
-          this._pageWidth = sender.frame.width;
-          if (this._pageWidth) sender.contentSize = $size(this._pageWidth * this._props.cviews.length, 0);
-        },
-        willEndDragging: (sender, velocity, target) => {
-          const oldPage = this.page;
-          this._props.page = Math.round(target.x / this._pageWidth);
-          if (oldPage !== this.page && this._events.changed) this._events.changed(this, this.page);
-        },
-        didScroll: (sender) => {
-          const rawPage = sender.contentOffset.x / this._pageWidth;
-          this._floatPage = Math.min(Math.max(0, rawPage), this._props.cviews.length - 1);
-          if (this._events.floatPageChanged) this._events.floatPageChanged(this, this._floatPage);
-        },
-      },
-      layout: $layout.fill,
-      views: [...contentViews.map((n) => n.definition)],
-    });
-    this._defineView = () => {
-      return {
-        type: "view",
-        props: { id: this.id },
-        layout,
-        views: [this.scroll.definition],
-        events: {
-          layoutSubviews: (sender) => {
-            sender.relayout();
-            this.page = this.page;
-            $delay(0.2, () => (this.page = this.page));
-          },
-        },
-      };
-    };
-  }
-
-  get page() {
-    return this._props.page;
-  }
-
-  set page(page) {
-    this._props.page = page;
-    if (this.scroll.view.contentOffset.x !== page * this._pageWidth)
-      this.scroll.view.contentOffset = $point(page * this._pageWidth, 0);
-  }
-
-  scrollToPage(page: number) {
-    this.scroll.view.scrollToOffset($point(page * this._pageWidth, 0));
-    this._props.page = page;
-  }
-}

package/components/refresh-button.ts

@@ -1,83 +0,0 @@
-import { Base } from "./base";
-
-/**
- * 创建一个刷新按钮，平时显示一个刷新的symbol，刷新时显示一个loading的symbol
- * props:
- *   - tintColor
- *   - enabled
- *   - hidden
- * events:
- *   - tapped
- */
-export class RefreshButton extends Base<UIButtonView, UiTypes.ButtonOptions> {
-  _defineView: () => UiTypes.ButtonOptions;
-  _loading: boolean = false;
-  constructor({
-    props,
-    layout,
-    events = {},
-  }: {
-    props?: {
-      tintColor?: UIColor;
-      enabled?: boolean;
-      hidden?: boolean;
-    };
-    layout?: (make: MASConstraintMaker, view: UIButtonView) => void;
-    events?: UiTypes.BaseViewEvents<UIButtonView>;
-  }) {
-    super();
-    this._layout = layout;
-    this._defineView = () => {
-      return {
-        type: "button",
-        props: {
-          id: this.id,
-          bgcolor: $color("clear"),
-          enabled: props?.enabled ?? true,
-          hidden: props?.hidden ?? false,
-        },
-        layout: this._layout,
-        events,
-        views: [
-          {
-            type: "image",
-            props: {
-              id: this.id + "_image",
-              symbol: "arrow.clockwise",
-              tintColor: props?.tintColor ?? $color("primaryText"),
-              contentMode: 1,
-              hidden: this._loading,
-            },
-            layout: (make, view) => {
-              make.edges.insets($insets(12.5, 12.5, 12.5, 12.5));
-              make.center.equalTo(view.super);
-            },
-          },
-          {
-            type: "spinner",
-            props: {
-              id: this.id + "_spinner",
-              loading: this._loading,
-              hidden: !this._loading,
-            },
-            layout: (make, view) => {
-              make.center.equalTo(view.super);
-            },
-          },
-        ],
-      };
-    };
-  }
-
-  get loading() {
-    return this._loading;
-  }
-
-  set loading(value: boolean) {
-    this._loading = value;
-    $(this.id + "_image").hidden = value;
-    $(this.id + "_spinner").hidden = !value;
-    ($(this.id + "_spinner") as UISpinnerView).loading = value;
-    this.view.enabled = !value;
-  }
-}