Spec to KComponent -> ParentComponentSendsEventToChild and ChildComponentReceivesEventFromParent

Summary:
Updating LithoDocs for Communicating between Components to have KComponent samples: https://fblitho.com/docs/mainconcepts/coordinate-state-actions/communicating-between-components/

Suggesting usage of [Controllers Pattern](https://fburl.com/rnd54nkv) in case of triggering an event on a child in case of KComponents.

Not deleting the Spec files as they're used for Java Examples

Reviewed By: astreet

Differential Revision: D73110218

fbshipit-source-id: 5522ef975721491d2d0d322c2cfa4b4452d8a2bc

Author: aashay-gaikwad

docs/mainconcepts/coordinate-state-actions/communicating-between-components.md

@@ -31,30 +31,17 @@ When the data is updated as a result of an action controlled by the parent compo
 
 The following code illustrates this concept with a click event on the parent component.
 
-```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentComponentSendsEventToChildSpec.java start=start_update_prop end=end_update_prop
+```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentComponentSendsEventToChildKComponent.kt start=start_update_prop end=end_update_prop
 ```
 
 ### Triggering an Action on a child from a parent
 
-There are cases when a parent needs to trigger an action on a child instead of just passing new data. To do this, the parent needs to keep a reference to the child and trigger an action on it using that reference.
+There are cases when a parent needs to trigger an action on a child instead of just passing new data. To do this, the parent can interact with the child using controllers (see [Controllers Pattern](/docs/mainconcepts/primitivecomponents/primitive-controllers/)),
+which the parent creates and passes to the child component as a prop:
 
-The reference to the child is maintained through a `Handle` instance, which the parent creates and passes to the child component as a prop:
-
-```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentComponentSendsEventToChildSpec.java start=start_define_handle end=end_define_handle
-```
-
-The parent uses the Handle reference to trigger an action on the child component:
-
-```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentComponentSendsEventToChildSpec.java start=start_trigger end=end_trigger
+```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentComponentSendsEventToChildKComponent.kt start=start_define_controller end=end_define_controller
 ```
 
-The action is defined on the child component using the `@OnTrigger` annotation in Java:
-
-```java file=sample/src/main/java/com/facebook/samples/litho/java/communicating/ChildComponentReceivesEventFromParentSpec.java start=start_define_trigger end=end_define_trigger
-```
-
-Defining triggers in `KComponents` is not supported yet, but they can invoke triggers as with Java Components.
-
 ### Communicating between siblings
 
 Two sibling components (two child components of the same parent) cannot communicate directly. All communication must flow through the parent component, which intercepts events from a child component and notifies other child components of those events (using the methods detailed above).

sample/src/main/java/com/facebook/samples/litho/java/communicating/ChildComponentReceivesEventFromParentKComponent.kt

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.facebook.samples.litho.java.communicating
+
+import android.widget.Toast
+import com.facebook.litho.Column
+import com.facebook.litho.Component
+import com.facebook.litho.ComponentContext
+import com.facebook.litho.ComponentScope
+import com.facebook.litho.KComponent
+import com.facebook.litho.kotlin.widget.Text
+import com.facebook.litho.onCleanup
+import com.facebook.litho.useEffect
+import com.facebook.rendercore.dp
+
+class ChildComponentReceivesEventFromParentKComponent(
+    private val controller: ParentToChildEventController,
+    private val textFromParent: String,
+) : KComponent() {
+
+  override fun ComponentScope.render(): Component? {
+    useEffect(controller) {
+      controller.setTriggerShowToastListener { triggerShowToast(context, it) }
+      onCleanup { controller.reset() }
+    }
+
+    return Column {
+      child(Text(text = "ChildComponent", textSize = 20.dp))
+      child(Text(text = "Text received from parent: $textFromParent", textSize = 15.dp))
+    }
+  }
+
+  private fun triggerShowToast(c: ComponentContext, message: String) {
+    Toast.makeText(c.androidContext, message, Toast.LENGTH_SHORT).show()
+  }
+}

sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentComponentSendsEventToChildKComponent.kt

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.facebook.samples.litho.java.communicating
+
+import android.graphics.Color
+import com.facebook.litho.Column
+import com.facebook.litho.Component
+import com.facebook.litho.ComponentScope
+import com.facebook.litho.KComponent
+import com.facebook.litho.Style
+import com.facebook.litho.core.margin
+import com.facebook.litho.core.padding
+import com.facebook.litho.flexbox.border
+import com.facebook.litho.kotlin.widget.Border
+import com.facebook.litho.kotlin.widget.BorderEdge
+import com.facebook.litho.kotlin.widget.BorderRadius
+import com.facebook.litho.kotlin.widget.Text
+import com.facebook.litho.useCached
+import com.facebook.litho.useState
+import com.facebook.litho.view.onClick
+import com.facebook.rendercore.dp
+
+class ParentComponentSendsEventToChildKComponent : KComponent() {
+
+  // start_define_controller
+  override fun ComponentScope.render(): Component? {
+
+    val controller = useCached { ParentToChildEventController() }
+    val version = useState { 0 }
+
+    return Column(style = Style.padding(all = 30.dp)) {
+      child(Text(text = "ParentComponent", textSize = 30.dp))
+      child(
+          Text(
+              text = "Click to trigger show toast event on ChildComponent",
+              textSize = 15.dp,
+              style =
+                  Style.padding(all = 5.dp)
+                      .margin(top = 15.dp)
+                      .border(
+                          Border(
+                              edgeAll = BorderEdge(color = Color.BLACK, width = 1.dp),
+                              radius = BorderRadius(all = 2.dp)))
+                      .onClick { controller.trigger("Message from parent") }))
+      child(
+          ChildComponentReceivesEventFromParentKComponent(
+              controller = controller, textFromParent = "Child with controller"))
+      // end_define_controller
+      // start_update_prop
+      child(
+          Text(
+              text = "Click to send new text to ChildComponent",
+              textSize = 15.dp,
+              style =
+                  Style.padding(all = 5.dp)
+                      .margin(top = 15.dp)
+                      .border(
+                          Border(
+                              edgeAll = BorderEdge(color = Color.BLACK, width = 1.dp),
+                              radius = BorderRadius(all = 2.dp)))
+                      .onClick { version.update { it + 1 } }))
+      child(
+          ChildComponentReceivesEventFromParentKComponent(
+              controller = controller, textFromParent = "Version ${version.value}"))
+      // end_update_prop
+    }
+  }
+}

sample/src/main/java/com/facebook/samples/litho/java/communicating/ParentToChildEventController.kt

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.facebook.samples.litho.java.communicating
+
+class ParentToChildEventController {
+  private var observer: ((String) -> Unit)? = null
+
+  fun setTriggerShowToastListener(observer: (String) -> Unit) {
+    this.observer = observer
+  }
+
+  fun trigger(message: String) {
+    observer?.invoke(message)
+  }
+
+  fun reset() {
+    observer = null
+  }
+}