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

https://github.com/NativeScript/NativeScript/issues/10249

apps/toolbox/src/pages/forms.ts

@@ -1,4 +1,4 @@
-import { Page, Observable, EventData } from '@nativescript/core';
+import { Page, Observable, EventData, TextField, PropertyChangeData } from '@nativescript/core';
 
 let page: Page;
 
@@ -9,8 +9,71 @@ export function navigatingTo(args: EventData) {
 
 export class SampleData extends Observable {
 	textInput = '';
-	textChange(args) {
-		console.log(args.object.text);
-		this.notifyPropertyChange('textInput', args.object.text);
+	formattedSSNInput = '';
+	formattedPhoneInput = '';
+	valueFormatterSSN = formatSSN;
+	valueFormatterPhone = formatPhoneNumber;
+
+	textChange(args: PropertyChangeData) {
+		console.log(args.value);
+		this.notifyPropertyChange('textInput', args.value);
+	}
+
+	textChangeSSN(args: PropertyChangeData) {
+		console.log(args.value);
+		this.notifyPropertyChange('formattedSSNInput', args.value);
+	}
+
+	textChangePhone(args: PropertyChangeData) {
+		console.log(args.value);
+		this.notifyPropertyChange('formattedPhoneInput', args.value);
 	}
 }
+
+function formatPhoneNumber(value: string, useParens?: boolean) {
+	value = value.replace(/\D/g, '');
+	var size = value.length;
+	if (useParens) {
+		if (size > 0) {
+			value = '(' + value;
+		}
+		if (size > 3) {
+			value = value.slice(0, 4) + ') ' + value.slice(4, 11);
+		}
+		if (size > 6) {
+			value = value.slice(0, 9) + '-' + value.slice(9);
+		}
+	} else {
+		if (size > 3) {
+			value = value.slice(0, 3) + '-' + value.slice(3, 10);
+		}
+		if (size > 6) {
+			value = value.slice(0, 7) + '-' + value.slice(7);
+		}
+	}
+	return value;
+}
+
+function formatSSN(value: string) {
+	// if input value is falsy eg if the user deletes the input, then just return
+	if (!value) return value;
+
+	// clean the input for any non-digit values
+	const ssn = value.replace(/[^\d]/g, '');
+
+	// ssnLength is used to know when to apply our formatting for the ssn
+	const ssnLength = ssn.length;
+
+	// we need to return the value with no formatting if its less then four digits
+	if (ssnLength < 4) return ssn;
+
+	// if ssnLength is greater than 4 and less the 6 we start to return
+	// the formatted number
+	if (ssnLength < 6) {
+		return `${ssn.slice(0, 3)}-${ssn.slice(3)}`;
+	}
+
+	// finally, if the ssnLength is greater then 6, we add the last
+	// bit of formatting and return it.
+	return `${ssn.slice(0, 3)}-${ssn.slice(3, 5)}-${ssn.slice(5, 9)}`;
+}

apps/toolbox/src/pages/forms.xml

@@ -1,15 +1,25 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
-    <Page.actionBar>
-        <ActionBar title="Labels and TextView" class="action-bar">
-        </ActionBar>
-    </Page.actionBar>
-    <ScrollView>
-      <StackLayout padding="20">
-        <Label text="TextField:" fontWeight="bold" />
-        <TextField textChange="{{ textChange }}" marginTop="6" backgroundColor="#efefef" padding="8" fontSize="18" keyboardType="url" />
+  <Page.actionBar>
+    <ActionBar title="Labels and TextView" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+  <ScrollView>
+    <StackLayout padding="20">
+      <Label text="TextField:" fontWeight="bold" />
+      <TextField textChange="{{ textChange }}" marginTop="6" backgroundColor="#efefef" padding="8" fontSize="18" keyboardType="url" />
 
-		<Label text="{{ textInput }}" marginTop="6" />
-        
-      </StackLayout>
-    </ScrollView>
+      <Label text="{{ textInput }}" marginTop="6" />
+
+      <Label text="SSN Formatted input:" fontWeight="bold" marginTop="12" />
+      <TextField hint="XXX-XX-XXXX" style.placeholderColor="silver" textChange="{{textChangeSSN}}" keyboardType="number" color="black" width="80%" borderColor="silver" borderWidth="1" height="40" textAlignment="center" borderRadius="4" valueFormatter="{{valueFormatterSSN}}" padding="5" maxLength="11">
+      </TextField>
+      <Label text="{{ formattedSSNInput }}" marginTop="6" />
+
+      <Label text="Phone Formatted input:" fontWeight="bold" marginTop="12" />
+      <TextField hint="XXX-XXX-XXXX" style.placeholderColor="silver" textChange="{{textChangePhone}}" keyboardType="number" color="black" width="80%" borderColor="silver" borderWidth="1" height="40" textAlignment="center" borderRadius="4" valueFormatter="{{valueFormatterPhone}}" padding="5" maxLength="12">
+      </TextField>
+      <Label text="{{ formattedPhoneInput }}" marginTop="6" />
+
+    </StackLayout>
+  </ScrollView>
 </Page>