Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ADD/#19] TerningTextField #22

Merged
merged 10 commits into from
Jul 9, 2024
Original file line number Diff line number Diff line change
@@ -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
)
}
Original file line number Diff line number Diff line change
@@ -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,
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
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.graphics.SolidColor
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 = TerningMain,
cursorBrush: Brush = SolidColor(TerningMain),
hint: String = "",
hintColor: Color = TerningMain,
strokeWidth: Float = 1f,
drawLineColor: Color,
leftIcon: Int? = null,
leftIconColor: Color = TerningMain,
maxTextLength: Int? = null,
showTextLength: Boolean = false,
helperMessage: String = "",
helperIcon: Int? = null,
helperColor: Color = TerningMain,
) {
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()
}),
Comment on lines +58 to +62
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이부분이 키보드 숨기는 부분인거 맞죠?!?? 진짜 최고다👍🏻👍🏻


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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요부분 줄바꿈해주면 더 보기 편할 것 같아요!!

)
}
innerTextField()
}
if (showTextLength && maxTextLength != null) {
Text(
text = "${value.length}/$maxTextLength",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

진짜 짱이다

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,
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import androidx.compose.runtime.Composable
fun BackButtonTopAppBar(
title: String, onBackButtonClick: (() -> Unit),
) {
TerningTopAppBar(
TerningBasicTopAppBar(
title = title,
showBackButton = true,
onBackButtonClick = { onBackButtonClick.invoke() },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import com.terning.core.R

@Composable
fun LogoTopAppBar() {
TerningTopAppBar(
TerningBasicTopAppBar(
showBackButton = false,
actions = listOf {
Icon(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
{},
Expand All @@ -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 = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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(),
Expand All @@ -30,7 +26,7 @@ fun TerningTopAppBar(
Text(
text = title,
textAlign = TextAlign.Center,
style = TerningTypography().title2
style = TerningTheme.typography.title2
)

},
Expand Down
1 change: 1 addition & 0 deletions feature/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
25 changes: 18 additions & 7 deletions feature/src/main/java/com/terning/feature/main/MainScreen.kt
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 = {
Expand Down Expand Up @@ -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,
Expand Down
Loading
Loading