feat(mui): do not use mui pickers anymore

Author: rvsia

packages/mui-component-mapper/src/date-picker/date-picker.js

@@ -2,13 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import MUIDatePicker from '@mui/lab/DatePicker';
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
 
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';
 import { meta, input } from '@data-driven-forms/common/prop-types-templates';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import { TextField } from '@mui/material';
 
 const DatePicker = (props) => {
   const {
@@ -22,31 +21,32 @@ const DatePicker = (props) => {
     description,
     validateOnMount,
     meta,
-    locale = 'en',
     FormFieldGridProps,
-    MuiPickersUtilsProviderProps,
     DatePickerProps,
   } = useFieldApi(props);
   const invalid = validationError(meta, validateOnMount);
 
   return (
     <FormFieldGrid {...FormFieldGridProps}>
-      <LocalizationProvider locale={locale} adapter={AdapterDateFns} {...MuiPickersUtilsProviderProps}>
-        <MUIDatePicker
-          fullWidth
-          margin="normal"
-          label={label}
-          helperText={invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description}
-          disabled={isDisabled || isReadOnly}
-          placeholder={placeholder}
-          required={isRequired}
-          error={!!invalid}
-          readOnly={isReadOnly}
-          {...input}
-          value={input.value || null}
-          {...DatePickerProps}
-        />
-      </LocalizationProvider>
+      <MUIDatePicker
+        renderInput={(props) => (
+          <TextField
+            {...props}
+            fullWidth
+            margin="normal"
+            label={label}
+            helperText={invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description}
+            placeholder={placeholder}
+            required={isRequired}
+            error={!!invalid}
+          />
+        )}
+        disabled={isDisabled || isReadOnly}
+        readOnly={isReadOnly}
+        {...input}
+        value={input.value || null}
+        {...DatePickerProps}
+      />
     </FormFieldGrid>
   );
 };
@@ -61,7 +61,6 @@ DatePicker.propTypes = {
   label: PropTypes.node,
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
-  locale: PropTypes.string,
   description: PropTypes.node,
   FormFieldGridProps: PropTypes.object,
   MuiPickersUtilsProviderProps: PropTypes.object,
@@ -70,7 +69,6 @@ DatePicker.propTypes = {
 
 DatePicker.defaultProps = {
   FormFieldGridProps: {},
-  MuiPickersUtilsProviderProps: {},
   DatePickerProps: {},
 };
 

packages/mui-component-mapper/src/time-picker/time-picker.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import MUITimePicker from '@mui/lab/TimePicker';
-import AdapterDateFns from '@mui/lab/AdapterDateFns';
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
 
 import FormFieldGrid from '../form-field-grid/form-field-grid';
 import { validationError } from '../validation-error/validation-error';
 import { meta, input } from '@data-driven-forms/common/prop-types-templates';
 import { useFieldApi } from '@data-driven-forms/react-form-renderer';
+import { TextField } from '@material-ui/core';
 
 const TimePicker = (props) => {
   const {
@@ -21,7 +20,6 @@ const TimePicker = (props) => {
     description,
     validateOnMount,
     meta,
-    locale = 'en',
     MuiPickersUtilsProviderProps,
     FormFieldGridProps,
     ...rest
@@ -30,22 +28,25 @@ const TimePicker = (props) => {
 
   return (
     <FormFieldGrid {...FormFieldGridProps}>
-      <LocalizationProvider locale={locale} adapter={AdapterDateFns} {...MuiPickersUtilsProviderProps}>
-        <MUITimePicker
-          fullWidth
-          margin="normal"
-          label={label}
-          helperText={invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description}
-          disabled={isDisabled || isReadOnly}
-          placeholder={placeholder}
-          required={isRequired}
-          error={!!invalid}
-          readOnly={isReadOnly}
-          {...input}
-          value={input.value || null}
-          {...rest}
-        />
-      </LocalizationProvider>
+      <MUITimePicker
+        renderInput={(props) => (
+          <TextField
+            {...props}
+            fullWidth
+            margin="normal"
+            label={label}
+            helperText={invalid || ((meta.touched || validateOnMount) && meta.warning) || helperText || description}
+            placeholder={placeholder}
+            required={isRequired}
+            error={!!invalid}
+          />
+        )}
+        readOnly={isReadOnly}
+        disabled={isDisabled || isReadOnly}
+        {...input}
+        value={input.value || null}
+        {...rest}
+      />
     </FormFieldGrid>
   );
 };
@@ -60,15 +61,12 @@ TimePicker.propTypes = {
   label: PropTypes.node,
   helperText: PropTypes.node,
   validateOnMount: PropTypes.bool,
-  locale: PropTypes.string,
   description: PropTypes.node,
   FormFieldGridProps: PropTypes.object,
-  MuiPickersUtilsProviderProps: PropTypes.object,
 };
 
 TimePicker.defaultProps = {
   FormFieldGridProps: {},
-  MuiPickersUtilsProviderProps: {},
 };
 
 export default TimePicker;