Time Filled Text Field

A filled text field for a time of day: the time is typed in digits, or chosen from a time picker that a button at the box's end opens. It is PantrixTimeTextField in a filled box.

import com.pantrixui.components.date.timefilledtextfield.PantrixTimeFilledTextField

Examples

A meeting's start, on the quarter hour

A meeting's start, on the quarter hour: the picker's minutes come fifteen apart.

var start by remember { mutableStateOf<PantrixTime?>(null) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixTimeFilledTextField(
        value = start,
        onValueChange = { start = it },
        label = "Meeting start",
        minuteStep = QUARTER,
        showClearButton = true,
        tagKey = "meeting_start"
    )
    PantrixText(
        text = start?.let { "Start: ${strings.time(it.hour, it.minute, is24Hour = true)}" }
            ?: "No time yet",
        style = PantrixTheme.typography.body
    )
}

private const val QUARTER = 15

Within working hours

A call within working hours: a time typed outside them is not taken, and the field says the two ends.

var call by remember { mutableStateOf<PantrixTime?>(null) }
PantrixTimeFilledTextField(
    value = call,
    onValueChange = { call = it },
    label = "Call time",
    supportingText = "Weekdays from 09:00 to 18:00",
    minTime = PantrixTime(OPENS, 0),
    maxTime = PantrixTime(CLOSES, 0),
    tagKey = "call"
)

private const val OPENS = 9

private const val CLOSES = 18

A clock of twelve hours

A clock of twelve hours: the half of the day stands in the box beside the digits and turns at a press.

var alarm by remember { mutableStateOf<PantrixTime?>(PantrixTime(7, 30)) }
PantrixTimeFilledTextField(
    value = alarm,
    onValueChange = { alarm = it },
    label = "Alarm",
    is24Hour = false,
    tagKey = "alarm"
)

Bound to a form

Bound to a form's field: with no time, "Save" shows the error and sends the focus to the field.

val form = rememberFormState()
val scope = rememberCoroutineScope()
val report = LocalExampleEvents.current
val start = form.field<PantrixTime?>("shift_start", initial = null, Rules.required("Enter the shift's start"))
PantrixTimeFilledTextField(
    field = start,
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Shift start",
    minuteStep = QUARTER
)
PantrixButton(
    text = "Save",
    onClick = { scope.launch { form.submit { report("Saved") } } },
    form = form,
    tagKey = "save_shift"
)

private const val QUARTER = 15

On a state

On a state: state.time is the field's time, state.text the digits typed. Together they tell an empty field from a half-typed one. The button changes the state's time, and the field writes it in itself, by a clock of twelve hours with the half of the day.

val state = rememberTimeTextFieldState()
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixTimeFilledTextField(
        state = state,
        label = "Reminder",
        is24Hour = false,
        tagKey = "reminder"
    )
    PantrixText(
        text = when {
            state.time != null -> "Time: ${state.time}"
            state.text.isEmpty() -> "The field is empty"
            else -> "Half typed: ${state.text}"
        },
        style = PantrixTheme.typography.body
    )
    PantrixButton(
        text = "Write now",
        onClick = { state.time = PantrixTime.now() },
        variant = ButtonVariant.Outline,
        tagKey = "write_now"
    )
}

API

value

A filled text field for a time of day: the time is typed in digits, or chosen from a time picker that a button at the box's end opens. It is PantrixTimeTextField in a filled box.

state

A time field on a state its caller keeps, as PantrixTimeFilledTextField of a value is in every other way: the state's time is the field's time, setting it writes the time in, and its text tells a field that is half typed from an empty one.

field

A time field bound to a form's field: its time, its error and its name come from field.

FilledTextFieldStyle

PantrixFilledTextField's box: its shape, how tall and how wide it is at the least, the room around what it holds, its icons and its outline.

FilledTextFieldColors

What PantrixFilledTextField is painted with, for a field that does not take the theme's: a colour that is set is used, and one that is left out stays the theme's role. A product gives the colours it changes and no others: