Passive UI in Jetpack Compose

1_StartingPoint.kt

package com.dladukedev.passiveui

import android.util.Log
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import com.dladukedev.myapplication.R

@Composable
fun ToggleInput() {
    var isOn by remember { mutableStateOf(false) }

    LaunchedEffect(isOn) {
        if (isOn) {
            Log.i("Toggle", "Turned Input On")
        }
    }

    val title = if (isOn) {
        R.string.toggle_state_on
    } else {
        R.string.toggle_state_off
    }

    Column {
        Text(text = stringResource(title))

        Checkbox(
            checked = isOn,
            onCheckedChange = {
                isOn = !isOn
            }
        )
    }
}

@Preview
@Composable
fun PreviewToggleInput() {
    ToggleInput()
}

2_StateHolderRefactor.kt

package com.dladukedev.passiveui

import android.util.Log
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import com.dladukedev.myapplication.R

data class ToggleInputState(
    val title: String,
    val isOn: Boolean,
    val updateToggle: (Boolean) -> Unit,
)


@Composable
fun rememberToggleInputState(): ToggleInputState {
    var isOn by remember { mutableStateOf(false) }

    LaunchedEffect(isOn) {
        if (isOn) {
            Log.i("Toggle", "Turned Input On")
        }
    }

    val title = if (isOn) {
        R.string.toggle_state_on
    } else {
        R.string.toggle_state_off
    }

    return ToggleInputState(
        title = stringResource(id = title),
        isOn = isOn,
        updateToggle = { isOn = it },
    )
}

@Composable
fun ToggleInput(state: ToggleInputState) {
    Column {
        Text(text = state.title)

        Checkbox(
            checked = state.isOn,
            onCheckedChange = state.updateToggle,
        )
    }
}

@Preview
@Composable
fun PreviewToggleInputWithHolder() {
    ToggleInput(state = rememberToggleInputState())
}

@Preview
@Composable
fun PreviewToggleInputWithState() {
    val state = ToggleInputState(
        title = "Test Title",
        isOn = true,
        updateToggle = {},
    )

    ToggleInput(state = state)
}

@Preview
@Composable
fun PreviewToggleInputWithStateOff() {
    val state = ToggleInputState(
        title = "Test a Different Title",
        isOn = false,
        updateToggle = {},
    )

    ToggleInput(state = state)
}

3_ComposedStateRefactor.kt

package com.dladukedev.passiveui

import android.util.Log
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Checkbox
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import com.dladukedev.myapplication.R

data class ToggleState(
    val isOn: Boolean,
    val updateToggle: (Boolean) -> Unit,
)

@Composable
fun rememberToggleState(): ToggleState {
    var isOn by remember { mutableStateOf(false) }

    return ToggleState(
        isOn = isOn,
        updateToggle = { isOn = it },
    )
}

data class ToggleInputState(
    val title: String,
    val isOn: Boolean,
    val updateToggle: (Boolean) -> Unit,
)

@Composable
fun rememberToggleInputState(
    toggleState: ToggleState = rememberToggleState(),
): ToggleInputState {
    LaunchedEffect(toggleState.isOn) {
        if (toggleState.isOn) {
            Log.i("Toggle", "Turned Input On")
        }
    }

    val title = if (toggleState.isOn) {
        R.string.toggle_state_on
    } else {
        R.string.toggle_state_off
    }

    return ToggleInputState(
        title = stringResource(id = title),
        isOn = toggleState.isOn,
        updateToggle = toggleState.updateToggle,
    )
}

@Composable
fun ToggleInput(state: ToggleInputState) {
    Column {
        Text(text = state.title)

        Checkbox(
            checked = state.isOn,
            onCheckedChange = state.updateToggle,
        )
    }
}

@Preview
@Composable
fun PreviewToggleInputWithHolder() {
    ToggleInput(state = rememberToggleInputState())
}

@Preview
@Composable
fun PreviewToggleInputWithState() {
    val state = ToggleInputState(
        title = "Test Title",
        isOn = true,
        updateToggle = {},
    )

    ToggleInput(state = state)
}

@Preview
@Composable
fun PreviewToggleInputWithStateOff() {
    val state = com.dladukedev.passiveui.ToggleInputState(
        title = "Test a Different Title",
        isOn = false,
        updateToggle = {},
    )

    ToggleInput(state = state)
}