|
1 | 1 | package com.poti.android.core.designsystem.component.field |
2 | | - |
3 | | -import androidx.compose.foundation.background |
4 | | -import androidx.compose.foundation.border |
5 | | -import androidx.compose.foundation.layout.Box |
6 | | -import androidx.compose.foundation.layout.Row |
7 | | -import androidx.compose.foundation.layout.padding |
8 | | -import androidx.compose.foundation.shape.RoundedCornerShape |
9 | | -import androidx.compose.foundation.text.BasicTextField |
10 | | -import androidx.compose.foundation.text.KeyboardActions |
11 | | -import androidx.compose.foundation.text.KeyboardOptions |
12 | | -import androidx.compose.material3.Text |
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.setValue |
18 | | -import androidx.compose.ui.Alignment |
19 | | -import androidx.compose.ui.Modifier |
20 | | -import androidx.compose.ui.draw.clip |
21 | | -import androidx.compose.ui.focus.FocusDirection |
22 | | -import androidx.compose.ui.focus.FocusRequester |
23 | | -import androidx.compose.ui.focus.focusRequester |
24 | | -import androidx.compose.ui.focus.onFocusChanged |
25 | | -import androidx.compose.ui.graphics.Color |
26 | | -import androidx.compose.ui.platform.LocalFocusManager |
27 | | -import androidx.compose.ui.platform.LocalSoftwareKeyboardController |
28 | | -import androidx.compose.ui.text.input.ImeAction |
29 | | -import androidx.compose.ui.text.input.KeyboardType |
30 | | -import androidx.compose.ui.text.style.TextOverflow |
31 | | -import androidx.compose.ui.tooling.preview.Preview |
32 | | -import androidx.compose.ui.unit.dp |
33 | | -import com.poti.android.core.designsystem.theme.PotiTheme |
34 | | - |
35 | | -@Composable |
36 | | -internal fun PotiBasicField( |
37 | | - value: String, |
38 | | - onValueChaged: (String) -> Unit, |
39 | | - placeholder: String, |
40 | | - borderColor: Color, |
41 | | - backgroundColor: Color, |
42 | | - modifier: Modifier = Modifier, |
43 | | - keyboardType: KeyboardType = KeyboardType.Text, |
44 | | - imeAction: ImeAction = ImeAction.Done, |
45 | | - onDoneAction: () -> Unit = {}, |
46 | | - onNextAction: () -> Unit = {}, |
47 | | - onSearchAction: () -> Unit = {}, |
48 | | - onFocusChanged: (Boolean) -> Unit = {}, |
49 | | - focusRequester: FocusRequester = FocusRequester(), |
50 | | - singleLine: Boolean = true, |
51 | | - trailingIcon: @Composable () -> Unit = {}, |
52 | | - enabled: Boolean = true, |
53 | | -) { |
54 | | - var isFocused by remember { mutableStateOf(false) } |
55 | | - val keyboardController = LocalSoftwareKeyboardController.current |
56 | | - val focusManager = LocalFocusManager.current |
57 | | - |
58 | | - BasicTextField( |
59 | | - value = value, |
60 | | - onValueChange = onValueChaged, |
61 | | - modifier = modifier |
62 | | - .clip(RoundedCornerShape(8.dp)) |
63 | | - .border(1.dp, borderColor, RoundedCornerShape(8.dp)) |
64 | | - .background(backgroundColor) |
65 | | - .focusRequester(focusRequester) |
66 | | - .onFocusChanged { focusState -> |
67 | | - isFocused = focusState.isFocused |
68 | | - onFocusChanged(focusState.isFocused) |
69 | | - }, |
70 | | - singleLine = singleLine, |
71 | | - keyboardOptions = KeyboardOptions( |
72 | | - keyboardType = keyboardType, |
73 | | - imeAction = imeAction, |
74 | | - ), |
75 | | - keyboardActions = KeyboardActions( |
76 | | - onDone = { |
77 | | - onDoneAction() |
78 | | - // 사용자가 별도 동작을 정의했더라도, 기본적으로 키보드는 닫히게 함 |
79 | | - keyboardController?.hide() |
80 | | - }, |
81 | | - onNext = { |
82 | | - onNextAction() |
83 | | - // 사용자가 별도 동작을 정의했더라도, 기본적으로 포커스는 넘어가게 함 |
84 | | - focusManager.moveFocus(FocusDirection.Next) |
85 | | - }, |
86 | | - onSearch = { |
87 | | - onSearchAction() |
88 | | - // 검색은 보통 키보드를 닫거나 유지하거나 기획에 따라 다름 (보통 닫음) |
89 | | - keyboardController?.hide() |
90 | | - }, |
91 | | - ), |
92 | | - enabled = enabled, |
93 | | - textStyle = PotiTheme.typography.body16m.copy( |
94 | | - color = PotiTheme.colors.black, |
95 | | - ), |
96 | | - decorationBox = { innerTextField -> |
97 | | - Row( |
98 | | - modifier = Modifier |
99 | | - .padding(horizontal = 16.dp, vertical = 14.dp), |
100 | | - verticalAlignment = if (singleLine) Alignment.CenterVertically else Alignment.Top, |
101 | | - ) { |
102 | | - Box( |
103 | | - modifier = Modifier |
104 | | - .weight(1f), |
105 | | - contentAlignment = Alignment.CenterStart, |
106 | | - ) { |
107 | | - innerTextField() |
108 | | - |
109 | | - if (value.isEmpty()) { |
110 | | - Text( |
111 | | - text = placeholder, |
112 | | - color = PotiTheme.colors.gray700, |
113 | | - style = PotiTheme.typography.body16m, |
114 | | - ) |
115 | | - } |
116 | | - |
117 | | - if (singleLine && !isFocused && value.isNotEmpty()) { |
118 | | - Text( |
119 | | - text = value, |
120 | | - modifier = Modifier |
121 | | - .background(backgroundColor), |
122 | | - color = PotiTheme.colors.black, |
123 | | - style = PotiTheme.typography.body16m, |
124 | | - maxLines = 1, |
125 | | - overflow = TextOverflow.Ellipsis, |
126 | | - ) |
127 | | - } |
128 | | - } |
129 | | - trailingIcon() |
130 | | - } |
131 | | - }, |
132 | | - ) |
133 | | -} |
134 | | - |
135 | | -@Preview(showBackground = true) |
136 | | -@Composable |
137 | | -private fun PotiBasicFieldPreview() { |
138 | | - var text by remember { mutableStateOf("") } |
139 | | - |
140 | | - PotiBasicField( |
141 | | - value = text, |
142 | | - onValueChaged = { text = it }, |
143 | | - placeholder = "placeholrder", |
144 | | - borderColor = PotiTheme.colors.black, |
145 | | - backgroundColor = PotiTheme.colors.gray300, |
146 | | - modifier = Modifier.padding(50.dp), |
147 | | - ) |
148 | | -} |
0 commit comments