diff --git a/apps/tests/testRunner.ts b/apps/tests/testRunner.ts index e9dd5c237..ae62df060 100644 --- a/apps/tests/testRunner.ts +++ b/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"); diff --git a/apps/tests/ui/search-bar/search-bar-tests-native.android.ts b/apps/tests/ui/search-bar/search-bar-tests-native.android.ts new file mode 100644 index 000000000..920166053 --- /dev/null +++ b/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 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; +} diff --git a/apps/tests/ui/search-bar/search-bar-tests-native.d.ts b/apps/tests/ui/search-bar/search-bar-tests-native.d.ts new file mode 100644 index 000000000..b825413cd --- /dev/null +++ b/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; diff --git a/apps/tests/ui/search-bar/search-bar-tests-native.ios.ts b/apps/tests/ui/search-bar/search-bar-tests-native.ios.ts new file mode 100644 index 000000000..30256c94f --- /dev/null +++ b/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; +} diff --git a/apps/tests/ui/search-bar/search-bar-tests.ts b/apps/tests/ui/search-bar/search-bar-tests.ts index 876711e07..ce076e461 100644 --- a/apps/tests/ui/search-bar/search-bar-tests.ts +++ b/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"); //  // # SearchBar // Using the SearchBar requires the "ui/search-bar" module. @@ -15,6 +20,44 @@ import searchBarModule = require("ui/search-bar"); //``` //  +var _createSearchBarFunc = function (): searchBarModule.SearchBar { + // + // ### Creating a SearchBar + // ``` JavaScript + var searchBar = new searchBarModule.SearchBar(); + // ``` + // + searchBar.text = "searchBar"; + return searchBar; +}; + +export var testSearchBarHintColorAndroid = function () { + helper.buildUIAndRunTest(_createSearchBarFunc(), function (views: Array) { + var 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() { // // ### Searching diff --git a/ui/search-bar/search-bar-common.ts b/ui/search-bar/search-bar-common.ts index c8c3489ad..2252c4b6e 100644 --- a/ui/search-bar/search-bar-common.ts +++ b/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(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(value)); + } + } \ No newline at end of file diff --git a/ui/search-bar/search-bar.android.ts b/ui/search-bar/search-bar.android.ts index c79bb078a..9383391f9 100644 --- a/ui/search-bar/search-bar.android.ts +++ b/ui/search-bar/search-bar.android.ts @@ -34,6 +34,20 @@ function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.Pr // register the setNativeValue callbacks (common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged; +function onTextFieldHintColorPropertyChanged(data: dependencyObservable.PropertyChangeData) { + var bar = data.object; + if (!bar.android) { + return; + } + + if (data.newValue instanceof color.Color) { + _changeSearchViewHintColor(bar.android, (data.newValue).android); + } +} + +// register the setNativeValue callbacks +(common.SearchBar.textFieldHintColorProperty.metadata).onSetNativeValue = onTextFieldHintColorPropertyChanged; + function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) { var bar = 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 { diff --git a/ui/search-bar/search-bar.d.ts b/ui/search-bar/search-bar.d.ts index 4b1783d52..087392fd7 100644 --- a/ui/search-bar/search-bar.d.ts +++ b/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"). diff --git a/ui/search-bar/search-bar.ios.ts b/ui/search-bar/search-bar.ios.ts index 1519a6222..20d633533 100644 --- a/ui/search-bar/search-bar.ios.ts +++ b/ui/search-bar/search-bar.ios.ts @@ -23,6 +23,20 @@ function onTextFieldBackgroundColorPropertyChanged(data: dependencyObservable.Pr (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 + } +} + +(common.SearchBar.textFieldHintColorProperty.metadata).onSetNativeValue = onTextFieldHintColorPropertyChanged; + function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) { var bar = data.object; if (!bar.ios) {