Merge pull request square#557 from square/ray/compose-textcontroller

Introduces TextController.asMutableState.

Author: rjrjr

samples/compose-samples/src/main/java/com/squareup/sample/compose/textinput/TextInputViewFactory.kt

@@ -10,12 +10,16 @@ import androidx.compose.material.Button
 import androidx.compose.material.OutlinedTextField
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.squareup.sample.compose.textinput.TextInputWorkflow.Rendering
+import com.squareup.workflow1.ui.TextController
 import com.squareup.workflow1.ui.WorkflowUiExperimentalApi
+import com.squareup.workflow1.ui.compose.asMutableState
 import com.squareup.workflow1.ui.compose.composeViewFactory
 import com.squareup.workflow1.ui.compose.tooling.Preview
 
@@ -28,12 +32,14 @@ val TextInputViewFactory = composeViewFactory<Rendering> { rendering, _ ->
       .animateContentSize(),
     horizontalAlignment = Alignment.CenterHorizontally
   ) {
-    Text(text = rendering.text)
+    var text by rendering.textController.asMutableState()
+
+    Text(text = text)
     OutlinedTextField(
       label = {},
       placeholder = { Text("Enter some text") },
-      value = rendering.text,
-      onValueChange = rendering.onTextChanged
+      value = text,
+      onValueChange = { text = it }
     )
     Spacer(modifier = Modifier.height(8.dp))
     Button(onClick = rendering.onSwapText) {
@@ -46,8 +52,7 @@ val TextInputViewFactory = composeViewFactory<Rendering> { rendering, _ ->
 @Preview(showBackground = true)
 @Composable private fun TextInputViewFactoryPreview() {
   TextInputViewFactory.Preview(Rendering(
-    text = "Hello world",
-    onTextChanged = {},
+    textController = TextController("Hello world"),
     onSwapText = {}
   ))
 }

samples/compose-samples/src/main/java/com/squareup/sample/compose/textinput/TextInputWorkflow.kt

@@ -5,33 +5,27 @@ import com.squareup.sample.compose.textinput.TextInputWorkflow.State
 import com.squareup.workflow1.Snapshot
 import com.squareup.workflow1.StatefulWorkflow
 import com.squareup.workflow1.action
+import com.squareup.workflow1.ui.TextController
+import com.squareup.workflow1.ui.WorkflowUiExperimentalApi
 
+@OptIn(WorkflowUiExperimentalApi::class)
 object TextInputWorkflow : StatefulWorkflow<Unit, State, Nothing, Rendering>() {
 
   data class State(
-    val textA: String = "",
-    val textB: String = "",
+    val textA: TextController = TextController(),
+    val textB: TextController = TextController(),
     val showingTextA: Boolean = true
   )
 
   data class Rendering(
-    val text: String,
-    val onTextChanged: (String) -> Unit,
+    val textController: TextController,
     val onSwapText: () -> Unit
   )
 
   private val swapText = action {
     state = state.copy(showingTextA = !state.showingTextA)
   }
 
-  private fun changeText(text: String) = action {
-    state = if (state.showingTextA) {
-      state.copy(textA = text)
-    } else {
-      state.copy(textB = text)
-    }
-  }
-
   override fun initialState(
     props: Unit,
     snapshot: Snapshot?
@@ -42,8 +36,7 @@ object TextInputWorkflow : StatefulWorkflow<Unit, State, Nothing, Rendering>() {
     renderState: State,
     context: RenderContext
   ): Rendering = Rendering(
-    text = if (renderState.showingTextA) renderState.textA else renderState.textB,
-    onTextChanged = { context.actionSink.send(changeText(it)) },
+    textController = if (renderState.showingTextA) renderState.textA else renderState.textB,
     onSwapText = { context.actionSink.send(swapText) }
   )
 

workflow-ui/compose/api/compose.api

@@ -31,6 +31,10 @@ public final class com/squareup/workflow1/ui/compose/RenderAsStateKt {
 	public static final fun renderAsState (Lcom/squareup/workflow1/Workflow;Ljava/lang/Object;Ljava/util/List;Lkotlinx/coroutines/CoroutineScope;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;II)Landroidx/compose/runtime/State;
 }
 
+public final class com/squareup/workflow1/ui/compose/TextControllerAsMutableStateKt {
+	public static final fun asMutableState (Lcom/squareup/workflow1/ui/TextController;Landroidx/compose/runtime/Composer;I)Landroidx/compose/runtime/MutableState;
+}
+
 public final class com/squareup/workflow1/ui/compose/WorkflowRenderingKt {
 	public static final fun WorkflowRendering (Ljava/lang/Object;Lcom/squareup/workflow1/ui/ViewEnvironment;Landroidx/compose/ui/Modifier;Landroidx/compose/runtime/Composer;II)V
 }

workflow-ui/compose/src/main/java/com/squareup/workflow1/ui/compose/TextControllerAsMutableState.kt

@@ -0,0 +1,48 @@
+@file:OptIn(WorkflowUiExperimentalApi::class)
+
+package com.squareup.workflow1.ui.compose
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.snapshotFlow
+import com.squareup.workflow1.ui.TextController
+import com.squareup.workflow1.ui.WorkflowUiExperimentalApi
+import kotlinx.coroutines.flow.collect
+import kotlinx.coroutines.launch
+
+/**
+ * Exposes the [textValue][TextController.textValue] of a [TextController]
+ * as a remembered [MutableState], suitable for use from `@Composable`
+ * functions.
+ *
+ * Usage:
+ *
+ *    var text by rendering.textController.asMutableState()
+ *
+ *    OutlinedTextField(
+ *      label = {},
+ *      placeholder = { Text("Enter some text") },
+ *      value = text,
+ *      onValueChange = { text = it }
+ *    )
+ */
+@Composable public fun TextController.asMutableState(): MutableState<String> {
+  // keys are set to `this` to reset the state if a different controller is passed in…
+  return remember(this) { mutableStateOf(textValue) }.also { state ->
+    // …and to restart the effect.
+    LaunchedEffect(this) {
+      // Push changes from the workflow to the state.
+      launch {
+        onTextChanged.collect { state.value = it }
+      }
+      // And the other way – push changes to the state to the workflow.
+      // This won't cause an infinite loop because both MutableState and
+      // MutableSnapshotFlow ignore duplicate values.
+      snapshotFlow { state.value }
+        .collect { textValue = it }
+    }
+  }
+}