Skip to content

Commit 7eddeec

Browse files
leeeyubinleeeyubin
authored
[YDS-#218] Atom - SuffixTextField 구현 (#268)
* feat : SuffixTextField 구현 * chore : SuffixTextField 수정 * chore : Preview 추가 * chore : versionName 2.5.10 -> 2.5.11 * fix : text, suffixLabel 기본값 제거 * fix : versionName 2.6.0으로 수정 * fix : isDisabled 네이밍 수정 * fix : 코드리뷰 반영 * fix : hintText 8dp로 수정 * fix : TextField의 hintText 8dp로 수정
1 parent 44f8035 commit 7eddeec

File tree

4 files changed

+144
-3
lines changed

4 files changed

+144
-3
lines changed

‎compose/src/main/java/com/yourssu/design/system/compose/atom/PasswordTextField.kt

+1-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ fun PasswordTextField(
106106
Row(modifier = Modifier.padding(top = 8.dp)) {
107107
Spacer(
108108
modifier = Modifier
109-
.width(16.dp),
109+
.width(8.dp),
110110
)
111111
YdsText(
112112
text = hintText,

‎compose/src/main/java/com/yourssu/design/system/compose/atom/SimpleTextField.kt

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ fun SimpleTextField(
8888
Row(modifier = Modifier.padding(top = 8.dp)) {
8989
Spacer(
9090
modifier = Modifier
91-
.width(16.dp),
91+
.width(8.dp),
9292
)
9393
YdsText(
9494
text = hintText,

‎compose/src/main/java/com/yourssu/design/system/compose/atom/SuffixTextField.kt

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
package com.yourssu.design.system.compose.atom
2+
3+
import androidx.compose.foundation.layout.Column
4+
import androidx.compose.foundation.layout.Row
5+
import androidx.compose.foundation.layout.Spacer
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.layout.width
9+
import androidx.compose.foundation.shape.RoundedCornerShape
10+
import androidx.compose.foundation.text.KeyboardOptions
11+
import androidx.compose.material.OutlinedTextField
12+
import androidx.compose.material.TextFieldDefaults
13+
import androidx.compose.runtime.Composable
14+
import androidx.compose.runtime.getValue
15+
import androidx.compose.runtime.mutableStateOf
16+
import androidx.compose.runtime.remember
17+
import androidx.compose.runtime.saveable.rememberSaveable
18+
import androidx.compose.runtime.setValue
19+
import androidx.compose.ui.Modifier
20+
import androidx.compose.ui.graphics.Color
21+
import androidx.compose.ui.text.input.KeyboardType
22+
import androidx.compose.ui.tooling.preview.Preview
23+
import androidx.compose.ui.unit.dp
24+
import com.yourssu.design.system.compose.YdsTheme
25+
import com.yourssu.design.system.compose.base.YdsText
26+
27+
@Composable
28+
fun SuffixTextField(
29+
text: String,
30+
suffixLabel: String,
31+
modifier: Modifier = Modifier,
32+
isError: Boolean = false,
33+
isDisabled: Boolean = false,
34+
placeHolder: String = "",
35+
hintText: String = "",
36+
onValueChange: (value: String) -> Unit,
37+
keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
38+
) {
39+
Column(modifier = modifier) {
40+
OutlinedTextField(
41+
value = text,
42+
onValueChange = onValueChange,
43+
modifier = Modifier.fillMaxWidth(),
44+
shape = RoundedCornerShape(8.dp),
45+
colors = TextFieldDefaults.outlinedTextFieldColors(
46+
backgroundColor = YdsTheme.colors.inputFieldElevated,
47+
cursorColor = YdsTheme.colors.textPointed,
48+
errorBorderColor = YdsTheme.colors.textWarned,
49+
unfocusedBorderColor = Color.Transparent,
50+
focusedBorderColor = YdsTheme.colors.textPointed,
51+
disabledTextColor = YdsTheme.colors.textDisabled,
52+
disabledBorderColor = Color.Transparent,
53+
textColor = YdsTheme.colors.textSecondary,
54+
),
55+
isError = isError,
56+
enabled = !isDisabled,
57+
placeholder = {
58+
YdsText(
59+
text = placeHolder,
60+
style = YdsTheme.typography.body1,
61+
color = YdsTheme.colors.textTertiary,
62+
)
63+
},
64+
trailingIcon = {
65+
YdsText(
66+
modifier = Modifier.padding(16.dp),
67+
text = suffixLabel,
68+
style = YdsTheme.typography.body1,
69+
color = YdsTheme.colors.textTertiary,
70+
)
71+
},
72+
textStyle = YdsTheme.typography.body1.toTextStyle(),
73+
keyboardOptions = keyboardOptions,
74+
singleLine = true,
75+
)
76+
if (hintText.isNotEmpty()) {
77+
Row(modifier = Modifier.padding(top = 8.dp)) {
78+
Spacer(
79+
modifier = Modifier
80+
.width(8.dp),
81+
)
82+
YdsText(
83+
text = hintText,
84+
style = YdsTheme.typography.caption1,
85+
color = if (isError) {
86+
YdsTheme.colors.textWarned
87+
} else if (!isDisabled) {
88+
YdsTheme.colors.textDisabled
89+
} else {
90+
YdsTheme.colors.textTertiary
91+
},
92+
)
93+
94+
}
95+
}
96+
}
97+
}
98+
99+
@Preview
100+
@Composable
101+
private fun PreviewSuffixTextField() {
102+
var isError by remember { mutableStateOf(false) }
103+
var text1 by rememberSaveable { mutableStateOf("") }
104+
var text2 by rememberSaveable { mutableStateOf("") }
105+
var text3 by rememberSaveable { mutableStateOf("") }
106+
107+
Column {
108+
SuffixTextField(
109+
text = text1,
110+
isError = isError, isDisabled = false,
111+
placeHolder = "플레이스 홀더",
112+
onValueChange = { value ->
113+
text1 = value
114+
},
115+
hintText = "힌트 텍스트",
116+
modifier = Modifier.padding(10.dp),
117+
suffixLabel = "@soongsil.ac.kr",
118+
)
119+
120+
SuffixTextField(
121+
text = text2,
122+
isDisabled = true,
123+
onValueChange = { value ->
124+
text2 = value
125+
},
126+
hintText = "힌트 텍스트",
127+
modifier = Modifier.padding(bottom = 10.dp),
128+
suffixLabel = "@soongsil.ac.kr",
129+
)
130+
131+
SuffixTextField(
132+
text = text3,
133+
isError = true,
134+
hintText = "힌트 텍스트",
135+
suffixLabel = "@soongsil.ac.kr",
136+
onValueChange = { value ->
137+
text3 = value
138+
},
139+
)
140+
}
141+
}

‎version.properties

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
versionName=2.5.10
1+
versionName=2.6.0
22
#자동 배포를 위해서 버전은 여기 한 군데에서 관리하면 된다

0 commit comments

Comments
 (0)