From 64d762755ad7c704c1564841418c2bd4441843cb Mon Sep 17 00:00:00 2001 From: Arkadii Ivanov <> Date: Wed, 21 Oct 2020 22:54:45 +0100 Subject: [PATCH] Extract Edit UI --- .../common/edit/integration/TodoEditImpl.kt | 67 ++----------------- .../example/todo/common/edit/ui/TodoEditUi.kt | 60 +++++++++++++++++ 2 files changed, 66 insertions(+), 61 deletions(-) create mode 100644 examples/todoapp/common/edit/src/commonMain/kotlin/example/todo/common/edit/ui/TodoEditUi.kt diff --git a/examples/todoapp/common/edit/src/commonMain/kotlin/example/todo/common/edit/integration/TodoEditImpl.kt b/examples/todoapp/common/edit/src/commonMain/kotlin/example/todo/common/edit/integration/TodoEditImpl.kt index 4369c82d43..1d299a48cc 100644 --- a/examples/todoapp/common/edit/src/commonMain/kotlin/example/todo/common/edit/integration/TodoEditImpl.kt +++ b/examples/todoapp/common/edit/src/commonMain/kotlin/example/todo/common/edit/integration/TodoEditImpl.kt @@ -1,32 +1,12 @@ package example.todo.common.edit.integration -import androidx.compose.foundation.Icon -import androidx.compose.foundation.Text -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.width -import androidx.compose.material.Button -import androidx.compose.material.Checkbox -import androidx.compose.material.IconButton -import androidx.compose.material.TextField -import androidx.compose.material.TopAppBar -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.ArrowBack import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.ImageAsset -import androidx.compose.ui.graphics.vector.VectorAsset -import androidx.compose.ui.unit.dp import com.arkivanov.decompose.ComponentContext import example.todo.common.edit.TodoEdit import example.todo.common.edit.TodoEdit.Dependencies -import example.todo.common.edit.store.TodoEditStore.Intent import example.todo.common.edit.store.TodoEditStoreProvider +import example.todo.common.edit.ui.TodoEditUi import example.todo.common.utils.composeState import example.todo.common.utils.getStore @@ -48,45 +28,10 @@ internal class TodoEditImpl( override fun invoke() { val state by store.composeState - Column(horizontalAlignment = Alignment.CenterHorizontally) { - TopAppBar( - title = { Text("Edit todo") }, - navigationIcon = { - IconButton(onClick = ::onFinished) { - Icon(Icons.Default.ArrowBack) - } - } - ) - - TextField( - value = state.text, - modifier = Modifier.weight(1F).fillMaxWidth().padding(8.dp), - label = { Text("Todo text") }, - onValueChange = ::onTextChanged - ) - - Row(modifier = Modifier.padding(8.dp)) { - Text(text = "Completed") - - Spacer(modifier = Modifier.width(8.dp)) - - Checkbox( - checked = state.isDone, - onCheckedChange = ::onDoneChanged - ) - } - } - } - - private fun onTextChanged(text: String) { - store.accept(Intent.SetText(text = text)) - } - - private fun onDoneChanged(isDone: Boolean) { - store.accept(Intent.SetDone(isDone = isDone)) - } - - private fun onFinished() { - editOutput.onNext(TodoEdit.Output.Finished) + TodoEditUi( + state = state, + output = editOutput, + intents = store::accept + ) } } diff --git a/examples/todoapp/common/edit/src/commonMain/kotlin/example/todo/common/edit/ui/TodoEditUi.kt b/examples/todoapp/common/edit/src/commonMain/kotlin/example/todo/common/edit/ui/TodoEditUi.kt new file mode 100644 index 0000000000..0b1e954a02 --- /dev/null +++ b/examples/todoapp/common/edit/src/commonMain/kotlin/example/todo/common/edit/ui/TodoEditUi.kt @@ -0,0 +1,60 @@ +package example.todo.common.edit.ui + +import androidx.compose.foundation.Icon +import androidx.compose.foundation.Text +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.material.Checkbox +import androidx.compose.material.IconButton +import androidx.compose.material.TextField +import androidx.compose.material.TopAppBar +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.ArrowBack +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import com.badoo.reaktive.base.Consumer +import example.todo.common.edit.TodoEdit.Output +import example.todo.common.edit.store.TodoEditStore.Intent +import example.todo.common.edit.store.TodoEditStore.State + +@Composable +internal fun TodoEditUi( + state: State, + output: Consumer, + intents: (Intent) -> Unit +) { + Column(horizontalAlignment = Alignment.CenterHorizontally) { + TopAppBar( + title = { Text("Edit todo") }, + navigationIcon = { + IconButton(onClick = { output.onNext(Output.Finished) }) { + Icon(Icons.Default.ArrowBack) + } + } + ) + + TextField( + value = state.text, + modifier = Modifier.weight(1F).fillMaxWidth().padding(8.dp), + label = { Text("Todo text") }, + onValueChange = { intents(Intent.SetText(text = it)) } + ) + + Row(modifier = Modifier.padding(8.dp)) { + Text(text = "Completed") + + Spacer(modifier = Modifier.width(8.dp)) + + Checkbox( + checked = state.isDone, + onCheckedChange = { intents(Intent.SetDone(isDone = it)) } + ) + } + } +}