mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-16 11:42:04 +08:00
Adding Search Hint text color; since this is not accessible from the standard style/theming xml files.
Added Tests so that it will verify the search bar color is changing.
This commit is contained in:
@ -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");
|
||||
|
22
apps/tests/ui/search-bar/search-bar-tests-native.android.ts
Normal file
22
apps/tests/ui/search-bar/search-bar-tests-native.android.ts
Normal file
@ -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;
|
||||
}
|
5
apps/tests/ui/search-bar/search-bar-tests-native.d.ts
vendored
Normal file
5
apps/tests/ui/search-bar/search-bar-tests-native.d.ts
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
//@private
|
||||
import searchBarModule = require("ui/search-bar");
|
||||
import colorModule = require("color");
|
||||
|
||||
export declare function getNativeHintColor(textView: searchBarModule.SearchBar): colorModule.Color;
|
7
apps/tests/ui/search-bar/search-bar-tests-native.ios.ts
Normal file
7
apps/tests/ui/search-bar/search-bar-tests-native.ios.ts
Normal file
@ -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;
|
||||
}
|
@ -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
|
||||
|
@ -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));
|
||||
}
|
||||
|
||||
}
|
@ -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 {
|
||||
|
5
ui/search-bar/search-bar.d.ts
vendored
5
ui/search-bar/search-bar.d.ts
vendored
@ -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").
|
||||
|
@ -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) {
|
||||
|
Reference in New Issue
Block a user