Fix ts error and formik example (#1280)

* Fix ts error and formik example * Fix eslint error
mui · Aug 24, 2019 · 07f4038 · 07f4038
1 parent efe1544
commit 07f4038
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 12 deletions.
diff --git a/docs/pages/guides/Formik.example.jsx b/docs/pages/guides/Formik.example.jsx
@@ -6,6 +6,7 @@ import { KeyboardDatePicker } from '@material-ui/pickers';
 
 const DatePickerField = ({ field, form, ...other }) => {
   const currentError = form.errors[field.name];
+
   return (
     <KeyboardDatePicker
       clearable
@@ -15,8 +16,14 @@ const DatePickerField = ({ field, form, ...other }) => {
       format="dd/MM/yyyy"
       helperText={currentError}
       error={Boolean(currentError)}
-      onError={(_, error) => form.setFieldError(field.name, error)}
-      onChange={date => date && form.setFieldValue(field.name, date, true)}
+      onError={error => {
+        // handle as a side effect
+        if (error !== currentError) {
+          form.setFieldError(field.name, error);
+        }
+      }}
+      // if you are using custom validation schema you probably want to pass `true` as third argument
+      onChange={date => form.setFieldValue(field.name, date, false)}
       {...other}
     />
   );

diff --git a/docs/prop-types.json b/docs/prop-types.json
@@ -288,7 +288,7 @@
     },
     "onError": {
       "defaultValue": null,
-      "description": "Callback fired when new error should be displayed",
+      "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
       "name": "onError",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -812,7 +812,7 @@
     },
     "onError": {
       "defaultValue": null,
-      "description": "Callback fired when new error should be displayed",
+      "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
       "name": "onError",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -1556,7 +1556,7 @@
     },
     "onError": {
       "defaultValue": null,
-      "description": "Callback fired when new error should be displayed",
+      "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
       "name": "onError",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -1888,7 +1888,7 @@
     },
     "onError": {
       "defaultValue": null,
-      "description": "Callback fired when new error should be displayed",
+      "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
       "name": "onError",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -2440,7 +2440,7 @@
     },
     "onError": {
       "defaultValue": null,
-      "description": "Callback fired when new error should be displayed",
+      "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
       "name": "onError",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",
@@ -3033,7 +3033,7 @@
     },
     "onError": {
       "defaultValue": null,
-      "description": "Callback fired when new error should be displayed",
+      "description": "Callback fired when new error should be displayed\n(!! This is a side effect. Be careful if you want to rerender the component)",
       "name": "onError",
       "parent": {
         "fileName": "material-ui-pickers/lib/src/typings/BasePicker.tsx",

diff --git a/lib/src/Picker/makePickerWithState.tsx b/lib/src/Picker/makePickerWithState.tsx
@@ -4,8 +4,8 @@ import { Picker, ToolbarComponentProps } from './Picker';
 import { ExtendWrapper, Wrapper } from '../wrappers/Wrapper';
 import { PureDateInputProps } from '../_shared/PureDateInput';
 import { DateValidationProps } from '../_helpers/text-field-helper';
+import { KeyboardDateInputProps } from '../_shared/KeyboardDateInput';
 import { StateHookOptions, usePickerState } from '../_shared/hooks/usePickerState';
-import { KeyboardDateInput, KeyboardDateInputProps } from '../_shared/KeyboardDateInput';
 import {
   BaseKeyboardPickerProps,
   useKeyboardPickerState,
@@ -20,7 +20,7 @@ export type WithPureInputProps = DateValidationProps &
   ExtendWrapper<PureDateInputProps>;
 
 export interface MakePickerOptions<T extends any> {
-  Input: KeyboardDateInput | PureDateInputProps;
+  Input: any;
   useState: typeof usePickerState | typeof useKeyboardPickerState;
   useOptions: (props: any) => StateHookOptions;
   getCustomProps?: (props: T) => Partial<T>;

diff --git a/lib/src/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx
@@ -11,7 +11,7 @@ export interface KeyboardDateInputProps
   extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'onChange' | 'value'> {
   format: string;
   onChange: (value: string | null) => void;
-  openPicker?: () => void;
+  openPicker: () => void;
   validationError?: React.ReactNode;
   inputValue: string;
   inputProps?: TextFieldProps['inputProps'];

diff --git a/lib/src/typings/BasePicker.tsx b/lib/src/typings/BasePicker.tsx
@@ -33,7 +33,9 @@ export interface BasePickerProps {
   emptyLabel?: string;
   /** Callback fired when date is accepted @DateIOType */
   onAccept?: (date: MaterialUiPickersDate) => void;
-  /** Callback fired when new error should be displayed @DateIOType */
+  /** Callback fired when new error should be displayed
+   * (!! This is a side effect. Be careful if you want to rerender the component) @DateIOType
+   */
   onError?: (error: React.ReactNode, value: MaterialUiPickersDate | ParsableDate) => void;
   /** On open callback */
   onOpen?: () => void;