feat: Allow using WinUI 3 Controls (#342)

react-native-picker · Oct 29, 2021 · ea17798 · ea17798
1 parent e366125
commit ea17798
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@
 
 | @react-native-picker/picker | react-native | react-native-windows |
 | --- | --- | --- |
-| master | 0.61+ | 0.64+ |
+| >= 2.0.0 | 0.61+ | 0.64+ |
 | >= 1.16.0 | 0.61+ | 0.61+ |
 | >= 1.2.0 | 0.60+ or 0.59+ with [Jetifier](https://www.npmjs.com/package/jetifier) | N/A |
 | >= 1.0.0 | 0.57 | N/A |

diff --git a/windows/ReactNativePicker/ReactNativePicker.vcxproj b/windows/ReactNativePicker/ReactNativePicker.vcxproj
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="16.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(SolutionDir)\ExperimentalFeatures.props" Condition="Exists('$(SolutionDir)\ExperimentalFeatures.props')" />
   <Import Project="$(SolutionDir)\packages\Microsoft.Windows.CppWinRT.2.0.210312.4\build\native\Microsoft.Windows.CppWinRT.props" Condition="Exists('$(SolutionDir)\packages\Microsoft.Windows.CppWinRT.2.0.210312.4\build\native\Microsoft.Windows.CppWinRT.props')" />
   <PropertyGroup Label="Globals">
     <CppWinRTOptimized>true</CppWinRTOptimized>

diff --git a/windows/ReactNativePicker/ReactPickerView.cpp b/windows/ReactNativePicker/ReactPickerView.cpp
@@ -7,23 +7,26 @@
 #include "ReactPickerView.g.cpp"
 
 #include <winrt/Windows.Foundation.Metadata.h>
-#include <winrt/Windows.UI.Xaml.Input.h>
+#include <UI.Xaml.Input.h>
 
 namespace winrt {
     using namespace Microsoft::ReactNative;
     using namespace Windows::Foundation;
     using namespace Windows::Foundation::Metadata;
-    using namespace Windows::UI;
-    using namespace Windows::UI::Xaml;
-    using namespace Windows::UI::Xaml::Controls;
-    using namespace Windows::UI::Xaml::Input;
-    using namespace Windows::UI::Xaml::Media;
+    using namespace xaml;
+    using namespace xaml::Controls;
+    using namespace xaml::Input;
+    using namespace xaml::Media;
 } // namespace winrt
 
 namespace winrt::ReactNativePicker::implementation {
 
+#ifdef USE_WINUI3
+    const bool ReactPickerView::s_isEditableComboboxSupported = true;
+#else
     const bool ReactPickerView::s_isEditableComboboxSupported = winrt::ApiInformation::IsPropertyPresent(
-        L"Windows.UI.Xaml.Controls.ComboBox", L"IsEditableProperty");
+         L"Windows.UI.Xaml.Controls.ComboBox", L"IsEditableProperty");
+#endif
 
     ReactPickerView::ReactPickerView(winrt::IReactContext const& reactContext) : m_reactContext(reactContext) {
         this->AllowFocusOnInteraction(true);
@@ -64,9 +67,13 @@ namespace winrt::ReactNativePicker::implementation {
                         this->ClearValue(winrt::ComboBox::IsEditableProperty());
                     }
                     else {
-                        if (auto iComboBox6 = this->try_as<winrt::Controls::IComboBox6>()) {
-                            iComboBox6.IsEditable(propertyValue.AsBoolean());
-                        }
+#ifdef USE_WINUI3
+                         this->IsEditable(propertyValue.AsBoolean());
+#else
+                         if (auto iComboBox6 = this->try_as<winrt::Controls::IComboBox6>()) {
+                             iComboBox6.IsEditable(propertyValue.AsBoolean());
+                         }
+#endif
                     }
                 }
             }
@@ -191,7 +198,7 @@ namespace winrt::ReactNativePicker::implementation {
         }
     }
 
-    void ReactPickerView::UpdateComboBoxItemForegroundResource(winrt::FrameworkElement const& item, winrt::Windows::UI::Xaml::Media::Brush const& color) {
+    void ReactPickerView::UpdateComboBoxItemForegroundResource(winrt::FrameworkElement const& item, xaml::Media::Brush const& color) {
         if (auto comboBoxItem = item.try_as<winrt::ComboBoxItem>()) {
             comboBoxItem.Foreground(color);
         }

diff --git a/windows/ReactNativePicker/ReactPickerView.h b/windows/ReactNativePicker/ReactPickerView.h
@@ -22,15 +22,15 @@ namespace winrt::ReactNativePicker::implementation {
         // FUTURE: remove when we can require RS5+
         int32_t m_selectedIndex{ 0 };
         std::vector<winrt::hstring> m_itemValues;
-        winrt::Windows::UI::Xaml::Media::Brush m_comboBoxColor{ nullptr };
-        winrt::Windows::UI::Xaml::Controls::ComboBox::SelectionChanged_revoker m_selectionChangedRevoker{};
-        winrt::Windows::UI::Xaml::Controls::ComboBox::DropDownClosed_revoker m_dropDownClosedRevoker{};
+        xaml::Media::Brush m_comboBoxColor{ nullptr };
+        xaml::Controls::ComboBox::SelectionChanged_revoker m_selectionChangedRevoker{};
+        xaml::Controls::ComboBox::DropDownClosed_revoker m_dropDownClosedRevoker{};
 
         void RegisterEvents();
         void RepopulateItems(winrt::Microsoft::ReactNative::JSValueArray const& items);
         void SetSelectedIndex(int index);
-        void OnSelectionChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::SelectionChangedEventArgs const& args);
-        void UpdateComboBoxItemForegroundResource(winrt::Windows::UI::Xaml::FrameworkElement const& item, winrt::Windows::UI::Xaml::Media::Brush const& color);
+        void OnSelectionChanged(winrt::Windows::Foundation::IInspectable const& sender, xaml::Controls::SelectionChangedEventArgs const& args);
+        void UpdateComboBoxItemForegroundResource(xaml::FrameworkElement const& item, xaml::Media::Brush const& color);
     };
 } // namespace winrt::ReactNativePicker::implementation
 

diff --git a/windows/ReactNativePicker/ReactPickerView.idl b/windows/ReactNativePicker/ReactPickerView.idl
@@ -1,7 +1,9 @@
+#include <NamespaceRedirect.h>
+
 namespace ReactNativePicker{
 
     [default_interface]
-    runtimeclass ReactPickerView : Windows.UI.Xaml.Controls.ComboBox {
+    runtimeclass ReactPickerView : XAML_NAMESPACE.Controls.ComboBox {
         ReactPickerView(Microsoft.ReactNative.IReactContext context);
         void UpdateProperties(Microsoft.ReactNative.IJSValueReader reader);
     };

diff --git a/windows/ReactNativePicker/ReactPickerViewManager.cpp b/windows/ReactNativePicker/ReactPickerViewManager.cpp
@@ -9,7 +9,7 @@
 namespace winrt {
     using namespace Microsoft::ReactNative;
     using namespace Windows::Foundation::Collections;
-    using namespace Windows::UI::Xaml;
+    using namespace xaml;
 }
 
 namespace winrt::ReactNativePicker::implementation {

diff --git a/windows/ReactNativePicker/ReactPickerViewManager.h b/windows/ReactNativePicker/ReactPickerViewManager.h
@@ -18,7 +18,7 @@ namespace winrt::ReactNativePicker::implementation {
 
         // IViewManager
         winrt::hstring Name() noexcept;
-        winrt::Windows::UI::Xaml::FrameworkElement CreateView() noexcept;
+        xaml::FrameworkElement CreateView() noexcept;
 
         // IViewManagerWithReactContext
         winrt::Microsoft::ReactNative::IReactContext ReactContext() noexcept;
@@ -30,7 +30,7 @@ namespace winrt::ReactNativePicker::implementation {
             NativeProps() noexcept;
 
         void UpdateProperties(
-            winrt::Windows::UI::Xaml::FrameworkElement const& view,
+            xaml::FrameworkElement const& view,
             winrt::Microsoft::ReactNative::IJSValueReader const& propertyMapReader) noexcept;
 
         // IViewManagerWithExportedEventTypeConstants