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["WEB-VIEW"] = require("./ui/web-view/web-view-tests");
|
||||||
allTests["WEAK-EVENTS"] = require("./weak-event-listener-tests");
|
allTests["WEAK-EVENTS"] = require("./weak-event-listener-tests");
|
||||||
allTests["REPEATER"] = require("./ui/repeater/repeater-tests");
|
allTests["REPEATER"] = require("./ui/repeater/repeater-tests");
|
||||||
|
allTests["SEARCH-BAR"] = require('./ui/search-bar/search-bar-tests');
|
||||||
|
|
||||||
if (!isRunningOnEmulator()) {
|
if (!isRunningOnEmulator()) {
|
||||||
allTests["LOCATION"] = require("./location-tests");
|
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">
|
// <snippet module="ui/search-bar" title="search-bar">
|
||||||
// # SearchBar
|
// # SearchBar
|
||||||
// Using the SearchBar requires the "ui/search-bar" module.
|
// Using the SearchBar requires the "ui/search-bar" module.
|
||||||
@ -15,6 +20,44 @@ import searchBarModule = require("ui/search-bar");
|
|||||||
//```
|
//```
|
||||||
// </snippet>
|
// </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() {
|
export function test_DummyTestForSnippetOnly() {
|
||||||
// <snippet module="ui/search-bar" title="search-bar">
|
// <snippet module="ui/search-bar" title="search-bar">
|
||||||
// ### Searching
|
// ### Searching
|
||||||
|
@ -9,6 +9,9 @@ export class SearchBar extends view.View implements definition.SearchBar {
|
|||||||
public static clearEvent = "clear";
|
public static clearEvent = "clear";
|
||||||
|
|
||||||
public static textFieldBackgroundColorProperty = new dependencyObservable.Property("textFieldBackgroundColor", "SearchBar", new proxy.PropertyMetadata(undefined))
|
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 hintProperty = new dependencyObservable.Property("hint", "SearchBar", new proxy.PropertyMetadata(""))
|
||||||
|
|
||||||
public static textProperty = new dependencyObservable.Property(
|
public static textProperty = new dependencyObservable.Property(
|
||||||
@ -38,4 +41,13 @@ export class SearchBar extends view.View implements definition.SearchBar {
|
|||||||
this._setValue(SearchBar.textFieldBackgroundColorProperty,
|
this._setValue(SearchBar.textFieldBackgroundColorProperty,
|
||||||
value instanceof color.Color ? value : new color.Color(<any>value));
|
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
|
// register the setNativeValue callbacks
|
||||||
(<proxy.PropertyMetadata>common.SearchBar.textFieldBackgroundColorProperty.metadata).onSetNativeValue = onTextFieldBackgroundColorPropertyChanged;
|
(<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) {
|
function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) {
|
||||||
var bar = <SearchBar>data.object;
|
var bar = <SearchBar>data.object;
|
||||||
if (!bar.android) {
|
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
|
// merge the exports of the common file with the exports of this file
|
||||||
declare var exports;
|
declare var exports;
|
||||||
require("utils/module-merge").merge(common, exports);
|
require("utils/module-merge").merge(common, exports);
|
||||||
@ -128,6 +150,9 @@ export class SearchBar extends common.SearchBar {
|
|||||||
if (this.textFieldBackgroundColor instanceof color.Color) {
|
if (this.textFieldBackgroundColor instanceof color.Color) {
|
||||||
_changeSearchViewBackgroundColor(this._android, this.textFieldBackgroundColor.android);
|
_changeSearchViewBackgroundColor(this._android, this.textFieldBackgroundColor.android);
|
||||||
}
|
}
|
||||||
|
if (this.textFieldHintColor instanceof color.Color) {
|
||||||
|
_changeSearchViewHintColor(this._android, this.textFieldHintColor.android);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get android(): android.widget.SearchView {
|
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;
|
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).
|
* 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").
|
* @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;
|
(<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) {
|
function onHintPropertyChanged(data: dependencyObservable.PropertyChangeData) {
|
||||||
var bar = <SearchBar>data.object;
|
var bar = <SearchBar>data.object;
|
||||||
if (!bar.ios) {
|
if (!bar.ios) {
|
||||||
|
Reference in New Issue
Block a user