Merge pull request #22 from teamterning/add/#19-text-field

[ADD/#19] TerningTextField
teamterning · Jul 9, 2024 · c617801 · c617801
2 parents 95ce7d0 + 4af2441
commit c617801
Show file tree

Hide file tree

Showing 14 changed files with 343 additions and 24 deletions.
diff --git a/core/src/main/java/com/terning/core/designsystem/textfield/NameTextField.kt b/core/src/main/java/com/terning/core/designsystem/textfield/NameTextField.kt
@@ -0,0 +1,37 @@
+package com.terning.core.designsystem.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import com.terning.core.designsystem.theme.Black
+import com.terning.core.designsystem.theme.Grey300
+import com.terning.core.designsystem.theme.Grey400
+import com.terning.core.designsystem.theme.Grey500
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.TerningTheme
+
+@Composable
+fun NameTextField(
+    text: String,
+    onValueChange: (String) -> Unit,
+    hint: String,
+    helperMessage: String,
+    helperIcon: Int? = null,
+    helperColor: Color = TerningMain,
+) {
+    TerningBasicTextField(
+        value = text,
+        onValueChange = onValueChange,
+        textStyle = TerningTheme.typography.detail1,
+        textColor = Black,
+        drawLineColor = Grey500,
+        cursorBrush = SolidColor(Grey400),
+        hint = hint,
+        hintColor = Grey300,
+        showTextLength = true,
+        maxTextLength = 12,
+        helperMessage = helperMessage,
+        helperIcon = helperIcon,
+        helperColor = helperColor,
+    )
+}
diff --git a/core/src/main/java/com/terning/core/designsystem/textfield/SearchTextField.kt b/core/src/main/java/com/terning/core/designsystem/textfield/SearchTextField.kt
@@ -0,0 +1,29 @@
+package com.terning.core.designsystem.textfield
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.SolidColor
+import com.terning.core.designsystem.theme.Grey300
+import com.terning.core.designsystem.theme.Grey400
+import com.terning.core.designsystem.theme.TerningTheme
+
+@Composable
+fun SearchTextField(
+    text: String,
+    onValueChange: (String) -> Unit,
+    hint: String,
+    leftIcon: Int,
+) {
+    TerningBasicTextField(
+        value = text,
+        onValueChange = onValueChange,
+        textStyle = TerningTheme.typography.button3,
+        textColor = Grey400,
+        cursorBrush = SolidColor(Grey300),
+        drawLineColor = Grey300,
+        strokeWidth = 2f,
+        hint = hint,
+        hintColor = Grey300,
+        leftIcon = leftIcon,
+        leftIconColor = Grey400,
+    )
+}
diff --git a/core/src/main/java/com/terning/core/designsystem/textfield/TerningBasicTextField.kt b/core/src/main/java/com/terning/core/designsystem/textfield/TerningBasicTextField.kt
@@ -0,0 +1,134 @@
+package com.terning.core.designsystem.textfield
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.theme.Grey300
+import com.terning.core.designsystem.theme.TerningMain
+import com.terning.core.designsystem.theme.TerningTheme
+import com.terning.core.designsystem.theme.White
+
+@Composable
+fun TerningBasicTextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    textStyle: TextStyle,
+    textColor: Color,
+    hintColor: Color,
+    drawLineColor: Color,
+    helperColor: Color,
+    cursorBrush: Brush,
+    strokeWidth: Float = 1f,
+    leftIcon: Int? = null,
+    leftIconColor: Color = TerningMain,
+    maxTextLength: Int? = null,
+    showTextLength: Boolean = false,
+    hint: String = "",
+    helperMessage: String = "",
+    helperIcon: Int? = null,
+) {
+    val keyboardController = LocalSoftwareKeyboardController.current
+    val focusManager = LocalFocusManager.current
+
+    BasicTextField(value = value,
+        onValueChange = onValueChange,
+        singleLine = true,
+        maxLines = 1,
+        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
+        keyboardActions = KeyboardActions(onDone = {
+            keyboardController?.hide()
+            focusManager.clearFocus()
+        }),
+
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(White)
+            .drawWithContent {
+                val canvasWidth = size.width
+                val canvasHeight = size.height
+
+                drawContent()
+                drawLine(
+                    color = drawLineColor,
+                    start = Offset(x = 0f, y = canvasHeight),
+                    end = Offset(x = canvasWidth, y = canvasHeight),
+                    strokeWidth = strokeWidth.dp.toPx(),
+                )
+            },
+
+        textStyle = textStyle.copy(color = textColor),
+        cursorBrush = cursorBrush,
+
+        decorationBox = { innerTextField ->
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.spacedBy(12.dp),
+                modifier = Modifier.padding(vertical = 8.dp)
+            ) {
+                leftIcon?.let {
+                    Icon(
+                        painter = painterResource(id = it),
+                        contentDescription = null,
+                        tint = leftIconColor,
+                    )
+                }
+                Box(modifier = Modifier.weight(1f)) {
+                    if (value.isEmpty()) {
+                        Text(
+                            text = hint,
+                            style = textStyle,
+                            color = hintColor
+                        )
+                    }
+                    innerTextField()
+                }
+                if (showTextLength && maxTextLength != null) {
+                    Text(
+                        text = "${value.length}/$maxTextLength",
+                        style = TerningTheme.typography.button3,
+                        color = Grey300,
+                    )
+                }
+            }
+        })
+
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+        modifier = Modifier.padding(vertical = 8.dp)
+    ) {
+        helperIcon?.let {
+            Icon(
+                painter = painterResource(id = it),
+                contentDescription = null,
+                tint = helperColor,
+            )
+        }
+        Text(
+            text = helperMessage,
+            style = TerningTheme.typography.detail3,
+            color = helperColor,
+        )
+    }
+}
diff --git a/core/src/main/java/com/terning/core/designsystem/topappbar/BackButtonTopAppBar.kt b/core/src/main/java/com/terning/core/designsystem/topappbar/BackButtonTopAppBar.kt
@@ -6,7 +6,7 @@ import androidx.compose.runtime.Composable
 fun BackButtonTopAppBar(
     title: String, onBackButtonClick: (() -> Unit),
 ) {
-    TerningTopAppBar(
+    TerningBasicTopAppBar(
         title = title,
         showBackButton = true,
         onBackButtonClick = { onBackButtonClick.invoke() },

diff --git a/core/src/main/java/com/terning/core/designsystem/topappbar/LogoTopAppBar.kt b/core/src/main/java/com/terning/core/designsystem/topappbar/LogoTopAppBar.kt
@@ -8,7 +8,7 @@ import com.terning.core.R
 
 @Composable
 fun LogoTopAppBar() {
-    TerningTopAppBar(
+    TerningBasicTopAppBar(
         showBackButton = false,
         actions = listOf {
             Icon(

diff --git a/core/src/main/java/com/terning/core/designsystem/topappbar/MyPageTopAppBar.kt b/core/src/main/java/com/terning/core/designsystem/topappbar/MyPageTopAppBar.kt
@@ -10,11 +10,11 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import com.terning.core.R
-import com.terning.core.designsystem.theme.TerningTypography
+import com.terning.core.designsystem.theme.TerningTheme
 
 @Composable
 fun MyPageTopAppBar() {
-    TerningTopAppBar(
+    TerningBasicTopAppBar(
         showBackButton = false,
         actions = listOf(
             {},
@@ -24,7 +24,7 @@ fun MyPageTopAppBar() {
                 ) {
                     Text(
                         text = stringResource(id = R.string.my_page_top_app_bar),
-                        style = TerningTypography().button3,
+                        style = TerningTheme.typography.button3,
                         textAlign = TextAlign.Center
                     )
                     IconButton(onClick = {

diff --git a/...esignsystem/topappbar/TerningTopAppBar.kt → ...system/topappbar/TerningBasicTopAppBar.kt b/...esignsystem/topappbar/TerningTopAppBar.kt → ...system/topappbar/TerningBasicTopAppBar.kt
@@ -1,24 +1,20 @@
 package com.terning.core.designsystem.topappbar
 
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import com.terning.core.R
-import com.terning.core.designsystem.theme.TerningTypography
+import com.terning.core.designsystem.theme.TerningTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun TerningTopAppBar(
+fun TerningBasicTopAppBar(
     title: String = "",
     showBackButton: Boolean = false,
     actions: List<@Composable () -> Unit> = emptyList(),
@@ -30,7 +26,7 @@ fun TerningTopAppBar(
             Text(
                 text = title,
                 textAlign = TextAlign.Center,
-                style = TerningTypography().title2
+                style = TerningTheme.typography.title2
             )
 
         },

diff --git a/feature/src/main/AndroidManifest.xml b/feature/src/main/AndroidManifest.xml
@@ -7,6 +7,7 @@
             android:exported="true"
             android:label="@string/app_name"
             android:screenOrientation="portrait"
+            android:windowSoftInputMode="adjustResize"
             android:theme="@style/Theme.TerningAndroid">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

diff --git a/feature/src/main/java/com/terning/feature/main/MainNavigator.kt b/feature/src/main/java/com/terning/feature/main/MainNavigator.kt
@@ -13,6 +13,7 @@ import com.terning.feature.calendar.navigation.navigateCalendar
 import com.terning.feature.home.navigation.navigateHome
 import com.terning.feature.mypage.navigation.navigateMyPage
 import com.terning.feature.onboarding.signin.navigation.SignIn
+import com.terning.feature.search.navigation.Search
 import com.terning.feature.search.navigation.navigateSearch
 
 class MainNavigator(

diff --git a/feature/src/main/java/com/terning/feature/main/MainScreen.kt b/feature/src/main/java/com/terning/feature/main/MainScreen.kt
@@ -21,10 +21,9 @@ import androidx.navigation.compose.NavHost
 import com.terning.core.designsystem.theme.Grey300
 import com.terning.core.designsystem.theme.TerningMain
 import com.terning.core.designsystem.theme.White
-import com.terning.core.designsystem.topappbar.BackButtonTopAppBar
 import com.terning.core.designsystem.topappbar.LogoTopAppBar
 import com.terning.core.designsystem.topappbar.MyPageTopAppBar
-import com.terning.core.designsystem.topappbar.TerningTopAppBar
+import com.terning.core.designsystem.topappbar.TerningBasicTopAppBar
 import com.terning.feature.calendar.navigation.calendarNavGraph
 import com.terning.feature.home.navigation.homeNavGraph
 import com.terning.feature.mypage.navigation.myPageNavGraph
@@ -42,13 +41,10 @@ fun MainScreen(
         topBar = {
             when (navigator.currentTab) {
                 MainTab.HOME -> LogoTopAppBar()
-                MainTab.CALENDAR -> BackButtonTopAppBar(
-                    title = "dkssud",
-                    onBackButtonClick = { navigator.navigateUp() })
-
+                MainTab.CALENDAR -> TerningBasicTopAppBar()
                 MainTab.SEARCH -> LogoTopAppBar()
                 MainTab.MY_PAGE -> MyPageTopAppBar()
-                null -> TerningTopAppBar()
+                null -> TerningBasicTopAppBar()
             }
         },
         bottomBar = {
@@ -80,6 +76,21 @@ fun MainScreen(
     }
 }
 
+
+
+@Composable
+private fun MainTopBar(
+    isVisible: Boolean,
+    tabs: List<MainTab>,
+    currentTab: MainTab?,
+    onTabSelected: (MainTab) -> Unit,
+) {
+    AnimatedVisibility(
+        visible = isVisible,
+    ) {
+    }
+}
+
 @Composable
 private fun MainBottomBar(
     isVisible: Boolean,