[Fabric] Add switch's 'trackColor' (#11234)

* initial solution * restructure code * Change files * address feedback * format
microsoft · Mar 28, 2023 · 8fc0f91 · 8fc0f91
1 parent f314377
commit 8fc0f91
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/change/react-native-windows-f6eda291-b285-4958-8a04-c5045b1d6277.json b/change/react-native-windows-f6eda291-b285-4958-8a04-c5045b1d6277.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "add switch 'trackColor' for Fabric",
+  "packageName": "react-native-windows",
+  "email": "tatianakapos@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp
@@ -143,15 +143,29 @@ void SwitchComponentView::Draw() noexcept {
     d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
     d2dDeviceContext->SetDpi(dpi, dpi);
 
+    // switch track - outline
+    D2D1_ROUNDED_RECT track = D2D1::RoundedRect(trackRect, trackCornerRadius, trackCornerRadius);
+    if ((!switchProps->onTintColor && switchProps->value) || (!switchProps->tintColor && !switchProps->value)) {
+      d2dDeviceContext->DrawRoundedRectangle(track, defaultBrush.get());
+    }
+
+    // switch track - fill
+    winrt::com_ptr<ID2D1SolidColorBrush> trackBrush;
+    if (!switchProps->disabled && switchProps->onTintColor && switchProps->value) {
+      winrt::check_hresult(
+          d2dDeviceContext->CreateSolidColorBrush(switchProps->onTintColor.AsD2DColor(), trackBrush.put()));
+      d2dDeviceContext->FillRoundedRectangle(track, trackBrush.get());
+    } else if (!switchProps->disabled && switchProps->tintColor && !switchProps->value) {
+      winrt::check_hresult(
+          d2dDeviceContext->CreateSolidColorBrush(switchProps->tintColor.AsD2DColor(), trackBrush.put()));
+      d2dDeviceContext->FillRoundedRectangle(track, trackBrush.get());
+    }
+
     // switch thumb
     D2D1_POINT_2F thumbCenter = D2D1 ::Point2F(thumbX, (trackRect.top + trackRect.bottom) / 2);
     D2D1_ELLIPSE thumb = D2D1::Ellipse(thumbCenter, thumbRadius, thumbRadius);
     d2dDeviceContext->FillEllipse(thumb, thumbBrush.get());
 
-    // switch track
-    D2D1_ROUNDED_RECT track = D2D1::RoundedRect(trackRect, trackCornerRadius, trackCornerRadius);
-    d2dDeviceContext->DrawRoundedRectangle(track, defaultBrush.get());
-
     // Restore old dpi setting
     d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
 
@@ -237,4 +251,4 @@ bool SwitchComponentView::focusable() const noexcept {
   return m_props->focusable;
 }
 
-} // namespace Microsoft::ReactNative
+} // namespace Microsoft::ReactNative