feat(dialog): add decimal input type for prompt dialog (#6805)

NativeScript · Jan 25, 2019 · 408614d · 408614d
1 parent 672c821
commit 408614d
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 22 deletions.
diff --git a/apps/app/ui-tests-app/dialogs/dialogs.xml b/apps/app/ui-tests-app/dialogs/dialogs.xml
diff --git a/apps/app/ui-tests-app/dialogs/main-page-common.css b/apps/app/ui-tests-app/dialogs/main-page-common.css
@@ -0,0 +1,13 @@
+Button.even, Button.odd {
+    border-radius: 5;
+    color: white;
+    margin: 0 5 5 0;
+}
+
+Button.even {
+    background-color: #0000cc;
+}
+
+Button.odd {
+    background-color: #33cc33;
+}
diff --git a/apps/app/ui-tests-app/dialogs/main-page.android.css b/apps/app/ui-tests-app/dialogs/main-page.android.css
@@ -0,0 +1,7 @@
+@import './main-page-common.css';
+
+Button.even, Button.odd {
+    height: 25;
+    font-size: 10;
+    padding: 0;
+}
diff --git a/apps/app/ui-tests-app/dialogs/main-page.ios.css b/apps/app/ui-tests-app/dialogs/main-page.ios.css
@@ -0,0 +1,5 @@
+@import './main-page-common.css';
+
+Button.even, Button.odd {
+    padding: 5;
+}
diff --git a/apps/app/ui-tests-app/dialogs/dialogs.ts → apps/app/ui-tests-app/dialogs/main-page.ts b/apps/app/ui-tests-app/dialogs/dialogs.ts → apps/app/ui-tests-app/dialogs/main-page.ts
diff --git a/apps/app/ui-tests-app/dialogs/main-page.xml b/apps/app/ui-tests-app/dialogs/main-page.xml
@@ -0,0 +1,21 @@
+<Page loaded="pageLoaded">
+  <GridLayout rows="auto, *">
+    <Label text="{{ name }}" id="label" style="text-align:center;" />
+    <WrapLayout row="1">
+      <Button class="even" text="action" tap="{{ actionName }}" />
+      <Button class="odd" text="alert" tap="{{ alertName }}" />
+      <Button class="even" text="confirm" tap="{{ confirmName }}" />
+      <Button class="odd" text="login" tap="{{ loginName }}" />
+      <Button class="even" text="promptText" tap="{{ promptText }}" />
+      <Button class="odd" text="promptPass" tap="{{ promptPass }}" />
+      <Button class="even" text="promptEmail" tap="{{ promptEmail }}" />
+      <Button class="odd" text="promptNumber" tap="{{ promptNumber }}" />
+      <Button class="even" text="promptDecimal" tap="{{ promptDecimal }}" />
+      <Button class="odd" text="promptPhone" tap="{{ promptPhone }}" />
+      <Button class="even" text="promptCapitalizationNone" tap="{{ promptCapitalizationNone }}" />
+      <Button class="odd" text="promptCapitalizationAll" tap="{{ promptCapitalizationAll }}" />
+      <Button class="even" text="promptCapitalizationSentences" tap="{{ promptCapitalizationSentences }}" />
+      <Button class="odd" text="promptCapitalizationWords" tap="{{ promptCapitalizationWords }}" />
+    </WrapLayout>
+  </GridLayout>
+</Page>
diff --git a/apps/app/ui-tests-app/dialogs/view-model.ts b/apps/app/ui-tests-app/dialogs/view-model.ts
@@ -121,11 +121,11 @@ export class SettingsViewModel extends observable.Observable {
     public promptEmail(args: observable.EventData) {
         dialogs.prompt({
             title: "Name",
-            message: "Enter name:",
+            message: "Enter email:",
             cancelButtonText: "Cancel",
             neutralButtonText: "Ignore",
             okButtonText: "OK",
-            defaultText: "John Reese",
+            defaultText: "[email protected]",
             inputType: dialogs.inputType.email
         }).then((promptResult) => {
             console.log("### Result: " + promptResult.result + ", Text: " + promptResult.text);
@@ -158,6 +158,26 @@ export class SettingsViewModel extends observable.Observable {
       });
     }
 
+    public promptDecimal(args: observable.EventData) {
+      dialogs.prompt({
+          title: "Name",
+          message: "Enter a decimal number:",
+          cancelButtonText: "Cancel",
+          neutralButtonText: "Ignore",
+          okButtonText: "OK",
+          defaultText: "13.50",
+          inputType: dialogs.inputType.decimal
+      }).then((promptResult) => {
+          console.log("### Result: " + promptResult.result + ", Text: " + promptResult.text);
+          if (promptResult.result) {
+              this.set("name", promptResult.text);
+          }
+          else {
+              this.set("name", "13.50");
+          }
+      });
+    }
+
     public promptPhone(args: observable.EventData) {
       dialogs.prompt({
           title: "Name",

diff --git a/apps/app/ui-tests-app/main-page.ts b/apps/app/ui-tests-app/main-page.ts
@@ -12,7 +12,7 @@ export function pageLoaded(args: EventData) {
     examples.set("bindings", "bindings/main-page");
     examples.set("button", "button/main-page");
     examples.set("css", "css/main-page");
-    examples.set("dialogs", "dialogs/dialogs");
+    examples.set("dialogs", "dialogs/main-page");
     examples.set("events", "events/main-page");
     examples.set("fonts", "font/main-page");
     examples.set("flexbox", "flexbox/flexbox-main-page");

diff --git a/tns-core-modules/ui/dialogs/dialogs-common.ts b/tns-core-modules/ui/dialogs/dialogs-common.ts
@@ -39,6 +39,11 @@ export module inputType {
      */
     export const number: string = "number";
 
+    /**
+     * Decimal input type
+     */
+    export const decimal: string = "decimal";
+
     /**
      * Phone input type
      */

diff --git a/tns-core-modules/ui/dialogs/dialogs.android.ts b/tns-core-modules/ui/dialogs/dialogs.android.ts
@@ -185,7 +185,9 @@ export function prompt(arg: any): Promise<PromptResult> {
                 } else if (options.inputType === inputType.email) {
                     input.setInputType(android.text.InputType.TYPE_CLASS_TEXT | android.text.InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS);
                 } else if (options.inputType === inputType.number) {
-                  input.setInputType(android.text.InputType.TYPE_CLASS_NUMBER);
+                    input.setInputType(android.text.InputType.TYPE_CLASS_NUMBER);
+                } else if (options.inputType === inputType.decimal) {
+                    input.setInputType(android.text.InputType.TYPE_CLASS_NUMBER | android.text.InputType.TYPE_NUMBER_FLAG_DECIMAL);
                 } else if (options.inputType === inputType.phone) {
                   input.setInputType(android.text.InputType.TYPE_CLASS_PHONE);
                 }

diff --git a/tns-core-modules/ui/dialogs/dialogs.d.ts b/tns-core-modules/ui/dialogs/dialogs.d.ts
@@ -27,6 +27,11 @@ export module inputType {
      */
     export var number: string;
 
+    /**
+     * Decimal input type.
+     */
+    export var decimal: string;
+
     /**
      * Phone input type.
      */

diff --git a/tns-core-modules/ui/dialogs/dialogs.ios.ts b/tns-core-modules/ui/dialogs/dialogs.ios.ts
@@ -106,6 +106,8 @@ export function prompt(arg: any): Promise<PromptResult> {
                     arg.keyboardType = UIKeyboardType.EmailAddress;
                 } else if (options && options.inputType === inputType.number) {
                     arg.keyboardType = UIKeyboardType.NumberPad;
+                } else if (options && options.inputType === inputType.decimal) {
+                    arg.keyboardType = UIKeyboardType.DecimalPad;
                 } else if (options && options.inputType === inputType.phone) {
                     arg.keyboardType = UIKeyboardType.PhonePad;
                 }