ANDROID-15025 add number input (#373)

* ANDROID-15025 add number input * Modify numeric type to decimal * Remove regex
Telefonica · Jul 31, 2024 · 0134a51 · 0134a51
1 parent 9ba226c
commit 0134a51
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 1 deletion.
diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Inputs.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Inputs.kt
@@ -28,6 +28,7 @@ import com.telefonica.mistica.compose.input.CheckBoxInput
 import com.telefonica.mistica.compose.input.DropDownInput
 import com.telefonica.mistica.compose.input.EmailInput
 import com.telefonica.mistica.compose.input.LimitCharacters
+import com.telefonica.mistica.compose.input.NumberInput
 import com.telefonica.mistica.compose.input.PasswordInput
 import com.telefonica.mistica.compose.input.PhoneInput
 import com.telefonica.mistica.compose.input.TextAreaInput
@@ -62,6 +63,8 @@ fun Inputs() {
         PasswordInputSample()
         Title("Phone input")
         PhoneInputSample()
+        Title("Number input")
+        NumericInputSample()
         Title("Email input")
         EmailInputSample()
         Title("Email input with validation")
@@ -211,6 +214,25 @@ private fun PhoneInputSample() {
     )
 }
 
+@Composable
+private fun NumericInputSample() {
+    var text by remember {
+        mutableStateOf("")
+    }
+
+    NumberInput(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 8.dp, start = 16.dp, end = 16.dp)
+        ,
+        value = text,
+        onValueChange = {
+            text = it
+        },
+        label = "Type Something"
+    )
+}
+
 @Composable
 private fun TextInputWithTransformation() {
     var text by remember {

diff --git a/catalog/src/main/res/layout/screen_inputs_catalog.xml b/catalog/src/main/res/layout/screen_inputs_catalog.xml
@@ -139,6 +139,20 @@
                 app:inputHint="Phone number"
                 app:inputType="phone" />
 
+            <com.telefonica.mistica.title.TitleView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_gravity="start"
+                    app:title="Number Input" />
+
+            <com.telefonica.mistica.input.TextInput
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginTop="8dp"
+                    android:layout_marginBottom="8dp"
+                    app:inputHint="Number"
+                    app:inputType="number" />
+
             <com.telefonica.mistica.title.TitleView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"

diff --git a/library/src/main/java/com/telefonica/mistica/compose/input/NumberInput.kt b/library/src/main/java/com/telefonica/mistica/compose/input/NumberInput.kt
@@ -0,0 +1,46 @@
+package com.telefonica.mistica.compose.input
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.core.text.isDigitsOnly
+
+@Composable
+fun NumberInput(
+    modifier: Modifier,
+    value: String,
+    onValueChange: (String) -> Unit,
+    label: String,
+    helperText: String? = null,
+    isError: Boolean = false,
+    errorText: String? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    isInverse: Boolean = false,
+    enabled: Boolean = true,
+    readOnly: Boolean = false,
+    onClick: (() -> Unit)? = null,
+    visualTransformation: VisualTransformation = VisualTransformation.None,
+    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+) {
+
+    TextInputImpl(
+        modifier = modifier,
+        value = value,
+        onValueChange = onValueChange,
+        label = label,
+        helperText = helperText,
+        isError = isError,
+        errorText = errorText,
+        trailingIcon = trailingIcon,
+        isInverse = isInverse,
+        enabled = enabled,
+        readOnly = readOnly,
+        onClick = onClick,
+        visualTransformation = visualTransformation,
+        keyboardOptions = keyboardOptions.toFoundationKeyboardOptions(
+            keyboardType = KeyboardType.Decimal
+        )
+    )
+
+}
diff --git a/library/src/main/java/com/telefonica/mistica/input/TextInput.kt b/library/src/main/java/com/telefonica/mistica/input/TextInput.kt
@@ -74,7 +74,8 @@ class TextInput @JvmOverloads constructor(
         TYPE_EMAIL,
         TYPE_PASSWORD,
         TYPE_TEXT_AREA,
-        TYPE_PHONE
+        TYPE_PHONE,
+        TYPE_NUMBER
     )
     annotation class TextInputType
 
@@ -122,6 +123,7 @@ class TextInput @JvmOverloads constructor(
             TYPE_PASSWORD -> R.layout.input_text_password
             TYPE_TEXT_AREA -> R.layout.input_text_area
             TYPE_PHONE -> R.layout.input_text_phone
+            TYPE_NUMBER -> R.layout.input_text_number
             else -> R.layout.input_text
         }
 
@@ -259,6 +261,7 @@ class TextInput @JvmOverloads constructor(
         const val TYPE_PASSWORD = 2
         const val TYPE_TEXT_AREA = 3
         const val TYPE_PHONE = 4
+        const val TYPE_NUMBER = 5
 
         const val NO_MAX_LENGTH = 0
 

diff --git a/library/src/main/res/layout/input_text_number.xml b/library/src/main/res/layout/input_text_number.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.textfield.TextInputLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/text_input_layout"
+    style="@style/AppTheme.Forms.TextInputLayout"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <com.google.android.material.textfield.TextInputEditText
+        android:id="@+id/text_input"
+        style="@style/AppTheme.Forms.TextInputLayout.EditText.Number" />
+
+</com.google.android.material.textfield.TextInputLayout>
diff --git a/library/src/main/res/values/attrs_components.xml b/library/src/main/res/values/attrs_components.xml
@@ -174,6 +174,7 @@
             <enum name="password" value="2" />
             <enum name="textArea" value="3" />
             <enum name="phone" value="4" />
+            <enum name="number" value="5" />
         </attr>
         <attr name="inputText" format="string" /> <!-- Supports inverse databinding -->
         <attr name="inputCounterEnabled" format="boolean" />

diff --git a/library/src/main/res/values/styles_forms.xml b/library/src/main/res/values/styles_forms.xml
@@ -81,6 +81,10 @@
         <item name="android:inputType">phone</item>
     </style>
 
+    <style name="AppTheme.Forms.TextInputLayout.EditText.Number">
+        <item name="android:inputType">numberDecimal</item>
+    </style>
+
     <style name="AppTheme.Forms.TextInputLayout.EditText.Email">
         <item name="android:inputType">textEmailAddress</item>
     </style>