[RNMobile] Add bridge method to send events to host app (#35272)

* Add bridge method to send events to host app The addition of `sendEventToHost` enables sending arbitrary events to the native host app, allowing the host to implement the appropriate mechanism for a given event. * Fix typo in comment * Add Android sendEventToHost bridge methods Mirror the bridge method added for iOS. * Convert ReadableMap to HashMap Conversion avoids "leaking" the React Native-specific ReadableMap type to the host app. * Improve conversion of properties to hashmap * Fix comment typo Co-authored-by: jhnstn <[email protected]> Co-authored-by: Matt Chowning <[email protected]>
WordPress · Oct 27, 2021 · b4e9811 · b4e9811
1 parent b48045f
commit b4e9811
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 2 deletions.
diff --git a/...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java b/...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
@@ -174,4 +174,6 @@ void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback
     void requestContactCustomerSupport();
 
     void requestGotoCustomerSupportOptions();
+
+    void sendEventToHost(String eventName, ReadableMap properties);
 }
diff --git a/...a/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/...a/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
@@ -433,4 +433,9 @@ public void requestContactCustomerSupport() {
     public void requestGotoCustomerSupportOptions() {
         mGutenbergBridgeJS2Parent.requestGotoCustomerSupportOptions();
     }
+
+    @ReactMethod
+    public void sendEventToHost(final String eventName, final ReadableMap properties) {
+        mGutenbergBridgeJS2Parent.sendEventToHost(eventName, properties);
+    }
 }
diff --git a/...act-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/...act-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
@@ -102,6 +102,7 @@ public class WPAndroidGlueCode {
     private OnGutenbergDidRequestPreviewListener mOnGutenbergDidRequestPreviewListener;
     private OnBlockTypeImpressionsEventListener mOnBlockTypeImpressionsEventListener;
     private OnCustomerSupportOptionsListener mOnCustomerSupportOptionsListener;
+    private OnSendEventToHostListener mOnSendEventToHostListener;
     private boolean mIsEditorMounted;
 
     private String mContentHtml = "";
@@ -233,6 +234,10 @@ public interface OnCustomerSupportOptionsListener {
         void onGotoCustomerSupportOptions();
     }
 
+    public interface OnSendEventToHostListener {
+        void onSendEventToHost(String eventName, Map<String, Object> properties);
+    }
+
     public void mediaSelectionCancelled() {
         mAppendsMultipleSelectedToSiblingBlocks = false;
     }
@@ -543,6 +548,11 @@ public void requestContactCustomerSupport() {
             public void requestGotoCustomerSupportOptions() {
                 mOnCustomerSupportOptionsListener.onGotoCustomerSupportOptions();
             }
+
+            @Override
+            public void sendEventToHost(String eventName, ReadableMap properties) {
+                mOnSendEventToHostListener.onSendEventToHost(eventName, properties.toHashMap());
+            }
         }, mIsDarkMode);
 
         return Arrays.asList(
@@ -624,6 +634,7 @@ public void attachToContainer(ViewGroup viewGroup,
                                   OnGutenbergDidRequestPreviewListener onGutenbergDidRequestPreviewListener,
                                   OnBlockTypeImpressionsEventListener onBlockTypeImpressionsEventListener,
                                   OnCustomerSupportOptionsListener onCustomerSupportOptionsListener,
+                                  OnSendEventToHostListener onSendEventToHostListener,
                                   boolean isDarkMode) {
         MutableContextWrapper contextWrapper = (MutableContextWrapper) mReactRootView.getContext();
         contextWrapper.setBaseContext(viewGroup.getContext());
@@ -645,6 +656,7 @@ public void attachToContainer(ViewGroup viewGroup,
         mOnGutenbergDidRequestPreviewListener = onGutenbergDidRequestPreviewListener;
         mOnBlockTypeImpressionsEventListener = onBlockTypeImpressionsEventListener;
         mOnCustomerSupportOptionsListener = onCustomerSupportOptionsListener;
+        mOnSendEventToHostListener = onSendEventToHostListener;
 
         sAddCookiesInterceptor.setOnAuthHeaderRequestedListener(onAuthHeaderRequestedListener);
 

diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js
@@ -422,4 +422,18 @@ export function requestGotoCustomerSupportOptions() {
 	RNReactNativeGutenbergBridge.requestGotoCustomerSupportOptions();
 }
 
+/**
+ * Request the host app receive an event with properties.
+ *
+ * @param {string} eventName  Name representing to the event.
+ * @param {Object} properties Key-value pairs of event properties.
+ * @return {void}
+ */
+export function sendEventToHost( eventName, properties ) {
+	return RNReactNativeGutenbergBridge.sendEventToHost(
+		eventName,
+		properties
+	);
+}
+
 export default RNReactNativeGutenbergBridge;
diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
@@ -246,14 +246,17 @@ public protocol GutenbergBridgeDelegate: class {
     /// Tells the delegate that the editor requested the block type impression counts
     func gutenbergDidRequestBlockTypeImpressions() -> [String: Int]
 
-    /// Tells the delegate the the editor requested setting the impression counts
+    /// Tells the delegate that the editor requested setting the impression counts
     func gutenbergDidRequestSetBlockTypeImpressions(_ impressions: [String: Int])
 
     /// Tells the delegate that the editor requested to show the "Contact Support" support view.
     func gutenbergDidRequestContactCustomerSupport()
 
     /// Tells the delegate that the editor requested to show the "My Tickets" support view.
     func gutenbergDidRequestGotoCustomerSupportOptions()
+
+    /// Tells the delegate the editor requested sending an event
+    func gutenbergDidRequestSendEventToHost(_ eventName: String, properties: [AnyHashable: Any])
 }
 
 // MARK: - Optional GutenbergBridgeDelegate methods

diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m
@@ -37,5 +37,6 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 RCT_EXTERN_METHOD(setBlockTypeImpressions:(NSDictionary *)impressions)
 RCT_EXTERN_METHOD(requestContactCustomerSupport)
 RCT_EXTERN_METHOD(requestGotoCustomerSupportOptions)
+RCT_EXTERN_METHOD(sendEventToHost:(NSString)eventName properties:(NSDictionary *)properties)
 
 @end
diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
@@ -356,7 +356,7 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
             self.delegate?.gutenbergDidSendButtonPressedAction(button)
         }
     }
-    
+
     @objc
     func requestPreview() {
         DispatchQueue.main.async {
@@ -387,6 +387,11 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
             self.delegate?.gutenbergDidRequestGotoCustomerSupportOptions()
         }
     }
+
+    @objc
+    func sendEventToHost(_ eventName: String, properties: [AnyHashable: Any]) {
+        self.delegate?.gutenbergDidRequestSendEventToHost(eventName, properties: properties)
+    }
 }
 
 // MARK: - RCTBridgeModule delegate

diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
@@ -268,6 +268,11 @@ public void requestContactCustomerSupport() {
             public void requestGotoCustomerSupportOptions() {
                 Toast.makeText(MainApplication.this, "requestGotoCustomerSupportOptions called", Toast.LENGTH_SHORT).show();
             }
+
+            @Override
+            public void sendEventToHost(final String eventName, final ReadableMap properties) {
+                Log.d("SendEventToHost", String.format("Gutenberg requested sending '%s' event to host with properties: %s", eventName, properties));
+            }
         }, isDarkMode());
 
         return new ReactNativeHost(this) {

diff --git a/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift b/packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift
@@ -264,6 +264,10 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
     func gutenbergDidRequestGotoCustomerSupportOptions() {
         print(#function)
     }
+
+    func gutenbergDidRequestSendEventToHost(_ eventName: String, properties: [AnyHashable: Any]) -> Void {
+        print("Gutenberg requested sending '\(eventName)' event to host with propreties: \(properties).")
+    }
 }
 
 extension GutenbergViewController: GutenbergWebDelegate {