Infra/date time picker allow migration to new dialog (#2945)

M-i-k-e-l · web-flow · commit ba17fc0e62a3 · 2024-02-12T14:26:35.000+02:00
* Fix NumberInput API

* DateTimePicker - allow migration to new the Dialog via migrateDialog

* Add type keyword and prettify
diff --git a/demo/src/screens/componentScreens/DateTimePickerScreen.tsx b/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -62,12 +62,14 @@ export default class DateTimePickerScreen extends Component<{}, State> {
         <View padding-page>
           <Text text40>Date Time Picker</Text>
           <DateTimePicker
+            migrateDialog
             containerStyle={{marginVertical: 20}}
             label={'Date'}
             placeholder={'Select a date'}
             // value={new Date('October 13, 2014')}
           />
           <DateTimePicker
+            migrateDialog
             mode={'time'}
             label={'Time'}
             placeholder={'Select time'}
@@ -78,12 +80,14 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             Disabled
           </Text>
           <DateTimePicker
+            migrateDialog
             containerStyle={{marginBottom: 20}}
             editable={false}
             label={'Date'}
             placeholder={'Select a date'}
           />
           <DateTimePicker
+            migrateDialog
             editable={false}
             mode={'time'}
             label={'Time'}
@@ -104,6 +108,7 @@ export default class DateTimePickerScreen extends Component<{}, State> {
             </View>
           </View>
           <DateTimePicker
+            migrateDialog
             containerStyle={{marginVertical: 20}}
             renderInput={this.renderCustomInput}
             mode={mode}
diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx
@@ -15,6 +15,7 @@ import {Colors} from '../../style';
 import Assets from '../../assets';
 import {Constants, asBaseComponent, BaseComponentInjectedProps} from '../../commons/new';
 import TextField, {TextFieldProps, TextFieldMethods} from '../textField';
+import type {DialogMigrationProps} from '../../incubator/Dialog';
 import {DialogProps} from '../dialog';
 import View from '../view';
 import Button from '../button';
@@ -23,78 +24,76 @@ import useOldApi, {OldApiProps} from './useOldApi';
 
 export type DateTimePickerMode = 'date' | 'time';
 
-export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & {
-  /**
-   * The type of picker to display ('date' or 'time')
-   */
-  mode?: DateTimePickerMode;
-  /**
-   * The initial value to set the picker to. Defaults to device's date / time
-   */
-  value?: Date;
-  /**
-   * The onChange callback
-   */
-  onChange?: (date: Date) => void;
-  /**
-   * Should this input be editable or disabled
-   */
-  editable?: boolean;
-  /**
-   * The minimum date or time value to use
-   */
-  minimumDate?: Date;
-  /**
-   * The maximum date or time value to use
-   */
-  maximumDate?: Date;
-  /**
-   * A callback function to format the time or date
-   * @param mode the type of the picker ('date' or 'time')
-   * @returns the formatted string to display
-   */
-  dateTimeFormatter?: (value: Date, mode: DateTimePickerMode) => string;
-  /**
-   * Allows changing of the locale of the component (iOS only)
-   */
-  locale?: string;
-  /**
-   * Allows changing of the time picker to a 24 hour format (Android only)
-   */
-  is24Hour?: boolean;
-  /**
-   * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
-   */
-  minuteInterval?: number;
-  /**
-   * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
-   */
-  timeZoneOffsetInMinutes?: number;
-  /**
-   * Props to pass the Dialog component
-   */
-  dialogProps?: DialogProps;
-  /**
-   * style to apply to the iOS dialog header
-   */
-  headerStyle?: StyleProp<ViewStyle>;
-  /**
-   * Render custom input
-   */
-  renderInput?: (props: Omit<DateTimePickerProps, 'value'> & {value?: string}) => React.ReactElement;
-  /**
-   * Override system theme variant (dark or light mode) used by the date picker.
-   */
-  themeVariant?: 'light' | 'dark';
-  /**
-   * The component testID
-   */
-  testID?: string;
-  /**
-   * Allows changing the visual display of the picker
-   */
-  display?: string;
-};
+export type DateTimePickerProps = OldApiProps &
+  Omit<TextFieldProps, 'value' | 'onChange'> &
+  DialogMigrationProps & {
+    /**
+     * The type of picker to display ('date' or 'time')
+     */
+    mode?: DateTimePickerMode;
+    /**
+     * The initial value to set the picker to. Defaults to device's date / time
+     */
+    value?: Date;
+    /**
+     * The onChange callback
+     */
+    onChange?: (date: Date) => void;
+    /**
+     * Should this input be editable or disabled
+     */
+    editable?: boolean;
+    /**
+     * The minimum date or time value to use
+     */
+    minimumDate?: Date;
+    /**
+     * The maximum date or time value to use
+     */
+    maximumDate?: Date;
+    /**
+     * A callback function to format the time or date
+     * @param mode the type of the picker ('date' or 'time')
+     * @returns the formatted string to display
+     */
+    dateTimeFormatter?: (value: Date, mode: DateTimePickerMode) => string;
+    /**
+     * Allows changing of the locale of the component (iOS only)
+     */
+    locale?: string;
+    /**
+     * Allows changing of the time picker to a 24 hour format (Android only)
+     */
+    is24Hour?: boolean;
+    /**
+     * The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 (iOS only)
+     */
+    minuteInterval?: number;
+    /**
+     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
+     */
+    timeZoneOffsetInMinutes?: number;
+    /**
+     * style to apply to the iOS dialog header
+     */
+    headerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Render custom input
+     */
+    renderInput?: (props: Omit<DateTimePickerProps, 'value'> & {value?: string}) => React.ReactElement;
+    /**
+     * Override system theme variant (dark or light mode) used by the date picker.
+     */
+    themeVariant?: 'light' | 'dark';
+    /**
+     * The component testID
+     */
+    testID?: string;
+    /**
+     * Allows changing the visual display of the picker
+     */
+    display?: string;
+  };
 
 type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
 
@@ -128,6 +127,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
     themeVariant = Colors.getScheme(),
     onChange,
     dialogProps,
+    migrateDialog,
     headerStyle,
     testID,
     display = Constants.isIOS ? 'spinner' : undefined,
@@ -234,12 +234,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
           onPress={toggleExpandableOverlay}
           testID={`${testID}.cancel`}
         />
-        <Button
-          link
-          iconSource={Assets.icons.check}
-          onPress={onDonePressed}
-          testID={`${testID}.done`}
-        />
+        <Button link iconSource={Assets.icons.check} onPress={onDonePressed} testID={`${testID}.done`}/>
       </View>
     );
   };
@@ -302,6 +297,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
         expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined}
         useDialog
         dialogProps={_dialogProps}
+        migrateDialog={migrateDialog}
         disabled={editable === false}
         // NOTE: Android picker comes with its own overlay built-in therefor we're not using ExpandableOverlay for it
         renderCustomOverlay={Constants.isAndroid ? renderAndroidDateTimePicker : undefined}
diff --git a/src/incubator/Dialog/index.tsx b/src/incubator/Dialog/index.tsx
@@ -24,8 +24,8 @@ import Modal from '../../components/modal';
 import {extractAlignmentsValues} from '../../commons/modifiers';
 import useHiddenLocation from '../hooks/useHiddenLocation';
 import DialogHeader from './DialogHeader';
-import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps} from './types';
-export {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps};
+import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps} from './types';
+export {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps, DialogMigrationProps};
 
 const THRESHOLD_VELOCITY = 750;
 
diff --git a/src/incubator/Dialog/types.ts b/src/incubator/Dialog/types.ts
@@ -1,6 +1,7 @@
 import {PropsWithChildren, ReactElement} from 'react';
 import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {AlignmentModifiers} from '../../commons/modifiers';
+import {DialogProps as DialogPropsOld} from '../../components/dialog';
 import {ModalProps} from '../../components/modal';
 import {ViewProps} from '../../components/view';
 import {TextProps} from '../../components/text';
@@ -122,3 +123,25 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
 }
 
 export type DialogProps = PropsWithChildren<_DialogProps>;
+
+// For migration purposes
+export interface _DialogPropsOld {
+  /**
+   * The props to pass to the dialog expandable container
+   */
+  dialogProps?: DialogPropsOld;
+  migrateDialog?: false;
+}
+
+export interface _DialogPropsNew {
+  /**
+   * The props to pass to the dialog expandable container
+   */
+  dialogProps?: DialogProps;
+  /**
+   * Migrate the Dialog to DialogNew (make sure you use only new props in dialogProps)
+   */
+  migrateDialog: true;
+}
+
+export type DialogMigrationProps = _DialogPropsOld | _DialogPropsNew;
diff --git a/src/incubator/expandableOverlay/index.tsx b/src/incubator/expandableOverlay/index.tsx
@@ -3,8 +3,8 @@ import React, {useCallback, useState, forwardRef, PropsWithChildren, useImperati
 import TouchableOpacity, {TouchableOpacityProps} from '../../components/touchableOpacity';
 import View from '../../components/view';
 import Modal, {ModalProps, ModalTopBarProps} from '../../components/modal';
-import DialogOld, {DialogProps as DialogPropsOld} from '../../components/dialog';
-import DialogNew, {DialogProps as DialogPropsNew} from '../Dialog';
+import DialogOld from '../../components/dialog';
+import DialogNew, {DialogMigrationProps} from '../Dialog';
 import {Colors} from 'style';
 
 export interface ExpandableOverlayMethods {
@@ -17,29 +17,8 @@ export interface RenderCustomOverlayProps extends ExpandableOverlayMethods {
   visible: boolean;
 }
 
-export interface _DialogPropsOld {
-  /**
-   * The props to pass to the dialog expandable container
-   */
-  dialogProps?: DialogPropsOld;
-  migrateDialog?: false;
-}
-
-export interface _DialogPropsNew {
-  /**
-   * The props to pass to the dialog expandable container
-   */
-  dialogProps?: DialogPropsNew;
-  /**
-   * Migrate the Dialog to DialogNew (make sure you use only new props in dialogProps)
-   */
-  migrateDialog: true;
-}
-
-export type DialogProps = _DialogPropsOld | _DialogPropsNew;
-
 export type ExpandableOverlayProps = TouchableOpacityProps &
-  DialogProps &
+  DialogMigrationProps &
   PropsWithChildren<{
     /**
      * The content to render inside the expandable modal/dialog
