Add button property mouse events

change/react-native-windows-c4c264df-7619-4559-b43f-9761d5d68d63.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Implement button property",
+  "packageName": "react-native-windows",
+  "email": "hmalothu@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/playground/Samples/click.tsx

@@ -10,6 +10,7 @@ import {AppRegistry, Text, TouchableHighlight, View} from 'react-native';
 export default class Bootstrap extends React.Component {
   state = {
     ticker: 0,
+    lastEvent: 'Click the box to test pointer events',
   };
 
   onSmallIncrement = () => {
@@ -27,32 +28,82 @@ export default class Bootstrap extends React.Component {
     console.log(' onLargeIncrement !');
   };
 
+  buttonLabel = (button: number) => {
+    switch (button) {
+      case 0:
+        return 'Left';
+      case 1:
+        return 'Middle';
+      case 2:
+        return 'Right';
+      default:
+        return `Unknown(${button})`;
+    }
+  };
+
   render() {
     return (
-      <View
-        style={{backgroundColor: 'blue', margin: 10, width: 120}}
-        focusable
-        {...{
-          // Use weird format as work around for the fact that these props are not part of the @types/react-native yet
-          onClick: this.onLargeIncrement,
-        }}>
-        <TouchableHighlight
-          style={{backgroundColor: 'orange', margin: 15}}
-          onPress={this.onMediumIncrement}
+      <View style={{padding: 10}}>
+        {/* Pointer event test */}
+        <View
+          style={{
+            backgroundColor: 'magenta',
+            width: 200,
+            height: 200,
+            margin: 10,
+            borderRadius: 30,
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+          onPointerDown={(e: any) => {
+            const {button, buttons} = e.nativeEvent;
+            this.setState({
+              lastEvent: `${this.buttonLabel(
+                button,
+              )} pressed (button=${button}, buttons=${buttons})`,
+            });
+          }}
+          onPointerUp={(e: any) => {
+            const {button, buttons} = e.nativeEvent;
+            this.setState({
+              lastEvent: `${this.buttonLabel(
+                button,
+              )} released (button=${button}, buttons=${buttons})`,
+            });
+          }}
+          {...{onClick: this.onLargeIncrement}}>
+          <Text style={{color: 'white', fontWeight: 'bold'}}>Click Me</Text>
+        </View>
+        <Text style={{marginLeft: 10, fontSize: 14}}>
+          {this.state.lastEvent}
+        </Text>
+
+        {/* Original click test */}
+        <View
+          style={{backgroundColor: 'blue', margin: 10, width: 120}}
+          focusable
           {...{
             // Use weird format as work around for the fact that these props are not part of the @types/react-native yet
-            focusable: true,
+            onClick: this.onLargeIncrement,
           }}>
           <TouchableHighlight
-            style={{backgroundColor: 'azure', margin: 15}}
-            onPress={this.onSmallIncrement}>
-            <View style={{margin: 5}}>
-              <Text style={{color: 'black'}}>
-                {this.state.ticker.toString()}
-              </Text>
-            </View>
+            style={{backgroundColor: 'orange', margin: 15}}
+            onPress={this.onMediumIncrement}
+            {...{
+              // Use weird format as work around for the fact that these props are not part of the @types/react-native yet
+              focusable: true,
+            }}>
+            <TouchableHighlight
+              style={{backgroundColor: 'azure', margin: 15}}
+              onPress={this.onSmallIncrement}>
+              <View style={{margin: 5}}>
+                <Text style={{color: 'black'}}>
+                  {this.state.ticker.toString()}
+                </Text>
+              </View>
+            </TouchableHighlight>
           </TouchableHighlight>
-        </TouchableHighlight>
+        </View>
       </View>
     );
   }

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp

@@ -1210,6 +1210,30 @@ void CompositionEventHandler::onPointerPressed(
     ActiveTouch activeTouch{0};
     activeTouch.touchType = UITouchType::Mouse;
 
+    // Map PointerUpdateKind to W3C button value
+    // https://developer.mozilla.org/docs/Web/API/MouseEvent/button
+    auto updateKind = pointerPoint.Properties().PointerUpdateKind();
+    switch (updateKind) {
+      case Composition::Input::PointerUpdateKind::LeftButtonPressed:
+        activeTouch.button = 0;
+        break;
+      case Composition::Input::PointerUpdateKind::MiddleButtonPressed:
+        activeTouch.button = 1;
+        break;
+      case Composition::Input::PointerUpdateKind::RightButtonPressed:
+        activeTouch.button = 2;
+        break;
+      case Composition::Input::PointerUpdateKind::XButton1Pressed:
+        activeTouch.button = 3;
+        break;
+      case Composition::Input::PointerUpdateKind::XButton2Pressed:
+        activeTouch.button = 4;
+        break;
+      default:
+        activeTouch.button = -1;
+        break;
+    }
+
     while (targetComponentView) {
       if (auto eventEmitter =
               winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(targetComponentView)
@@ -1394,8 +1418,34 @@ facebook::react::PointerEvent CompositionEventHandler::CreatePointerEventFromAct
 
   event.detail = 0;
 
-  // event.button = activeTouch.button;
-  // event.buttons = ButtonMaskToButtons(activeTouch.buttonMask);
+  event.button = activeTouch.button;
+
+  // Build W3C buttons bitmask from the active button
+  // https://developer.mozilla.org/docs/Web/API/MouseEvent/buttons
+  if (IsEndishEventType(eventType)) {
+    event.buttons = 0;
+  } else {
+    switch (activeTouch.button) {
+      case 0:
+        event.buttons = 1;
+        break; // primary
+      case 1:
+        event.buttons = 4;
+        break; // auxiliary (middle)
+      case 2:
+        event.buttons = 2;
+        break; // secondary (right)
+      case 3:
+        event.buttons = 8;
+        break; // X1
+      case 4:
+        event.buttons = 16;
+        break; // X2
+      default:
+        event.buttons = 0;
+        break;
+    }
+  }
 
   // UpdatePointerEventModifierFlags(event, activeTouch.modifierFlags);