Merge pull request #208 from yourssu/feature/harry/compose-textfield

[YDS-205] SimpleTextField, PasswordTextField 구현
yourssu · Nov 4, 2023 · 29f40cd · 29f40cd
2 parents 5adb83a + 83b1431
commit 29f40cd
Show file tree

Hide file tree

Showing 5 changed files with 370 additions and 0 deletions.
diff --git a/compose/src/main/java/com/yourssu/design/system/compose/atom/PasswordTextField.kt b/compose/src/main/java/com/yourssu/design/system/compose/atom/PasswordTextField.kt
@@ -0,0 +1,150 @@
+package com.yourssu.design.system.compose.atom
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.IconButton
+import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.design.system.compose.R
+import com.yourssu.design.system.compose.YdsTheme
+import com.yourssu.design.system.compose.base.Icon
+import com.yourssu.design.system.compose.base.IconSize
+import com.yourssu.design.system.compose.base.YdsText
+
+@Composable
+fun PasswordTextField(
+    modifier: Modifier = Modifier,
+    isError: Boolean = false,
+    isEnabled: Boolean = true,
+    onValueChange: (value: String) -> Unit,
+    placeHolder: String = "",
+    hintText: String = "",
+) {
+    var text by rememberSaveable { mutableStateOf("") }
+    var showPassword by remember { mutableStateOf(value = false) }
+    Column(modifier = modifier) {
+        OutlinedTextField(
+            value = text,
+            onValueChange = { value: String ->
+                text = value
+                onValueChange(value)
+            },
+            modifier = Modifier.fillMaxWidth(),
+            shape = RoundedCornerShape(8.dp),
+            colors = TextFieldDefaults.outlinedTextFieldColors(
+                backgroundColor = YdsTheme.colors.inputFieldElevated,
+                cursorColor = YdsTheme.colors.textPointed,
+                errorBorderColor = YdsTheme.colors.textWarned,
+                unfocusedBorderColor = Color.Transparent,
+                focusedBorderColor = YdsTheme.colors.textPointed,
+                disabledTextColor = YdsTheme.colors.textDisabled,
+                disabledBorderColor = Color.Transparent,
+                textColor = YdsTheme.colors.textSecondary,
+            ),
+            isError = isError,
+            enabled = isEnabled,
+            placeholder = {
+                YdsText(
+                    text = placeHolder,
+                    style = YdsTheme.typography.body1,
+                    color = YdsTheme.colors.textTertiary,
+                )
+            },
+            visualTransformation = if (showPassword) {
+                VisualTransformation.None
+            } else {
+                PasswordVisualTransformation()
+            },
+            trailingIcon = {
+                if (showPassword) {
+                    IconButton(onClick = { showPassword = false }) {
+                        Icon(
+                            id = R.drawable.ic_eyeclosed_line,
+                            iconSize = IconSize.Medium,
+                        )
+                    }
+                } else {
+                    IconButton(onClick = { showPassword = true }) {
+                        Icon(
+                            id = R.drawable.ic_eyeopen_line,
+                            iconSize = IconSize.Medium,
+                        )
+                    }
+                }
+            },
+            textStyle = YdsTheme.typography.body1.toTextStyle(),
+            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
+            singleLine = true,
+        )
+        if (hintText.isNotEmpty()) {
+            Row(modifier = Modifier.padding(top = 8.dp)) {
+                Spacer(
+                    modifier = Modifier
+                        .width(16.dp)
+                )
+                YdsText(
+                    text = hintText,
+                    style = YdsTheme.typography.caption1,
+                    color = if (isError) {
+                        YdsTheme.colors.textWarned
+                    } else if (!isEnabled) {
+                        YdsTheme.colors.textDisabled
+                    } else {
+                        YdsTheme.colors.textTertiary
+                    },
+                )
+
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PreviewPasswordTextField() {
+    var isError by remember { mutableStateOf(false) }
+    var text by rememberSaveable { mutableStateOf("") }
+    Column {
+        PasswordTextField(
+            isError = isError, isEnabled = true,
+            placeHolder = "플레이스 홀더",
+            onValueChange = { value ->
+                isError = value.equals("x")
+                text = value
+            },
+            hintText = "힌트 텍스트",
+            modifier = Modifier.padding(10.dp),
+        )
+
+        PasswordTextField(
+            isEnabled = false,
+            onValueChange = { value ->
+
+            },
+            modifier = Modifier.padding(bottom = 10.dp),
+            hintText = "힌트 텍스트",
+        )
+
+        PasswordTextField(isError = true, onValueChange = { value -> })
+
+    }
+}
diff --git a/compose/src/main/java/com/yourssu/design/system/compose/atom/SimpleTextField.kt b/compose/src/main/java/com/yourssu/design/system/compose/atom/SimpleTextField.kt
@@ -0,0 +1,151 @@
+package com.yourssu.design.system.compose.atom
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.IconButton
+import androidx.compose.material.OutlinedTextField
+import androidx.compose.material.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.yourssu.design.system.compose.R
+import com.yourssu.design.system.compose.YdsTheme
+import com.yourssu.design.system.compose.base.Icon
+import com.yourssu.design.system.compose.base.IconSize
+import com.yourssu.design.system.compose.base.YdsText
+
+@Composable
+fun SimpleTextField(
+    text: String = "",
+    modifier: Modifier = Modifier,
+    isError: Boolean = false,
+    isEnabled: Boolean = true,
+    onValueChange: (value: String) -> Unit,
+    placeHolder: String = "",
+    hintText: String = "",
+    keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
+    onErrorChange: (Boolean) -> Unit,
+) {
+    Column(modifier = modifier) {
+        OutlinedTextField(
+            value = text,
+            onValueChange = onValueChange,
+            modifier = Modifier.fillMaxWidth(),
+            shape = RoundedCornerShape(8.dp),
+            colors = TextFieldDefaults.outlinedTextFieldColors(
+                backgroundColor = YdsTheme.colors.inputFieldElevated,
+                cursorColor = YdsTheme.colors.textPointed,
+                errorBorderColor = YdsTheme.colors.textWarned,
+                unfocusedBorderColor = Color.Transparent,
+                focusedBorderColor = YdsTheme.colors.textPointed,
+                disabledTextColor = YdsTheme.colors.textDisabled,
+                disabledBorderColor = Color.Transparent,
+                textColor = YdsTheme.colors.textSecondary,
+            ),
+            isError = isError,
+            enabled = isEnabled,
+            placeholder = {
+                YdsText(
+                    text = placeHolder,
+                    style = YdsTheme.typography.body1,
+                    color = YdsTheme.colors.textTertiary,
+                )
+            },
+            trailingIcon = {
+                if (text.isNotEmpty()) {
+                    IconButton(
+                        onClick = {
+                            onValueChange("")
+                            onErrorChange(false)
+                        },
+                    ) {
+                        Icon(
+                            id = R.drawable.ic_x_line,
+                            iconSize = IconSize.ExtraSmall,
+                        )
+                    }
+                }
+            },
+            textStyle = YdsTheme.typography.body1.toTextStyle(),
+            keyboardOptions = keyboardOptions,
+            singleLine = true,
+        )
+        if (hintText.isNotEmpty()) {
+            Row(modifier = Modifier.padding(top = 8.dp)) {
+                Spacer(
+                    modifier = Modifier
+                        .width(16.dp)
+                )
+                YdsText(
+                    text = hintText,
+                    style = YdsTheme.typography.caption1,
+                    color = if (isError) {
+                        YdsTheme.colors.textWarned
+                    } else if (!isEnabled) {
+                        YdsTheme.colors.textDisabled
+                    } else {
+                        YdsTheme.colors.textTertiary
+                    },
+                )
+
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PreviewSimpleTextField() {
+    var isError by remember { mutableStateOf(false) }
+    var text by rememberSaveable { mutableStateOf("") }
+    Column {
+        SimpleTextField(
+            text = text,
+            isError = isError, isEnabled = true,
+            placeHolder = "플레이스 홀더",
+            onValueChange = { value ->
+                isError = value == "x"
+                text = value
+            },
+            hintText = "힌트 텍스트",
+            modifier = Modifier.padding(10.dp),
+            onErrorChange = { error ->
+                isError = error
+            },
+        )
+
+        SimpleTextField(
+            isEnabled = false,
+            onValueChange = { value ->
+
+            },
+            modifier = Modifier.padding(bottom = 10.dp),
+            hintText = "힌트 텍스트",
+            onErrorChange = { error ->
+                isError = error
+            },
+        )
+
+        SimpleTextField(
+            isError = true, onValueChange = { value -> },
+            onErrorChange = { error ->
+                isError = error
+            },
+        )
+
+    }
+}
diff --git a/compose/src/main/res/drawable/ic_eyeclosed_line.xml b/compose/src/main/res/drawable/ic_eyeclosed_line.xml
@@ -0,0 +1,25 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <group>
+    <clip-path
+        android:pathData="M2,4h20v16h-20z"/>
+    <path
+        android:pathData="M18.13,20C18.0315,20.0005 17.9338,19.9813 17.8428,19.9435C17.7518,19.9057 17.6693,19.8501 17.6,19.78L3.1,5.28C3.0263,5.2114 2.9672,5.1286 2.9262,5.0366C2.8852,4.9446 2.8632,4.8453 2.8614,4.7446C2.8596,4.6438 2.8782,4.5438 2.9159,4.4504C2.9536,4.357 3.0097,4.2722 3.081,4.201C3.1522,4.1298 3.237,4.0736 3.3304,4.0359C3.4238,3.9982 3.5238,3.9797 3.6245,3.9814C3.7252,3.9832 3.8245,4.0053 3.9165,4.0462C4.0085,4.0872 4.0913,4.1463 4.16,4.22L18.66,18.72C18.7308,18.789 18.787,18.8714 18.8254,18.9624C18.8638,19.0534 18.8836,19.1512 18.8836,19.25C18.8836,19.3488 18.8638,19.4466 18.8254,19.5376C18.787,19.6287 18.7308,19.7111 18.66,19.78C18.5918,19.8516 18.5095,19.9081 18.4182,19.946C18.327,19.9838 18.2288,20.0023 18.13,20Z"
+        android:fillColor="@color/buttonNormal"/>
+    <path
+        android:pathData="M15.42,15.4901C14.3513,16.0023 13.1849,16.2785 12,16.3001C8.19,16.3001 4.86,13.0301 3.75,11.8001C5.0218,10.3761 6.535,9.1879 8.22,8.29L7.11,7.18C5.2214,8.2551 3.5441,9.6647 2.16,11.3401C2.0578,11.4716 2.0024,11.6335 2.0024,11.8001C2.0024,11.9666 2.0578,12.1285 2.16,12.2601C2.34,12.4901 6.59,17.8001 12,17.8001C13.5863,17.7692 15.1425,17.3613 16.54,16.6101L15.42,15.4901Z"
+        android:fillColor="@color/buttonNormal"/>
+    <path
+        android:pathData="M21.84,11.34C21.66,11.11 17.41,5.8 12,5.8C10.8163,5.815 9.6459,6.0525 8.55,6.5001L9.75,7.6701C10.4829,7.4298 11.2487,7.305 12.02,7.3C15.83,7.3 19.16,10.57 20.28,11.8C19.2403,12.9337 18.053,13.9226 16.75,14.74L17.88,15.8C19.3794,14.8104 20.7269,13.6078 21.88,12.23C21.9693,12.0969 22.0137,11.9386 22.0065,11.7785C21.9993,11.6183 21.9409,11.4646 21.84,11.34Z"
+        android:fillColor="@color/buttonNormal"/>
+    <path
+        android:pathData="M13.44,13.51C13.0392,13.8551 12.5289,14.0465 12,14.05C11.4033,14.05 10.831,13.813 10.409,13.391C9.9871,12.9691 9.75,12.3968 9.75,11.8C9.7536,11.2712 9.945,10.7608 10.29,10.36L9.23,9.3C8.5945,9.9782 8.2375,10.8707 8.23,11.8C8.23,12.7946 8.6251,13.7484 9.3284,14.4517C10.0316,15.155 10.9854,15.55 11.98,15.55C12.9094,15.5425 13.8018,15.1855 14.48,14.55L13.44,13.51Z"
+        android:fillColor="@color/buttonNormal"/>
+    <path
+        android:pathData="M11.64,9.59C11.7598,9.5802 11.8802,9.5802 12,9.59C12.5899,9.59 13.1562,9.8215 13.577,10.2349C13.9979,10.6482 14.2395,11.2103 14.25,11.8C14.2598,11.9198 14.2598,12.0403 14.25,12.16L15.44,13.35C15.6547,12.862 15.7605,12.3331 15.75,11.8C15.75,10.8055 15.3549,9.8517 14.6517,9.1484C13.9484,8.4451 12.9946,8.05 12,8.05C11.464,8.0521 10.9349,8.1716 10.45,8.4001L11.64,9.59Z"
+        android:fillColor="@color/buttonNormal"/>
+  </group>
+</vector>
diff --git a/compose/src/main/res/drawable/ic_eyeopen_line.xml b/compose/src/main/res/drawable/ic_eyeopen_line.xml
@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M21.25,12C21.25,12 17.11,17.25 12,17.25C6.89,17.25 2.75,12 2.75,12C2.75,12 6.89,6.75 12,6.75C17.11,6.75 21.25,12 21.25,12Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/buttonNormal"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M12,15C13.6569,15 15,13.6569 15,12C15,10.3431 13.6569,9 12,9C10.3431,9 9,10.3431 9,12C9,13.6569 10.3431,15 12,15Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="@color/buttonNormal"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/compose/src/main/res/drawable/ic_x_line.xml b/compose/src/main/res/drawable/ic_x_line.xml
@@ -0,0 +1,24 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="26dp"
+    android:height="26dp"
+    android:viewportWidth="26"
+    android:viewportHeight="26">
+  <group>
+    <clip-path
+        android:pathData="M13,0.27l12.7279,12.7279l-12.7279,12.7279l-12.7279,-12.7279z"/>
+    <path
+        android:pathData="M7.1664,7.1643L18.8336,18.8316"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.5"
+        android:fillColor="#00000000"
+        android:strokeColor="@color/buttonNormal"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M18.8336,7.1643L7.1664,18.8316"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.5"
+        android:fillColor="#00000000"
+        android:strokeColor="@color/buttonNormal"
+        android:strokeLineCap="round"/>
+  </group>
+</vector>