jsbox-cview 1.0.0

package/components/pageviewer.ts

@@ -0,0 +1,124 @@
+/**
+ * # CView PageViewer
+ * 
+ * props:
+ * - 读写 page: number  
+ * - 只写 cviews: cview[] cview的布局会被自动指定为占用一整页
+ * 
+ * events: 
+ * - changed: (cview, page) => void 页面改变时回调
+ * - floatPageChanged: (cview, floatPage) => void 滚动时回调（用于绑定其他联合滚动的控件）
+ * 
+ * methods:
+ * - scrollToPage(page: number) 滚动到某一页（带有动画效果）
+ */
+
+import { Base } from './base';
+import { ContentView, Scroll } from "./single-views";
+
+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;
+
+  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 => {
+      n._layout = $layout.fill;
+      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: this._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/rotating-view.ts

@@ -0,0 +1,126 @@
+/**
+ * 创建一个可以旋转的视图。理论上来说，这个视图的布局必须是方形的。
+ *
+ * props: 
+ * - image 图片
+ * - tintColor
+ * - contentMode = 1
+ * - cview 使用自定义的cview，上面两项将失效
+ * - rps = 0.5 每秒转多少圈
+ * - clockwise = true 是否顺时针旋转
+ * 
+ * events:
+ * - ready: cview => void 可以在ready事件中启动旋转
+ * 
+ * methods:
+ * - startRotating() 开始旋转
+ * - stopRotating() 结束旋转，请注意旋转是不能立即结束的，必须等到动画归位
+ */
+
+import { Base } from "./base";
+import { Image } from "./single-views";
+
+interface RotatingViewProps {
+  image?: UIImage;
+  tintColor?: UIColor;
+  contentMode?: number;
+  cview?: Base<any, any>;
+  rps?: number;
+  clockwise?: boolean;
+}
+
+export class RotatingView extends Base<UIView, UiTypes.ViewOptions>{
+  private _props: RotatingViewProps;
+  private _rotatingFlag: boolean;
+  private _innerView: Base<any, any>
+  _defineView: () => UiTypes.ViewOptions;
+  constructor({ props, layout, events = {} }: {
+    props: RotatingViewProps;
+    layout: (make: MASConstraintMaker, view: UIView) => void;
+    events?: {
+      ready?: (cview: RotatingView) => void;
+    }
+  }) {
+    super();
+    this._props = {
+      contentMode: 1,
+      rps: 0.5,
+      clockwise: true,
+      ...props
+    };
+    this._rotatingFlag = false;
+    if (this._props.cview) {
+      this._innerView = this._props.cview;
+    } else {
+      if (!this._props.image) throw new Error("image is required");
+      this._innerView = new Image({
+        props: {
+          image: this._props.tintColor
+            ? this._props.image.alwaysTemplate
+            : this._props.image,
+          tintColor: this._props.tintColor,
+          contentMode: this._props.contentMode
+        },
+        layout: $layout.fill
+      });
+    }
+    this._defineView = () => {
+      return {
+        type: "view",
+        props: {
+          ...this._props,
+          id: this.id
+        },
+        layout,
+        events: {
+          ready: sender => {
+              if (events.ready) events.ready(this);
+            }
+        },
+        views: [this._innerView.definition]
+      };
+    }
+  }
+
+  startRotating() {
+    this._rotatingFlag = true;
+    this._rotateView(this._innerView.view);
+  }
+
+  stopRotating() {
+    this._rotatingFlag = false;
+  }
+
+  _rotateView(view: AllUIView) {
+    const clockwiseMultiplier = this._props.clockwise ? 1 : -1
+    const duration = 1 / 3 / (this._props.rps || 0.5);
+    $ui.animate({
+      duration,
+      options: 3 << 16,
+      animation: () => {
+        view.rotate(Math.PI * 2 / 3 * clockwiseMultiplier);
+      },
+      completion: () => {
+        $ui.animate({
+          duration,
+          options: 3 << 16,
+          animation: () => {
+            view.rotate(Math.PI * 4 / 3 * clockwiseMultiplier);
+          },
+          completion: () => {
+            $ui.animate({
+              duration,
+              options: 3 << 16,
+              animation: () => {
+                view.rotate(Math.PI * 2 * clockwiseMultiplier);
+              },
+              completion: () => {
+                if (this._rotatingFlag) this._rotateView(view);
+              }
+            })
+          }
+        });
+      }
+    });
+  }
+}

package/components/searchbar.ts

@@ -0,0 +1,373 @@
+/**
+ * # CView SearchBar
+ *
+ * props
+ *
+ * - 读写 text: string
+ * - style: number 搜索框的样式
+ *   - 0: 取消按钮在输入框内，聚焦时显示取消按钮
+ *   - 1: 取消按钮在输入框右侧，聚焦时会有左右移动的动画
+ *   - 2: 取消按钮布局同 1，但是 placeholder 平时显示在中间，聚焦时才会移动到左边。
+ *     如果使用此样式，建议每次 blur 的时候都清除 text
+ * - accessoryCview: cview 请通过下面的事件来和 SearchBar 互相操作
+ * - placeholder: string
+ * - cancelText: string
+ * - tintColor: \$color("systemLink")
+ * - bgcolor: colors.searchBarBgcolor
+ *
+ * events
+ *
+ * - didBeginEditing: cview => void
+ * - didEndEditing: cview => void
+ * - changed: cview => void
+ * - returned: cview => void
+ */
+
+import { Base } from "./base";
+import { Input, Label, ContentView } from "./single-views";
+import { searchBarBgcolor } from "../utils/colors";
+import { l10n } from "../utils/l10n";
+import { getTextWidth } from "../utils/uitools";
+
+interface SearchBarProps {
+  placeholder: string;
+  cancelText: string;
+  tintColor: UIColor;
+  bgcolor: UIColor;
+  style: 0 | 1 | 2;
+  accessoryCview?: Base<UIView, UiTypes.ViewOptions>;
+}
+
+export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
+  _props: SearchBarProps;
+  _defineView: () => UiTypes.ViewOptions;
+  cviews: {
+    input: Input;
+    iconInput: ContentView;
+    cancelButton: Label;
+    bgview: ContentView;
+  };
+  _layouts: {
+    iconInput: {
+      normal: (make: MASConstraintMaker, view: AllUIView) => void;
+      focused?: (make: MASConstraintMaker, view: AllUIView) => void;
+    };
+    cancelButton: {
+      normal: (make: MASConstraintMaker, view: AllUIView) => void;
+    };
+    bgview: {
+      normal: (make: MASConstraintMaker, view: AllUIView) => void;
+      focused?: (make: MASConstraintMaker, view: AllUIView) => void;
+    };
+  };
+  _focused: boolean;
+  constructor({ props, layout, events = {} }: {
+    props: Partial<SearchBarProps>;
+    layout: (make: MASConstraintMaker, view: UIView) => void;
+    events?: {
+      didBeginEditing?: (cview: SearchBar) => void;
+      didEndEditing?: (cview: SearchBar) => void;
+      changed?: (cview: SearchBar) => void;
+      returned?: (cview: SearchBar) => void;
+    };
+  }) {
+    super();
+    this._props = {
+      placeholder: l10n("SEARCH"),
+      cancelText: l10n("CANCEL"),
+      tintColor: $color("systemLink"),
+      bgcolor: searchBarBgcolor,
+      style: 0,
+      ...props
+    };
+    const cancelButtonWidth = getTextWidth(this._props.cancelText, {
+      inset: 20
+    });
+    const placeholderWidth = getTextWidth(this._props.cancelText, {
+      inset: 20
+    });
+    this._focused = false;
+    this._layouts = this._defineLayouts(cancelButtonWidth, placeholderWidth);
+    this.cviews = {} as {
+      input: Input;
+      iconInput: ContentView;
+      cancelButton: Label;
+      bgview: ContentView;
+    };
+    this.cviews.input = new Input({
+      props: {
+        type: $kbType.search,
+        placeholder: this._props.placeholder,
+        bgcolor: $color("clear"),
+        radius: 0,
+        accessoryView:
+          this._props.accessoryCview && this._props.accessoryCview.definition
+      },
+      layout: (make, view) => {
+        make.left.equalTo(view.prev.right);
+        make.top.bottom.right.inset(0);
+      },
+      events: {
+        changed: sender => {
+          if (events.changed) events.changed(this);
+        },
+        didBeginEditing: sender => {
+          this._onFocused();
+          if (events.didBeginEditing) events.didBeginEditing(this);
+        },
+        didEndEditing: sender => {
+          if (events.didEndEditing) events.didEndEditing(this);
+        },
+        returned: sender => {
+          this.blur();
+          if (events.returned) events.returned(this);
+        }
+      }
+    })
+    this.cviews.iconInput = new ContentView({
+      props: {
+        bgcolor: undefined
+      },
+      layout: this._layouts.iconInput.normal,
+      views: [
+        {
+          type: "view",
+          props: {},
+          views: [
+            {
+              type: "image",
+              props: {
+                //tintColor: searchBarSymbolColor,
+                tintColor: $color("systemPlaceholderText"),
+                symbol: "magnifyingglass"
+              },
+              layout: (make, view) => {
+                make.size.equalTo($size(20, 20));
+                make.center.equalTo(view.super);
+              }
+            }
+          ],
+          layout: (make, view) => {
+            make.top.bottom.inset(0);
+            make.width.equalTo(20);
+            make.left.inset(6);
+          }
+        },
+        this.cviews.input.definition
+      ]
+    })
+    this.cviews.cancelButton = new Label({
+      props: {
+        text: this._props.cancelText,
+        textColor: this._props.tintColor,
+        font: $font(17),
+        align: $align.center,
+        userInteractionEnabled: true,
+        alpha: 0
+      },
+      layout: this._layouts.cancelButton.normal,
+      events: {
+        tapped: sender => this.blur()
+      }
+    })
+    this.cviews.bgview = new ContentView({
+      props: {
+        bgcolor: this._props.bgcolor,
+        radius: 8,
+        userInteractionEnabled: true
+      },
+      layout: this._layouts.bgview.normal,
+      events: {
+        tapped: sender => {
+          if (!this._focused) this.focus();
+        }
+      }
+    })
+    this._defineView = () => {
+      return {
+        type: "view",
+        props: {
+          id: this.id,
+          clipsToBounds: true
+        },
+        layout,
+        views: [
+          this.cviews.bgview.definition,
+          this.cviews.iconInput.definition,
+          this.cviews.cancelButton.definition
+        ]
+      };
+    }
+  }
+
+
+  _defineLayouts(cancelButtonWidth: number, placeholderWidth: number) {
+    switch (this._props.style) {
+      case 0: {
+        const IconInputLayout = $layout.fill;
+        const cancelButtonLayout = (make: MASConstraintMaker, view: AllUIView) => {
+          make.right.top.bottom.inset(0);
+          make.width.equalTo(cancelButtonWidth);
+        };
+        const bgviewLayout = $layout.fill;
+        return {
+          iconInput: { normal: IconInputLayout },
+          cancelButton: { normal: cancelButtonLayout },
+          bgview: { normal: bgviewLayout }
+        };
+      }
+      case 1: {
+        const IconInputLayout = (make: MASConstraintMaker, view: AllUIView) => {
+          make.left.top.bottom.inset(0);
+          make.right.inset(cancelButtonWidth);
+        };
+        const cancelButtonLayout = (make: MASConstraintMaker, view: AllUIView) => {
+          make.top.bottom.inset(0);
+          make.left.equalTo(view.prev.prev.right);
+          make.width.equalTo(cancelButtonWidth);
+        };
+        const bgviewLayoutNormal = $layout.fill;
+        const bgviewLayoutFocused = (make: MASConstraintMaker, view: AllUIView) => {
+          make.left.top.bottom.inset(0);
+          make.right.inset(cancelButtonWidth);
+        };
+        return {
+          iconInput: { normal: IconInputLayout },
+          cancelButton: { normal: cancelButtonLayout },
+          bgview: { normal: bgviewLayoutNormal, focused: bgviewLayoutFocused }
+        };
+      }
+      case 2: {
+        const IconInputLayoutNormal = (make: MASConstraintMaker, view: AllUIView) => {
+          make.center.equalTo(view.super);
+          make.top.bottom.inset(0);
+          make.width.equalTo(placeholderWidth + 50);
+        };
+        const IconInputLayoutFocused = (make: MASConstraintMaker, view: AllUIView) => {
+          make.left.top.bottom.inset(0);
+          make.right.inset(cancelButtonWidth);
+        };
+        const cancelButtonLayout = (make: MASConstraintMaker, view: AllUIView) => {
+          make.right.top.bottom.inset(0);
+          make.left.equalTo(view.prev.prev.right);
+          make.width.equalTo(cancelButtonWidth);
+        };
+        const bgviewLayoutNormal = $layout.fill;
+        const bgviewLayoutFocused = (make: MASConstraintMaker, view: AllUIView) => {
+          make.left.top.bottom.inset(0);
+          make.right.inset(cancelButtonWidth);
+        };
+        return {
+          iconInput: {
+            normal: IconInputLayoutNormal,
+            focused: IconInputLayoutFocused
+          },
+          cancelButton: { normal: cancelButtonLayout },
+          bgview: { normal: bgviewLayoutNormal, focused: bgviewLayoutFocused }
+        };
+      }
+      default:
+        throw new Error("style not supported");
+    }
+  }
+
+  _onFocused() {
+    this._focused = true;
+    switch (this._props.style) {
+      case 0: {
+        $ui.animate({
+          duration: 0.2,
+          animation: () => {
+            this.cviews.cancelButton.view.alpha = 1;
+          }
+        });
+        break;
+      }
+      case 1: {
+        if (this._layouts.bgview.focused) this.cviews.bgview.view.remakeLayout(this._layouts.bgview.focused);
+        $ui.animate({
+          duration: 0.2,
+          animation: () => {
+            this.cviews.bgview.view.relayout();
+            this.cviews.cancelButton.view.alpha = 1;
+          }
+        });
+        break;
+      }
+      case 2: {
+        if (this._layouts.iconInput.focused) this.cviews.iconInput.view.remakeLayout(this._layouts.iconInput.focused);
+        if (this._layouts.bgview.focused) this.cviews.bgview.view.remakeLayout(this._layouts.bgview.focused);
+        $ui.animate({
+          duration: 0.2,
+          animation: () => {
+            this.cviews.iconInput.view.relayout();
+            this.cviews.bgview.view.relayout();
+            this.cviews.cancelButton.view.alpha = 1;
+          }
+        });
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  _onBlurred() {
+    this._focused = false;
+    switch (this._props.style) {
+      case 0: {
+        $ui.animate({
+          duration: 0.2,
+          animation: () => {
+            this.cviews.cancelButton.view.alpha = 0;
+          }
+        });
+        break;
+      }
+      case 1: {
+        this.cviews.bgview.view.remakeLayout(this._layouts.bgview.normal);
+        $ui.animate({
+          duration: 0.2,
+          animation: () => {
+            this.cviews.bgview.view.relayout();
+            this.cviews.cancelButton.view.alpha = 0;
+          }
+        });
+        break;
+      }
+      case 2: {
+        this.cviews.iconInput.view.remakeLayout(this._layouts.iconInput.normal);
+        this.cviews.bgview.view.remakeLayout(this._layouts.bgview.normal);
+        $ui.animate({
+          duration: 0.2,
+          animation: () => {
+            this.cviews.iconInput.view.relayout();
+            this.cviews.bgview.view.relayout();
+            this.cviews.cancelButton.view.alpha = 0;
+          }
+        });
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  focus() {
+    this.cviews.input.view.focus();
+    this._onFocused();
+  }
+
+  blur() {
+    this._onBlurred();
+    this.cviews.input.view.blur();
+  }
+
+  set text(text) {
+    this.cviews.input.view.text = text;
+  }
+
+  get text() {
+    return this.cviews.input.view.text;
+  }
+}