Implement imperative MaterialRangePicker

Since this is a new module, I think we should only support the
imperative API the same way we encourage developers to use the
imperative API for the date and time pickers.

Author: sidorchukandrew

src/MaterialRangePicker.android.js

@@ -0,0 +1,57 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+
+import type {MaterialRangeProps, Range} from './types';
+import RNMaterialRangePickerAndroid from './specs/NativeModuleMaterialRangePicker';
+import {RANGE_SET_ACTION} from './constants';
+import {createDismissEvtParams, createRangeSetEvtParams} from './eventCreators';
+
+async function open({
+  onChange,
+  value = {},
+  maximumDate,
+  minimumDate,
+  onError,
+  ...props
+}: MaterialRangeProps = {}) {
+  try {
+    const result = await RNMaterialRangePickerAndroid.open({
+      startTimestamp: value.start?.getTime(),
+      endTimestamp: value.end?.getTime(),
+      maximumDate: maximumDate?.getTime(),
+      minimumDate: minimumDate?.getTime(),
+      ...props,
+    });
+
+    const {action, startTimestamp, endTimestamp, utcOffset} = result;
+
+    switch (action) {
+      case RANGE_SET_ACTION: {
+        const range: Range = {
+          start: new Date(startTimestamp),
+          end: new Date(endTimestamp),
+        };
+
+        const event = createRangeSetEvtParams(range, utcOffset);
+        onChange?.(event, range);
+        break;
+      }
+      case DISMISS_ACTION:
+      default: {
+        const [event] = createDismissEvtParams(originalValue, utcOffset);
+        onChange?.(event);
+        break;
+      }
+    }
+  } catch (error) {
+    onError?.(error);
+  }
+}
+
+function dismiss(): Promise<boolean> {
+  return RNMaterialRangePickerAndroid.dismiss();
+}
+
+export const MaterialRangePicker = {open, dismiss};

src/MaterialRangePicker.js

@@ -0,0 +1,11 @@
+/**
+ * @format
+ * @flow strict-local
+ */
+import {Platform} from 'react-native';
+
+const warn = () => {
+  console.warn(`MaterialRangePicker is not supported on: ${Platform.OS}`);
+};
+
+export const MaterialRangePicker = {open: warn, dismiss: warn};

src/constants.js

@@ -55,6 +55,7 @@ export const DAY_OF_WEEK = Object.freeze({
 
 export const DATE_SET_ACTION = 'dateSetAction';
 export const TIME_SET_ACTION = 'timeSetAction';
+export const RANGE_SET_ACTION = 'rangeSetAction';
 export const DISMISS_ACTION = 'dismissedAction';
 
 export const NEUTRAL_BUTTON_ACTION = 'neutralButtonAction';

src/eventCreators.js

@@ -1,7 +1,7 @@
 /**
  * @flow strict-local
  */
-import type {DateTimePickerEvent} from './types';
+import type {DateTimePickerEvent, RangePickerEvent, Range} from './types';
 import {ANDROID_EVT_TYPE, EVENT_TYPE_SET} from './constants';
 
 export const createDateTimeSetEvtParams = (
@@ -20,6 +20,20 @@ export const createDateTimeSetEvtParams = (
   ];
 };
 
+export const createRangeSetEvtParams = (
+  range: Range,
+  utcOffset: number,
+): RangePickerEvent => {
+  return {
+    type: EVENT_TYPE_SET,
+    nativeEvent: {
+      startTimestamp: range.start ? range.start.getTime() : 0,
+      endTimestamp: range.end ? range.end.getTime() : 0,
+      utcOffset,
+    },
+  };
+};
+
 export const createDismissEvtParams = (
   date: Date,
   utcOffset: number,

src/index.d.ts

@@ -206,6 +206,28 @@ export type AndroidNativeProps = Readonly<
     }
 >;
 
+export type MaterialRangePickerProps = {
+  title?: string;
+  maximumDate?: Date;
+  minimumDate?: Date;
+  timeZoneOffsetInMinutes?: number;
+  timeZoneName?: string;
+  testID?: string;
+  initialInputMode?: string;
+  dialogButtons?: {
+    positive: {label: string};
+    negative: {label: string};
+  };
+  fullscreen?: boolean;
+  value?: Range;
+  onChange?: (event: RangePickerEvent, range?: Range) => void;
+};
+
+type Range = {
+  start?: Date;
+  end?: Date;
+};
+
 export type DatePickerOptions = DateOptions & {
   display?: Display;
 };
@@ -251,9 +273,15 @@ declare namespace DateTimePickerAndroidType {
   const dismiss: (mode: AndroidNativeProps['mode']) => Promise<boolean>;
 }
 
+declare namespace MaterialRangePickerType {
+  const open: (args: MaterialRangePickerProps) => void;
+  const dismiss: () => Promise<boolean>;
+}
+
 declare const RNDateTimePicker: FC<
   IOSNativeProps | AndroidNativeProps | WindowsNativeProps
 >;
 
 export default RNDateTimePicker;
 export const DateTimePickerAndroid: typeof DateTimePickerAndroidType;
+export const MaterialRangePicker: typeof MaterialRangePickerType;

src/index.js

@@ -5,5 +5,6 @@
 import RNDateTimePicker from './datetimepicker';
 export * from './eventCreators';
 export {DateTimePickerAndroid} from './DateTimePickerAndroid';
+export {MaterialRangePicker} from './MaterialRangePicker';
 
 export default RNDateTimePicker;

src/types.js

@@ -297,3 +297,36 @@ export type WindowsNativeProps = $ReadOnly<{|
   minuteInterval?: number,
   accessibilityLabel?: string,
 |}>;
+
+export type MaterialRangeProps = $ReadOnly<{|
+  title?: string,
+  maximumDate?: Date,
+  minimumDate?: Date,
+  timeZoneOffsetInMinutes?: number,
+  timeZoneName?: string,
+  testID?: string,
+  initialInputMode?: string,
+  dialogButtons?: {
+    positive: {label: string},
+    negative: {label: string},
+  },
+  fullscreen?: boolean,
+  value?: Range,
+  onChange?: ?(event: RangePickerEvent, range?: Range) => void,
+|}>;
+
+export type RangePickerEvent = {
+  type: 'set' | 'dismiss',
+  nativeEvent: $ReadOnly<{
+    startTimestamp: number,
+    endTimestamp: number,
+    utcOffset: number,
+    ...
+  }>,
+  ...
+};
+
+export type Range = $ReadOnly<{|
+  start?: Date,
+  end?: Date,
+|}>;