Merge 4fa842a into 551582e

README.md

@@ -24,6 +24,15 @@ Then, import the components you need to use with Formik in the file you have you
 - Switch
 - TextField
 
+Avaliable with [@material-ui/pickers](https://github.com/mui-org/material-ui-pickers) peer dep
+
+- DatePicker
+- KeyboardDatePicker
+- TimePicker
+- KeyboardTimePicker
+- DateTimePicker
+- KeyboardDateTimePicker
+
 In this case we will use `<TextField />`.
 
 ```diff

package.json

@@ -5,6 +5,7 @@
   "typings": "dist/main.d.ts",
   "peerDependencies": {
     "@material-ui/core": ">=4.0.0",
+    "@material-ui/pickers": ">=3.2.8",
     "formik": "<2.0.0",
     "react": "^16.8.0"
   },
@@ -42,6 +43,9 @@
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
+    "@date-io/date-fns": "^1.3.11",
+    "@material-ui/core": "^4.8.3",
+    "@material-ui/pickers": "^3.2.8",
     "@material-ui/core": "^4.8.3",
     "@storybook/addon-actions": "^5.0.11",
     "@storybook/addon-links": "^5.0.11",
@@ -58,6 +62,7 @@
     "babel-loader": "^8.0.4",
     "coveralls": "^3.0.2",
     "cross-env": "^5.2.0",
+    "date-fns": "^2.7.0",
     "eslint": "^5.15.3",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-jest": "^22.7.1",

src/DatePicker.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {
+  DatePicker as MuiDatePicker,
+  DatePickerProps as MuiDatePickerProps,
+} from '@material-ui/pickers';
+
+import { FieldProps, getIn } from 'formik';
+
+export type DatePickerProps = FieldProps &
+  Omit<MuiDatePickerProps, 'error' | 'name' | 'onChange' | 'value'>;
+
+export const fieldToDatePicker = ({
+  field,
+  form,
+  disabled,
+  ...props
+}: DatePickerProps): MuiDatePickerProps => {
+  const { name } = field;
+  const { touched, errors, isSubmitting, setFieldValue, setFieldError } = form;
+
+  const fieldError = getIn(errors, name);
+  const showError = getIn(touched, name) && !!fieldError;
+
+  return {
+    ...props,
+    ...field,
+    error: showError,
+    helperText: showError ? fieldError : props.helperText,
+    disabled: disabled != undefined ? disabled : isSubmitting,
+    onChange(date) {
+      setFieldValue(name, date);
+    },
+    onError(error) {
+      if (error !== fieldError) {
+        setFieldError(name, String(error));
+      }
+    },
+  };
+};
+
+export const DatePicker: React.ComponentType<DatePickerProps> = ({
+  children,
+  ...props
+}: DatePickerProps) => (
+  <MuiDatePicker {...fieldToDatePicker(props)}>{children}</MuiDatePicker>
+);
+
+DatePicker.displayName = 'FormikMaterialUIDatePicker';

src/DateTimePicker.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {
+  DateTimePicker as MuiDateTimePicker,
+  DateTimePickerProps as MuiDateTimePickerProps,
+} from '@material-ui/pickers';
+import { FieldProps, getIn } from 'formik';
+
+export type DateTimePickerProps = FieldProps &
+  Omit<MuiDateTimePickerProps, 'error' | 'name' | 'onChange' | 'value'>;
+
+export const fieldToDateTimePicker = ({
+  field,
+  form,
+  disabled,
+  ...props
+}: DateTimePickerProps): MuiDateTimePickerProps => {
+  const { name } = field;
+  const { touched, errors, isSubmitting, setFieldValue, setFieldError } = form;
+
+  const fieldError = getIn(errors, name);
+  const showError = getIn(touched, name) && !!fieldError;
+
+  return {
+    ...props,
+    ...field,
+    error: showError,
+    helperText: showError ? fieldError : props.helperText,
+    disabled: disabled != undefined ? disabled : isSubmitting,
+    onChange(date) {
+      setFieldValue(name, date);
+    },
+    onError(error) {
+      if (error !== fieldError) {
+        setFieldError(name, String(error));
+      }
+    },
+  };
+};
+
+export const DateTimePicker: React.ComponentType<DateTimePickerProps> = ({
+  children,
+  ...props
+}: DateTimePickerProps) => (
+  <MuiDateTimePicker {...fieldToDateTimePicker(props)}>
+    {children}
+  </MuiDateTimePicker>
+);
+
+DateTimePicker.displayName = 'FormikMaterialUIDateTimePicker';

src/KeyboardDatePicker.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {
+  KeyboardDatePicker as MuiKeyboardDatePicker,
+  KeyboardDatePickerProps as MuiKeyboardDatePickerProps,
+} from '@material-ui/pickers';
+import { FieldProps, getIn } from 'formik';
+
+export type KeyboardDatePickerProps = FieldProps &
+  Omit<MuiKeyboardDatePickerProps, 'error' | 'name' | 'onChange' | 'value'>;
+
+export const fieldToKeyboardDatePicker = ({
+  field,
+  form,
+  disabled,
+  ...props
+}: KeyboardDatePickerProps): MuiKeyboardDatePickerProps => {
+  const { name } = field;
+  const { touched, errors, isSubmitting, setFieldValue, setFieldError } = form;
+
+  const fieldError = getIn(errors, name);
+  const showError = getIn(touched, name) && !!fieldError;
+
+  return {
+    ...props,
+    ...field,
+    error: showError,
+    helperText: showError ? fieldError : props.helperText,
+    disabled: disabled != undefined ? disabled : isSubmitting,
+    onChange(date) {
+      setFieldValue(name, date);
+    },
+    onError(error) {
+      if (error !== fieldError) {
+        setFieldError(name, String(error));
+      }
+    },
+  };
+};
+
+export const KeyboardDatePicker: React.ComponentType<KeyboardDatePickerProps> = ({
+  children,
+  ...props
+}: KeyboardDatePickerProps) => (
+  <MuiKeyboardDatePicker {...fieldToKeyboardDatePicker(props)}>
+    {children}
+  </MuiKeyboardDatePicker>
+);
+
+KeyboardDatePicker.displayName = 'FormikMaterialUIKeyboardDatePicker';

src/KeyboardDateTimePicker.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {
+  KeyboardDateTimePicker as MuiKeyboardDateTimePicker,
+  KeyboardDateTimePickerProps as MuiKeyboardDateTimePickerProps,
+} from '@material-ui/pickers';
+import { FieldProps, getIn } from 'formik';
+
+export type KeyboardDateTimePickerProps = FieldProps &
+  Omit<MuiKeyboardDateTimePickerProps, 'error' | 'name' | 'onChange' | 'value'>;
+
+export const fieldToKeyboardDateTimePicker = ({
+  field,
+  form,
+  disabled,
+  ...props
+}: KeyboardDateTimePickerProps): MuiKeyboardDateTimePickerProps => {
+  const { name } = field;
+  const { touched, errors, isSubmitting, setFieldValue, setFieldError } = form;
+
+  const fieldError = getIn(errors, name);
+  const showError = getIn(touched, name) && !!fieldError;
+
+  return {
+    ...props,
+    ...field,
+    error: showError,
+    helperText: showError ? fieldError : props.helperText,
+    disabled: disabled != undefined ? disabled : isSubmitting,
+    onChange(date) {
+      setFieldValue(name, date);
+    },
+    onError(error) {
+      if (error !== fieldError) {
+        setFieldError(name, String(error));
+      }
+    },
+  };
+};
+
+export const KeyboardDateTimePicker: React.ComponentType<KeyboardDateTimePickerProps> = ({
+  children,
+  ...props
+}: KeyboardDateTimePickerProps) => (
+  <MuiKeyboardDateTimePicker {...fieldToKeyboardDateTimePicker(props)}>
+    {children}
+  </MuiKeyboardDateTimePicker>
+);
+
+KeyboardDateTimePicker.displayName = 'FormikMaterialUIKeyboardDateTimePicker';

src/KeyboardTimePicker.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {
+  KeyboardTimePicker as MuiKeyboardTimePicker,
+  KeyboardTimePickerProps as MuiKeyboardTimePickerProps,
+} from '@material-ui/pickers';
+import { FieldProps, getIn } from 'formik';
+
+export type KeyboardTimePickerProps = FieldProps &
+  Omit<MuiKeyboardTimePickerProps, 'error' | 'name' | 'onChange' | 'value'>;
+
+export const fieldToKeyboardTimePicker = ({
+  field,
+  form,
+  disabled,
+  ...props
+}: KeyboardTimePickerProps): MuiKeyboardTimePickerProps => {
+  const { name } = field;
+  const { touched, errors, isSubmitting, setFieldValue, setFieldError } = form;
+
+  const fieldError = getIn(errors, name);
+  const showError = getIn(touched, name) && !!fieldError;
+
+  return {
+    ...props,
+    ...field,
+    error: showError,
+    helperText: showError ? fieldError : props.helperText,
+    disabled: disabled != undefined ? disabled : isSubmitting,
+    onChange(date) {
+      setFieldValue(name, date);
+    },
+    onError(error) {
+      if (error !== fieldError) {
+        setFieldError(name, String(error));
+      }
+    },
+  };
+};
+
+export const KeyboardTimePicker: React.ComponentType<KeyboardTimePickerProps> = ({
+  children,
+  ...props
+}: KeyboardTimePickerProps) => (
+  <MuiKeyboardTimePicker {...fieldToKeyboardTimePicker(props)}>
+    {children}
+  </MuiKeyboardTimePicker>
+);
+
+KeyboardTimePicker.displayName = 'FormikMaterialUIKeyboardTimePicker';

src/TimePicker.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {
+  TimePicker as MuiTimePicker,
+  TimePickerProps as MuiTimePickerProps,
+} from '@material-ui/pickers';
+import { FieldProps, getIn } from 'formik';
+
+export type TimePickerProps = FieldProps &
+  Omit<MuiTimePickerProps, 'error' | 'name' | 'onChange' | 'value'>;
+
+export const fieldToTimePicker = ({
+  field,
+  form,
+  disabled,
+  ...props
+}: TimePickerProps): MuiTimePickerProps => {
+  const { name } = field;
+  const { touched, errors, isSubmitting, setFieldValue, setFieldError } = form;
+
+  const fieldError = getIn(errors, name);
+  const showError = getIn(touched, name) && !!fieldError;
+
+  return {
+    ...props,
+    ...field,
+    error: showError,
+    helperText: showError ? fieldError : props.helperText,
+    disabled: disabled != undefined ? disabled : isSubmitting,
+    onChange(date) {
+      setFieldValue(name, date);
+    },
+    onError(error) {
+      if (error !== fieldError) {
+        setFieldError(name, String(error));
+      }
+    },
+  };
+};
+
+export const TimePicker: React.ComponentType<TimePickerProps> = ({
+  children,
+  ...props
+}: TimePickerProps) => (
+  <MuiTimePicker {...fieldToTimePicker(props)}>{children}</MuiTimePicker>
+);
+
+TimePicker.displayName = 'FormikMaterialUITimePicker';

src/__tests__/DatePicker.test.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Formik, Field, Form } from 'formik';
+import renderer from 'react-test-renderer';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DateFnsUtils from '@date-io/date-fns';
+
+import { DatePicker } from '../DatePicker';
+
+test('DatePicker Renders Correctly', () => {
+  const component = renderer.create(
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <Formik initialValues={{test: new Date('2020-01-01')}} onSubmit={() => null}>
+        <Form>
+          <Field name="test" label="Date" component={DatePicker} />
+        </Form>
+      </Formik>
+    </MuiPickersUtilsProvider>
+  );
+
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/__tests__/DateTimePicker.test.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Formik, Field, Form } from 'formik';
+import renderer from 'react-test-renderer';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DateFnsUtils from '@date-io/date-fns';
+
+import { DateTimePicker } from '../DateTimePicker';
+
+test('DateTimePicker Renders Correctly', () => {
+  const component = renderer.create(
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <Formik initialValues={{test: new Date('2020-01-01')}} onSubmit={() => null}>
+        <Form>
+          <Field name="test" label="Datetime" component={DateTimePicker} />
+        </Form>
+      </Formik>
+    </MuiPickersUtilsProvider>
+  );
+
+  expect(component.toJSON()).toMatchSnapshot();
+});