Merge pull request #249 from wttech/input-string-display-fix

Input display fix

Author: krystian-panek-vmltech

core/src/main/java/dev/vml/es/acm/core/code/input/StringInput.java

@@ -36,11 +36,21 @@ public void tel() {
         this.display = Display.TEL;
     }
 
+    public void numeric() {
+        this.display = Display.NUMERIC;
+    }
+
+    public void decimal() {
+        this.display = Display.DECIMAL;
+    }
+
     public enum Display {
         TEXT,
         PASSWORD,
         URL,
         TEL,
+        NUMERIC,
+        DECIMAL,
         EMAIL;
 
         public static Display of(String name) {

ui.frontend/src/components/CodeInput.tsx

@@ -29,6 +29,8 @@ import { useInput } from '../hooks/form.ts';
 import {
   Input,
   InputValue,
+  stringInputDisplayToMode,
+  stringInputDisplayToType,
   isBoolInput,
   isColorInput,
   isDateTimeInput,
@@ -138,7 +140,8 @@ const CodeInput: React.FC<CodeInputProps> = ({ input }) => {
             } else if (isStringInput(input)) {
               return (
                 <TextField
-                  type={input.display}
+                  type={stringInputDisplayToType(input.display)}
+                  inputMode={stringInputDisplayToMode(input.display)}
                   {...field}
                   value={field.value ?? ''}
                   label={label}

ui.frontend/src/types/input.ts

@@ -35,7 +35,7 @@ export type TextInput = Input<string> & {
 };
 
 export type StringInput = Input<string> & {
-  display: 'PLAIN' | 'PASSWORD';
+  display: 'TEXT' | 'PASSWORD' | 'URL' | 'TEL' | 'EMAIL' | 'NUMERIC' | 'DECIMAL';
 };
 
 export type NumberInput = Input<number> &
@@ -140,3 +140,38 @@ export function isMapInput(input: Input<InputValue>): input is MapInput {
 export function isKeyValueListInput(input: Input<InputValue>): input is KeyValueListInput {
   return input.type === 'KEY_VALUE_LIST';
 }
+
+export function stringInputDisplayToType(display: string): string {
+  switch (display) {
+    case 'PASSWORD':
+      return 'password';
+    case 'URL':
+      return 'url';
+    case 'TEL':
+      return 'tel';
+    case 'EMAIL':
+      return 'email';
+    case 'TEXT':
+    default:
+      return 'text';
+  }
+}
+
+export function stringInputDisplayToMode(display: string): "url" | "tel" | "email" | "text" | "numeric" | "decimal" {
+  switch (display) {
+    case 'URL':
+      return 'url';
+    case 'TEL':
+      return 'tel';
+    case 'EMAIL':
+      return 'email';
+    case 'NUMERIC':
+      return 'numeric';
+    case 'DECIMAL':
+      return 'decimal';
+    case 'TEXT':
+    case 'PASSWORD':
+    default:
+      return 'text';
+  }
+}