Skip to content

Commit

Permalink
fix(text-inputs): Character counter position (#165)
Browse files Browse the repository at this point in the history
  • Loading branch information
@apauchet
apauchet committed Aug 4, 2023
1 parent 0ab2190 commit 0da11ff
Show file tree
Hide file tree
Showing 11 changed files with 96 additions and 53 deletions.
58 changes: 43 additions & 15 deletions sample/src/main/java/com/decathlon/compose/sample/screens/TextInputs.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,19 @@ object TextInputs : Screen {
title = name,
onBackClick = {
navController?.popBackStack()
}
},
) {
val painter = rememberVectorPainter(VitaminIcons.Line.Heart)
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(8.dp)
.padding(8.dp),
) {
item {
VitaminTextInputs.Outlined(
value = "",
label = "Label",
onValueChange = {}
onValueChange = {},
)
}
item {
Expand All @@ -57,6 +57,34 @@ object TextInputs : Screen {
onValueChange = {},
helperText = "Helper Text",
counter = 999 to 999,
icon = {
Icon(
painter = painter,
contentDescription = null,
)
},
)
}
item {
VitaminTextInputs.Outlined(
value = "Input",
label = "Label",
onValueChange = {},
counter = 999 to 999,
icon = {
Icon(
painter = painter,
contentDescription = null,
)
},
)
}
item {
VitaminTextInputs.Outlined(
value = "Input",
label = "Label",
onValueChange = {},
counter = 999 to 999,
icon = {
Icon(
painter = painter,
Expand Down Expand Up @@ -85,7 +113,7 @@ object TextInputs : Screen {
}) {
Text(text = "Option 2")
}
}
},
)
}
item {
Expand All @@ -95,7 +123,7 @@ object TextInputs : Screen {
onValueChange = {},
helperText = "Helper Text",
counter = 999 to 999,
colors = TextInputsState.error()
colors = TextInputsState.error(),
)
}
item {
Expand All @@ -105,15 +133,15 @@ object TextInputs : Screen {
onValueChange = {},
helperText = "Helper Text",
counter = 999 to 999,
colors = TextInputsState.success()
colors = TextInputsState.success(),
)
}
item {
VitaminTextInputs.Outlined(
value = "",
label = "Label",
onValueChange = {},
enabled = false
enabled = false,
)
}
item {
Expand All @@ -123,7 +151,7 @@ object TextInputs : Screen {
onValueChange = {},
helperText = "Helper Text",
counter = 999 to 999,
enabled = false
enabled = false,
)
}
item {
Expand All @@ -143,9 +171,9 @@ object TextInputs : Screen {
icon = {
Icon(
painter = painter,
contentDescription = null
contentDescription = null,
)
}
},
)
}
item {
Expand All @@ -168,7 +196,7 @@ object TextInputs : Screen {
}) {
Text(text = "Option 2")
}
}
},
)
}
item {
Expand All @@ -178,7 +206,7 @@ object TextInputs : Screen {
onValueChange = {},
helperText = "Helper Text",
counter = 999 to 999,
colors = TextInputsState.error()
colors = TextInputsState.error(),
)
}
item {
Expand All @@ -188,15 +216,15 @@ object TextInputs : Screen {
onValueChange = {},
helperText = "Helper Text",
counter = 999 to 999,
colors = TextInputsState.success()
colors = TextInputsState.success(),
)
}
item {
VitaminTextInputs.Filled(
value = "",
label = "Label",
onValueChange = {},
enabled = false
enabled = false,
)
}
item {
Expand All @@ -206,7 +234,7 @@ object TextInputs : Screen {
onValueChange = {},
helperText = "Helper Text",
counter = 999 to 999,
enabled = false
enabled = false,
)
}
}
Expand Down
83 changes: 47 additions & 36 deletions ...s/text-inputs/src/main/java/com/decathlon/vitamin/compose/textinputs/VitaminTextInputs.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import androidx.compose.ui.semantics.disabled
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.toSize
Expand Down Expand Up @@ -81,7 +82,7 @@ object VitaminTextInputs {
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: TextInputStateColors = TextInputsState.normal(),
textStyle: TextStyle = VitaminTheme.typography.text2,
icon: @Composable (() -> Unit)? = null
icon: @Composable (() -> Unit)? = null,
) {
VitaminTextInputLayoutImpl(
helperText = helperText,
Expand All @@ -102,25 +103,25 @@ object VitaminTextInputs {
focusedBorderColor = colors.focusBorderColor,
unfocusedBorderColor = colors.borderColor,
disabledBorderColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
ContentAlpha.disabled
ContentAlpha.disabled,
),
errorBorderColor = colors.borderColor,
leadingIconColor = colors.iconColor,
disabledLeadingIconColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
ContentAlpha.disabled
ContentAlpha.disabled,
),
errorLeadingIconColor = colors.iconColor,
trailingIconColor = colors.iconColor,
disabledTrailingIconColor = VitaminTheme.colors.vtmnContentPrimary.copy(
ContentAlpha.disabled
ContentAlpha.disabled,
),
errorTrailingIconColor = colors.iconColor,
focusedLabelColor = colors.focusTextColor,
unfocusedLabelColor = colors.textColor,
disabledLabelColor = VitaminTheme.colors.vtmnContentTertiary.copy(
ContentAlpha.disabled
ContentAlpha.disabled,
),
errorLabelColor = colors.textColor
errorLabelColor = colors.textColor,
),
textStyle = textStyle,
visualTransformation = transformation,
Expand All @@ -142,13 +143,13 @@ object VitaminTextInputs {
) {
Icon(
imageVector = colors.imageVector,
contentDescription = null
contentDescription = null,
)
}
}
},
)
},
modifier = modifier
modifier = modifier,
)
}

Expand All @@ -175,7 +176,7 @@ object VitaminTextInputs {
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: TextInputStateColors = TextInputsState.normal(),
textStyle: TextStyle = VitaminTheme.typography.text2,
children: @Composable VitaminMenuItems.() -> Unit
children: @Composable VitaminMenuItems.() -> Unit,
) {
var mTextFieldSize by remember { mutableStateOf(Size.Zero) }
Dropdown(
Expand All @@ -199,15 +200,15 @@ object VitaminTextInputs {
IconButton(onClick = { expanded.value = true }) {
Icon(
imageVector = VitaminIcons.Line.ChevronDown,
contentDescription = stringResource(id = R.string.vtmn_text_inputs_open_menu)
contentDescription = stringResource(id = R.string.vtmn_text_inputs_open_menu),
)
}
}
},
)
},
modifier = modifier.width(with(LocalDensity.current) { mTextFieldSize.width.toDp() }),
children = children,
interactionSource = interactionSource
interactionSource = interactionSource,
)
}

Expand Down Expand Up @@ -271,25 +272,25 @@ object VitaminTextInputs {
focusedIndicatorColor = colors.focusBorderColor,
unfocusedIndicatorColor = colors.borderColor,
disabledIndicatorColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
ContentAlpha.disabled
ContentAlpha.disabled,
),
errorIndicatorColor = colors.borderColor,
leadingIconColor = colors.iconColor,
disabledLeadingIconColor = VitaminTheme.colors.vtmnActiveTertiary.copy(
ContentAlpha.disabled
ContentAlpha.disabled,
),
errorLeadingIconColor = colors.iconColor,
trailingIconColor = colors.iconColor,
disabledTrailingIconColor = VitaminTheme.colors.vtmnContentPrimary.copy(
ContentAlpha.disabled
ContentAlpha.disabled,
),
errorTrailingIconColor = colors.iconColor,
focusedLabelColor = colors.focusTextColor,
unfocusedLabelColor = colors.textColor,
disabledLabelColor = VitaminTheme.colors.vtmnContentTertiary.copy(
ContentAlpha.disabled
ContentAlpha.disabled,
),
errorLabelColor = colors.textColor
errorLabelColor = colors.textColor,
),
textStyle = textStyle,
visualTransformation = transformation,
Expand All @@ -311,13 +312,13 @@ object VitaminTextInputs {
) {
Icon(
imageVector = colors.imageVector,
contentDescription = null
contentDescription = null,
)
}
}
},
)
},
modifier = modifier
modifier = modifier,
)
}

Expand All @@ -344,7 +345,7 @@ object VitaminTextInputs {
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: TextInputStateColors = TextInputsState.normal(),
textStyle: TextStyle = VitaminTheme.typography.text2,
children: @Composable VitaminMenuItems.() -> Unit
children: @Composable VitaminMenuItems.() -> Unit,
) {
var mTextFieldSize by remember { mutableStateOf(Size.Zero) }
Dropdown(
Expand All @@ -368,15 +369,15 @@ object VitaminTextInputs {
IconButton(onClick = { expanded.value = true }) {
Icon(
imageVector = VitaminIcons.Line.ChevronDown,
contentDescription = stringResource(id = R.string.vtmn_text_inputs_open_menu)
contentDescription = stringResource(id = R.string.vtmn_text_inputs_open_menu),
)
}
},
)
},
modifier = modifier.width(with(LocalDensity.current) { mTextFieldSize.width.toDp() }),
children = children,
interactionSource = interactionSource
interactionSource = interactionSource,
)
}
}
Expand All @@ -388,7 +389,7 @@ internal fun VitaminTextInputLayoutImpl(
colors: TextInputStateColors,
enabled: Boolean,
textInput: @Composable () -> Unit,
modifier: Modifier = Modifier
modifier: Modifier = Modifier,
) {
Column(modifier = modifier) {
// This is a hack because [Outlined]TextField doesn't expose
Expand All @@ -398,18 +399,22 @@ internal fun VitaminTextInputLayoutImpl(
MaterialTheme(
typography = MaterialTheme.typography.copy(
subtitle1 = VitaminTheme.typography.text2,
caption = VitaminTheme.typography.caption
)
caption = VitaminTheme.typography.caption,
),
) {
textInput()
}
Row(
modifier = Modifier.padding(vertical = 1.dp, horizontal = 4.dp)
) {
helperText?.let {
val color = if (!enabled) colors.helperColor.copy(ContentAlpha.disabled)
else if (colors.state == State.ERROR) colors.textColor
else colors.helperColor
val color = if (!enabled) {
colors.helperColor.copy(ContentAlpha.disabled)
} else if (colors.state == State.ERROR) {
colors.textColor
} else {
colors.helperColor
}
Text(
text = it,
style = VitaminTheme.typography.caption,
Expand All @@ -427,17 +432,23 @@ internal fun VitaminTextInputLayoutImpl(
)
}
counter?.let {
val color = if (!enabled) colors.helperColor.copy(ContentAlpha.disabled)
else colors.helperColor
val color = if (!enabled) {
colors.helperColor.copy(ContentAlpha.disabled)
} else {
colors.helperColor
}
Text(
text = "${it.first}/${it.second}",
style = VitaminTheme.typography.caption,
color = color,
modifier = Modifier.semantics {
if (!enabled) {
this.disabled()
modifier = Modifier
.semantics {
if (!enabled) {
this.disabled()
}
}
}
.weight(1f),
textAlign = TextAlign.End,
)
}
}
Expand Down
Loading

0 comments on commit 0da11ff

Please sign in to comment.