DateTimePicket - add validate (#2601)

Author: M-i-k-e-l

src/components/dateTimePicker/index.tsx

@@ -1,7 +1,16 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useImperativeHandle,
+  forwardRef,
+  ForwardedRef
+} from 'react';
 import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
 import {DateTimePickerPackage as RNDateTimePicker, MomentPackage as moment} from '../../optionalDependencies';
-import {useDidUpdate} from 'hooks';
+import {useDidUpdate} from '../../hooks';
 import {Colors} from '../../style';
 import Assets from '../../assets';
 import {Constants, asBaseComponent, BaseComponentInjectedProps} from '../../commons/new';
@@ -10,7 +19,7 @@ import {DialogProps} from '../dialog';
 import View from '../view';
 import Button from '../button';
 import ExpandableOverlay, {ExpandableOverlayMethods, RenderCustomOverlayProps} from '../../incubator/expandableOverlay';
-import type {TextFieldProps} from '../../incubator/TextField';
+import type {TextFieldProps, TextFieldMethods} from '../../incubator/TextField';
 
 const MODES = {
   DATE: 'date',
@@ -98,11 +107,10 @@ export type DateTimePickerProps = Omit<TextFieldProps, 'value' | 'onChange'> & {
    * Should migrate to the new TextField implementation
    */
   migrateTextField?: boolean;
-}
+};
 
 type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedProps;
 
-
 /*eslint-disable*/
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
@@ -113,7 +121,7 @@ type DateTimePickerPropsInternal = DateTimePickerProps & BaseComponentInjectedPr
  * @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
  */
 /*eslint-enable*/
-function DateTimePicker(props: DateTimePickerPropsInternal) {
+const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: ForwardedRef<any>) => {
   const {
     value: propsValue,
     renderInput,
@@ -143,6 +151,13 @@ function DateTimePicker(props: DateTimePickerPropsInternal) {
   const [value, setValue] = useState(propsValue);
   const chosenDate = useRef(propsValue);
   const expandable = useRef<ExpandableOverlayMethods>();
+  const textField = useRef<TextFieldMethods>();
+
+  useImperativeHandle(ref, () => {
+    return {
+      validate: () => textField.current?.validate()
+    };
+  });
 
   useEffect(() => {
     if (!RNDateTimePicker) {
@@ -322,6 +337,8 @@ function DateTimePicker(props: DateTimePickerPropsInternal) {
         ) : (
           <TextField
             {...others}
+            // @ts-expect-error
+            ref={textField}
             migrate={migrateTextField}
             testID={testID}
             editable={editable}
@@ -333,7 +350,7 @@ function DateTimePicker(props: DateTimePickerPropsInternal) {
       </ExpandableOverlay>
     </>
   );
-}
+});
 
 DateTimePicker.displayName = 'DateTimePicker';
 export {DateTimePicker}; // For tests