Skip to content

Commit

Permalink
UI: Add TextField component (#82)
Browse files Browse the repository at this point in the history
  • Loading branch information
ksharma-xyz authored Sep 29, 2024
1 parent 96661e2 commit 9a1c5fe
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 4 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
package xyz.ksharma.krail.design.system

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle

internal val LocalTextStyle = compositionLocalOf { TextStyle.Default }
internal val LocalTextColor = compositionLocalOf { Color.Unspecified }
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
package xyz.ksharma.krail.design.system.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.intl.LocaleList
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import xyz.ksharma.krail.design.system.LocalTextColor
import xyz.ksharma.krail.design.system.LocalTextStyle
import xyz.ksharma.krail.design.system.theme.KrailTheme

@Composable
fun TextField(
modifier: Modifier = Modifier,
enabled: Boolean = true,
textStyle: TextStyle? = null,
readOnly: Boolean = false,
imeAction: ImeAction = ImeAction.Default,
) {
val textFieldState by remember {
mutableStateOf(TextFieldState())
}

CompositionLocalProvider(
LocalTextColor provides KrailTheme.colors.onSecondaryContainer,
LocalTextStyle provides KrailTheme.typography.titleLarge,
) {
Box(
modifier = modifier
.fillMaxWidth()
.height(48.dp)
.clip(RoundedCornerShape(12.dp))
.background(color = KrailTheme.colors.secondaryContainer)
.padding(horizontal = 12.dp),
contentAlignment = Alignment.Center
) {

BasicTextField(
state = textFieldState,
enabled = enabled,
modifier = Modifier.fillMaxWidth(),
textStyle = textStyle ?: LocalTextStyle.current,
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.None,
autoCorrectEnabled = false,
keyboardType = KeyboardType.Text,
imeAction = imeAction,
hintLocales = LocaleList.current
),
lineLimits = TextFieldLineLimits.SingleLine,
readOnly = readOnly,
cursorBrush = SolidColor(KrailTheme.colors.onSecondaryContainer),
)
}
}
}

@PreviewLightDark
@Composable
private fun TextFieldEnabledPreview() {
KrailTheme {
TextField()
}
}

@PreviewLightDark
@Composable
private fun TextFieldDisabledPreview() {
KrailTheme {
TextField(enabled = false)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,15 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import xyz.ksharma.krail.design.system.LocalTextColor
import xyz.ksharma.krail.design.system.LocalTextStyle
import xyz.ksharma.krail.design.system.preview.ComponentPreviews
import xyz.ksharma.krail.design.system.theme.KrailTheme

val LocalTextStyle = compositionLocalOf { TextStyle.Default }
val LocalTextColor = compositionLocalOf { Color.Unspecified }

@Composable
fun Text(
text: String,
Expand Down

0 comments on commit 9a1c5fe

Please sign in to comment.