jsbox-cview 1.5.21 → 1.5.23

package/components/searchbar.ts

@@ -15,7 +15,7 @@ interface SearchBarProps {
 
 /**
  * 搜索框
- * 
+ *
  * 有三种样式可供选择，通过 style 属性设置
  *
  * @method focus() 聚焦
@@ -47,13 +47,14 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
   _focused: boolean;
 
   /**
-   * 
+   *
    * @param props 属性
    * - text: string
    * - style: number 搜索框的样式
    *   - 0: 取消按钮在输入框内，聚焦时显示取消按钮
    *   - 1: 取消按钮在输入框右侧，聚焦时会有左右移动的动画
-   *   - 2: 取消按钮布局同 1，但是 placeholder 平时显示在中间，聚焦时才会移动到左边。如果使用此样式，建议每次 blur 的时候都清除 text。
+   *   - 2: 取消按钮布局同 1，但是 placeholder 平时显示在中间，聚焦时才会移动到左边。
+   *        如果使用此样式，建议每次 blur 的时候都清除 text。
    * - accessoryCview: cview 请通过下面的事件来和 SearchBar 互相操作
    * - placeholder: string
    * - cancelText: string
@@ -66,7 +67,11 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
    * - changed: cview => void
    * - returned: cview => void
    */
-  constructor({ props, layout, events = {} }: {
+  constructor({
+    props,
+    layout,
+    events = {},
+  }: {
     props: Partial<SearchBarProps>;
     layout: (make: MASConstraintMaker, view: UIView) => void;
     events?: {
@@ -83,10 +88,14 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
       tintColor: $color("systemLink"),
       bgcolor: searchBarBgcolor,
       style: 0,
-      ...props
+      ...props,
     };
-    const cancelButtonWidth = getTextWidth(this._props.cancelText, { inset: 20 });
-    const placeholderWidth = getTextWidth(this._props.placeholder, { inset: 20 });
+    const cancelButtonWidth = getTextWidth(this._props.cancelText, {
+      inset: 20,
+    });
+    const placeholderWidth = getTextWidth(this._props.placeholder, {
+      inset: 20,
+    });
     this._focused = false;
     this._layouts = this._defineLayouts(cancelButtonWidth, placeholderWidth);
     this.cviews = {} as {
@@ -102,32 +111,32 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
         bgcolor: $color("clear"),
         radius: 0,
         accessoryView:
-          this._props.accessoryCview && this._props.accessoryCview.definition
+          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 => {
+        changed: (sender) => {
           if (events.changed) events.changed(this);
         },
-        didBeginEditing: sender => {
+        didBeginEditing: (sender) => {
           this._onFocused();
           if (events.didBeginEditing) events.didBeginEditing(this);
         },
-        didEndEditing: sender => {
+        didEndEditing: (sender) => {
           if (events.didEndEditing) events.didEndEditing(this);
         },
-        returned: sender => {
+        returned: (sender) => {
           this.blur();
           if (events.returned) events.returned(this);
-        }
-      }
-    })
+        },
+      },
+    });
     this.cviews.iconInput = new ContentView({
       props: {
-        bgcolor: undefined
+        bgcolor: undefined,
       },
       layout: this._layouts.iconInput.normal,
       views: [
@@ -140,23 +149,23 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
               props: {
                 //tintColor: searchBarSymbolColor,
                 tintColor: $color("systemPlaceholderText"),
-                symbol: "magnifyingglass"
+                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.input.definition,
+      ],
+    });
     this.cviews.cancelButton = new Label({
       props: {
         text: this._props.cancelText,
@@ -164,61 +173,69 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
         font: $font(17),
         align: $align.center,
         userInteractionEnabled: true,
-        alpha: 0
+        alpha: 0,
       },
       layout: this._layouts.cancelButton.normal,
       events: {
-        tapped: sender => this.blur()
-      }
-    })
+        tapped: (sender) => this.blur(),
+      },
+    });
     this.cviews.bgview = new ContentView({
       props: {
         bgcolor: this._props.bgcolor,
         radius: 8,
-        userInteractionEnabled: true
+        userInteractionEnabled: true,
       },
       layout: this._layouts.bgview.normal,
       events: {
-        tapped: sender => {
+        tapped: (sender) => {
           if (!this._focused) this.focus();
-        }
-      }
-    })
+        },
+      },
+    });
     this._defineView = () => {
       return {
         type: "view",
         props: {
           id: this.id,
-          clipsToBounds: true
+          clipsToBounds: true,
         },
         layout,
         views: [
           this.cviews.bgview.definition,
           this.cviews.iconInput.definition,
-          this.cviews.cancelButton.definition
-        ]
+          this.cviews.cancelButton.definition,
+        ],
       };
-    }
+    };
   }
 
-
   _defineLayouts(cancelButtonWidth: number, placeholderWidth: number) {
     switch (this._props.style) {
       case 0: {
         const IconInputLayout = $layout.fill;
-        const IconInputLayoutFocused = (make: MASConstraintMaker, view: AllUIView) => {
+        const IconInputLayoutFocused = (
+          make: MASConstraintMaker,
+          view: AllUIView
+        ) => {
           make.left.top.bottom.inset(0);
           make.right.inset(cancelButtonWidth);
-        }
-        const cancelButtonLayout = (make: MASConstraintMaker, view: AllUIView) => {
+        };
+        const cancelButtonLayout = (
+          make: MASConstraintMaker,
+          view: AllUIView
+        ) => {
           make.right.top.bottom.inset(0);
           make.width.equalTo(cancelButtonWidth);
         };
         const bgviewLayout = $layout.fill;
         return {
-          iconInput: { normal: IconInputLayout, focused: IconInputLayoutFocused },
+          iconInput: {
+            normal: IconInputLayout,
+            focused: IconInputLayoutFocused,
+          },
           cancelButton: { normal: cancelButtonLayout },
-          bgview: { normal: bgviewLayout }
+          bgview: { normal: bgviewLayout },
         };
       }
       case 1: {
@@ -226,49 +243,67 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
           make.left.top.bottom.inset(0);
           make.right.equalTo(view.prev);
         };
-        const cancelButtonLayout = (make: MASConstraintMaker, view: AllUIView) => {
+        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) => {
+        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 }
+          bgview: { normal: bgviewLayoutNormal, focused: bgviewLayoutFocused },
         };
       }
       case 2: {
-        const IconInputLayoutNormal = (make: MASConstraintMaker, view: AllUIView) => {
+        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) => {
+        const IconInputLayoutFocused = (
+          make: MASConstraintMaker,
+          view: AllUIView
+        ) => {
           make.left.top.bottom.inset(0);
           make.right.inset(cancelButtonWidth);
         };
-        const cancelButtonLayout = (make: MASConstraintMaker, view: AllUIView) => {
+        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) => {
+        const bgviewLayoutFocused = (
+          make: MASConstraintMaker,
+          view: AllUIView
+        ) => {
           make.left.top.bottom.inset(0);
           make.right.inset(cancelButtonWidth);
         };
         return {
           iconInput: {
             normal: IconInputLayoutNormal,
-            focused: IconInputLayoutFocused
+            focused: IconInputLayoutFocused,
           },
           cancelButton: { normal: cancelButtonLayout },
-          bgview: { normal: bgviewLayoutNormal, focused: bgviewLayoutFocused }
+          bgview: { normal: bgviewLayoutNormal, focused: bgviewLayoutFocused },
         };
       }
       default:
@@ -278,7 +313,8 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
 
   _onFocused() {
     this._focused = true;
-    if (this._layouts.iconInput.focused) this.cviews.iconInput.view.remakeLayout(this._layouts.iconInput.focused);
+    if (this._layouts.iconInput.focused)
+      this.cviews.iconInput.view.remakeLayout(this._layouts.iconInput.focused);
     switch (this._props.style) {
       case 0: {
         $ui.animate({
@@ -286,31 +322,36 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
           animation: () => {
             this.cviews.iconInput.view.relayout();
             this.cviews.cancelButton.view.alpha = 1;
-          }
+          },
         });
         break;
       }
       case 1: {
-        if (this._layouts.bgview.focused) this.cviews.bgview.view.remakeLayout(this._layouts.bgview.focused);
+        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);
+        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;
       }
@@ -329,7 +370,7 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
           animation: () => {
             this.cviews.iconInput.view.relayout();
             this.cviews.cancelButton.view.alpha = 0;
-          }
+          },
         });
         break;
       }
@@ -340,19 +381,26 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
           animation: () => {
             this.cviews.bgview.view.relayout();
             this.cviews.cancelButton.view.alpha = 0;
-          }
+          },
         });
         break;
       }
       case 2: {
-        const placeholderWidth = getTextWidth(this._props.placeholder, { inset: 20 });
+        const placeholderWidth = getTextWidth(this._props.placeholder, {
+          inset: 20,
+        });
         const textWidth = getTextWidth(this.text, { inset: 20 });
-        const IconInputLayoutInputing = (make: MASConstraintMaker, view: AllUIView) => {
+        const IconInputLayoutInputing = (
+          make: MASConstraintMaker,
+          view: AllUIView
+        ) => {
           make.center.equalTo(view.super);
           make.top.bottom.inset(0);
-          make.width.equalTo(Math.max(textWidth, placeholderWidth) + 50).priority(999);
+          make.width
+            .equalTo(Math.max(textWidth, placeholderWidth) + 50)
+            .priority(999);
           make.width.lessThanOrEqualTo(view.super).priority(1000);
-        }
+        };
         this.cviews.iconInput.view.remakeLayout(IconInputLayoutInputing);
         this.cviews.bgview.view.remakeLayout(this._layouts.bgview.normal);
         $ui.animate({
@@ -361,7 +409,7 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
             this.cviews.iconInput.view.relayout();
             this.cviews.bgview.view.relayout();
             this.cviews.cancelButton.view.alpha = 0;
-          }
+          },
         });
         break;
       }

package/components/sheet.ts

@@ -1,5 +1,5 @@
-import {cvid} from "../utils/cvid";
-import {Base} from "./base";
+import { cvid } from "../utils/cvid";
+import { Base } from "./base";
 
 const UIModalPresentationStyle = {
   automatic: -2,
@@ -11,13 +11,13 @@ const UIModalPresentationStyle = {
   overFullScreen: 5,
   overCurrentContext: 6,
   popover: 7,
-  none: -1
+  none: -1,
 };
 
 /**
- * 
+ *
  * 创建新的 UIViewController，主要用于 formSheet 和 pageSheet
- * 
+ *
  * ## 参数：
  * - presentMode: number, default: 1, pageSheet: 1, formSheet: 2
  * - animated: boolean = true  是否启用动画效果
@@ -25,13 +25,17 @@ const UIModalPresentationStyle = {
  * - bgcolor: $color  $color("secondarySurface")
  * - cview: Cview
  * - dismissalHandler: function  退出时的回调
- * 
+ *
  * ## 方法：
  * - present()
  * - dismiss()
- * 
+ *
  */
-export class Sheet<T extends Base<U, R>, U extends AllUIView, R extends UiTypes.AllViewOptions> {
+export class Sheet<
+  T extends Base<U, R>,
+  U extends AllUIView,
+  R extends UiTypes.AllViewOptions
+> {
   id: string;
   _animated: boolean;
   _presentMode: number;
@@ -48,7 +52,7 @@ export class Sheet<T extends Base<U, R>, U extends AllUIView, R extends UiTypes.
     interactiveDismissalDisabled = false,
     bgcolor = $color("secondarySurface"),
     cview,
-    dismissalHandler
+    dismissalHandler,
   }: {
     presentMode?: number;
     animated?: boolean;
@@ -56,7 +60,7 @@ export class Sheet<T extends Base<U, R>, U extends AllUIView, R extends UiTypes.
     bgcolor?: UIColor;
     cview?: T;
     dismissalHandler?: () => void;
-    }) {
+  }) {
     this._animated = animated;
     this._presentMode = presentMode;
     this._interactiveDismissalDisabled = interactiveDismissalDisabled;
@@ -64,7 +68,6 @@ export class Sheet<T extends Base<U, R>, U extends AllUIView, R extends UiTypes.
     this._cview = cview;
     this._dismissalHandler = dismissalHandler;
     this.id = cvid.newId;
-    
   }
 
   _create() {
@@ -84,19 +87,19 @@ export class Sheet<T extends Base<U, R>, U extends AllUIView, R extends UiTypes.
       events: {
         "viewDidDisappear:": () => {
           if (this._dismissalHandler) this._dismissalHandler();
-        }
-      }
+        },
+      },
     });
   }
 
   _add(cview: T) {
-    const definition = cview.definition
-    definition.layout = $layout.fill
+    const definition = cview.definition;
+    definition.layout = $layout.fill;
     this._PSViewControllerView.jsValue().add(definition);
   }
 
   present() {
-    this._create()
+    this._create();
     $ui.controller
       .ocValue()
       .invoke(
@@ -107,6 +110,9 @@ export class Sheet<T extends Base<U, R>, U extends AllUIView, R extends UiTypes.
   }
 
   dismiss() {
-    this._PSViewController.invoke("dismissModalViewControllerAnimated", this._animated);
+    this._PSViewController.invoke(
+      "dismissModalViewControllerAnimated",
+      this._animated
+    );
   }
 }