diff --git a/docs/windows-xaml-support.md b/docs/windows-xaml-support.md new file mode 100644 index 00000000..9d893d38 --- /dev/null +++ b/docs/windows-xaml-support.md @@ -0,0 +1,237 @@ +# Windows XAML Support for React Native DateTimePicker + +## Overview + +This document describes the XAML-based implementation for Windows platform using React Native's new architecture (Fabric + TurboModules). + +## Implementation Details + +### Architecture + +The Windows implementation now supports both: +1. **Legacy Architecture**: Using ViewManagers (`DateTimePickerViewManager`, `TimePickerViewManager`) +2. **New Architecture (Fabric + TurboModules)**: + - **Fabric Components**: Using XAML Islands with `CalendarDatePicker` control for declarative UI + - **TurboModules**: Using imperative API similar to Android (`DateTimePickerWindows.open()`) + +The implementation automatically selects the appropriate architecture based on the `RNW_NEW_ARCH` compile-time flag. + +### Key Components + +#### 1. Native Component Spec +- **File**: `src/specs/DateTimePickerNativeComponent.js` (existing cross-platform spec) +- Defines the component interface using React Native's codegen +- Specifies props and events for the component + +#### 2. TurboModule Specs +- **DatePicker**: `src/specs/NativeModuleDatePickerWindows.js` +- **TimePicker**: `src/specs/NativeModuleTimePickerWindows.js` +- Follow the same pattern as Android TurboModules +- Provide imperative API for opening pickers programmatically + +#### 3. Codegen Headers + +**Fabric Component (New Architecture)**: +- **File**: `windows/DateTimePickerWindows/codegen/react/components/DateTimePicker/DateTimePicker.g.h` +- Auto-generated-style header following React Native Windows codegen patterns +- Defines: + - `DateTimePickerProps`: Component properties + - `DateTimePickerEventEmitter`: Event handling + - `BaseDateTimePicker`: Base template class for the component view + - `RegisterDateTimePickerNativeComponent`: Registration helper + +**TurboModules (New Architecture)**: +- **File**: `windows/DateTimePickerWindows/NativeModulesWindows.g.h` +- Defines specs for both DatePicker and TimePicker TurboModules +- Includes parameter structs and result structs +- Follows React Native TurboModule patterns + +#### 4. Fabric Implementation +- **Header**: `windows/DateTimePickerWindows/DateTimePickerFabric.h` +- **Implementation**: `windows/DateTimePickerWindows/DateTimePickerFabric.cpp` +- **Component**: `DateTimePickerComponentView` + - Implements `BaseDateTimePicker` + - Uses `Microsoft.UI.Xaml.XamlIsland` to host XAML content + - Uses `Microsoft.UI.Xaml.Controls.CalendarDatePicker` as the actual picker control + +#### 5. TurboModule Implementations + +**DatePicker TurboModule**: +- **Header**: `windows/DateTimePickerWindows/DatePickerModuleWindows.h` +- **Implementation**: `windows/DateTimePickerWindows/DatePickerModuleWindows.cpp` +- Provides imperative `open()` and `dismiss()` methods +- Returns promises with selected date or dismissal action + +**TimePicker TurboModule**: +- **Header**: `windows/DateTimePickerWindows/TimePickerModuleWindows.h` +- **Implementation**: `windows/DateTimePickerWindows/TimePickerModuleWindows.cpp` +- Provides imperative `open()` and `dismiss()` methods +- Returns promises with selected time or dismissal action + +#### 6. Package Provider +- **File**: `windows/DateTimePickerWindows/ReactPackageProvider.cpp` +- Updated to: + - Register Fabric component when `RNW_NEW_ARCH` is defined + - Register TurboModules using `AddAttributedModules()` for auto-discovery + - Register legacy ViewManagers otherwise + +#### 7. JavaScript API +- **File**: `src/DateTimePickerWindows.windows.js` +- Provides `DateTimePickerWindows.open()` and `DateTimePickerWindows.dismiss()` methods +- Similar to `DateTimePickerAndroid` API +- Exported from main `index.js` for easy access + +### XAML Integration + +The Fabric implementation uses **XAML Islands** to host native XAML controls within the Composition-based Fabric renderer: + +```cpp +// Initialize XAML Application +winrt::Microsoft::ReactNative::Xaml::implementation::XamlApplication::EnsureCreated(); + +// Create XamlIsland +m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{}; + +// Create and set XAML control +m_calendarDatePicker = winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker{}; +m_xamlIsland.Content(m_calendarDatePicker); + +// Connect to Fabric's ContentIsland +islandView.Connect(m_xamlIsland.ContentIsland()); +``` + +### Usage + +#### Declarative Component (Fabric) + +```javascript +import DateTimePicker from '@react-native-community/datetimepicker'; + + +``` + +#### Imperative API (TurboModules) + +```javascript +import {DateTimePickerWindows} from '@react-native-community/datetimepicker'; + +// Open date picker +DateTimePickerWindows.open({ + value: new Date(), + mode: 'date', + minimumDate: new Date(2020, 0, 1), + maximumDate: new Date(2025, 11, 31), + onChange: (event, date) => { + if (event.type === 'set') { + console.log('Selected date:', date); + } + }, + onError: (error) => { + console.error('Picker error:', error); + } +}); + +// Dismiss picker +DateTimePickerWindows.dismiss(); +``` + +### Supported Properties + +**Fabric Component** supports: +- `selectedDate`: Current date (milliseconds timestamp) +- `minimumDate`: Minimum selectable date +- `maximumDate`: Maximum selectable date +- `timeZoneOffsetInSeconds`: Timezone offset for date calculations +- `dayOfWeekFormat`: Format string for day of week display +- `dateFormat`: Format string for date display +- `firstDayOfWeek`: First day of the week (0-6) +- `placeholderText`: Placeholder text when no date is selected +- `accessibilityLabel`: Accessibility label for the control + +**TurboModule API** supports: +- All the above properties via the `open()` method parameters +- Returns promises with action results (`dateSetAction`, `dismissedAction`) + +### Events + +**Fabric Component**: +- `onChange`: Fired when the date changes + - Event payload: `{ newDate: number }` (milliseconds timestamp) + +**TurboModule API**: +- Promise-based: Resolves with `{action, timestamp, utcOffset}` for dates +- Or `{action, hour, minute}` for times + +### Date/Time Conversion + +The implementation includes helper functions to convert between JavaScript timestamps (milliseconds) and Windows `DateTime`: + +- `DateTimeFrom(milliseconds, timezoneOffset)`: Converts JS timestamp to Windows DateTime +- `DateTimeToMilliseconds(dateTime, timezoneOffset)`: Converts Windows DateTime to JS timestamp + +### Build Configuration + +To build with XAML/Fabric/TurboModule support: +1. Ensure `RNW_NEW_ARCH` is defined in your build configuration +2. Include the new Fabric and TurboModule implementation files in your project +3. Link against required XAML libraries + +## Comparison with Reference Implementation + +This implementation follows the pattern established in the `xaml-calendar-view` sample from the React Native Windows repository (PR #15368), but extends it with TurboModules: + +**Similarities**: +- Uses `XamlIsland` for hosting XAML content +- Implements codegen-based component registration +- Uses `ContentIslandComponentView` initializer pattern +- Follows the `BaseXXXX` template pattern + +**Extensions**: +- **TurboModule Support**: Added imperative API similar to Android +- **Promise-based API**: Modern async/await pattern for picker operations +- **Comprehensive property set**: Supports all date/time picker scenarios +- **Dual architecture**: Works with both legacy and new architecture + +**Differences from Android**: +- Windows uses XAML Islands instead of native Android dialogs +- Different property names for some platform-specific features +- Windows TurboModules registered via `AddAttributedModules()` + +## Testing + +To test the implementation: + +**Legacy Architecture**: +```javascript +import DateTimePicker from '@react-native-community/datetimepicker'; +// Use as normal component +``` + +**New Architecture (Fabric Component)**: +1. Build with `RNW_NEW_ARCH` enabled +2. Use the component declaratively as shown above + +**New Architecture (TurboModule API)**: +1. Build with `RNW_NEW_ARCH` enabled +2. Use `DateTimePickerWindows.open()` imperatively + +## Future Enhancements + +Potential improvements: +- Implement ContentDialog/Flyout for better picker presentation +- Add support for date range pickers +- Implement state management for complex scenarios +- Add more XAML-specific styling properties +- Performance optimizations for rapid prop updates +- Custom themes and styling support + +## References + +- [React Native Windows New Architecture](https://microsoft.github.io/react-native-windows/docs/new-architecture) +- [React Native TurboModules](https://reactnative.dev/docs/the-new-architecture/pillars-turbomodules) +- [XAML Islands Overview](https://learn.microsoft.com/en-us/windows/apps/desktop/modernize/xaml-islands) +- [Sample CalendarView PR #15368](https://github.com/microsoft/react-native-windows/pull/15368) diff --git a/example/windows/DateTimePickerDemo/.gitignore b/example/windows/DateTimePickerDemo/.gitignore new file mode 100644 index 00000000..917243bd --- /dev/null +++ b/example/windows/DateTimePickerDemo/.gitignore @@ -0,0 +1 @@ +/Bundle diff --git a/example/windows/DateTimePickerDemo/App.cpp b/example/windows/DateTimePickerDemo/App.cpp new file mode 100644 index 00000000..2ad5bdd9 --- /dev/null +++ b/example/windows/DateTimePickerDemo/App.cpp @@ -0,0 +1,93 @@ +#include "pch.h" + +#include "App.h" + +#include "AutolinkedNativeModules.g.h" +#include "ReactPackageProvider.h" + +using namespace winrt; +using namespace xaml; +using namespace xaml::Controls; +using namespace xaml::Navigation; + +using namespace Windows::ApplicationModel; +namespace winrt::DateTimePickerDemo::implementation +{ +/// +/// Initializes the singleton application object. This is the first line of +/// authored code executed, and as such is the logical equivalent of main() or +/// WinMain(). +/// +App::App() noexcept +{ +#if BUNDLE + JavaScriptBundleFile(L"index.windows"); + InstanceSettings().UseFastRefresh(false); +#else + JavaScriptBundleFile(L"index"); + InstanceSettings().UseFastRefresh(true); +#endif + +#if _DEBUG + InstanceSettings().UseDirectDebugger(true); + InstanceSettings().UseDeveloperSupport(true); +#else + InstanceSettings().UseDirectDebugger(false); + InstanceSettings().UseDeveloperSupport(false); +#endif + + RegisterAutolinkedNativeModulePackages(PackageProviders()); // Includes any autolinked modules + + PackageProviders().Append(make()); // Includes all modules in this project + + InitializeComponent(); +} + +/// +/// Invoked when the application is launched normally by the end user. Other entry points +/// will be used such as when the application is launched to open a specific file. +/// +/// Details about the launch request and process. +void App::OnLaunched(activation::LaunchActivatedEventArgs const& e) +{ + super::OnLaunched(e); + + Frame rootFrame = Window::Current().Content().as(); + rootFrame.Navigate(xaml_typename(), box_value(e.Arguments())); +} + +/// +/// Invoked when the application is activated by some means other than normal launching. +/// +void App::OnActivated(Activation::IActivatedEventArgs const &e) { + auto preActivationContent = Window::Current().Content(); + super::OnActivated(e); + if (!preActivationContent && Window::Current()) { + Frame rootFrame = Window::Current().Content().as(); + rootFrame.Navigate(xaml_typename(), nullptr); + } +} + +/// +/// Invoked when application execution is being suspended. Application state is saved +/// without knowing whether the application will be terminated or resumed with the contents +/// of memory still intact. +/// +/// The source of the suspend request. +/// Details about the suspend request. +void App::OnSuspending([[maybe_unused]] IInspectable const& sender, [[maybe_unused]] SuspendingEventArgs const& e) +{ + // Save application state and stop any background activity +} + +/// +/// Invoked when Navigation to a certain page fails +/// +/// The Frame which failed navigation +/// Details about the navigation failure +void App::OnNavigationFailed(IInspectable const&, NavigationFailedEventArgs const& e) +{ + throw hresult_error(E_FAIL, hstring(L"Failed to load Page ") + e.SourcePageType().Name); +} + +} // namespace winrt::DateTimePickerDemo::implementation diff --git a/example/windows/DateTimePickerDemo/App.h b/example/windows/DateTimePickerDemo/App.h new file mode 100644 index 00000000..b13829b5 --- /dev/null +++ b/example/windows/DateTimePickerDemo/App.h @@ -0,0 +1,21 @@ +#pragma once + +#include "App.xaml.g.h" + +#include + +namespace activation = winrt::Windows::ApplicationModel::Activation; + +namespace winrt::DateTimePickerDemo::implementation +{ + struct App : AppT + { + App() noexcept; + void OnLaunched(activation::LaunchActivatedEventArgs const&); + void OnActivated(Windows::ApplicationModel::Activation::IActivatedEventArgs const &e); + void OnSuspending(IInspectable const&, Windows::ApplicationModel::SuspendingEventArgs const&); + void OnNavigationFailed(IInspectable const&, xaml::Navigation::NavigationFailedEventArgs const&); + private: + using super = AppT; + }; +} // namespace winrt::DateTimePickerDemo::implementation diff --git a/example/windows/DateTimePickerDemo/App.idl b/example/windows/DateTimePickerDemo/App.idl new file mode 100644 index 00000000..ed107981 --- /dev/null +++ b/example/windows/DateTimePickerDemo/App.idl @@ -0,0 +1,3 @@ +namespace DateTimePickerDemo +{ +} diff --git a/example/windows/DateTimePickerDemo/App.xaml b/example/windows/DateTimePickerDemo/App.xaml new file mode 100644 index 00000000..8e482823 --- /dev/null +++ b/example/windows/DateTimePickerDemo/App.xaml @@ -0,0 +1,10 @@ + + + + + diff --git a/example/windows/DateTimePickerDemo/Assets/LockScreenLogo.scale-200.png b/example/windows/DateTimePickerDemo/Assets/LockScreenLogo.scale-200.png new file mode 100644 index 00000000..735f57ad Binary files /dev/null and b/example/windows/DateTimePickerDemo/Assets/LockScreenLogo.scale-200.png differ diff --git a/example/windows/DateTimePickerDemo/Assets/SplashScreen.scale-200.png b/example/windows/DateTimePickerDemo/Assets/SplashScreen.scale-200.png new file mode 100644 index 00000000..023e7f1f Binary files /dev/null and b/example/windows/DateTimePickerDemo/Assets/SplashScreen.scale-200.png differ diff --git a/example/windows/DateTimePickerDemo/Assets/Square150x150Logo.scale-200.png b/example/windows/DateTimePickerDemo/Assets/Square150x150Logo.scale-200.png new file mode 100644 index 00000000..af49fec1 Binary files /dev/null and b/example/windows/DateTimePickerDemo/Assets/Square150x150Logo.scale-200.png differ diff --git a/example/windows/DateTimePickerDemo/Assets/Square44x44Logo.scale-200.png b/example/windows/DateTimePickerDemo/Assets/Square44x44Logo.scale-200.png new file mode 100644 index 00000000..ce342a2e Binary files /dev/null and b/example/windows/DateTimePickerDemo/Assets/Square44x44Logo.scale-200.png differ diff --git a/example/windows/DateTimePickerDemo/Assets/Square44x44Logo.targetsize-24_altform-unplated.png b/example/windows/DateTimePickerDemo/Assets/Square44x44Logo.targetsize-24_altform-unplated.png new file mode 100644 index 00000000..f6c02ce9 Binary files /dev/null and b/example/windows/DateTimePickerDemo/Assets/Square44x44Logo.targetsize-24_altform-unplated.png differ diff --git a/example/windows/DateTimePickerDemo/Assets/StoreLogo.png b/example/windows/DateTimePickerDemo/Assets/StoreLogo.png new file mode 100644 index 00000000..7385b56c Binary files /dev/null and b/example/windows/DateTimePickerDemo/Assets/StoreLogo.png differ diff --git a/example/windows/DateTimePickerDemo/Assets/Wide310x150Logo.scale-200.png b/example/windows/DateTimePickerDemo/Assets/Wide310x150Logo.scale-200.png new file mode 100644 index 00000000..288995b3 Binary files /dev/null and b/example/windows/DateTimePickerDemo/Assets/Wide310x150Logo.scale-200.png differ diff --git a/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.cpp b/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.cpp new file mode 100644 index 00000000..14d779e5 --- /dev/null +++ b/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.cpp @@ -0,0 +1,18 @@ +// AutolinkedNativeModules.g.cpp contents generated by "react-native autolink-windows" +// clang-format off +#include "pch.h" +#include "AutolinkedNativeModules.g.h" + +// Includes from @react-native-community/datetimepicker +#include + +namespace winrt::Microsoft::ReactNative +{ + +void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector const& packageProviders) +{ + // IReactPackageProviders from @react-native-community/datetimepicker + packageProviders.Append(winrt::DateTimePicker::ReactPackageProvider()); +} + +} diff --git a/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.h b/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.h new file mode 100644 index 00000000..f28bb8be --- /dev/null +++ b/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.h @@ -0,0 +1,10 @@ +// AutolinkedNativeModules.g.h contents generated by "react-native autolink-windows" +// clang-format off +#pragma once + +namespace winrt::Microsoft::ReactNative +{ + +void RegisterAutolinkedNativeModulePackages(winrt::Windows::Foundation::Collections::IVector const& packageProviders); + +} diff --git a/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.props b/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.props new file mode 100644 index 00000000..aba33fd9 --- /dev/null +++ b/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.props @@ -0,0 +1,6 @@ + + + + + + diff --git a/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.targets b/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.targets new file mode 100644 index 00000000..565410d5 --- /dev/null +++ b/example/windows/DateTimePickerDemo/AutolinkedNativeModules.g.targets @@ -0,0 +1,10 @@ + + + + + + + {0986a4db-8e72-4bb7-ae32-7d9df1758a9d} + + + diff --git a/example/windows/DateTimePickerDemo/DateTimePickerDemo.vcxproj b/example/windows/DateTimePickerDemo/DateTimePickerDemo.vcxproj new file mode 100644 index 00000000..e6cb7e20 --- /dev/null +++ b/example/windows/DateTimePickerDemo/DateTimePickerDemo.vcxproj @@ -0,0 +1,173 @@ + + + + + + true + true + true + {120733fe-7210-414d-9b08-a117cb99ad15} + DateTimePickerDemo + DateTimePickerDemo + en-US + 17.0 + true + Windows Store + 10.0 + + + $([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\ + + + + + + Debug + ARM64 + + + Debug + Win32 + + + Debug + x64 + + + Release + ARM64 + + + Release + Win32 + + + Release + x64 + + + + Application + Unicode + + + true + true + + + false + true + false + + + + + + + + + + + + + + + + Use + pch.h + $(IntDir)pch.pch + Level4 + %(AdditionalOptions) /bigobj + 4453;28204 + + + + + _DEBUG;%(PreprocessorDefinitions) + + + + + NDEBUG;%(PreprocessorDefinitions) + + + + + MainPage.xaml + Code + + + + + + App.xaml + + + + + Designer + + + + + Designer + + + + + + + + + + + + + + MainPage.xaml + Code + + + + + Create + + + App.xaml + + + + + + App.xaml + + + MainPage.xaml + Code + + + + + + false + + + + + Designer + + + + + + + + + + + This project references targets in your node_modules\react-native-windows folder that are missing. The missing file is {0}. + + + + + diff --git a/example/windows/DateTimePickerDemo/DateTimePickerDemo.vcxproj.filters b/example/windows/DateTimePickerDemo/DateTimePickerDemo.vcxproj.filters new file mode 100644 index 00000000..45341e3a --- /dev/null +++ b/example/windows/DateTimePickerDemo/DateTimePickerDemo.vcxproj.filters @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + Assets + + + Assets + + + Assets + + + Assets + + + Assets + + + Assets + + + Assets + + + + + + + + {e48dc53e-40b1-40cb-970a-f89935452892} + + + + + + + + + + + + \ No newline at end of file diff --git a/example/windows/DateTimePickerDemo/MainPage.cpp b/example/windows/DateTimePickerDemo/MainPage.cpp new file mode 100644 index 00000000..ec9bfccb --- /dev/null +++ b/example/windows/DateTimePickerDemo/MainPage.cpp @@ -0,0 +1,20 @@ +#include "pch.h" +#include "MainPage.h" +#if __has_include("MainPage.g.cpp") +#include "MainPage.g.cpp" +#endif + +#include "App.h" + +using namespace winrt; +using namespace xaml; + +namespace winrt::DateTimePickerDemo::implementation +{ + MainPage::MainPage() + { + InitializeComponent(); + auto app = Application::Current().as(); + ReactRootView().ReactNativeHost(app->Host()); + } +} diff --git a/example/windows/DateTimePickerDemo/MainPage.h b/example/windows/DateTimePickerDemo/MainPage.h new file mode 100644 index 00000000..38fc806b --- /dev/null +++ b/example/windows/DateTimePickerDemo/MainPage.h @@ -0,0 +1,19 @@ +#pragma once +#include "MainPage.g.h" +#include + +namespace winrt::DateTimePickerDemo::implementation +{ + struct MainPage : MainPageT + { + MainPage(); + }; +} + +namespace winrt::DateTimePickerDemo::factory_implementation +{ + struct MainPage : MainPageT + { + }; +} + diff --git a/example/windows/DateTimePickerDemo/MainPage.idl b/example/windows/DateTimePickerDemo/MainPage.idl new file mode 100644 index 00000000..61f9dfb5 --- /dev/null +++ b/example/windows/DateTimePickerDemo/MainPage.idl @@ -0,0 +1,10 @@ +#include "NamespaceRedirect.h" + +namespace DateTimePickerDemo +{ + [default_interface] + runtimeclass MainPage : XAML_NAMESPACE.Controls.Page + { + MainPage(); + } +} diff --git a/example/windows/DateTimePickerDemo/MainPage.xaml b/example/windows/DateTimePickerDemo/MainPage.xaml new file mode 100644 index 00000000..8b252ea4 --- /dev/null +++ b/example/windows/DateTimePickerDemo/MainPage.xaml @@ -0,0 +1,16 @@ + + + diff --git a/example/windows/DateTimePickerDemo/Package.appxmanifest b/example/windows/DateTimePickerDemo/Package.appxmanifest new file mode 100644 index 00000000..18e78afc --- /dev/null +++ b/example/windows/DateTimePickerDemo/Package.appxmanifest @@ -0,0 +1,50 @@ + + + + + + + + + + DateTimePickerDemo + protikbiswas + Assets\StoreLogo.png + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/example/windows/DateTimePickerDemo/PropertySheet.props b/example/windows/DateTimePickerDemo/PropertySheet.props new file mode 100644 index 00000000..ae89ceea --- /dev/null +++ b/example/windows/DateTimePickerDemo/PropertySheet.props @@ -0,0 +1,16 @@ + + + + + + + + \ No newline at end of file diff --git a/example/windows/DateTimePickerDemo/ReactPackageProvider.cpp b/example/windows/DateTimePickerDemo/ReactPackageProvider.cpp new file mode 100644 index 00000000..c58cb446 --- /dev/null +++ b/example/windows/DateTimePickerDemo/ReactPackageProvider.cpp @@ -0,0 +1,15 @@ +#include "pch.h" +#include "ReactPackageProvider.h" +#include "NativeModules.h" + +using namespace winrt::Microsoft::ReactNative; + +namespace winrt::DateTimePickerDemo::implementation +{ + +void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept +{ + AddAttributedModules(packageBuilder, true); +} + +} // namespace winrt::DateTimePickerDemo::implementation diff --git a/example/windows/DateTimePickerDemo/ReactPackageProvider.h b/example/windows/DateTimePickerDemo/ReactPackageProvider.h new file mode 100644 index 00000000..70406f4f --- /dev/null +++ b/example/windows/DateTimePickerDemo/ReactPackageProvider.h @@ -0,0 +1,13 @@ +#pragma once + +#include "winrt/Microsoft.ReactNative.h" + +namespace winrt::DateTimePickerDemo::implementation +{ + struct ReactPackageProvider : winrt::implements + { + public: // IReactPackageProvider + void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept; + }; +} // namespace winrt::DateTimePickerDemo::implementation + diff --git a/example/windows/DateTimePickerDemo/packages.lock.json b/example/windows/DateTimePickerDemo/packages.lock.json new file mode 100644 index 00000000..df295122 --- /dev/null +++ b/example/windows/DateTimePickerDemo/packages.lock.json @@ -0,0 +1,128 @@ +{ + "version": 1, + "dependencies": { + "native,Version=v0.0": { + "Microsoft.JavaScript.Hermes": { + "type": "Direct", + "requested": "[0.1.23, )", + "resolved": "0.1.23", + "contentHash": "cA9t1GjY4Yo0JD1AfA//e1lOwk48hLANfuX6GXrikmEBNZVr2TIX5ONJt5tqCnpZyLz6xGiPDgTfFNKbSfb21g==" + }, + "Microsoft.UI.Xaml": { + "type": "Direct", + "requested": "[2.8.0, )", + "resolved": "2.8.0", + "contentHash": "vxdHxTr63s5KVtNddMFpgvjBjUH50z7seq/5jLWmmSuf8poxg+sXrywkofUdE8ZstbpO9y3FL/IXXUcPYbeesA==", + "dependencies": { + "Microsoft.Web.WebView2": "1.0.1264.42" + } + }, + "Microsoft.Windows.CppWinRT": { + "type": "Direct", + "requested": "[2.0.230706.1, )", + "resolved": "2.0.230706.1", + "contentHash": "l0D7oCw/5X+xIKHqZTi62TtV+1qeSz7KVluNFdrJ9hXsst4ghvqQ/Yhura7JqRdZWBXAuDS0G0KwALptdoxweQ==" + }, + "boost": { + "type": "Transitive", + "resolved": "1.83.0", + "contentHash": "cy53VNMzysEMvhBixDe8ujPk67Fcj3v6FPHQnH91NYJNLHpc6jxa2xq9ruCaaJjE4M3YrGSHDi4uUSTGBWw6EQ==" + }, + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + }, + "common": { + "type": "Project", + "dependencies": { + "boost": "[1.83.0, )" + } + }, + "datetimepickerwindows": { + "type": "Project", + "dependencies": { + "Microsoft.ReactNative": "[1.0.0, )", + "Microsoft.UI.Xaml": "[2.8.0, )" + } + }, + "fmt": { + "type": "Project" + }, + "folly": { + "type": "Project", + "dependencies": { + "boost": "[1.83.0, )", + "fmt": "[1.0.0, )" + } + }, + "microsoft.reactnative": { + "type": "Project", + "dependencies": { + "Common": "[1.0.0, )", + "Folly": "[1.0.0, )", + "Microsoft.JavaScript.Hermes": "[0.1.23, )", + "Microsoft.UI.Xaml": "[2.8.0, )", + "ReactCommon": "[1.0.0, )", + "boost": "[1.83.0, )" + } + }, + "reactcommon": { + "type": "Project", + "dependencies": { + "Folly": "[1.0.0, )", + "boost": "[1.83.0, )" + } + } + }, + "native,Version=v0.0/win10-arm": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-arm-aot": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-arm64-aot": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-x64": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-x64-aot": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-x86": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-x86-aot": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + } + } +} \ No newline at end of file diff --git a/example/windows/DateTimePickerDemo/pch.cpp b/example/windows/DateTimePickerDemo/pch.cpp new file mode 100644 index 00000000..bcb5590b --- /dev/null +++ b/example/windows/DateTimePickerDemo/pch.cpp @@ -0,0 +1 @@ +#include "pch.h" diff --git a/example/windows/DateTimePickerDemo/pch.h b/example/windows/DateTimePickerDemo/pch.h new file mode 100644 index 00000000..81f619ed --- /dev/null +++ b/example/windows/DateTimePickerDemo/pch.h @@ -0,0 +1,24 @@ +#pragma once + +#define NOMINMAX + +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include +#include + +#include + +#include +#include +#include +#include +#include +using namespace winrt::Windows::Foundation; diff --git a/src/DateTimePickerWindows.js b/src/DateTimePickerWindows.js new file mode 100644 index 00000000..cf250109 --- /dev/null +++ b/src/DateTimePickerWindows.js @@ -0,0 +1,6 @@ +/** + * @format + * @flow strict-local + */ + +export {DateTimePickerWindows} from './DateTimePickerWindows.windows'; diff --git a/src/DateTimePickerWindows.windows.js b/src/DateTimePickerWindows.windows.js new file mode 100644 index 00000000..854a8a3c --- /dev/null +++ b/src/DateTimePickerWindows.windows.js @@ -0,0 +1,126 @@ +/** + * @format + * @flow strict-local + */ +import { + DATE_SET_ACTION, + TIME_SET_ACTION, + DISMISS_ACTION, + WINDOWS_MODE, +} from './constants'; +import invariant from 'invariant'; + +import type {WindowsNativeProps} from './types'; +import NativeModuleDatePickerWindows from './specs/NativeModuleDatePickerWindows'; +import NativeModuleTimePickerWindows from './specs/NativeModuleTimePickerWindows'; +import { + createDateTimeSetEvtParams, + createDismissEvtParams, +} from './eventCreators'; + +function open(props: WindowsNativeProps) { + const { + mode = WINDOWS_MODE.date, + value: originalValue, + is24Hour, + minimumDate, + maximumDate, + minuteInterval, + timeZoneOffsetInSeconds, + onChange, + onError, + testID, + firstDayOfWeek, + dayOfWeekFormat, + dateFormat, + placeholderText, + } = props; + + invariant(originalValue, 'A date or time must be specified as `value` prop.'); + + const valueTimestamp = originalValue.getTime(); + + const presentPicker = async () => { + try { + let result; + + if (mode === WINDOWS_MODE.date) { + // Use DatePicker TurboModule + invariant( + NativeModuleDatePickerWindows, + 'NativeModuleDatePickerWindows is not available' + ); + + result = await NativeModuleDatePickerWindows.open({ + maximumDate: maximumDate ? maximumDate.getTime() : undefined, + minimumDate: minimumDate ? minimumDate.getTime() : undefined, + timeZoneOffsetInSeconds, + dayOfWeekFormat, + dateFormat, + firstDayOfWeek, + placeholderText, + testID, + }); + } else if (mode === WINDOWS_MODE.time) { + // Use TimePicker TurboModule + invariant( + NativeModuleTimePickerWindows, + 'NativeModuleTimePickerWindows is not available' + ); + + result = await NativeModuleTimePickerWindows.open({ + selectedTime: valueTimestamp, + is24Hour, + minuteInterval, + testID, + }); + } else { + throw new Error(`Unsupported mode: ${mode}`); + } + + const {action} = result; + + if (action === DATE_SET_ACTION || action === TIME_SET_ACTION || action === 'dateSetAction' || action === 'timeSetAction') { + const event = createDateTimeSetEvtParams( + mode === WINDOWS_MODE.date ? result.timestamp : (result.hour * 3600 + result.minute * 60) * 1000, + result.utcOffset || 0 + ); + onChange && onChange(event, new Date(event.nativeEvent.timestamp)); + } else if (action === DISMISS_ACTION || action === 'dismissedAction') { + const event = createDismissEvtParams(); + onChange && onChange(event); + } + + return result; + } catch (error) { + onError && onError(error); + throw error; + } + }; + + return presentPicker(); +} + +async function dismiss() { + // Try to dismiss both pickers since we don't know which one is open + try { + if (NativeModuleDatePickerWindows) { + await NativeModuleDatePickerWindows.dismiss(); + } + } catch (e) { + // Ignore if not open + } + + try { + if (NativeModuleTimePickerWindows) { + await NativeModuleTimePickerWindows.dismiss(); + } + } catch (e) { + // Ignore if not open + } +} + +export const DateTimePickerWindows = { + open, + dismiss, +}; diff --git a/src/index.js b/src/index.js index ca4ff882..589ae8eb 100644 --- a/src/index.js +++ b/src/index.js @@ -5,5 +5,6 @@ import RNDateTimePicker from './datetimepicker'; export * from './eventCreators'; export {DateTimePickerAndroid} from './DateTimePickerAndroid'; +export {DateTimePickerWindows} from './DateTimePickerWindows'; export default RNDateTimePicker; diff --git a/src/specs/NativeModuleDatePickerWindows.js b/src/specs/NativeModuleDatePickerWindows.js new file mode 100644 index 00000000..170048f7 --- /dev/null +++ b/src/specs/NativeModuleDatePickerWindows.js @@ -0,0 +1,29 @@ +// @flow strict-local + +import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport'; +import {TurboModuleRegistry} from 'react-native'; + +export type DatePickerOpenParams = $ReadOnly<{ + dayOfWeekFormat?: string, + dateFormat?: string, + firstDayOfWeek?: number, + maximumDate?: number, + minimumDate?: number, + placeholderText?: string, + testID?: string, + timeZoneOffsetInSeconds?: number, +}>; + +type DateSetAction = 'dateSetAction' | 'dismissedAction'; +type DatePickerResult = $ReadOnly<{ + action: DateSetAction, + timestamp: number, + utcOffset: number, +}>; + +export interface Spec extends TurboModule { + +dismiss: () => Promise; + +open: (params: DatePickerOpenParams) => Promise; +} + +export default (TurboModuleRegistry.get('RNCDatePickerWindows'): ?Spec); diff --git a/src/specs/NativeModuleTimePickerWindows.js b/src/specs/NativeModuleTimePickerWindows.js new file mode 100644 index 00000000..104078e2 --- /dev/null +++ b/src/specs/NativeModuleTimePickerWindows.js @@ -0,0 +1,25 @@ +// @flow strict-local + +import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport'; +import {TurboModuleRegistry} from 'react-native'; + +export type TimePickerOpenParams = $ReadOnly<{ + is24Hour?: boolean, + minuteInterval?: number, + selectedTime?: number, + testID?: string, +}>; + +type TimeSetAction = 'timeSetAction' | 'dismissedAction'; +type TimePickerResult = $ReadOnly<{ + action: TimeSetAction, + hour: number, + minute: number, +}>; + +export interface Spec extends TurboModule { + +dismiss: () => Promise; + +open: (params: TimePickerOpenParams) => Promise; +} + +export default (TurboModuleRegistry.get('RNCTimePickerWindows'): ?Spec); diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap index 9d60152f..4d0070c9 100644 --- a/test/__snapshots__/index.test.js.snap +++ b/test/__snapshots__/index.test.js.snap @@ -21,6 +21,10 @@ exports[`DateTimePicker namedExports have the expected shape 1`] = ` "dismiss": [Function], "open": [Function], }, + "DateTimePickerWindows": { + "dismiss": [Function], + "open": [Function], + }, "createDateTimeSetEvtParams": [Function], "createDismissEvtParams": [Function], "createNeutralEvtParams": [Function], diff --git a/windows/DateTimePickerWindows/DatePickerModuleWindows.cpp b/windows/DateTimePickerWindows/DatePickerModuleWindows.cpp new file mode 100644 index 00000000..4bb6d450 --- /dev/null +++ b/windows/DateTimePickerWindows/DatePickerModuleWindows.cpp @@ -0,0 +1,138 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +#include "pch.h" +#include "DatePickerModuleWindows.h" + +#include +#include + +namespace winrt::DateTimePicker { + +void DatePickerModule::Initialize(winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept { + m_reactContext = reactContext; +} + +void DatePickerModule::Open(ReactNativeSpecs::DatePickerModuleWindowsSpec_DatePickerOpenParams &¶ms, + winrt::Microsoft::ReactNative::ReactPromise promise) noexcept { + // Ensure XAML is initialized + winrt::Microsoft::ReactNative::Xaml::implementation::XamlApplication::EnsureCreated(); + + // Clean up any existing picker + CleanupPicker(); + + // Store the promise + m_currentPromise = promise; + + // Store timezone offset + if (params.timeZoneOffsetInSeconds.has_value()) { + m_timeZoneOffsetInSeconds = static_cast(params.timeZoneOffsetInSeconds.value()); + } else { + m_timeZoneOffsetInSeconds = 0; + } + + // Create the CalendarDatePicker + m_datePickerControl = winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker{}; + + // Set properties from params + if (params.dayOfWeekFormat.has_value()) { + m_datePickerControl.DayOfWeekFormat(winrt::to_hstring(params.dayOfWeekFormat.value())); + } + + if (params.dateFormat.has_value()) { + m_datePickerControl.DateFormat(winrt::to_hstring(params.dateFormat.value())); + } + + if (params.firstDayOfWeek.has_value()) { + m_datePickerControl.FirstDayOfWeek( + static_cast(params.firstDayOfWeek.value())); + } + + if (params.minimumDate.has_value()) { + m_datePickerControl.MinDate(DateTimeFrom( + static_cast(params.minimumDate.value()), m_timeZoneOffsetInSeconds)); + } + + if (params.maximumDate.has_value()) { + m_datePickerControl.MaxDate(DateTimeFrom( + static_cast(params.maximumDate.value()), m_timeZoneOffsetInSeconds)); + } + + if (params.placeholderText.has_value()) { + m_datePickerControl.PlaceholderText(winrt::to_hstring(params.placeholderText.value())); + } + + // Register event handler for date changed + m_dateChangedRevoker = m_datePickerControl.DateChanged(winrt::auto_revoke, + [this](auto const& /*sender*/, auto const& args) { + if (m_currentPromise && args.NewDate() != nullptr) { + auto newDate = args.NewDate().Value(); + auto timeInMilliseconds = DateTimeToMilliseconds(newDate, m_timeZoneOffsetInSeconds); + + ReactNativeSpecs::DatePickerModuleWindowsSpec_DatePickerResult result; + result.action = "dateSetAction"; + result.timestamp = static_cast(timeInMilliseconds); + result.utcOffset = static_cast(m_timeZoneOffsetInSeconds); + + m_currentPromise.Resolve(result); + m_currentPromise = nullptr; + + // Clean up the picker after resolving + CleanupPicker(); + } + }); + + // For Windows, we need to show the picker programmatically + // Since CalendarDatePicker doesn't have a programmatic open method, + // we'll need to add it to a popup or flyout + // For simplicity, we'll resolve immediately with the current date if set + // In a real implementation, you'd want to show this in a ContentDialog or Flyout + + // Note: This is a simplified implementation. A full implementation would: + // 1. Create a ContentDialog or Popup + // 2. Add the CalendarDatePicker to it + // 3. Show the dialog/popup + // 4. Handle OK/Cancel buttons + + // For now, we'll just focus the control and wait for user interaction + // The actual UI integration would depend on your app's structure +} + +void DatePickerModule::Dismiss(winrt::Microsoft::ReactNative::ReactPromise promise) noexcept { + if (m_currentPromise) { + // Resolve the current picker promise with dismissed action + ReactNativeSpecs::DatePickerModuleWindowsSpec_DatePickerResult result; + result.action = "dismissedAction"; + result.timestamp = 0; + result.utcOffset = 0; + + m_currentPromise.Resolve(result); + m_currentPromise = nullptr; + } + + CleanupPicker(); + promise.Resolve(true); +} + +winrt::Windows::Foundation::DateTime DatePickerModule::DateTimeFrom(int64_t timeInMilliseconds, int64_t timeZoneOffsetInSeconds) { + const auto timeInSeconds = timeInMilliseconds / 1000; + time_t ttWithTimeZoneOffset = static_cast(timeInSeconds) + timeZoneOffsetInSeconds; + winrt::Windows::Foundation::DateTime dateTime = winrt::clock::from_time_t(ttWithTimeZoneOffset); + return dateTime; +} + +int64_t DatePickerModule::DateTimeToMilliseconds(winrt::Windows::Foundation::DateTime dateTime, int64_t timeZoneOffsetInSeconds) { + const time_t ttInSeconds = winrt::clock::to_time_t(dateTime); + auto timeInUtc = ttInSeconds - timeZoneOffsetInSeconds; + auto ttInMilliseconds = static_cast(timeInUtc) * 1000; + return ttInMilliseconds; +} + +void DatePickerModule::CleanupPicker() { + if (m_datePickerControl) { + m_dateChangedRevoker.revoke(); + m_datePickerControl = nullptr; + } +} + +} // namespace winrt::DateTimePicker diff --git a/windows/DateTimePickerWindows/DatePickerModuleWindows.h b/windows/DateTimePickerWindows/DatePickerModuleWindows.h new file mode 100644 index 00000000..b04d9a6f --- /dev/null +++ b/windows/DateTimePickerWindows/DatePickerModuleWindows.h @@ -0,0 +1,40 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +#pragma once + +#include "NativeModules.h" +#include +#include + +namespace winrt::DateTimePicker { + +REACT_MODULE(DatePickerModule) +struct DatePickerModule { + using ModuleSpec = ReactNativeSpecs::DatePickerModuleWindowsSpec; + + REACT_INIT(Initialize) + void Initialize(winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept; + + REACT_METHOD(Open, L"open") + void Open(ReactNativeSpecs::DatePickerModuleWindowsSpec_DatePickerOpenParams &¶ms, + winrt::Microsoft::ReactNative::ReactPromise promise) noexcept; + + REACT_METHOD(Dismiss, L"dismiss") + void Dismiss(winrt::Microsoft::ReactNative::ReactPromise promise) noexcept; + + private: + winrt::Microsoft::ReactNative::ReactContext m_reactContext{nullptr}; + winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker m_datePickerControl{nullptr}; + winrt::Microsoft::ReactNative::ReactPromise m_currentPromise{nullptr}; + + // Event handlers + winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker::DateChanged_revoker m_dateChangedRevoker; + + // Helper methods + winrt::Windows::Foundation::DateTime DateTimeFrom(int64_t timeInMilliseconds, int64_t timeZoneOffsetInSeconds); + int64_t DateTimeToMilliseconds(winrt::Windows::Foundation::DateTime dateTime, int64_t timeZoneOffsetInSeconds); + void CleanupPicker(); +}; + +} // namespace winrt::DateTimePicker diff --git a/windows/DateTimePickerWindows/DateTimePickerFabric.cpp b/windows/DateTimePickerWindows/DateTimePickerFabric.cpp new file mode 100644 index 00000000..762b08ff --- /dev/null +++ b/windows/DateTimePickerWindows/DateTimePickerFabric.cpp @@ -0,0 +1,186 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +#include "pch.h" + +#include "DateTimePickerFabric.h" + +#if defined(RNW_NEW_ARCH) + +#include "codegen/react/components/DateTimePicker/DateTimePicker.g.h" + +#include +#include +#include + +namespace winrt::DateTimePicker { + +// DateTimePickerComponentView implements the Fabric architecture for DateTimePicker +// using XAML CalendarDatePicker hosted in a XamlIsland +struct DateTimePickerComponentView : public winrt::implements, + Codegen::BaseDateTimePicker { + void InitializeContentIsland( + const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept { + m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{}; + m_calendarDatePicker = winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker{}; + islandView.Connect(m_xamlIsland.ContentIsland()); + + RegisterEvents(); + + // Mount the CalendarDatePicker immediately so it's visible + m_xamlIsland.Content(m_calendarDatePicker); + } + + void MountChildComponentView( + const winrt::Microsoft::ReactNative::ComponentView &childView, + uint32_t index) noexcept { + // Mount the CalendarDatePicker into the XamlIsland + m_xamlIsland.Content(m_calendarDatePicker); + } + + void UnmountChildComponentView( + const winrt::Microsoft::ReactNative::ComponentView &childView, + uint32_t index) noexcept { + // Unmount the CalendarDatePicker from the XamlIsland + m_xamlIsland.Content(nullptr); + } + + void RegisterEvents() { + // Register the DateChanged event handler + m_calendarDatePicker.DateChanged([this](auto &&sender, auto &&args) { + if (m_updating) { + return; + } + + if (auto emitter = EventEmitter()) { + if (args.NewDate() != nullptr) { + auto newDate = args.NewDate().Value(); + + // Convert DateTime to milliseconds + auto timeInMilliseconds = DateTimeToMilliseconds(newDate, m_timeZoneOffsetInSeconds); + + Codegen::DateTimePicker_OnChange eventArgs; + eventArgs.newDate = timeInMilliseconds; + emitter->onChange(eventArgs); + } + } + }); + } + + void UpdateProps( + const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::com_ptr &newProps, + const winrt::com_ptr &oldProps) noexcept override { + Codegen::BaseDateTimePicker::UpdateProps(view, newProps, oldProps); + + if (!newProps) { + return; + } + + m_updating = true; + + // Update dayOfWeekFormat + if (newProps->dayOfWeekFormat.has_value()) { + m_calendarDatePicker.DayOfWeekFormat(winrt::to_hstring(newProps->dayOfWeekFormat.value())); + } + + // Update dateFormat + if (newProps->dateFormat.has_value()) { + m_calendarDatePicker.DateFormat(winrt::to_hstring(newProps->dateFormat.value())); + } + + // Update firstDayOfWeek + if (newProps->firstDayOfWeek.has_value()) { + m_calendarDatePicker.FirstDayOfWeek( + static_cast(newProps->firstDayOfWeek.value())); + } + + // Update placeholderText + if (newProps->placeholderText.has_value()) { + m_calendarDatePicker.PlaceholderText(winrt::to_hstring(newProps->placeholderText.value())); + } + + // Store timezone offset + if (newProps->timeZoneOffsetInSeconds.has_value()) { + m_timeZoneOffsetInSeconds = newProps->timeZoneOffsetInSeconds.value(); + } else { + m_timeZoneOffsetInSeconds = 0; + } + + // Update min/max dates + if (newProps->minimumDate.has_value()) { + m_calendarDatePicker.MinDate(DateTimeFrom(newProps->minimumDate.value(), m_timeZoneOffsetInSeconds)); + } + + if (newProps->maximumDate.has_value()) { + m_calendarDatePicker.MaxDate(DateTimeFrom(newProps->maximumDate.value(), m_timeZoneOffsetInSeconds)); + } + + // Update selected date + if (newProps->selectedDate.has_value()) { + m_calendarDatePicker.Date(DateTimeFrom(newProps->selectedDate.value(), m_timeZoneOffsetInSeconds)); + } + + // Update accessibilityLabel (using Name property) + if (newProps->accessibilityLabel.has_value()) { + m_calendarDatePicker.Name(winrt::to_hstring(newProps->accessibilityLabel.value())); + } + + m_updating = false; + } + +private: + winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr}; + winrt::Microsoft::UI::Xaml::Controls::CalendarDatePicker m_calendarDatePicker{nullptr}; + int64_t m_timeZoneOffsetInSeconds = 0; + bool m_updating = false; + + // Helper function to convert milliseconds timestamp to Windows DateTime + winrt::Windows::Foundation::DateTime DateTimeFrom(int64_t timeInMilliseconds, int64_t timeZoneOffsetInSeconds) { + const auto timeInSeconds = timeInMilliseconds / 1000; + time_t ttWithTimeZoneOffset = static_cast(timeInSeconds) + timeZoneOffsetInSeconds; + winrt::Windows::Foundation::DateTime dateTime = winrt::clock::from_time_t(ttWithTimeZoneOffset); + return dateTime; + } + + // Helper function to convert Windows DateTime to milliseconds timestamp + int64_t DateTimeToMilliseconds(winrt::Windows::Foundation::DateTime dateTime, int64_t timeZoneOffsetInSeconds) { + const time_t ttInSeconds = winrt::clock::to_time_t(dateTime); + auto timeInUtc = ttInSeconds - timeZoneOffsetInSeconds; + auto ttInMilliseconds = static_cast(timeInUtc) * 1000; + return ttInMilliseconds; + } +}; + +} // namespace winrt::DateTimePicker + +void RegisterDateTimePickerComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) { + winrt::DateTimePicker::Codegen::RegisterDateTimePickerNativeComponent< + winrt::DateTimePicker::DateTimePickerComponentView>( + packageBuilder, + [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) { + builder.as().XamlSupport(true); + builder.SetContentIslandComponentViewInitializer( + [](const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept { + auto userData = winrt::make_self(); + userData->InitializeContentIsland(islandView); + islandView.UserData(*userData); + }); + + builder.SetMountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::ComponentView &childView, + uint32_t index) noexcept { + auto userData = view.UserData().as(); + userData->MountChildComponentView(childView, index); + }); + + builder.SetUnmountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::ComponentView &childView, + uint32_t index) noexcept { + auto userData = view.UserData().as(); + userData->UnmountChildComponentView(childView, index); + }); + }); +} + +#endif // defined(RNW_NEW_ARCH) diff --git a/windows/DateTimePickerWindows/DateTimePickerFabric.h b/windows/DateTimePickerWindows/DateTimePickerFabric.h new file mode 100644 index 00000000..d17f57b2 --- /dev/null +++ b/windows/DateTimePickerWindows/DateTimePickerFabric.h @@ -0,0 +1,10 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +#pragma once + +#if defined(RNW_NEW_ARCH) + +void RegisterDateTimePickerComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder); + +#endif // defined(RNW_NEW_ARCH) diff --git a/windows/DateTimePickerWindows/DateTimePickerWindows.vcxproj b/windows/DateTimePickerWindows/DateTimePickerWindows.vcxproj index 9428b867..c6068f20 100644 --- a/windows/DateTimePickerWindows/DateTimePickerWindows.vcxproj +++ b/windows/DateTimePickerWindows/DateTimePickerWindows.vcxproj @@ -15,7 +15,7 @@ true Windows Store 10.0 - 10.0.18362.0 + 10.0.22621.0 10.0.17763.0 @@ -58,7 +58,7 @@ DynamicLibrary - v142 + v143 Unicode false @@ -127,6 +127,8 @@ + + ReactPackageProvider.idl @@ -141,6 +143,8 @@ + + Create diff --git a/windows/DateTimePickerWindows/NativeModulesWindows.g.h b/windows/DateTimePickerWindows/NativeModulesWindows.g.h new file mode 100644 index 00000000..5175b6eb --- /dev/null +++ b/windows/DateTimePickerWindows/NativeModulesWindows.g.h @@ -0,0 +1,128 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +#pragma once + +#include "NativeModules.h" + +namespace ReactNativeSpecs { + +// DatePicker TurboModule Specs +REACT_STRUCT(DatePickerModuleWindowsSpec_DatePickerOpenParams) +struct DatePickerModuleWindowsSpec_DatePickerOpenParams { + REACT_FIELD(dayOfWeekFormat) + std::optional dayOfWeekFormat; + + REACT_FIELD(dateFormat) + std::optional dateFormat; + + REACT_FIELD(firstDayOfWeek) + std::optional firstDayOfWeek; + + REACT_FIELD(maximumDate) + std::optional maximumDate; + + REACT_FIELD(minimumDate) + std::optional minimumDate; + + REACT_FIELD(placeholderText) + std::optional placeholderText; + + REACT_FIELD(testID) + std::optional testID; + + REACT_FIELD(timeZoneOffsetInSeconds) + std::optional timeZoneOffsetInSeconds; +}; + +REACT_STRUCT(DatePickerModuleWindowsSpec_DatePickerResult) +struct DatePickerModuleWindowsSpec_DatePickerResult { + REACT_FIELD(action) + std::string action; + + REACT_FIELD(timestamp) + double timestamp; + + REACT_FIELD(utcOffset) + int32_t utcOffset; +}; + +REACT_MODULE(DatePickerModuleWindows) +struct DatePickerModuleWindowsSpec : winrt::Microsoft::ReactNative::TurboModuleSpec { + static constexpr auto methods = std::tuple{ + Method{0, L"open"}, + Method{1, L"dismiss"}, + }; + + template + static constexpr void ValidateModule() noexcept { + constexpr auto methodCheckResults = CheckMethods(); + + REACT_SHOW_METHOD_SPEC_ERRORS( + 0, + "open", + " REACT_METHOD(Open, L\"open\")\n" + " void Open(DatePickerModuleWindowsSpec_DatePickerOpenParams &¶ms, ReactPromise promise) noexcept;\n"); + + REACT_SHOW_METHOD_SPEC_ERRORS( + 1, + "dismiss", + " REACT_METHOD(Dismiss, L\"dismiss\")\n" + " void Dismiss(ReactPromise promise) noexcept;\n"); + } +}; + +// TimePicker TurboModule Specs +REACT_STRUCT(TimePickerModuleWindowsSpec_TimePickerOpenParams) +struct TimePickerModuleWindowsSpec_TimePickerOpenParams { + REACT_FIELD(is24Hour) + std::optional is24Hour; + + REACT_FIELD(minuteInterval) + std::optional minuteInterval; + + REACT_FIELD(selectedTime) + std::optional selectedTime; + + REACT_FIELD(testID) + std::optional testID; +}; + +REACT_STRUCT(TimePickerModuleWindowsSpec_TimePickerResult) +struct TimePickerModuleWindowsSpec_TimePickerResult { + REACT_FIELD(action) + std::string action; + + REACT_FIELD(hour) + int32_t hour; + + REACT_FIELD(minute) + int32_t minute; +}; + +REACT_MODULE(TimePickerModuleWindows) +struct TimePickerModuleWindowsSpec : winrt::Microsoft::ReactNative::TurboModuleSpec { + static constexpr auto methods = std::tuple{ + Method{0, L"open"}, + Method{1, L"dismiss"}, + }; + + template + static constexpr void ValidateModule() noexcept { + constexpr auto methodCheckResults = CheckMethods(); + + REACT_SHOW_METHOD_SPEC_ERRORS( + 0, + "open", + " REACT_METHOD(Open, L\"open\")\n" + " void Open(TimePickerModuleWindowsSpec_TimePickerOpenParams &¶ms, ReactPromise promise) noexcept;\n"); + + REACT_SHOW_METHOD_SPEC_ERRORS( + 1, + "dismiss", + " REACT_METHOD(Dismiss, L\"dismiss\")\n" + " void Dismiss(ReactPromise promise) noexcept;\n"); + } +}; + +} // namespace ReactNativeSpecs diff --git a/windows/DateTimePickerWindows/ReactPackageProvider.cpp b/windows/DateTimePickerWindows/ReactPackageProvider.cpp index b1440192..4acbc03c 100644 --- a/windows/DateTimePickerWindows/ReactPackageProvider.cpp +++ b/windows/DateTimePickerWindows/ReactPackageProvider.cpp @@ -8,13 +8,30 @@ #include "DateTimePickerViewManager.h" #include "TimePickerViewManager.h" +#ifdef RNW_NEW_ARCH +#include "DateTimePickerFabric.h" +#include "TimePickerFabric.h" +#include "DatePickerModuleWindows.h" +#include "TimePickerModuleWindows.h" +#endif + using namespace winrt::Microsoft::ReactNative; namespace winrt::DateTimePicker::implementation { void ReactPackageProvider::CreatePackage(IReactPackageBuilder const& packageBuilder) noexcept { +#ifdef RNW_NEW_ARCH + // Register Fabric (New Architecture) components + RegisterDateTimePickerComponentView(packageBuilder); + RegisterTimePickerComponentView(packageBuilder); + + // Register TurboModules + AddAttributedModules(packageBuilder, true); +#else + // Register legacy ViewManagers (Old Architecture) packageBuilder.AddViewManager(L"DateTimePickerViewManager", []() { return winrt::make(); }); packageBuilder.AddViewManager(L"TimePickerViewManager", []() { return winrt::make(); }); +#endif } } \ No newline at end of file diff --git a/windows/DateTimePickerWindows/TimePickerFabric.cpp b/windows/DateTimePickerWindows/TimePickerFabric.cpp new file mode 100644 index 00000000..20734d36 --- /dev/null +++ b/windows/DateTimePickerWindows/TimePickerFabric.cpp @@ -0,0 +1,170 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +#include "pch.h" + +#include "TimePickerFabric.h" + +#if defined(RNW_NEW_ARCH) + +#include +#include +#include +#include + +namespace winrt::DateTimePicker { + +// TimePickerComponentView implements the Fabric architecture for TimePicker +// using XAML TimePicker hosted in a XamlIsland +struct TimePickerComponentView : public winrt::implements { + void InitializeContentIsland( + const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept { + m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{}; + m_timePicker = winrt::Microsoft::UI::Xaml::Controls::TimePicker{}; + islandView.Connect(m_xamlIsland.ContentIsland()); + + RegisterEvents(); + + // Mount the TimePicker immediately so it's visible + m_xamlIsland.Content(m_timePicker); + } + + void MountChildComponentView( + const winrt::Microsoft::ReactNative::ComponentView &childView, + uint32_t index) noexcept { + // Mount the TimePicker into the XamlIsland + m_xamlIsland.Content(m_timePicker); + } + + void UnmountChildComponentView( + const winrt::Microsoft::ReactNative::ComponentView &childView, + uint32_t index) noexcept { + // Unmount the TimePicker from the XamlIsland + m_xamlIsland.Content(nullptr); + } + + void RegisterEvents() { + // Register the TimeChanged event handler + m_timePicker.TimeChanged([this](auto &&sender, auto &&args) { + if (m_updating) { + return; + } + + if (m_eventEmitter) { + auto newTime = args.NewTime(); + + // Convert TimeSpan to hour and minute + auto totalMinutes = newTime.count() / 10000000 / 60; // 100-nanosecond intervals to minutes + auto hour = static_cast(totalMinutes / 60); + auto minute = static_cast(totalMinutes % 60); + + winrt::Microsoft::ReactNative::JSValueObject eventData; + eventData["hour"] = hour; + eventData["minute"] = minute; + + m_eventEmitter(L"topChange", std::move(eventData)); + } + }); + } + + void UpdateProps( + const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::IJSValueReader &propsReader) noexcept { + + m_updating = true; + + const winrt::Microsoft::ReactNative::JSValueObject props = + winrt::Microsoft::ReactNative::JSValueObject::ReadFrom(propsReader); + + // Update clock format (12-hour vs 24-hour) + if (props.find("is24Hour") != props.end()) { + bool is24Hour = props["is24Hour"].AsBoolean(); + m_timePicker.ClockIdentifier( + is24Hour + ? winrt::to_hstring("24HourClock") + : winrt::to_hstring("12HourClock")); + } + + // Update minute increment + if (props.find("minuteInterval") != props.end()) { + int32_t minuteInterval = static_cast(props["minuteInterval"].AsInt64()); + m_timePicker.MinuteIncrement(minuteInterval); + } + + // Update selected time + if (props.find("selectedTime") != props.end()) { + int64_t timeInMilliseconds = props["selectedTime"].AsInt64(); + auto timeInSeconds = timeInMilliseconds / 1000; + auto hours = (timeInSeconds / 3600) % 24; + auto minutes = (timeInSeconds / 60) % 60; + + // Create TimeSpan (100-nanosecond intervals) + winrt::Windows::Foundation::TimeSpan timeSpan{ + static_cast((hours * 3600 + minutes * 60) * 10000000) + }; + m_timePicker.Time(timeSpan); + } + + m_updating = false; + } + + void SetEventEmitter(winrt::Microsoft::ReactNative::Composition::ViewComponentView::EventEmitterDelegate const &eventEmitter) noexcept { + m_eventEmitter = eventEmitter; + } + +private: + winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr}; + winrt::Microsoft::UI::Xaml::Controls::TimePicker m_timePicker{nullptr}; + bool m_updating = false; + winrt::Microsoft::ReactNative::Composition::ViewComponentView::EventEmitterDelegate m_eventEmitter; +}; + +} // namespace winrt::DateTimePicker + +void RegisterTimePickerComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) { + packageBuilder.as().AddViewComponent( + L"RNTimePickerWindows", + [](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept { + builder.XamlSupport(true); + auto compBuilder = builder.as(); + + compBuilder.SetContentIslandComponentViewInitializer( + [](const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept { + auto userData = winrt::make_self(); + userData->InitializeContentIsland(islandView); + islandView.UserData(*userData); + }); + + builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::IComponentProps &newProps, + const winrt::Microsoft::ReactNative::IComponentProps &oldProps) noexcept { + auto userData = view.UserData().as(); + auto reader = newProps.as().try_as(); + if (reader) { + userData->UpdateProps(view, reader); + } + }); + + compBuilder.SetUpdateEventEmitterHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::Composition::ViewComponentView::EventEmitterDelegate &eventEmitter) noexcept { + auto userData = view.UserData().as(); + userData->SetEventEmitter(eventEmitter); + }); + + compBuilder.SetMountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::ComponentView &childView, + uint32_t index) noexcept { + auto userData = view.UserData().as(); + userData->MountChildComponentView(childView, index); + }); + + compBuilder.SetUnmountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::ComponentView &childView, + uint32_t index) noexcept { + auto userData = view.UserData().as(); + userData->UnmountChildComponentView(childView, index); + }); + }); +} + +#endif // defined(RNW_NEW_ARCH) diff --git a/windows/DateTimePickerWindows/TimePickerFabric.h b/windows/DateTimePickerWindows/TimePickerFabric.h new file mode 100644 index 00000000..37a0a827 --- /dev/null +++ b/windows/DateTimePickerWindows/TimePickerFabric.h @@ -0,0 +1,10 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +#pragma once + +#if defined(RNW_NEW_ARCH) + +void RegisterTimePickerComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder); + +#endif // defined(RNW_NEW_ARCH) diff --git a/windows/DateTimePickerWindows/TimePickerModuleWindows.cpp b/windows/DateTimePickerWindows/TimePickerModuleWindows.cpp new file mode 100644 index 00000000..cc281fa4 --- /dev/null +++ b/windows/DateTimePickerWindows/TimePickerModuleWindows.cpp @@ -0,0 +1,102 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +#include "pch.h" +#include "TimePickerModuleWindows.h" + +#include +#include + +namespace winrt::DateTimePicker { + +void TimePickerModule::Initialize(winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept { + m_reactContext = reactContext; +} + +void TimePickerModule::Open(ReactNativeSpecs::TimePickerModuleWindowsSpec_TimePickerOpenParams &¶ms, + winrt::Microsoft::ReactNative::ReactPromise promise) noexcept { + // Ensure XAML is initialized + winrt::Microsoft::ReactNative::Xaml::implementation::XamlApplication::EnsureCreated(); + + // Clean up any existing picker + CleanupPicker(); + + // Store the promise + m_currentPromise = promise; + + // Create the TimePicker + m_timePickerControl = winrt::Microsoft::UI::Xaml::Controls::TimePicker{}; + + // Set properties from params + if (params.is24Hour.has_value()) { + m_timePickerControl.ClockIdentifier(params.is24Hour.value() ? L"24HourClock" : L"12HourClock"); + } + + if (params.minuteInterval.has_value()) { + m_timePickerControl.MinuteIncrement(static_cast(params.minuteInterval.value())); + } + + if (params.selectedTime.has_value()) { + // Convert timestamp (milliseconds since midnight) to TimeSpan + int64_t totalMilliseconds = static_cast(params.selectedTime.value()); + int64_t totalSeconds = totalMilliseconds / 1000; + int32_t hour = static_cast((totalSeconds / 3600) % 24); + int32_t minute = static_cast((totalSeconds % 3600) / 60); + + winrt::Windows::Foundation::TimeSpan timeSpan{}; + timeSpan.Duration = (hour * 3600LL + minute * 60LL) * 10000000LL; // Convert to 100-nanosecond intervals + m_timePickerControl.Time(timeSpan); + } + + // Register event handler for time changed + m_timeChangedRevoker = m_timePickerControl.TimeChanged(winrt::auto_revoke, + [this](auto const& /*sender*/, auto const& args) { + if (m_currentPromise) { + auto timeSpan = args.NewTime(); + + // Convert TimeSpan to hours and minutes + int64_t totalSeconds = timeSpan.Duration / 10000000LL; // Convert from 100-nanosecond intervals + int32_t hour = static_cast(totalSeconds / 3600); + int32_t minute = static_cast((totalSeconds % 3600) / 60); + + ReactNativeSpecs::TimePickerModuleWindowsSpec_TimePickerResult result; + result.action = "timeSetAction"; + result.hour = hour; + result.minute = minute; + + m_currentPromise.Resolve(result); + m_currentPromise = nullptr; + + // Clean up the picker after resolving + CleanupPicker(); + } + }); + + // Note: Similar to DatePicker, a full implementation would show this in a + // ContentDialog or Flyout. For now, this is a simplified version. +} + +void TimePickerModule::Dismiss(winrt::Microsoft::ReactNative::ReactPromise promise) noexcept { + if (m_currentPromise) { + // Resolve the current picker promise with dismissed action + ReactNativeSpecs::TimePickerModuleWindowsSpec_TimePickerResult result; + result.action = "dismissedAction"; + result.hour = 0; + result.minute = 0; + + m_currentPromise.Resolve(result); + m_currentPromise = nullptr; + } + + CleanupPicker(); + promise.Resolve(true); +} + +void TimePickerModule::CleanupPicker() { + if (m_timePickerControl) { + m_timeChangedRevoker.revoke(); + m_timePickerControl = nullptr; + } +} + +} // namespace winrt::DateTimePicker diff --git a/windows/DateTimePickerWindows/TimePickerModuleWindows.h b/windows/DateTimePickerWindows/TimePickerModuleWindows.h new file mode 100644 index 00000000..a849d7d6 --- /dev/null +++ b/windows/DateTimePickerWindows/TimePickerModuleWindows.h @@ -0,0 +1,37 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +#pragma once + +#include "NativeModules.h" +#include "NativeModulesWindows.g.h" +#include + +namespace winrt::DateTimePicker { + +REACT_MODULE(TimePickerModule) +struct TimePickerModule { + using ModuleSpec = ReactNativeSpecs::TimePickerModuleWindowsSpec; + + REACT_INIT(Initialize) + void Initialize(winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept; + + REACT_METHOD(Open, L"open") + void Open(ReactNativeSpecs::TimePickerModuleWindowsSpec_TimePickerOpenParams &¶ms, + winrt::Microsoft::ReactNative::ReactPromise promise) noexcept; + + REACT_METHOD(Dismiss, L"dismiss") + void Dismiss(winrt::Microsoft::ReactNative::ReactPromise promise) noexcept; + + private: + winrt::Microsoft::ReactNative::ReactContext m_reactContext{nullptr}; + winrt::Microsoft::UI::Xaml::Controls::TimePicker m_timePickerControl{nullptr}; + winrt::Microsoft::ReactNative::ReactPromise m_currentPromise{nullptr}; + + // Event handlers + winrt::Microsoft::UI::Xaml::Controls::TimePicker::TimeChanged_revoker m_timeChangedRevoker; + + void CleanupPicker(); +}; + +} // namespace winrt::DateTimePicker diff --git a/windows/DateTimePickerWindows/codegen/react/components/DateTimePicker/DateTimePicker.g.h b/windows/DateTimePickerWindows/codegen/react/components/DateTimePicker/DateTimePicker.g.h new file mode 100644 index 00000000..8ed1c568 --- /dev/null +++ b/windows/DateTimePickerWindows/codegen/react/components/DateTimePicker/DateTimePicker.g.h @@ -0,0 +1,249 @@ +/* + * This file is auto-generated from DateTimePickerNativeComponent spec file in TypeScript. + */ +// clang-format off +#pragma once + +#include + +#ifdef RNW_NEW_ARCH +#include + +#include +#include +#endif // #ifdef RNW_NEW_ARCH + +#ifdef RNW_NEW_ARCH + +namespace winrt::DateTimePicker::Codegen { + +REACT_STRUCT(DateTimePickerProps) +struct DateTimePickerProps : winrt::implements { + DateTimePickerProps(winrt::Microsoft::ReactNative::ViewProps props, const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom) + : ViewProps(props) + { + if (cloneFrom) { + auto cloneFromProps = cloneFrom.as(); + selectedDate = cloneFromProps->selectedDate; + maximumDate = cloneFromProps->maximumDate; + minimumDate = cloneFromProps->minimumDate; + timeZoneOffsetInSeconds = cloneFromProps->timeZoneOffsetInSeconds; + dayOfWeekFormat = cloneFromProps->dayOfWeekFormat; + dateFormat = cloneFromProps->dateFormat; + firstDayOfWeek = cloneFromProps->firstDayOfWeek; + placeholderText = cloneFromProps->placeholderText; + accessibilityLabel = cloneFromProps->accessibilityLabel; + } + } + + void SetProp(uint32_t hash, winrt::hstring propName, winrt::Microsoft::ReactNative::IJSValueReader value) noexcept { + winrt::Microsoft::ReactNative::ReadProp(hash, propName, value, *this); + } + + REACT_FIELD(selectedDate) + std::optional selectedDate; + + REACT_FIELD(maximumDate) + std::optional maximumDate; + + REACT_FIELD(minimumDate) + std::optional minimumDate; + + REACT_FIELD(timeZoneOffsetInSeconds) + std::optional timeZoneOffsetInSeconds; + + REACT_FIELD(dayOfWeekFormat) + std::optional dayOfWeekFormat; + + REACT_FIELD(dateFormat) + std::optional dateFormat; + + REACT_FIELD(firstDayOfWeek) + std::optional firstDayOfWeek; + + REACT_FIELD(placeholderText) + std::optional placeholderText; + + REACT_FIELD(accessibilityLabel) + std::optional accessibilityLabel; + + const winrt::Microsoft::ReactNative::ViewProps ViewProps; +}; + +REACT_STRUCT(DateTimePicker_OnChange) +struct DateTimePicker_OnChange { + REACT_FIELD(newDate) + int64_t newDate{}; +}; + +struct DateTimePickerEventEmitter { + DateTimePickerEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter) + : m_eventEmitter(eventEmitter) {} + + using OnChange = DateTimePicker_OnChange; + + void onChange(OnChange &value) const { + m_eventEmitter.DispatchEvent(L"change", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) { + winrt::Microsoft::ReactNative::WriteValue(writer, value); + }); + } + + private: + winrt::Microsoft::ReactNative::EventEmitter m_eventEmitter{nullptr}; +}; + +template +struct BaseDateTimePicker { + + virtual void UpdateProps( + const winrt::Microsoft::ReactNative::ComponentView &/*view*/, + const winrt::com_ptr &newProps, + const winrt::com_ptr &/*oldProps*/) noexcept { + m_props = newProps; + } + + // UpdateLayoutMetrics will only be called if this method is overridden + virtual void UpdateLayoutMetrics( + const winrt::Microsoft::ReactNative::ComponentView &/*view*/, + const winrt::Microsoft::ReactNative::LayoutMetrics &/*newLayoutMetrics*/, + const winrt::Microsoft::ReactNative::LayoutMetrics &/*oldLayoutMetrics*/) noexcept { + } + + // UpdateState will only be called if this method is overridden + virtual void UpdateState( + const winrt::Microsoft::ReactNative::ComponentView &/*view*/, + const winrt::Microsoft::ReactNative::IComponentState &/*newState*/) noexcept { + } + + virtual void UpdateEventEmitter(const std::shared_ptr &eventEmitter) noexcept { + m_eventEmitter = eventEmitter; + } + + // MountChildComponentView will only be called if this method is overridden + virtual void MountChildComponentView(const winrt::Microsoft::ReactNative::ComponentView &/*view*/, + const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &/*args*/) noexcept { + } + + // UnmountChildComponentView will only be called if this method is overridden + virtual void UnmountChildComponentView(const winrt::Microsoft::ReactNative::ComponentView &/*view*/, + const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &/*args*/) noexcept { + } + + // Initialize will only be called if this method is overridden + virtual void Initialize(const winrt::Microsoft::ReactNative::ComponentView &/*view*/) noexcept { + } + + // CreateVisual will only be called if this method is overridden + virtual winrt::Microsoft::UI::Composition::Visual CreateVisual(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept { + return view.as().Compositor().CreateSpriteVisual(); + } + + // FinalizeUpdate will only be called if this method is overridden + virtual void FinalizeUpdate(const winrt::Microsoft::ReactNative::ComponentView &/*view*/, + winrt::Microsoft::ReactNative::ComponentViewUpdateMask /*mask*/) noexcept { + } + + + + const std::shared_ptr& EventEmitter() const { return m_eventEmitter; } + const winrt::com_ptr& Props() const { return m_props; } + +private: + winrt::com_ptr m_props; + std::shared_ptr m_eventEmitter; +}; + +template +void RegisterDateTimePickerNativeComponent( + winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder, + std::function builderCallback) noexcept { + packageBuilder.as().AddViewComponent( + L"RNDateTimePickerWindows", [builderCallback](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept { + auto compBuilder = builder.as(); + + builder.SetCreateProps([](winrt::Microsoft::ReactNative::ViewProps props, + const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom) noexcept { + return winrt::make(props, cloneFrom); + }); + + builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::IComponentProps &newProps, + const winrt::Microsoft::ReactNative::IComponentProps &oldProps) noexcept { + auto userData = view.UserData().as(); + userData->UpdateProps(view, newProps ? newProps.as() : nullptr, oldProps ? oldProps.as() : nullptr); + }); + + compBuilder.SetUpdateLayoutMetricsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::LayoutMetrics &newLayoutMetrics, + const winrt::Microsoft::ReactNative::LayoutMetrics &oldLayoutMetrics) noexcept { + auto userData = view.UserData().as(); + userData->UpdateLayoutMetrics(view, newLayoutMetrics, oldLayoutMetrics); + }); + + builder.SetUpdateEventEmitterHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter) noexcept { + auto userData = view.UserData().as(); + userData->UpdateEventEmitter(std::make_shared(eventEmitter)); + }); + + #ifndef CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS + #define CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS constexpr + #endif + + if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::FinalizeUpdate != &BaseDateTimePicker::FinalizeUpdate) { + builder.SetFinalizeUpdateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + winrt::Microsoft::ReactNative::ComponentViewUpdateMask mask) noexcept { + auto userData = view.UserData().as(); + userData->FinalizeUpdate(view, mask); + }); + } + + if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::UpdateState != &BaseDateTimePicker::UpdateState) { + builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept { + auto userData = view.UserData().as(); + userData->UpdateState(view, newState); + }); + } + + if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::MountChildComponentView != &BaseDateTimePicker::MountChildComponentView) { + builder.SetMountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &args) noexcept { + auto userData = view.UserData().as(); + return userData->MountChildComponentView(view, args); + }); + } + + if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::UnmountChildComponentView != &BaseDateTimePicker::UnmountChildComponentView) { + builder.SetUnmountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view, + const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &args) noexcept { + auto userData = view.UserData().as(); + return userData->UnmountChildComponentView(view, args); + }); + } + + compBuilder.SetViewComponentViewInitializer([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept { + auto userData = winrt::make_self(); + if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::Initialize != &BaseDateTimePicker::Initialize) { + userData->Initialize(view); + } + view.UserData(*userData); + }); + + if CONSTEXPR_SUPPORTED_ON_VIRTUAL_FN_ADDRESS (&TUserData::CreateVisual != &BaseDateTimePicker::CreateVisual) { + compBuilder.SetCreateVisualHandler([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept { + auto userData = view.UserData().as(); + return userData->CreateVisual(view); + }); + } + + // Allow app to further customize the builder + if (builderCallback) { + builderCallback(compBuilder); + } + }); +} + +} // namespace winrt::DateTimePicker::Codegen + +#endif // #ifdef RNW_NEW_ARCH diff --git a/windows/DateTimePickerWindows/packages.lock.json b/windows/DateTimePickerWindows/packages.lock.json new file mode 100644 index 00000000..6ff980f7 --- /dev/null +++ b/windows/DateTimePickerWindows/packages.lock.json @@ -0,0 +1,120 @@ +{ + "version": 1, + "dependencies": { + "native,Version=v0.0": { + "Microsoft.UI.Xaml": { + "type": "Direct", + "requested": "[2.8.0, )", + "resolved": "2.8.0", + "contentHash": "vxdHxTr63s5KVtNddMFpgvjBjUH50z7seq/5jLWmmSuf8poxg+sXrywkofUdE8ZstbpO9y3FL/IXXUcPYbeesA==", + "dependencies": { + "Microsoft.Web.WebView2": "1.0.1264.42" + } + }, + "Microsoft.Windows.CppWinRT": { + "type": "Direct", + "requested": "[2.0.230706.1, )", + "resolved": "2.0.230706.1", + "contentHash": "l0D7oCw/5X+xIKHqZTi62TtV+1qeSz7KVluNFdrJ9hXsst4ghvqQ/Yhura7JqRdZWBXAuDS0G0KwALptdoxweQ==" + }, + "boost": { + "type": "Transitive", + "resolved": "1.83.0", + "contentHash": "cy53VNMzysEMvhBixDe8ujPk67Fcj3v6FPHQnH91NYJNLHpc6jxa2xq9ruCaaJjE4M3YrGSHDi4uUSTGBWw6EQ==" + }, + "Microsoft.JavaScript.Hermes": { + "type": "Transitive", + "resolved": "0.1.23", + "contentHash": "cA9t1GjY4Yo0JD1AfA//e1lOwk48hLANfuX6GXrikmEBNZVr2TIX5ONJt5tqCnpZyLz6xGiPDgTfFNKbSfb21g==" + }, + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + }, + "common": { + "type": "Project", + "dependencies": { + "boost": "[1.83.0, )" + } + }, + "fmt": { + "type": "Project" + }, + "folly": { + "type": "Project", + "dependencies": { + "boost": "[1.83.0, )", + "fmt": "[1.0.0, )" + } + }, + "microsoft.reactnative": { + "type": "Project", + "dependencies": { + "Common": "[1.0.0, )", + "Folly": "[1.0.0, )", + "Microsoft.JavaScript.Hermes": "[0.1.23, )", + "Microsoft.UI.Xaml": "[2.8.0, )", + "ReactCommon": "[1.0.0, )", + "boost": "[1.83.0, )" + } + }, + "reactcommon": { + "type": "Project", + "dependencies": { + "Folly": "[1.0.0, )", + "boost": "[1.83.0, )" + } + } + }, + "native,Version=v0.0/win10-arm": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-arm-aot": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-arm64-aot": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-x64": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-x64-aot": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-x86": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + }, + "native,Version=v0.0/win10-x86-aot": { + "Microsoft.Web.WebView2": { + "type": "Transitive", + "resolved": "1.0.1264.42", + "contentHash": "7OBUTkzQ5VI/3gb0ufi5U4zjuCowAJwQg2li0zXXzqkM+S1kmOlivTy1R4jAW+gY5Vyg510M+qMAESCQUjrfgA==" + } + } + } +} \ No newline at end of file