Merge pull request #204 from Nathanaela/search-bar-hint-color2

Search bar hint color

apps/tests/testRunner.ts

@@ -70,6 +70,7 @@ allTests["TIME-PICKER"] = require("./ui/time-picker/time-picker-tests");
 allTests["WEB-VIEW"] = require("./ui/web-view/web-view-tests");
 allTests["WEAK-EVENTS"] = require("./weak-event-listener-tests");
 allTests["REPEATER"] = require("./ui/repeater/repeater-tests");
+allTests["SEARCH-BAR"] = require('./ui/search-bar/search-bar-tests');
 
 if (!isRunningOnEmulator()) {
     allTests["LOCATION"] = require("./location-tests");

apps/tests/ui/search-bar/search-bar-tests-native.android.ts

@@ -0,0 +1,22 @@
+import colorModule = require("color");
+import searchBarModule = require("ui/search-bar");
+
+function getTextView(bar: android.widget.SearchView): android.widget.TextView {
+    if (bar) {
+        var id = bar.getContext().getResources().getIdentifier("android:id/search_src_text", null, null);
+        if (id) {
+            return <android.widget.TextView> bar.findViewById(id);
+        }
+    }
+
+    return undefined;
+}
+
+export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorModule.Color {
+    var textView = getTextView(searchBar.android);
+
+    if (textView) {
+        return new colorModule.Color(textView.getHintTextColors().getDefaultColor());
+    }
+    return undefined;
+}

apps/tests/ui/search-bar/search-bar-tests-native.d.ts

@@ -0,0 +1,5 @@
+//@private
+import searchBarModule = require("ui/search-bar");
+import colorModule = require("color");
+
+export declare function getNativeHintColor(textView: searchBarModule.SearchBar): colorModule.Color;

apps/tests/ui/search-bar/search-bar-tests-native.ios.ts

@@ -0,0 +1,7 @@
+import colorModule = require("color");
+import searchBarModule = require("ui/search-bar");
+
+export function getNativeHintColor(searchBar: searchBarModule.SearchBar): colorModule.Color {
+    // TODO: This test needs to be created
+    return undefined;
+}

apps/tests/ui/search-bar/search-bar-tests.ts

@@ -1,4 +1,9 @@
-import observable = require("data/observable");
+import TKUnit = require("../../TKUnit");
+import helper = require("../helper");
+import viewModule = require("ui/core/view");
+import searchBarTestsNative = require("./search-bar-tests-native");
+import colorModule = require("color");
+import observable = require("data/observable");
 // <snippet module="ui/search-bar" title="search-bar">
 // # SearchBar
 // Using the SearchBar requires the "ui/search-bar" module.
@@ -15,6 +20,44 @@ import searchBarModule = require("ui/search-bar");
 //```
 // </snippet>
 
+var _createSearchBarFunc = function (): searchBarModule.SearchBar {
+    // <snippet module="ui/search-bar" title="SearchBar">
+    // ### Creating a SearchBar
+    // ``` JavaScript
+    var searchBar = new searchBarModule.SearchBar();
+    // ```
+    // </snippet>
+    searchBar.text = "searchBar";
+    return searchBar;
+};
+
+export var testSearchBarHintColorAndroid = function () {
+    helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array<viewModule.View>) {
+        var searchBar = <searchBarModule.SearchBar>views[0];
+
+        // TODO: create IOS test once IOS support is working
+        if (!searchBar.android) {
+            return;
+        }
+
+        searchBar.text = "";
+        searchBar.hint = "hint color test";
+
+        var expectedValue;
+        var actualValue;
+
+        searchBar.textFieldHintColor = new colorModule.Color("blue");
+        expectedValue = "#ff0000ff"; // blue
+        actualValue = searchBarTestsNative.getNativeHintColor(searchBar).hex;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+
+        searchBar.textFieldHintColor = new colorModule.Color("red");
+        expectedValue = "#ffff0000"; // Red
+        actualValue = searchBarTestsNative.getNativeHintColor(searchBar).hex;
+        TKUnit.assert(actualValue === expectedValue, "Actual: " + actualValue + "; Expected: " + expectedValue);
+    });
+};
+
 export function test_DummyTestForSnippetOnly() {
     // <snippet module="ui/search-bar" title="search-bar">
     // ### Searching

ui/search-bar/search-bar-common.ts

@@ -9,6 +9,9 @@ export class SearchBar extends view.View implements definition.SearchBar {
     public static clearEvent = "clear";
 
     public static textFieldBackgroundColorProperty = new dependencyObservable.Property("textFieldBackgroundColor", "SearchBar", new proxy.PropertyMetadata(undefined))
+
+    public static textFieldHintColorProperty = new dependencyObservable.Property("textFieldHintColor", "SearchBar", new proxy.PropertyMetadata(undefined))
+	
     public static hintProperty = new dependencyObservable.Property("hint", "SearchBar", new proxy.PropertyMetadata(""))
 
     public static textProperty = new dependencyObservable.Property(
@@ -38,4 +41,13 @@ export class SearchBar extends view.View implements definition.SearchBar {
         this._setValue(SearchBar.textFieldBackgroundColorProperty,
             value instanceof color.Color ? value : new color.Color(<any>value));
     }
+	
+	get textFieldHintColor(): color.Color {
+        return this._getValue(SearchBar.textFieldHintColorProperty);
+    }
+    set textFieldHintColor(value: color.Color) {
+        this._setValue(SearchBar.textFieldHintColorProperty,
+            value instanceof color.Color ? value : new color.Color(<any>value));
+    }
+	
 } 

ui/search-bar/search-bar.android.ts

@@ -34,6 +34,20 @@ function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.Pr
 // register the setNativeValue callbacks
 (<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
 
+function onTextFieldHintColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var bar = <SearchBar>data.object;
+    if (!bar.android) {
+        return;
+    }
+
+    if (data.newValue instanceof color.Color) {
+        _changeSearchViewHintColor(bar.android, (<color.Color>data.newValue).android);
+    }
+}
+
+// register the setNativeValue callbacks
+(<proxy.PropertyMetadata>common.SearchBar.textFieldHintColorProperty.metadata).onSetNativeValue = onTextFieldHintColorPropertyChanged;
+
 function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var bar = <SearchBar>data.object;
     if (!bar.android) {
@@ -68,6 +82,14 @@ function _changeSearchViewBackgroundColor(bar: android.widget.SearchView, color:
     }
 }
 
+function _changeSearchViewHintColor(bar: android.widget.SearchView, color: number) {
+    var textView = getTextView(bar);
+
+    if (textView) {
+        textView.setHintTextColor(color);
+    }
+}
+
 // merge the exports of the common file with the exports of this file
 declare var exports;
 require("utils/module-merge").merge(common, exports);
@@ -128,6 +150,9 @@ export class SearchBar extends common.SearchBar {
         if (this.textFieldBackgroundColor instanceof color.Color) {
             _changeSearchViewBackgroundColor(this._android, this.textFieldBackgroundColor.android);
         }
+        if (this.textFieldHintColor instanceof color.Color) {
+            _changeSearchViewHintColor(this._android, this.textFieldHintColor.android);
+        }
     }
 
     get android(): android.widget.SearchView {

ui/search-bar/search-bar.d.ts

@@ -56,6 +56,11 @@ declare module "ui/search-bar" {
          */
         textFieldBackgroundColor: color.Color;
 
+        /**
+         * Gets or sets the TextField Hint color of the SearchBar component.
+         */
+        textFieldHintColor: color.Color;
+				
         /**
          * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
          * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change"). 

ui/search-bar/search-bar.ios.ts

@@ -23,6 +23,20 @@ function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.Pr
 
 (<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
 
+function onTextFieldHintColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+  // This should be in a Try Catch in case Apple eliminates which ever method in the future; 
+  try {
+		// TODO; convert this code into NativeScript Code		
+		/* if ([textField respondsToSelector:@selector(setAttributedPlaceholder:)]) {
+			textField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:textField.placeholder attributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]}];
+		} */
+  } catch (Err) {
+	// Do Nothing 
+  }
+}
+
+(<proxy.PropertyMetadata>common.SearchBar.textFieldHintColorProperty.metadata).onSetNativeValue = onTextFieldHintColorPropertyChanged;
+
 function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) {
     var bar = <SearchBar>data.object;
     if (!bar.ios) {