feat(text): valueFormatter for easy and flexible input auto-formatting (#10264)

https://github.com/NativeScript/NativeScript/issues/10249
This commit is contained in:
Nathan Walker
2023-04-12 08:45:21 -07:00
committed by GitHub
parent f54966707d
commit b3abc5f5ae
6 changed files with 125 additions and 26 deletions

View File

@@ -21,6 +21,7 @@ export abstract class EditableTextBase extends TextBase implements EditableTextB
public autocorrect: boolean;
public hint: string;
public maxLength: number;
public valueFormatter: (value: string) => string;
public abstract dismissSoftInput();
public abstract _setInputType(inputType: number): void;

View File

@@ -493,6 +493,10 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
public onTextChanged(text: string, start: number, before: number, count: number): void {
// called by android.text.TextWatcher
if (this.valueFormatter) {
this.text = this.valueFormatter(text.toString());
this.android.setSelection((this.text || '').length);
}
// const owner = this.owner;
// let selectionStart = owner.android.getSelectionStart();
// owner.android.removeTextChangedListener(owner._editTextListeners);

View File

@@ -36,7 +36,7 @@ export class EditableTextBase extends TextBase {
/**
* Gets or sets the autofill type.
*/
autofillType: CoreTypes.AutofillType;
autofillType: CoreTypes.AutofillType;
/**
* Gets or sets whether the instance is editable.
@@ -58,6 +58,12 @@ export class EditableTextBase extends TextBase {
*/
maxLength: number;
/**
* Format input values
* Note: useful for input masking/formatting
*/
valueFormatter: (value: string) => string;
/**
* Hides the soft input method, ususally a soft keyboard.
*/

View File

@@ -190,16 +190,31 @@ export class TextField extends TextFieldBase {
}
if (this.updateTextTrigger === 'textChanged') {
// 1. secureTextEntry with firstEdit should not replace
// 2. emoji's should not replace value
// 3. convenient keyboard shortcuts should not replace value (eg, '.com')
const shouldReplaceString = (textField.secureTextEntry && this.firstEdit) || (delta > 1 && !isEmoji(replacementString) && delta !== replacementString.length);
if (shouldReplaceString) {
textProperty.nativeValueChange(this, replacementString);
if (this.valueFormatter) {
// format/replace
let currentValue = textField.text;
let nativeValueChange = `${textField.text}${replacementString}`;
if (replacementString === '') {
// clearing when empty
nativeValueChange = currentValue.slice(0, delta);
}
const formattedValue = this.valueFormatter(nativeValueChange);
textField.text = formattedValue;
textProperty.nativeValueChange(this, formattedValue);
return false;
} else {
if (range.location <= textField.text.length) {
const newText = NSString.stringWithString(textField.text).stringByReplacingCharactersInRangeWithString(range, replacementString);
textProperty.nativeValueChange(this, newText);
// 1. secureTextEntry with firstEdit should not replace
// 2. emoji's should not replace value
// 3. convenient keyboard shortcuts should not replace value (eg, '.com')
const shouldReplaceString = (textField.secureTextEntry && this.firstEdit) || (delta > 1 && !isEmoji(replacementString) && delta !== replacementString.length);
if (shouldReplaceString) {
textProperty.nativeValueChange(this, replacementString);
} else {
if (range.location <= textField.text.length) {
const newText = NSString.stringWithString(textField.text).stringByReplacingCharactersInRangeWithString(range, replacementString);
textProperty.nativeValueChange(this, newText);
}
}
}
}