jsbox-cview 1.2.2 → 1.2.4

package/components/custom-navigation-bar.ts

@@ -52,7 +52,7 @@
  */
 
 import { Base } from "./base";
-import { ContentView, Label, Button } from "./single-views";
+import { ContentView, Label, Button, Blur } from "./single-views";
 import { SymbolButton } from "./symbol-button";
 import { getTextWidth } from "../utils/uitools";
 
@@ -122,6 +122,8 @@ interface NavigationBarCViews {
   titleViewWrapper?: ContentView | Label;
   contentView?: ContentView;
   toolViewWrapper?: ContentView;
+  bgview?: ContentView | Blur;
+  separator?: ContentView;
 }
 
 export class CustomNavigationBar extends Base<UIView | UIBlurView, UiTypes.ViewOptions | UiTypes.BlurOptions> {
@@ -318,19 +320,41 @@ export class CustomNavigationBar extends Base<UIView | UIBlurView, UiTypes.ViewO
         },
         views: this._props.toolView && [this._props.toolView.definition]
       });
-
+      if (this._props.bgcolor) {
+        this.cviews.bgview = new ContentView({
+          props: {
+            bgcolor: this._props.bgcolor
+          },
+          layout: $layout.fill
+        });
+      } else {
+        this.cviews.bgview = new Blur({
+          props: {
+            style: 10
+          },
+          layout: $layout.fill
+        });
+      }
+      this.cviews.separator = new ContentView({
+        props: {
+          bgcolor: $color("separatorColor")
+        },
+        layout: (make, view) => {
+          make.bottom.left.right.inset(0);
+          make.height.equalTo(0.5);
+        }
+      });
       return {
-        type: this._props.bgcolor ? "view" : "blur",
+        type: "view",
         props: {
           id: this.id,
-          style: this._props.bgcolor ? undefined : 10,
-          bgcolor: this._props.bgcolor
         },
         layout: navBarLayouts[this._props.style],
         events: {
           ready: () => (this.style = this.style)
         },
         views: [
+          this.cviews.bgview.definition,
           {
             type: "view",
             props: {},
@@ -340,16 +364,7 @@ export class CustomNavigationBar extends Base<UIView | UIBlurView, UiTypes.ViewO
               this.cviews.toolViewWrapper.definition
             ]
           },
-          {
-            type: "view",
-            props: {
-              bgcolor: $color("separatorColor")
-            },
-            layout: (make, view) => {
-              make.bottom.left.right.inset(0);
-              make.height.equalTo(0.5);
-            }
-          }
+          this.cviews.separator.definition
         ]
       };
     }

package/components/searchbar.ts

@@ -35,7 +35,7 @@ interface SearchBarProps {
   tintColor: UIColor;
   bgcolor: UIColor;
   style: 0 | 1 | 2;
-  accessoryCview?: Base<UIView, UiTypes.ViewOptions>;
+  accessoryCview?: Base<any, any>;
 }
 
 export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
@@ -80,12 +80,8 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
       style: 0,
       ...props
     };
-    const cancelButtonWidth = getTextWidth(this._props.cancelText, {
-      inset: 20
-    });
-    const placeholderWidth = getTextWidth(this._props.cancelText, {
-      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 {
@@ -205,13 +201,17 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
     switch (this._props.style) {
       case 0: {
         const IconInputLayout = $layout.fill;
+        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.width.equalTo(cancelButtonWidth);
         };
         const bgviewLayout = $layout.fill;
         return {
-          iconInput: { normal: IconInputLayout },
+          iconInput: { normal: IconInputLayout, focused: IconInputLayoutFocused },
           cancelButton: { normal: cancelButtonLayout },
           bgview: { normal: bgviewLayout }
         };
@@ -219,7 +219,7 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
       case 1: {
         const IconInputLayout = (make: MASConstraintMaker, view: AllUIView) => {
           make.left.top.bottom.inset(0);
-          make.right.inset(cancelButtonWidth);
+          make.right.equalTo(view.prev);
         };
         const cancelButtonLayout = (make: MASConstraintMaker, view: AllUIView) => {
           make.top.bottom.inset(0);
@@ -273,11 +273,13 @@ 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);
     switch (this._props.style) {
       case 0: {
         $ui.animate({
           duration: 0.2,
           animation: () => {
+            this.cviews.iconInput.view.relayout();
             this.cviews.cancelButton.view.alpha = 1;
           }
         });
@@ -314,11 +316,13 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
 
   _onBlurred() {
     this._focused = false;
+    this.cviews.iconInput.view.remakeLayout(this._layouts.iconInput.normal);
     switch (this._props.style) {
       case 0: {
         $ui.animate({
           duration: 0.2,
           animation: () => {
+            this.cviews.iconInput.view.relayout();
             this.cviews.cancelButton.view.alpha = 0;
           }
         });
@@ -336,7 +340,15 @@ export class SearchBar extends Base<UIView, UiTypes.ViewOptions> {
         break;
       }
       case 2: {
-        this.cviews.iconInput.view.remakeLayout(this._layouts.iconInput.normal);
+        const placeholderWidth = getTextWidth(this._props.placeholder, { inset: 20 });
+        const textWidth = getTextWidth(this.text, { inset: 20 });
+        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.lessThanOrEqualTo(view.super).priority(1000);
+        }
+        this.cviews.iconInput.view.remakeLayout(IconInputLayoutInputing);
         this.cviews.bgview.view.remakeLayout(this._layouts.bgview.normal);
         $ui.animate({
           duration: 0.2,

package/dist/components/custom-navigation-bar.js

@@ -256,18 +256,42 @@ class CustomNavigationBar extends base_1.Base {
                 },
                 views: this._props.toolView && [this._props.toolView.definition]
             });
+            if (this._props.bgcolor) {
+                this.cviews.bgview = new single_views_1.ContentView({
+                    props: {
+                        bgcolor: this._props.bgcolor
+                    },
+                    layout: $layout.fill
+                });
+            }
+            else {
+                this.cviews.bgview = new single_views_1.Blur({
+                    props: {
+                        style: 10
+                    },
+                    layout: $layout.fill
+                });
+            }
+            this.cviews.separator = new single_views_1.ContentView({
+                props: {
+                    bgcolor: $color("separatorColor")
+                },
+                layout: (make, view) => {
+                    make.bottom.left.right.inset(0);
+                    make.height.equalTo(0.5);
+                }
+            });
             return {
-                type: this._props.bgcolor ? "view" : "blur",
+                type: "view",
                 props: {
                     id: this.id,
-                    style: this._props.bgcolor ? undefined : 10,
-                    bgcolor: this._props.bgcolor
                 },
                 layout: navBarLayouts[this._props.style],
                 events: {
                     ready: () => (this.style = this.style)
                 },
                 views: [
+                    this.cviews.bgview.definition,
                     {
                         type: "view",
                         props: {},
@@ -277,16 +301,7 @@ class CustomNavigationBar extends base_1.Base {
                             this.cviews.toolViewWrapper.definition
                         ]
                     },
-                    {
-                        type: "view",
-                        props: {
-                            bgcolor: $color("separatorColor")
-                        },
-                        layout: (make, view) => {
-                            make.bottom.left.right.inset(0);
-                            make.height.equalTo(0.5);
-                        }
-                    }
+                    this.cviews.separator.definition
                 ]
             };
         };

package/dist/components/searchbar.js

@@ -34,12 +34,8 @@ class SearchBar extends base_1.Base {
     constructor({ props, layout, events = {} }) {
         super();
         this._props = Object.assign({ placeholder: (0, l10n_1.l10n)("SEARCH"), cancelText: (0, l10n_1.l10n)("CANCEL"), tintColor: $color("systemLink"), bgcolor: colors_1.searchBarBgcolor, style: 0 }, props);
-        const cancelButtonWidth = (0, uitools_1.getTextWidth)(this._props.cancelText, {
-            inset: 20
-        });
-        const placeholderWidth = (0, uitools_1.getTextWidth)(this._props.cancelText, {
-            inset: 20
-        });
+        const cancelButtonWidth = (0, uitools_1.getTextWidth)(this._props.cancelText, { inset: 20 });
+        const placeholderWidth = (0, uitools_1.getTextWidth)(this._props.placeholder, { inset: 20 });
         this._focused = false;
         this._layouts = this._defineLayouts(cancelButtonWidth, placeholderWidth);
         this.cviews = {};
@@ -156,13 +152,17 @@ class SearchBar extends base_1.Base {
         switch (this._props.style) {
             case 0: {
                 const IconInputLayout = $layout.fill;
+                const IconInputLayoutFocused = (make, view) => {
+                    make.left.top.bottom.inset(0);
+                    make.right.inset(cancelButtonWidth);
+                };
                 const cancelButtonLayout = (make, view) => {
                     make.right.top.bottom.inset(0);
                     make.width.equalTo(cancelButtonWidth);
                 };
                 const bgviewLayout = $layout.fill;
                 return {
-                    iconInput: { normal: IconInputLayout },
+                    iconInput: { normal: IconInputLayout, focused: IconInputLayoutFocused },
                     cancelButton: { normal: cancelButtonLayout },
                     bgview: { normal: bgviewLayout }
                 };
@@ -170,7 +170,7 @@ class SearchBar extends base_1.Base {
             case 1: {
                 const IconInputLayout = (make, view) => {
                     make.left.top.bottom.inset(0);
-                    make.right.inset(cancelButtonWidth);
+                    make.right.equalTo(view.prev);
                 };
                 const cancelButtonLayout = (make, view) => {
                     make.top.bottom.inset(0);
@@ -223,11 +223,14 @@ class SearchBar extends base_1.Base {
     }
     _onFocused() {
         this._focused = true;
+        if (this._layouts.iconInput.focused)
+            this.cviews.iconInput.view.remakeLayout(this._layouts.iconInput.focused);
         switch (this._props.style) {
             case 0: {
                 $ui.animate({
                     duration: 0.2,
                     animation: () => {
+                        this.cviews.iconInput.view.relayout();
                         this.cviews.cancelButton.view.alpha = 1;
                     }
                 });
@@ -266,11 +269,13 @@ class SearchBar extends base_1.Base {
     }
     _onBlurred() {
         this._focused = false;
+        this.cviews.iconInput.view.remakeLayout(this._layouts.iconInput.normal);
         switch (this._props.style) {
             case 0: {
                 $ui.animate({
                     duration: 0.2,
                     animation: () => {
+                        this.cviews.iconInput.view.relayout();
                         this.cviews.cancelButton.view.alpha = 0;
                     }
                 });
@@ -288,7 +293,15 @@ class SearchBar extends base_1.Base {
                 break;
             }
             case 2: {
-                this.cviews.iconInput.view.remakeLayout(this._layouts.iconInput.normal);
+                const placeholderWidth = (0, uitools_1.getTextWidth)(this._props.placeholder, { inset: 20 });
+                const textWidth = (0, uitools_1.getTextWidth)(this.text, { inset: 20 });
+                const IconInputLayoutInputing = (make, view) => {
+                    make.center.equalTo(view.super);
+                    make.top.bottom.inset(0);
+                    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({
                     duration: 0.2,

package/dist/test/custom-navigation-bar.js

@@ -6,6 +6,11 @@ const navbar = new custom_navigation_bar_1.CustomNavigationBar({
         title: "Custom Navigation Bar",
         popButtonEnabled: true,
         popButtonTitle: "Back",
+        rightBarButtonItems: [
+            {
+                symbol: "gear",
+            }
+        ]
     }
 });
 $ui.render({
@@ -18,6 +23,14 @@ $ui.render({
                     $ui.push({
                         views: [navbar.definition]
                     });
+                    $delay(1, () => {
+                        navbar.cviews.bgview.view.alpha = 0.5;
+                        navbar.cviews.separator.view.alpha = 0.5;
+                    });
+                    $delay(2, () => {
+                        navbar.cviews.bgview.view.alpha = 0;
+                        navbar.cviews.separator.view.alpha = 0;
+                    });
                 }
             }
         }]

package/dist/test/searchbar.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const searchbar_1 = require("../components/searchbar");
+const s0 = new searchbar_1.SearchBar({
+    props: {
+        style: 0
+    },
+    layout: (make, view) => {
+        make.centerX.equalTo(view.super);
+        make.size.equalTo($size(300, 44));
+        make.top.equalTo(view.super).inset(50);
+    }
+});
+const s1 = new searchbar_1.SearchBar({
+    props: {
+        style: 1
+    },
+    layout: (make, view) => {
+        make.centerX.equalTo(view.super);
+        make.size.equalTo($size(300, 44));
+        make.top.equalTo(view.super).inset(125);
+    }
+});
+const s2 = new searchbar_1.SearchBar({
+    props: {
+        style: 2
+    },
+    layout: (make, view) => {
+        make.centerX.equalTo(view.super);
+        make.size.equalTo($size(300, 44));
+        make.top.equalTo(view.super).inset(200);
+    }
+});
+$ui.render({
+    views: [s0.definition, s1.definition, s2.definition]
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsbox-cview",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",

package/test/custom-navigation-bar.ts

@@ -5,6 +5,11 @@ const navbar = new CustomNavigationBar({
     title: "Custom Navigation Bar",
     popButtonEnabled: true,
     popButtonTitle: "Back",
+    rightBarButtonItems: [
+      {
+        symbol: "gear",
+      }
+    ]
   }
 })
 
@@ -20,6 +25,14 @@ $ui.render({
         $ui.push({
           views: [navbar.definition]
         })
+        $delay(1, () => {
+          navbar.cviews.bgview.view.alpha = 0.5
+          navbar.cviews.separator.view.alpha = 0.5
+        })
+        $delay(2, () => {
+          navbar.cviews.bgview.view.alpha = 0
+          navbar.cviews.separator.view.alpha = 0
+        })
       }
     }
   }]

package/test/searchbar.ts

@@ -0,0 +1,38 @@
+import { SearchBar } from "../components/searchbar";
+
+const s0 = new SearchBar({
+  props: {
+    style: 0
+  },
+  layout: (make, view) => {
+    make.centerX.equalTo(view.super);
+    make.size.equalTo($size(300, 44));
+    make.top.equalTo(view.super).inset(50);
+  }
+});
+
+const s1 = new SearchBar({
+  props: {
+    style: 1
+  },
+  layout: (make, view) => {
+    make.centerX.equalTo(view.super);
+    make.size.equalTo($size(300, 44));
+    make.top.equalTo(view.super).inset(125);
+  }
+});
+
+const s2 = new SearchBar({
+  props: {
+    style: 2
+  },
+  layout: (make, view) => {
+    make.centerX.equalTo(view.super);
+    make.size.equalTo($size(300, 44));
+    make.top.equalTo(view.super).inset(200);
+  }
+});
+
+$ui.render({
+  views: [s0.definition, s1.definition, s2.definition]
+});