[macos] Add MacOS implementation

src/datetimepicker.macos.js

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * This is a controlled component version of RNDateTimePicker
+ *
+ * @format
+ * @flow strict-local
+ */
+import RNDateTimePicker from './picker';
+import {dateToMilliseconds, sharedPropsValidation} from './utils';
+import { EVENT_TYPE_SET } from './constants';
+import * as React from 'react';
+
+import type {
+  DateTimePickerEvent,
+  NativeEventIOS,
+  IOSNativeProps,
+} from './types';
+
+export default function Picker({
+  value,
+  maximumDate,
+  minimumDate,
+  minuteInterval,
+  timeZoneOffsetInMinutes,
+  onChange,
+  pickerStyle = 'textfield-stepper',
+  mode = 'range',
+  ...other
+}: IOSNativeProps): React.Node {
+  sharedPropsValidation({value, timeZoneOffsetInMinutes});
+
+  const _onChange = (event: NativeEventIOS) => {
+    const timestamp = event.nativeEvent.timestamp;
+    const unifiedEvent: DateTimePickerEvent = {
+      ...event,
+      type: EVENT_TYPE_SET,
+    };
+
+    const date = timestamp !== undefined ? new Date(timestamp) : undefined;
+
+    onChange && onChange(unifiedEvent, date);
+  };
+
+  return (
+    <RNDateTimePicker
+      date={dateToMilliseconds(value)}
+      maximumDate={dateToMilliseconds(maximumDate)}
+      minimumDate={dateToMilliseconds(minimumDate)}
+      mode={mode}
+      pickerStyle={pickerStyle}
+      timeZoneOffsetInMinutes={timeZoneOffsetInMinutes}
+      onChange={_onChange}
+      onStartShouldSetResponder={() => true}
+      onResponderTerminationRequest={() => false}
+    />
+  );
+}

src/picker.macos.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+import RNDateTimePicker from './specs/DateTimePickerNativeComponent';
+
+export default RNDateTimePicker;

src/specs/DateTimePickerNativeComponent.js

@@ -16,25 +16,28 @@ type DateTimePickerEvent = $ReadOnly<{|
   utcOffset: Int32,
 |}>;
 
+type DateTimePickerMode = 'date' | 'time' | 'datetime' | 'countdown' | 'single' | 'range';
+type ThemeVariant = 'dark' | 'light' | 'unspecified'
+type DisplayStyle = 'default' | 'spinner' | 'compact' | 'inline';
+type PickerStyle = 'textfield-stepper' | 'clock-calendar' | 'textfield';
+
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
-  accentColor?: ?ColorValue,
-  date?: ?Double,
-  displayIOS?: WithDefault<
-    'default' | 'spinner' | 'compact' | 'inline',
-    'default',
-  >,
-  locale?: ?string,
+  onChange?: ?BubblingEventHandler<DateTimePickerEvent>,
+  onPickerDismiss?: ?BubblingEventHandler<null>,
   maximumDate?: ?Double,
   minimumDate?: ?Double,
+  date?: ?Double,
+  locale?: ?string,
   minuteInterval?: ?Int32,
-  mode?: WithDefault<'date' | 'time' | 'datetime' | 'countdown', 'date'>,
-  onChange?: ?BubblingEventHandler<DateTimePickerEvent>,
-  onPickerDismiss?: ?BubblingEventHandler<null>,
-  textColor?: ?ColorValue,
-  themeVariant?: WithDefault<'dark' | 'light' | 'unspecified', 'unspecified'>,
-  timeZoneName?: ?string,
+  mode?: WithDefault<DateTimePickerMode, 'date'>,
   timeZoneOffsetInMinutes?: ?Double,
+  timeZoneName?: ?string,
+  textColor?: ?ColorValue,
+  accentColor?: ?ColorValue,
+  themeVariant?: WithDefault<ThemeVariant, 'unspecified'>,
+  displayIOS?: WithDefault<DisplayStyle, 'default'>,
+  pickerStyleMacOSX?: WithDefault<PickerStyle, 'textfield-stepper'>,
   enabled?: WithDefault<boolean, true>,
 |}>;