react-native-ui-lib 7.46.3 → 8.0.0

package/src/components/dateTimePicker/index.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { BaseComponentInjectedProps } from '../../commons/new';
 import { TextFieldProps } from '../textField';
-import type { DialogMigrationProps } from '../../incubator/dialog';
+import type { DialogProps } from '../dialog';
 import { ButtonProps } from '../button';
 import { OldApiProps } from './useOldApi';
 export type DateTimePickerMode = 'date' | 'time';
-export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & DialogMigrationProps & {
+export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | 'onChange'> & {
     /**
      * The type of picker to display ('date' or 'time')
      */
@@ -15,6 +15,10 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      * The initial value to set the picker to. Defaults to device's date / time
      */
     value?: Date;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps;
     /**
      * The onChange callback
      */
@@ -92,7 +96,6 @@ export type DateTimePickerProps = OldApiProps & Omit<TextFieldProps, 'value' | '
      */
     cancelButtonProps?: ButtonProps;
 };
-type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx
@@ -101,7 +104,185 @@ type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedPr
  * @extendsLink: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerPropsInternal & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
+    /**
+     * The type of picker to display ('date' or 'time')
+     */
+    mode?: DateTimePickerMode | undefined;
+    /**
+     * The initial value to set the picker to. Defaults to device's date / time
+     */
+    value?: Date | undefined;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps | undefined;
+    /**
+     * The onChange callback
+     */
+    onChange?: ((date: Date) => void) | undefined;
+    /**
+     * Should this input be editable or disabled
+     */
+    editable?: boolean | undefined;
+    /**
+     * The minimum date or time value to use
+     */
+    minimumDate?: Date | undefined;
+    /**
+     * The maximum date or time value to use
+     */
+    maximumDate?: Date | undefined;
+    /**
+     * 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) | undefined;
+    /**
+     * Allows changing of the locale of the component (iOS only)
+     */
+    locale?: string | undefined;
+    /**
+     * Allows changing of the time picker to a 24 hour format (Android only)
+     */
+    is24Hour?: boolean | undefined;
+    /**
+     * 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 | undefined;
+    /**
+     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
+     */
+    timeZoneOffsetInMinutes?: number | undefined;
+    /**
+     * style to apply to the iOS dialog header
+     */
+    headerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Render custom input
+     */
+    renderInput?: ((props: Omit<DateTimePickerProps, 'value'> & {
+        value?: string;
+    }) => React.ReactElement) | undefined;
+    /**
+     * Override system theme variant (dark or light mode) used by the date picker.
+     */
+    themeVariant?: "light" | "dark" | undefined;
+    /**
+     * The component testID
+     */
+    testID?: string | undefined;
+    /**
+     * Allows changing the visual display of the picker
+     */
+    display?: string | undefined;
+    /**
+     * Text color of the wheel picker items
+     */
+    textColor?: string | undefined;
+    /**
+     * Background color of the wheel picker
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Confirm button props
+     */
+    confirmButtonProps?: ButtonProps | undefined;
+    /**
+     * Cancel button props
+     */
+    cancelButtonProps?: ButtonProps | undefined;
+} & BaseComponentInjectedProps & React.RefAttributes<any>>;
 export { DateTimePicker };
-declare const _default: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<OldApiProps & Omit<TextFieldProps, "value" | "onChange"> & {
+    /**
+     * The type of picker to display ('date' or 'time')
+     */
+    mode?: DateTimePickerMode | undefined;
+    /**
+     * The initial value to set the picker to. Defaults to device's date / time
+     */
+    value?: Date | undefined;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps | undefined;
+    /**
+     * The onChange callback
+     */
+    onChange?: ((date: Date) => void) | undefined;
+    /**
+     * Should this input be editable or disabled
+     */
+    editable?: boolean | undefined;
+    /**
+     * The minimum date or time value to use
+     */
+    minimumDate?: Date | undefined;
+    /**
+     * The maximum date or time value to use
+     */
+    maximumDate?: Date | undefined;
+    /**
+     * 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) | undefined;
+    /**
+     * Allows changing of the locale of the component (iOS only)
+     */
+    locale?: string | undefined;
+    /**
+     * Allows changing of the time picker to a 24 hour format (Android only)
+     */
+    is24Hour?: boolean | undefined;
+    /**
+     * 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 | undefined;
+    /**
+     * Allows changing of the timeZone of the date picker. By default it uses the device's time zone (iOS only)
+     */
+    timeZoneOffsetInMinutes?: number | undefined;
+    /**
+     * style to apply to the iOS dialog header
+     */
+    headerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Render custom input
+     */
+    renderInput?: ((props: Omit<DateTimePickerProps, "value"> & {
+        value?: string | undefined;
+    }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
+    /**
+     * Override system theme variant (dark or light mode) used by the date picker.
+     */
+    themeVariant?: "light" | "dark" | undefined;
+    /**
+     * The component testID
+     */
+    testID?: string | undefined;
+    /**
+     * Allows changing the visual display of the picker
+     */
+    display?: string | undefined;
+    /**
+     * Text color of the wheel picker items
+     */
+    textColor?: string | undefined;
+    /**
+     * Background color of the wheel picker
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Confirm button props
+     */
+    confirmButtonProps?: ButtonProps | undefined;
+    /**
+     * Cancel button props
+     */
+    cancelButtonProps?: ButtonProps | undefined;
+} & React.RefAttributes<any>>;
 export default _default;

package/src/components/dateTimePicker/index.js

@@ -42,7 +42,6 @@ const DateTimePicker = forwardRef((props, ref) => {
     themeVariant = Colors.getScheme(),
     onChange,
     dialogProps,
-    migrateDialog,
     textColor = Colors.$textDefault,
     backgroundColor = Colors.$backgroundDefault,
     headerStyle,
@@ -150,10 +149,10 @@ const DateTimePicker = forwardRef((props, ref) => {
     return <RNDateTimePicker mode={mode} value={value || new Date()} onChange={handleChange} minimumDate={minimumDate} maximumDate={maximumDate} locale={locale} is24Hour={is24Hour} minuteInterval={minuteInterval} timeZoneOffsetInMinutes={timeZoneOffsetInMinutes} display={display} textColor={textColor} style={dateTimePickerStyle} themeVariant={themeVariant} testID={`${testID}.picker`} />;
   }, [mode, value, handleChange, minimumDate, maximumDate, locale, is24Hour, minuteInterval, timeZoneOffsetInMinutes, themeVariant]);
   const renderIOSExpandableOverlay = () => {
-    return <>
+    return <View>
         {renderHeader()}
         {renderDateTimePicker()}
-      </>;
+      </View>;
   };
   const renderAndroidDateTimePicker = useCallback(({
     visible
@@ -165,7 +164,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   return <>
       <ExpandableOverlay
     // @ts-expect-error
-    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} migrateDialog={migrateDialog} disabled={editable === false}
+    ref={expandable} expandableContent={Constants.isIOS ? renderIOSExpandableOverlay() : undefined} useDialog dialogProps={_dialogProps} 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} testID={`${testID}.overlay`}>
         {renderInput ? renderInput({

package/src/components/dialog/dialog.api.json

@@ -2,59 +2,58 @@
   "name": "Dialog",
   "category": "overlays",
   "description": "Component for displaying custom content inside a popup dialog",
-  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)",
+  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center).  \nWhen adding a `FlatList` \\ `ScrollView` to the content be sure to use one from `react-native-gesture-handler` (see [this link](https://github.com/software-mansion/react-native-gesture-handler/issues/1380) for `SectionList`).",
   "modifiers": ["alignment"],
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js",
-  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.tsx",
   "props": [
-    {"name": "visible", "type": "boolean", "description": "Control visibility of the component"},
-    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press"},
+    {"name": "visible", "type": "boolean", "description": "The visibility of the dialog"},
+    {"name": "headerProps", "type": "DialogHeaderProps", "description": "The Dialog's header (title, subtitle etc)"},
     {
-      "name": "overlayBackgroundColor",
-      "type": "string",
-      "description": "The color of the overlay background",
-      "default": "Colors.rgba(Colors.grey10, 0.6)"
+      "name": "containerStyle",
+      "type": "ViewStyle",
+      "description": "The Dialog`s container style (it is set to {position: 'absolute'})"
     },
-    {"name": "width", "type": "string | number", "description": "Width", "default": "90%"},
-    {"name": "height", "type": "string | number", "description": "Height", "default": "undefined"},
     {
-      "name": "panDirection",
-      "type": "UP | DOWN | LEFT | RIGHT",
-      "description": "The direction of the allowed pan",
-      "default": "PanningProvider.Directions.DOWN"
+      "name": "containerProps",
+      "type": "ViewProps",
+      "description": "Extra props for the container"
     },
-    {"name": "onDismiss", "type": "(props?: any) => void", "description": "Called when clicking on the background"},
     {
-      "name": "onDialogDismissed",
-      "type": "(props: any) => void",
-      "description": "Called once the dialog has been dismissed completely"
+      "name": "onDismiss",
+      "type": "(props?: DialogProps) => void",
+      "description": "Callback that is called after the dialog's dismiss (after the animation has ended)."
     },
     {
-      "name": "renderPannableHeader",
-      "type": "(props: any) => JSX.Element",
-      "description": "For scrollable content (the children of the dialog)",
-      "note": "If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'"
+      "name": "direction",
+      "type": "up | down | left | right",
+      "description": "The direction from which and to which the dialog is animating \\ panning (default down).",
+      "default": "down"
     },
     {
-      "name": "pannableHeaderProps",
-      "type": "any",
-      "description": "The props that will be passed to the pannable header"
+      "name": "showClose",
+      "type": "boolean",
+      "description": "Show the close button"
     },
+    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press."},
+    {"name": "modalProps", "type": "ModalProps", "description": "Pass props to the dialog modal"},
     {
-      "name": "useSafeArea",
+      "name": "disableAnimation",
       "type": "boolean",
-      "description": "In iOS, use safe area, in case component attached to the bottom"
+      "description": "Disable animation (default is false)  \nIn some cases you might want to disable the animation (probably for Android only), this is when the dialog is scrollable and has touchable items in the scrollable area.  \nThis is a temporary solution for a reanimated + RN77\\8 bug.  \nSee https://github.com/software-mansion/react-native-reanimated/issues/6659 and https://github.com/facebook/react-native/issues/49694"
     },
-    {"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "Used to locate this view in end-to-end tests.  \nThe container has the original id.  \nSupported inner elements IDs:  \n`${TestID}.modal` - the Modal's id.  \n`${TestID}.overlayFadingBackground` - the fading background id."
+    }
   ],
   "snippet": [
-    "<Dialog", 
-    " visible={isVisible$1}",
-    " onDismiss={() => console.log('dismissed')$2}",
-    " panDirection={PanningProvider.Directions.DOWN$3}",
+    "<Dialog",
+    "  visible={isVisible$1}",
+    "  onDismiss={() => console.log('dismissed')$2}",
+    "  direction={Dialog.directions.DOWN$3}",
     ">",
-    " <Text text60>Content</Text>$4",
+    "  <Text text60>Content</Text>$4",
     "</Dialog>"
   ]
 }

package/src/{incubator → components}/dialog/dialogHeader.api.json

@@ -1,8 +1,8 @@
 {
   "name": "Dialog.Header",
-  "category": "incubator",
+  "category": "overlays",
   "description": "Component for displaying the header of a popup dialog",
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.tsx",
   "props": [
     {"name": "title", "type": "string", "description": "Title"},
     {"name": "titleStyle", "type": "StyleProp<TextStyle>", "description": "Title text style"},

package/src/components/dialog/index.d.ts

@@ -1,107 +1,15 @@
-import React, { Component } from 'react';
-import { StyleProp, ViewStyle, ModalPropsIOS, AccessibilityProps, type DimensionValue } from 'react-native';
-import { AlignmentModifiers } from '../../commons/modifiers';
-import { ModalProps } from '../modal';
-import { PanningDirections, PanningDirectionsEnum } from '../panningViews/panningProvider';
-export { PanningDirections as DialogDirections, PanningDirectionsEnum as DialogDirectionsEnum };
-interface RNPartialProps extends Pick<ModalPropsIOS, 'supportedOrientations'>, Pick<AccessibilityProps, 'accessibilityLabel'> {
-}
-export interface DialogProps extends AlignmentModifiers, RNPartialProps {
-    /**
-     * Control visibility of the dialog
-     */
-    visible?: boolean;
-    /**
-     * Dismiss callback for when clicking on the background
-     */
-    onDismiss?: (props?: any) => void;
-    /**
-     * Whether or not to ignore background press
-     */
-    ignoreBackgroundPress?: boolean;
-    /**
-     * The color of the overlay background
-     */
-    overlayBackgroundColor?: string;
-    /**
-     * The dialog width (default: 90%)
-     */
-    width?: DimensionValue;
-    /**
-     * The dialog height (default: undefined)
-     */
-    height?: DimensionValue;
-    /**
-     * The direction of the allowed pan (default is DOWN).
-     * Types: UP, DOWN, LEFT and RIGHT (using PanningProvider.Directions.###).
-     * Pass null to remove pan.
-     */
-    panDirection?: PanningDirections;
-    /**
-     * Whether or not to handle SafeArea
-     */
-    useSafeArea?: boolean;
-    /**
-     * Called once the dialog has been dismissed completely
-     */
-    onDialogDismissed?: (props: any) => void;
-    /**
-     * If this is added only the header will be pannable;
-     * this allows for scrollable content (the children of the dialog)
-     * props are transferred to the renderPannableHeader
-     */
-    renderPannableHeader?: (props: any) => JSX.Element;
-    /**
-     * The props that will be passed to the pannable header
-     */
-    pannableHeaderProps?: any;
-    /**
-     * Additional props for the modal.
-     */
-    modalProps?: ModalProps;
-    /**
-     * The Dialog`s container style
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-    /**
-     * Used as a testing identifier
-     */
-    testID?: string;
+import React from 'react';
+import DialogHeader from './DialogHeader';
+import { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps } from './types';
+export { DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps };
+export interface DialogStatics {
+    directions: typeof DialogDirectionsEnum;
+    Header: typeof DialogHeader;
+}
+export interface DialogImperativeMethods {
+    dismiss: () => void;
+}
+declare const _default: React.ForwardRefExoticComponent<import("./types")._DialogProps & {
     children?: React.ReactNode;
-}
-interface DialogState {
-    alignments: AlignmentModifiers;
-    modalVisibility?: boolean;
-    dialogVisibility?: boolean;
-    fadeOut?: boolean;
-}
-/**
- * @description: Dialog component for displaying custom content inside a popup dialog
- * @notes: Use alignment modifiers to control the dialog position
- * (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)
- * @modifiers: alignment
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DialogScreen.js
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Dialog/Dialog.gif?raw=true
- */
-declare class Dialog extends Component<DialogProps, DialogState> {
-    static displayName: string;
-    static directions: typeof PanningDirectionsEnum;
-    static defaultProps: {
-        overlayBackgroundColor: string | undefined;
-    };
-    private styles;
-    constructor(props: DialogProps);
-    UNSAFE_componentWillReceiveProps(nextProps: DialogProps): void;
-    setAlignment(): void;
-    onFadeDone: () => void;
-    _onDismiss: () => void;
-    onDismiss: () => void;
-    hideDialogView: () => void;
-    renderPannableHeader: (directions: PanningDirections[]) => React.JSX.Element | undefined;
-    getContainerType: () => React.ForwardRefExoticComponent<import("../view").ViewProps & React.RefAttributes<import("react-native").View>> | React.ComponentClass<import("../panningViews/panListenerView").PanListenerViewProps, any>;
-    renderDialogView: () => React.JSX.Element;
-    renderDialogContainer: () => React.JSX.Element;
-    render: () => React.JSX.Element;
-}
-declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<any>> & typeof Dialog;
+} & React.RefAttributes<any>> & DialogStatics;
 export default _default;