jsbox-cview 1.6.6 → 1.6.8

package/components/symbol-button.ts

@@ -1,108 +0,0 @@
-import { Base } from "./base";
-
-interface SymbolButtonProps {
-  enabled: boolean;
-  symbol?: string;
-  image?: UIImage;
-  src?: string;
-  tintColor: UIColor;
-  contentMode: number;
-  insets: JBInsets;
-  menu?: UiTypes.ContextMenuOptions<UIButtonView>;
-  hidden: boolean;
-}
-
-/**
- * 创建可以自动规范symbol大小的button，兼容image，可以设定insets
- * props:
- *   - symbol
- *   - image
- *   - tintColor
- *   - insets
- *   - enabled
- *   - menu
- *   - hidden
- * events:
- *   - tapped
- */
-export class SymbolButton extends Base<UIButtonView, UiTypes.ButtonOptions> {
-  _props: SymbolButtonProps;
-  _defineView: () => UiTypes.ButtonOptions;
-  constructor({
-    props,
-    layout,
-    events = {},
-  }: {
-    props: Partial<SymbolButtonProps>;
-    layout?: (make: MASConstraintMaker, view: UIButtonView) => void;
-    events?: UiTypes.BaseViewEvents<UIButtonView>;
-  }) {
-    super();
-    this._props = {
-      enabled: true,
-      contentMode: 1,
-      insets: $insets(12.5, 12.5, 12.5, 12.5),
-      tintColor: $color("primaryText"),
-      hidden: false,
-      ...props,
-    };
-    this._layout = layout;
-    this._defineView = () => {
-      const props = this._props.menu
-        ? {
-            radius: 0,
-            bgcolor: $color("clear"),
-            id: this.id,
-            menu: this._props.menu,
-            enabled: this._props.enabled,
-            hidden: this._props.hidden,
-          }
-        : {
-            radius: 0,
-            bgcolor: $color("clear"),
-            id: this.id,
-            enabled: this._props.enabled,
-            hidden: this._props.hidden,
-          };
-      return {
-        type: "button",
-        props,
-        views: [
-          {
-            type: "image",
-            props: {
-              id: "image",
-              symbol: this._props.symbol,
-              image: this._props.image,
-              src: this._props.src,
-              tintColor: this._props.tintColor,
-              contentMode: this._props.contentMode,
-            },
-            layout: (make, view: UIImageView) => {
-              make.edges.insets(this._props.insets);
-              make.center.equalTo(view.super);
-            },
-          },
-        ],
-        layout: this._layout,
-        events,
-      };
-    };
-  }
-
-  set tintColor(tintColor: UIColor) {
-    (this.view.get("image") as UIImageView).tintColor = tintColor;
-  }
-
-  set image(image: UIImage) {
-    (this.view.get("image") as UIImageView).image = image;
-  }
-
-  set symbol(symbol: string) {
-    (this.view.get("image") as UIImageView).symbol = symbol;
-  }
-
-  set src(src: string) {
-    (this.view.get("image") as UIImageView).src = src;
-  }
-}

package/components/tabbar.ts

@@ -1,453 +0,0 @@
-import { footBarDefaultSegmentColor } from "../utils/colors";
-import { Base } from "./base";
-
-class ImageLabelCell extends Base<UIView, UiTypes.ViewOptions> {
-  _props: {
-    symbol?: string;
-    image?: UIImage;
-    text: string;
-    index: number;
-    selectedSegmentTintColor: UIColor;
-    defaultSegmentTintColor: UIColor;
-    selected?: boolean;
-  };
-  layouts: {
-    image_tightened: (make: MASConstraintMaker, view: AllUIView) => void;
-    label_tightened: (make: MASConstraintMaker, view: AllUIView) => void;
-    image_loosed: (make: MASConstraintMaker, view: AllUIView) => void;
-    label_loosed: (make: MASConstraintMaker, view: AllUIView) => void;
-  };
-  _defineView: () => UiTypes.ViewOptions;
-  constructor({
-    props,
-    events = {},
-  }: {
-    props: {
-      symbol?: string;
-      image?: UIImage;
-      text: string;
-      index: number;
-      selectedSegmentTintColor: UIColor;
-      defaultSegmentTintColor: UIColor;
-      selected?: boolean;
-    };
-    events: {
-      tapped?: (index: number) => void;
-    };
-  }) {
-    super();
-    this._props = props;
-    this.layouts = {
-      image_tightened: (make, view) => {
-        make.centerX.equalTo(view.super);
-        make.size.equalTo($size(25, 25));
-        make.top.inset(7);
-      },
-      label_tightened: (make, view) => {
-        make.centerX.equalTo(view.super);
-        make.top.equalTo(view.prev.bottom);
-      },
-      image_loosed: (make, view) => {
-        make.centerX.equalTo(view.super).offset(-35);
-        make.centerY.equalTo(view.super);
-        make.size.equalTo($size(25, 25));
-      },
-      label_loosed: (make, view) => {
-        make.left.equalTo(view.prev.right).inset(10);
-        make.centerY.equalTo(view.super);
-      },
-    };
-    this._defineView = () => {
-      return {
-        type: "view",
-        props: {
-          id: this.id,
-          userInteractionEnabled: true,
-        },
-        views: [
-          {
-            type: "image",
-            props: {
-              id: "image",
-              symbol: this._props.symbol,
-              image: this._props.image,
-              contentMode: 1,
-            },
-          },
-          {
-            type: "label",
-            props: {
-              id: "label",
-              text: this._props.text,
-              align: $align.center,
-            },
-          },
-        ],
-        events: {
-          tapped: (sender) => {
-            if (events.tapped) events.tapped(this._props.index);
-          },
-        },
-      };
-    };
-  }
-
-  set selected(selected) {
-    this._props.selected = selected;
-    const color = selected ? this._props.selectedSegmentTintColor : this._props.defaultSegmentTintColor;
-    this.view.get("image").tintColor = color;
-    const label = this.view.get("label") as UILabelView;
-    label.textColor = color;
-  }
-
-  get selected() {
-    return this._props.selected;
-  }
-
-  _useTightenedLayout() {
-    this.view.get("image").remakeLayout(this.layouts.image_tightened);
-    this.view.get("label").remakeLayout(this.layouts.label_tightened);
-    const label = this.view.get("label") as UILabelView;
-    label.font = $font(10);
-  }
-
-  _useLoosedLayout() {
-    this.view.get("image").remakeLayout(this.layouts.image_loosed);
-    this.view.get("label").remakeLayout(this.layouts.label_loosed);
-    const label = this.view.get("label") as UILabelView;
-    label.font = $font(14);
-  }
-}
-
-class ImageCell extends Base<UIView, UiTypes.ViewOptions> {
-  _props: {
-    symbol?: string;
-    image?: UIImage;
-    index: number;
-    selectedSegmentTintColor: UIColor;
-    defaultSegmentTintColor: UIColor;
-    selected?: boolean;
-  };
-  layouts: {
-    image_tightened: (make: MASConstraintMaker, view: AllUIView) => void;
-    image_loosed: (make: MASConstraintMaker, view: AllUIView) => void;
-  };
-  _defineView: () => UiTypes.ViewOptions;
-  constructor({
-    props,
-    events = {},
-  }: {
-    props: {
-      symbol?: string;
-      image?: UIImage;
-      index: number;
-      selectedSegmentTintColor: UIColor;
-      defaultSegmentTintColor: UIColor;
-      selected?: boolean;
-    };
-    events: {
-      tapped?: (index: number) => void;
-    };
-  }) {
-    super();
-    this._props = props;
-    this.layouts = {
-      image_tightened: (make, view) => {
-        make.center.equalTo(view.super);
-        make.size.equalTo($size(30, 30));
-      },
-      image_loosed: (make, view) => {
-        make.center.equalTo(view.super);
-        make.size.equalTo($size(30, 30));
-      },
-    };
-    this._defineView = () => {
-      return {
-        type: "view",
-        props: {
-          id: this.id,
-          userInteractionEnabled: true,
-        },
-        views: [
-          {
-            type: "image",
-            props: {
-              id: "image",
-              symbol: this._props.symbol,
-              image: this._props.image,
-              contentMode: 1,
-            },
-          },
-        ],
-        events: {
-          tapped: (sender) => {
-            if (events.tapped) events.tapped(this._props.index);
-          },
-        },
-      };
-    };
-  }
-
-  set selected(selected) {
-    this._props.selected = selected;
-    const color = selected ? this._props.selectedSegmentTintColor : this._props.defaultSegmentTintColor;
-    this.view.get("image").tintColor = color;
-  }
-
-  get selected() {
-    return this._props.selected;
-  }
-
-  _useTightenedLayout() {
-    this.view.get("image").remakeLayout(this.layouts.image_tightened);
-  }
-
-  _useLoosedLayout() {
-    this.view.get("image").remakeLayout(this.layouts.image_loosed);
-  }
-}
-
-/**
- * 本组件是为了仿制 UITabBar
- * 本组件不能指定布局而是应该指定 height（如果需要的话）
- * 典型的使用方式是添加在布局为$layout.fill的视图中，并指定 items
- *
- * props:
- *
- * - 只写 height: number = 50
- * - 只写 items: {symbol?: string, image?:UIImage, title?: string}[]
- * - 只写 bgcolor?: UIColor 如果不指定则背景使用blur（style 10），若指定则使用纯色视图
- * - 读写 index: number = 0
- * - 只写 selectedSegmentTintColor = $color("tintColor")
- * - 只写 defaultSegmentTintColor = colors.footBarDefaultSegmentColor
- *
- * events:
- *
- * - changed: (cview, index) => void
- * - doubleTapped: (cview, index) => void
- *
- * methods:
- *
- * - hide(animated=true) 隐藏
- * - show(animated=true) 显示
- */
-export class TabBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTypes.BlurOptions> {
-  _props: {
-    height: number;
-    items: { symbol?: string; image?: UIImage; title?: string }[];
-    index: number;
-    selectedSegmentTintColor: UIColor;
-    defaultSegmentTintColor: UIColor;
-    bgcolor?: UIColor;
-  };
-  _index: number;
-  _cells: (ImageLabelCell | ImageCell)[];
-  _events: {
-    changed?: (cview: TabBar, index: number) => void;
-    doubleTapped?: (cview: TabBar, index: number) => void;
-  };
-  _defineView: () => UiTypes.ViewOptions | UiTypes.BlurOptions;
-  constructor({
-    props,
-    events = {},
-  }: {
-    props: {
-      height?: number;
-      items: { symbol?: string; image?: UIImage; title?: string }[];
-      index?: number;
-      selectedSegmentTintColor?: UIColor;
-      defaultSegmentTintColor?: UIColor;
-      bgcolor?: UIColor;
-    };
-    events: {
-      changed?: (cview: TabBar, index: number) => void;
-      doubleTapped?: (cview: TabBar, index: number) => void;
-    };
-  }) {
-    super();
-    this._props = {
-      height: 50,
-      index: 0,
-      selectedSegmentTintColor: $color("systemLink"),
-      defaultSegmentTintColor: footBarDefaultSegmentColor,
-      //bgcolor: $color("secondarySurface"),
-      ...props,
-    };
-    this._index = this._props.index;
-    this._events = events;
-    this._cells = this._defineCells();
-    this._defineView = () => {
-      const stack: UiTypes.StackOptions = {
-        type: "stack",
-        props: {
-          axis: $stackViewAxis.horizontal,
-          distribution: $stackViewDistribution.fillEqually,
-          spacing: 0,
-          stack: {
-            views: this._cells.map((n) => n.definition),
-          },
-        },
-        layout: (make, view) => {
-          make.height.equalTo(this._props.height - 0.5);
-          make.left.right.equalTo(view.super.safeArea);
-          make.top.equalTo(view.prev.bottom);
-        },
-      };
-      const line: UiTypes.ViewOptions = {
-        type: "view",
-        props: {
-          bgcolor: $color("separatorColor"),
-        },
-        layout: (make, view) => {
-          make.top.left.right.inset(0);
-          make.height.equalTo(0.5);
-        },
-      };
-      if (this._props.bgcolor) {
-        return {
-          type: "view",
-          props: {
-            id: this.id,
-            bgcolor: this._props.bgcolor,
-          },
-          layout: (make, view) => {
-            make.left.right.bottom.inset(0);
-            make.top.equalTo(view.super.safeAreaBottom).inset(-this._props.height);
-          },
-          views: [line, stack],
-          events: {
-            ready: (sender) => (this.index = this._index),
-            layoutSubviews: (sender) => {
-              const windowWidth = sender.frame.width;
-              if (windowWidth > 600) {
-                this._useLoosedLayout();
-              } else {
-                this._useTightenedLayout();
-              }
-            },
-          },
-        };
-      } else {
-        return {
-          type: "blur",
-          props: {
-            id: this.id,
-            style: 10,
-          },
-          layout: (make, view) => {
-            make.left.right.bottom.inset(0);
-            make.top.equalTo(view.super.safeAreaBottom).inset(-this._props.height);
-          },
-          views: [line, stack],
-          events: {
-            ready: (sender) => (this.index = this._index),
-            layoutSubviews: (sender) => {
-              const windowWidth = sender.frame.width;
-              if (windowWidth > 600) {
-                this._useLoosedLayout();
-              } else {
-                this._useTightenedLayout();
-              }
-            },
-          },
-        };
-      }
-    };
-  }
-
-  _defineCells() {
-    return this._props.items.map((n, i) => {
-      if (n.title) {
-        return new ImageLabelCell({
-          props: {
-            symbol: n.symbol,
-            image: n.image ? n.image.alwaysTemplate : undefined,
-            text: n.title,
-            index: i,
-            selectedSegmentTintColor: this._props.selectedSegmentTintColor,
-            defaultSegmentTintColor: this._props.defaultSegmentTintColor,
-          },
-          events: {
-            tapped: (index) => {
-              if (index !== this.index) {
-                this.index = index;
-                if (this._events.changed) this._events.changed(this, index);
-              } else {
-                if (this._events.doubleTapped) this._events.doubleTapped(this, index);
-              }
-            },
-          },
-        });
-      } else {
-        return new ImageCell({
-          props: {
-            symbol: n.symbol,
-            image: n.image ? n.image.alwaysTemplate : undefined,
-            index: i,
-            selectedSegmentTintColor: this._props.selectedSegmentTintColor,
-            defaultSegmentTintColor: this._props.defaultSegmentTintColor,
-          },
-          events: {
-            tapped: (index) => {
-              if (index !== this.index) {
-                this.index = index;
-                if (this._events.changed) this._events.changed(this, index);
-              } else {
-                if (this._events.doubleTapped) this._events.doubleTapped(this, index);
-              }
-            },
-          },
-        });
-      }
-    });
-  }
-
-  get index() {
-    return this._index;
-  }
-
-  set index(index) {
-    this._index = index;
-    this._cells.forEach((n, i) => {
-      n.selected = i === this._index;
-    });
-  }
-
-  hide(animated = true) {
-    this.view.remakeLayout((make, view) => {
-      make.left.right.bottom.inset(0);
-      make.height.equalTo(0);
-    });
-    if (animated) {
-      $ui.animate({
-        duration: 0.3,
-        animation: () => this.view.relayout(),
-      });
-    }
-  }
-
-  show(animated = true) {
-    this.view.remakeLayout((make, view) => {
-      make.left.right.bottom.inset(0);
-      make.top.equalTo(view.super.safeAreaBottom).inset(-this._props.height);
-    });
-    if (animated) {
-      $ui.animate({
-        duration: 0.3,
-        animation: () => this.view.relayout(),
-      });
-    }
-  }
-
-  _useTightenedLayout() {
-    this._cells.forEach((n) => {
-      n._useTightenedLayout();
-    });
-  }
-
-  _useLoosedLayout() {
-    this._cells.forEach((n) => {
-      n._useLoosedLayout();
-    });
-  }
-}