Skip to content

Commit

Permalink
[Fabric] Enable implementation of custom events on custom components (m…
Browse files Browse the repository at this point in the history
…icrosoft#13635)

* [Fabric] Enable implementation of custom events on custom components

* Change files

* format

* lint fix

* fix
  • Loading branch information
acoates-ms committed Aug 30, 2024
1 parent 4bbdd58 commit 6617b3f
Show file tree
Hide file tree
Showing 20 changed files with 325 additions and 171 deletions.
Original file line number Diff line number Diff line change
@@ -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"
}
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 />
);
},
},
}
];
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 />
);
},
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 6617b3f

Please sign in to comment.