javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-04 12:58:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(search-bar): clear button color support (#10903)

Browse Source
This commit is contained in:
snehitha-30727
2025-11-01 23:56:20 +05:30
committed by GitHub
parent 5086b7cec1
commit 3be20a33ff
4 changed files with 48 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/ui/search-bar/index.android.ts
View File

@ -1,5 +1,5 @@
import { Font } from '../styling/font';
import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty } from './search-bar-common';
import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty, clearButtonColorProperty } from './search-bar-common';
import { isUserInteractionEnabledProperty, isEnabledProperty } from '../core/view';
import { ad } from '../../utils';
import { Color } from '../../color';
@ -33,6 +33,7 @@ function initializeNativeClasses(): void {
constructor(private owner: SearchBar) {
super();
// @ts-ignore
return global.__native(this);
}
@ -70,6 +71,7 @@ function initializeNativeClasses(): void {
constructor(private owner: SearchBar) {
super();
// @ts-ignore
return global.__native(this);
}
@ -272,6 +274,25 @@ export class SearchBar extends SearchBarBase {
const color = value instanceof Color ? value.android : value;
textView.setHintTextColor(color);
}
[clearButtonColorProperty.setNative](value: Color) {
if (!this.nativeViewProtected || !value) {
return;
}
try {
// The close (clear) button inside the SearchView can be found by its resource ID
const closeButtonId = this.nativeViewProtected.getContext().getResources().getIdentifier('android:id/search_close_btn', null, null);
const closeButton = this.nativeViewProtected.findViewById(closeButtonId) as android.widget.ImageView;
const color = value instanceof Color ? value.android : new Color(value).android;
if (closeButton) {
closeButton.setColorFilter(color);
}
} catch (err) {
console.log('Error setting clear button color:', err);
}
}
private _getTextView(): android.widget.TextView {
if (!this._searchTextView) {

7
packages/core/ui/search-bar/index.d.ts vendored
View File

@ -61,6 +61,13 @@ export class SearchBar extends View {
*/
textFieldHintColor: Color;
/**
* Gets or sets the Clear Button color of the SearchBar component.
*
* @nsProperty
*/
clearButtonColor: Color | string;
/**
* Adds a listener for the specified event name.
*

11
packages/core/ui/search-bar/index.ios.ts
View File

@ -1,5 +1,5 @@
import { Font } from '../styling/font';
import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty } from './search-bar-common';
import { SearchBarBase, textProperty, hintProperty, textFieldHintColorProperty, textFieldBackgroundColorProperty, clearButtonColorProperty } from './search-bar-common';
import { isEnabledProperty } from '../core/view';
import { Color } from '../../color';
import { colorProperty, backgroundColorProperty, backgroundInternalProperty, fontInternalProperty } from '../styling/style-properties';
@ -220,4 +220,13 @@ export class SearchBar extends SearchBarBase {
const attributedPlaceholder = NSAttributedString.alloc().initWithStringAttributes(stringValue, attributes);
this._getTextField().attributedPlaceholder = attributedPlaceholder;
}
[clearButtonColorProperty.setNative](value: Color | UIColor) {
const textField = this._getTextField();
if (!textField) return;
// Check if clear button is available in the text field
const clearButton = textField.valueForKey('clearButton');
if (!clearButton) return;
clearButton.tintColor = value instanceof Color ? value.ios : value;
}
}

9
packages/core/ui/search-bar/search-bar-common.ts
View File

@ -12,6 +12,7 @@ export abstract class SearchBarBase extends View implements SearchBarDefinition
public hint: string;
public textFieldBackgroundColor: Color;
public textFieldHintColor: Color;
public clearButtonColor: Color | string;
public abstract dismissSoftInput();
}
@ -44,3 +45,11 @@ export const textFieldBackgroundColorProperty = new Property<SearchBarBase, Colo
valueConverter: (v) => new Color(v),
});
textFieldBackgroundColorProperty.register(SearchBarBase);
// --- Added property for clear button color ---
export const clearButtonColorProperty = new Property<SearchBarBase, Color>({
name: 'clearButtonColor',
equalityComparer: Color.equals,
valueConverter: (v) => new Color(v),
});
clearButtonColorProperty.register(SearchBarBase);