Merge a933bd2 into 29848be

README.md

@@ -38,7 +38,7 @@ Next, in your Formik form component, pass this `<TextField />` component as the
   name="email"
   label="Email"
   type="email"
-+ component={TextField}
++ as={TextField}
 />
 ```
 
@@ -49,7 +49,7 @@ Now you can add any of the Material UI props to the `<Field />` component and `<
   name="email"
   label="Email"
   type="email"
-  component={TextField}
+  as={TextField}
 + margin="normal"
 + fullWidth
 />
@@ -64,7 +64,7 @@ Now you can add any of the Material UI props to the `<Field />` component and `<
 
 - Errors are only displayed on touched/dirty fields
 - Fields are disabled during submission
-- All form state is managed to Formik, so props such as `name`, `onChange` and `value` are excluded from the typescript types. Note: if you are using js this does not prevent you from providing these props but here be dragons.
+- All form state is managed to Formik, so props such as `onChange` and `value` are excluded from the typescript types. Note: if you are using js this does not prevent you from providing these props but here be dragons.
 
 ## Non Goals
 

package.json

@@ -1,11 +1,10 @@
 {
   "name": "formik-material-ui",
-  "version": "1.0.0",
-  "license": "MIT",
+  "version": "1.0.20",
   "typings": "dist/main.d.ts",
   "peerDependencies": {
-    "@material-ui/core": ">=4.0.0",
-    "formik": ">=1.0.0",
+    "@material-ui/core": ">=4.3.0",
+    "formik": ">=2.0.0",
     "react": "^16.8.0"
   },
   "keywords": [
@@ -42,7 +41,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
-    "@material-ui/core": "^4.0.1",
+    "@material-ui/core": "^4.3.0",
     "@storybook/addon-actions": "^5.0.11",
     "@storybook/addon-links": "^5.0.11",
     "@storybook/addons": "^5.0.11",
@@ -63,7 +62,7 @@
     "eslint-plugin-jest": "^22.7.1",
     "eslint-plugin-react": "^7.14.2",
     "eslint-plugin-react-hooks": "^1.6.1",
-    "formik": "^1.5.7",
+    "formik": "2.0.6",
     "husky": "^1.2.0",
     "jest": "^23.4.2",
     "lerna": "^3.5.1",

src/TextField.tsx

@@ -2,33 +2,41 @@ import * as React from 'react';
 import MuiTextField, {
   TextFieldProps as MuiTextFieldProps,
 } from '@material-ui/core/TextField';
-import { FieldProps, getIn } from 'formik';
+import { FieldProps, FieldConfig, useField } from 'formik';
 
 export type TextFieldProps = FieldProps &
+  FieldConfig &
   Omit<MuiTextFieldProps, 'error' | 'name' | 'onChange' | 'value'> & {
     // Fix for the type for variant which is using union
     // https://stackoverflow.com/questions/55664421
     variant: 'standard' | 'filled' | 'outlined' | undefined;
   };
 
 export const fieldToTextField = ({
-  field,
+  name,
   form,
   disabled,
   ...props
 }: TextFieldProps): MuiTextFieldProps => {
-  const { name } = field;
-  const { touched, errors, isSubmitting } = form;
+  if (name === undefined)
+    throw TypeError(
+      'Missing required name attribute on <Field />. This is needed to hook up your @material-ui Text field with Formik.'
+    );
+  if (props.component)
+    throw TypeError(
+      '<Field component> is deprecated in favour of <Field as>. This is needed to hook up your @material-ui Text field with Formik.'
+    );
 
-  const fieldError = getIn(errors, name);
-  const showError = getIn(touched, name) && !!fieldError;
+  const [field, meta] = useField(name);
+  const { touched, error } = meta;
+  const showError = touched && !!error;
 
   return {
-    ...props,
     ...field,
+    ...props,
     error: showError,
-    helperText: showError ? fieldError : props.helperText,
-    disabled: disabled != undefined ? disabled : isSubmitting,
+    helperText: showError ? error : props.helperText,
+    disabled: disabled !== undefined ? disabled : false,
   };
 };
 

src/__tests__/Checkbox.test.tsx

@@ -6,7 +6,7 @@ import { Checkbox } from '../Checkbox';
 
 test('Checkbox Renders Correctly', () => {
   const component = renderer.create(
-    <Formik initialValues={{}} onSubmit={() => null}>
+    <Formik initialValues={{}} onSubmit={() => {}}>
       <Form>
         <Field name="test" label="Checkbox" component={Checkbox} />
       </Form>

src/__tests__/InputBase.test.tsx

@@ -6,7 +6,7 @@ import { InputBase } from '../InputBase';
 
 test('InputBase Renders Correctly', () => {
   const component = renderer.create(
-    <Formik onSubmit={() => null} initialValues={{ test: 'Input' }}>
+    <Formik onSubmit={() => {}} initialValues={{ test: 'Input' }}>
       <Form>
         <Field name="test" label="InputBase" component={InputBase} />
       </Form>

src/__tests__/RadioGroup.test.tsx

@@ -7,7 +7,7 @@ import { RadioGroup } from '../RadioGroup';
 
 test('Radio Group Renders Correctly', () => {
   const component = renderer.create(
-    <Formik onSubmit={() => null} initialValues={{ test: '' }}>
+    <Formik onSubmit={() => {}} initialValues={{ test: '' }}>
       <Form>
         <Field name="radio-group" label="Radio Group" component={RadioGroup}>
           <FormControlLabel

src/__tests__/Select.test.tsx

@@ -7,7 +7,7 @@ import { Select } from '../Select';
 
 test('Select Renders Correctly', () => {
   const component = renderer.create(
-    <Formik onSubmit={() => null} initialValues={{ test: '' }}>
+    <Formik onSubmit={() => {}} initialValues={{ test: '' }}>
       <Form>
         <Field name="test" label="Select" component={Select}>
           <MenuItem value="">

src/__tests__/SimpleFileUpload.test.tsx

@@ -6,7 +6,7 @@ import { SimpleFileUpload } from '../SimpleFileUpload';
 
 test('SimpleFileUpload Renders Correctly', () => {
   const component = renderer.create(
-    <Formik onSubmit={() => null} initialValues={{ test: '' }}>
+    <Formik onSubmit={() => {}} initialValues={{ test: '' }}>
       <Form>
         <Field name="test" label="Select" component={SimpleFileUpload} />
       </Form>

src/__tests__/Switch.test.tsx

@@ -6,7 +6,7 @@ import { Switch } from '../Switch';
 
 test('Switch Renders Correctly', () => {
   const component = renderer.create(
-    <Formik initialValues={{}} onSubmit={() => null}>
+    <Formik initialValues={{}} onSubmit={() => {}}>
       <Form>
         <Field name="test" label="Text" component={Switch} />
       </Form>

src/__tests__/TextField.test.tsx

@@ -6,9 +6,9 @@ import { TextField, TextFieldProps } from '../TextField';
 
 test('TextField Renders Correctly', () => {
   const component = renderer.create(
-    <Formik initialValues={{}} onSubmit={() => null}>
+    <Formik initialValues={{}} onSubmit={() => {}}>
       <Form>
-        <Field name="test" label="Text" component={TextField} />
+        <Field name="test" label="Text" as={TextField} />
       </Form>
     </Formik>
   );
@@ -22,9 +22,9 @@ test('Wrapped TextField', () => {
   );
 
   const component = renderer.create(
-    <Formik initialValues={{}} onSubmit={() => null}>
+    <Formik initialValues={{}} onSubmit={() => {}}>
       <Form>
-        <Field name="test" label="Text" component={TextFieldComponent} />
+        <Field name="test" label="Text" as={TextFieldComponent} />
       </Form>
     </Formik>
   );

src/__tests__/__snapshots__/Select.test.tsx.snap

@@ -11,8 +11,7 @@ exports[`Select Renders Correctly 1`] = `
     onClick={[Function]}
   >
     <div
-      aria-haspopup="true"
-      aria-pressed="false"
+      aria-haspopup="listbox"
       className="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input MuiInputBase-inputSelect"
       id="select-test"
       onBlur={[Function]}

src/__tests__/__snapshots__/Switch.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`Switch Renders Correctly 1`] = `
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-12 MuiSwitch-switchBase MuiSwitch-colorSecondary"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-13 MuiSwitch-switchBase MuiSwitch-colorSecondary"
       label="Text"
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -32,7 +32,7 @@ exports[`Switch Renders Correctly 1`] = `
           className="MuiSwitch-thumb"
         />
         <input
-          className="PrivateSwitchBase-input-15 MuiSwitch-input"
+          className="PrivateSwitchBase-input-16 MuiSwitch-input"
           disabled={false}
           name="test"
           onChange={[Function]}

stories/TextField.story.tsx

@@ -87,18 +87,13 @@ export default withStyles(styles)(({ classes }: WithStyles<typeof styles>) => (
       }}
       render={({ submitForm, isSubmitting, values }) => (
         <Form>
-          <Field
-            type="email"
-            label="Email"
-            name="user.email"
-            component={TextField}
-          />
+          <Field type="email" label="Email" name="user.email" as={TextField} />
           <br />
           <Field
             type="password"
             label="Password"
             name="password"
-            component={TextField}
+            as={TextField}
           />
           <br />
           <br />
@@ -107,15 +102,15 @@ export default withStyles(styles)(({ classes }: WithStyles<typeof styles>) => (
             name="outlined"
             variant="outlined"
             notched
-            component={TextField}
+            as={TextField}
           />
           <br />
           <Field
             label="Outlined"
             name="outlined"
             variant="standard"
             notched
-            component={TextField}
+            as={TextField}
           />
           <br />
           <Field
@@ -124,13 +119,14 @@ export default withStyles(styles)(({ classes }: WithStyles<typeof styles>) => (
             label="With Select"
             select
             SelectProps={{
+              name: 'select',
               MenuProps: {
                 className: classes.menu,
               },
             }}
             helperText="Please select Range"
             margin="normal"
-            component={TextField}
+            as={TextField}
           >
             {ranges.map(option => (
               <MenuItem key={option.value} value={option.value}>