[Fabric] Enable implementation of custom events on custom components (m…

…icrosoft#13635) * [Fabric] Enable implementation of custom events on custom components * Change files * format * lint fix * fix
acoates-ms · Aug 30, 2024 · 6617b3f · 6617b3f
1 parent 4bbdd58
commit 6617b3f
Show file tree

Hide file tree

Showing 20 changed files with 325 additions and 171 deletions.
diff --git a/change/react-native-windows-dd026530-5f0b-4ca5-b43e-a7a6960d7696.json b/change/react-native-windows-dd026530-5f0b-4ca5-b43e-a7a6960d7696.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Enable implementation of custom events on custom components",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/...rc/js/examples-win/NativeComponents/CustomXamlComponentWithNativeLayoutNativeComponent.js b/...rc/js/examples-win/NativeComponents/CustomXamlComponentWithNativeLayoutNativeComponent.js
@@ -12,13 +12,22 @@
 
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
+type MyEventEvent = $ReadOnly<{|
+  value: boolean,
+  target: Int32,
+|}>;
+
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
 
   // Props
   label: string,
+
+  // Events
+  onMyEvent?: ?DirectEventHandler<MyEventEvent>,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

diff --git a/.../src/js/examples-win/NativeComponents/CustomXamlComponentWithYogaLayoutNativeComponent.js b/.../src/js/examples-win/NativeComponents/CustomXamlComponentWithYogaLayoutNativeComponent.js
@@ -12,13 +12,22 @@
 
 import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
 import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import type {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
+type MyEventEvent = $ReadOnly<{|
+  value: boolean,
+  target: Int32,
+|}>;
+
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
 
   // Props
   label: string,
+
+  // Events
+  onMyEvent?: ?DirectEventHandler<MyEventEvent>,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

diff --git a/...act-native-windows/tester/src/js/examples-win/NativeComponents/NativeComponent.windows.js b/...act-native-windows/tester/src/js/examples-win/NativeComponents/NativeComponent.windows.js
@@ -10,10 +10,43 @@
 
 'use strict';
 
-import React from 'react';
+import React, { useState } from 'react';
 import {Text, View} from 'react-native';
 import CustomXamlComponentWithNativeLayout from './CustomXamlComponentWithNativeLayoutNativeComponent';
 
+const NativeComponentWithNativeLayout = () => {
+  let [log, setLog] = useState('');
+  return (
+    <View
+      style={{
+        borderRadius: 0,
+        margin: 10,
+        borderWidth: 2,
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        gap: 5,
+      }}>
+      <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+      <Text style={{color: 'gray'}}>This is RN Text</Text>
+      <Text style={{color: 'red'}}>{log}</Text>
+      <CustomXamlComponentWithNativeLayout
+        label="This is a Xaml Button set to ellipisify on truncation"
+        style={{flexShrink: 1}}
+        onMyEvent={(arg) => {setLog(log + '\nRecieved MyEvent: ' + JSON.stringify(arg.nativeEvent) + '\n')}}
+      />
+      <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+    </View>
+  );
+}
+
 exports.displayName = 'NativeFabricComponent';
 exports.framework = 'React';
 exports.category = 'UI';
@@ -27,32 +60,8 @@ exports.examples = [
     title: 'Native Component',
     render: function (): React.Node {
       return (
-        <View
-          style={{
-            borderRadius: 0,
-            margin: 10,
-            borderWidth: 2,
-            flexWrap: 'wrap',
-            flexDirection: 'row',
-            gap: 5,
-          }}>
-          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
-          <Text style={{color: 'gray'}}>This is RN Text</Text>
-          <CustomXamlComponentWithNativeLayout
-            label="This is a Xaml Button set to ellipisify on truncation"
-            style={{flexShrink: 1}}
-          />
-          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
-        </View>
+        <NativeComponentWithNativeLayout />
       );
     },
-  },
+  }
 ];
diff --git a/...native-windows/tester/src/js/examples-win/NativeComponents/NativeComponentYoga.windows.js b/...native-windows/tester/src/js/examples-win/NativeComponents/NativeComponentYoga.windows.js
@@ -10,10 +10,43 @@
 
 'use strict';
 
-import React from 'react';
+import React, { useState } from 'react';
 import {Text, View} from 'react-native';
 import CustomXamlComponentWithYogaLayout from './CustomXamlComponentWithYogaLayoutNativeComponent';
 
+const NativeComponentWithYogaExample = () => {
+  let [log, setLog] = useState('');
+  return (
+    <View
+      style={{
+        borderRadius: 0,
+        margin: 10,
+        borderWidth: 2,
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        gap: 5,
+      }}>
+      <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+      <Text style={{color: 'gray'}}>This is RN Text</Text>
+      <Text style={{color: 'red'}}>{log}</Text>
+      <CustomXamlComponentWithYogaLayout
+        label="This is a Xaml Button set to ellipisify on truncation"
+        style={{flex: 1, minWidth: 100}}
+        onMyEvent={(arg) => {setLog(log + '\nRecieved MyEvent: ' + JSON.stringify(arg.nativeEvent) + '\n')}}
+      />
+      <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
+      <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
+    </View>
+  );
+};
+
 exports.displayName = 'NativeFabricComponentYoga';
 exports.framework = 'React';
 exports.category = 'UI';
@@ -27,31 +60,7 @@ exports.examples = [
     title: 'Native Component',
     render: function (): React.Node {
       return (
-        <View
-          style={{
-            borderRadius: 0,
-            margin: 10,
-            borderWidth: 2,
-            flexWrap: 'wrap',
-            flexDirection: 'row',
-            gap: 5,
-          }}>
-          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
-          <Text style={{color: 'gray'}}>This is RN Text</Text>
-          <CustomXamlComponentWithYogaLayout
-            label="This is a Xaml Button set to ellipisify on truncation"
-            style={{flex: 1, minWidth: 100}}
-          />
-          <View style={{width: 100, height: 100, backgroundColor: 'green'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'blue'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'pink'}} />
-          <View style={{width: 100, height: 100, backgroundColor: 'gray'}} />
-        </View>
+        <NativeComponentWithYogaExample />
       );
     },
   },

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
@@ -9466,8 +9466,16 @@ exports[`snapshotAllPages Fabric Native Component 1`] = `
   >
     This is RN Text
   </Text>
+  <Text
+    style={
+      {
+        "color": "red",
+      }
+    }
+  />
   <CustomXamlComponentWithNativeLayout
     label="This is a Xaml Button set to ellipisify on truncation"
+    onMyEvent={[Function]}
     style={
       {
         "flexShrink": 1,
@@ -9589,8 +9597,16 @@ exports[`snapshotAllPages Fabric Native Component Yoga 1`] = `
   >
     This is RN Text
   </Text>
+  <Text
+    style={
+      {
+        "color": "red",
+      }
+    }
+  />
   <CustomXamlComponentWithYogaLayout
     label="This is a Xaml Button set to ellipisify on truncation"
+    onMyEvent={[Function]}
     style={
       {
         "flex": 1,