fix(ios): searcbar hint color before hint property (#6902)

NativeScript · Feb 14, 2019 · 5dd01a3 · 5dd01a3
1 parent 0416f7e
commit 5dd01a3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 25 deletions.
diff --git a/tests/app/ui/search-bar/search-bar-tests-native.ios.ts b/tests/app/ui/search-bar/search-bar-tests-native.ios.ts
@@ -3,7 +3,12 @@ import { Color } from "tns-core-modules/color";
 import { getColor } from "../helper";
 
 export function getNativeHintColor(searchBar: SearchBar): Color {
-    return (<any>searchBar)._placeholderLabel ? getColor((<any>searchBar)._placeholderLabel.textColor) : undefined; 
+    if ((<any>searchBar)._textField) {
+        const placeholder = (<any>searchBar)._textField.valueForKey("placeholderLabel");
+        return getColor(placeholder.textColor);
+    }
+
+    return undefined; 
 }
 
 export function getNativeTextFieldBackgroundColor(searchBar: SearchBar): Color {

diff --git a/tests/app/ui/search-bar/search-bar-tests.ts b/tests/app/ui/search-bar/search-bar-tests.ts
@@ -92,6 +92,9 @@ export var testSearchBarPropertiesWithCSS = function () {
     helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
         var searchBar = <searchBarModule.SearchBar>views[0];
 
+        searchBar.text = "";
+        searchBar.hint = "hint css test";
+
         const expectedHintColor = "#0000FF"; // blue
         const expectedTextFieldBackgroundColor = "#FF0000"; // red
         const expectedFontSize = 30;
@@ -105,8 +108,6 @@ export var testSearchBarPropertiesWithCSS = function () {
         TKUnit.assertAreClose(expectedFontSize, fontSizeActualValue, 0.2, "Font Size - Actual: " + fontSizeActualValue + "; Expected: " + expectedFontSize);
     }, { pageCss: `
         SearchBar {
-            text: test;
-            hint: test;
             text-field-hint-color: blue;
             text-field-background-color: red;
             font-size: 30;

diff --git a/tns-core-modules/ui/search-bar/search-bar.ios.ts b/tns-core-modules/ui/search-bar/search-bar.ios.ts
@@ -71,7 +71,6 @@ export class SearchBar extends SearchBarBase {
     nativeViewProtected: UISearchBar;
     private _delegate;
     private __textField: UITextField;
-    private __placeholderLabel: UILabel;
 
     createNativeView() {
         return UISearchBarImpl.new();
@@ -113,16 +112,6 @@ export class SearchBar extends SearchBarBase {
         return this.__textField;
     }
 
-    get _placeholderLabel(): UILabel {
-        if (!this.__placeholderLabel) {
-            if (this._textField) {
-                this.__placeholderLabel = this._textField.valueForKey("placeholderLabel");
-            }
-        }
-
-        return this.__placeholderLabel;
-    }
-
     [isEnabledProperty.setNative](value: boolean) {
         const nativeView = this.nativeViewProtected;
         if (nativeView instanceof UIControl) {
@@ -189,8 +178,7 @@ export class SearchBar extends SearchBarBase {
         return "";
     }
     [hintProperty.setNative](value: string) {
-        const text = (value === null || value === undefined) ? "" : value.toString();
-        this.ios.placeholder = text;
+        this._updateAttributedPlaceholder();
     }
 
     [textFieldBackgroundColorProperty.getDefault](): UIColor {
@@ -210,18 +198,30 @@ export class SearchBar extends SearchBarBase {
     }
 
     [textFieldHintColorProperty.getDefault](): UIColor {
-        const placeholderLabel = this._placeholderLabel;
-        if (placeholderLabel) {
-            return placeholderLabel.textColor;
-        }
-
         return null;
     }
     [textFieldHintColorProperty.setNative](value: Color | UIColor) {
-        const color = value instanceof Color ? value.ios : value
-        const placeholderLabel = this._placeholderLabel;
-        if (placeholderLabel) {
-            placeholderLabel.textColor = color;
+        this._updateAttributedPlaceholder();
+    }
+
+    // Very similar to text-field.ios.ts implementation. Maybe unify APIs and base classes?
+    _updateAttributedPlaceholder(): void {
+        let stringValue = this.hint;
+        if (stringValue === null || stringValue === void 0) {
+            stringValue = "";
+        } else {
+            stringValue = stringValue + "";
+        }
+        if (stringValue === "") {
+            // we do not use empty string since initWithStringAttributes does not return proper value and
+            // nativeView.attributedPlaceholder will be null
+            stringValue = " ";
+        }
+        const attributes: any = {};
+        if (this.textFieldHintColor) {
+            attributes[NSForegroundColorAttributeName] = this.textFieldHintColor.ios;
         }
+        const attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(stringValue, attributes);
+        this._textField.attributedPlaceholder = attributedPlaceholder;
     }
 }