jsbox-cview 1.2.3 → 1.2.4

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/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/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.3",
+  "version": "1.2.4",
   "description": "为 JSBox 设计的微型框架",
   "repository": {
     "type": "git",

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]
+});