Add parse, format, formatOnBlur to getFieldProps()

examples/format-string-by-pattern/README.md

@@ -0,0 +1,5 @@
+# Formik Formating Strings by Pattern Example
+
+This example demonstrates how to format a string by a pattern with Formik. We use the [format-string-by-pattern](https://github.com/arthurdenner/format-string-by-pattern) package to help with parsing.
+
+[![Edit formik-example-format-string-by-patter](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/jaredpalmer/formik/tree/master/examples/format-string-by-patter?fontsize=14&hidenavigation=1&theme=dark)

examples/format-string-by-pattern/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Formik, Field, Form } from 'formik';
+import formatString from 'format-string-by-pattern';
+
+const masks = [
+  { name: 'phone-1', parse: '999-999-9999' },
+  { name: 'phone-2', parse: '(999) 999-9999' },
+  { name: 'phone-3', parse: '+49 (AAAA) BBBBBB' },
+];
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+const Example = () => {
+  return (
+    <div>
+      <Formik
+        initialValues={masks.reduce((prev, curr) => {
+          prev[curr.name] = '';
+          return prev;
+        }, {})}
+        onSubmit={async values => {
+          await sleep(500);
+          alert(JSON.stringify(values, null, 2));
+        }}
+        render={({ values }) => (
+          <Form>
+            {masks.map(mask => (
+              <div key={mask.name}>
+                <label>
+                  {mask.name}
+                  <Field
+                    name={mask.name}
+                    parse={formatString(mask.parse)}
+                    placeholder={mask.parse}
+                  />
+                </label>
+              </div>
+            ))}
+
+            <button type="submit">Submit</button>
+            <pre>{JSON.stringify(values, null, 2)}</pre>
+          </Form>
+        )}
+      />
+    </div>
+  );
+};
+
+ReactDOM.render(<Example />, document.getElementById('root'));

examples/format-string-by-pattern/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "formik-example-format-string-by-pattern",
+  "version": "0.1.0",
+  "description": "This example demonstrates how to format a string by a pattern with Formik",
+  "main": "index.js",
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0",
+    "format-string-by-pattern": "1.1.1",
+    "formik": "latest"
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "semi": true
+  }
+}

examples/parse-format/README.md

@@ -0,0 +1,5 @@
+# Formik Basic Example
+
+This example demonstrates how to use `parse` and `format` to create an input mask with Formik.
+
+[![Edit formik-example-parse-format](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/jaredpalmer/formik/tree/master/examples/parse-format?fontsize=14&hidenavigation=1&theme=dark)

examples/parse-format/index.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Formik, Field, Form } from 'formik';
+
+const sleep = ms => new Promise(r => setTimeout(r, ms));
+
+const Example = () => {
+  return (
+    <div>
+      <Formik
+        initialValues={{
+          username: '',
+        }}
+        onSubmit={async values => {
+          await sleep(500);
+          alert(JSON.stringify(values, null, 2));
+        }}
+      >
+        {({ values }) => (
+          <Form>
+            <label htmlFor="username">Username</label>
+            <Field
+              id="username"
+              name="username"
+              parse={value => value && value.toUpperCase()}
+              format={value => (value ? value.toLowerCase() : '')}
+            />
+
+            <button type="submit">Submit</button>
+            <pre>{JSON.stringify(values, null, 2)}</pre>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+ReactDOM.render(<Example />, document.getElementById('root'));

examples/parse-format/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "formik-example-parse-format",
+  "version": "0.1.0",
+  "description": "This example demonstrates how to use parse and format to create an input mask with Formik",
+  "main": "index.js",
+  "dependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-scripts": "3.3.0",
+    "formik": "latest"
+  },
+  "prettier": {
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "semi": true
+  }
+}

packages/formik/src/Field.tsx

@@ -52,6 +52,22 @@ export interface FieldConfig<V = any> {
    */
   validate?: FieldValidator;
 
+  /**
+   * Function to parse raw input value before setting it to state
+   */
+  parse?: (value: unknown, name: string) => any;
+
+  /**
+   * Function to transform value passed to input
+   */
+  format?: (value: any, name: string) => any;
+
+  /**
+   * Wait until blur event before formatting input value?
+   * @default false
+   */
+  formatOnBlur?: boolean;
+
   /**
    * Field name
    */
@@ -192,7 +208,7 @@ export function Field({
   if (component) {
     // This behavior is backwards compat with earlier Formik 0.9 to 1.x
     if (typeof component === 'string') {
-      const { innerRef, ...rest } = props;
+      const { innerRef, parse, format, ...rest } = props;
       return React.createElement(
         component,
         { ref: innerRef, ...field, ...rest },
@@ -211,7 +227,7 @@ export function Field({
   const asElement = is || 'input';
 
   if (typeof asElement === 'string') {
-    const { innerRef, ...rest } = props;
+    const { innerRef, parse, format, ...rest } = props;
     return React.createElement(
       asElement,
       { ref: innerRef, ...field, ...rest },

packages/formik/src/Formik.tsx

@@ -24,6 +24,8 @@ import {
   getActiveElement,
   getIn,
   isObject,
+  isInputEvent,
+  isReactNative,
 } from './utils';
 import { FormikProvider } from './FormikContext';
 import invariant from 'tiny-warning';
@@ -51,6 +53,16 @@ type FormikMessage<Values> =
       payload: FormikState<Values>;
     };
 
+const defaultParseFn = (value: unknown, _name: string) => value;
+const numberParseFn = (value: any, _name: string) => {
+  const parsed = parseFloat(value);
+
+  return isNaN(parsed) ? '' : parsed;
+};
+
+const defaultFormatFn = (value: unknown, _name: string) =>
+  value === undefined ? '' : value;
+
 // State reducer
 function formikReducer<Values>(
   state: FormikState<Values>,
@@ -892,22 +904,53 @@ export function useFormik<Values extends FormikValues = FormikValues>({
     [state.errors, state.touched, state.values]
   );
 
-  const getFieldHelpers = React.useCallback(
+  const getFieldHelpers = useEventCallback(
     (name: string): FieldHelperProps<any> => {
       return {
         setValue: (value: any) => setFieldValue(name, value),
         setTouched: (value: boolean) => setFieldTouched(name, value),
         setError: (value: any) => setFieldError(name, value),
       };
-    },
-    [setFieldValue, setFieldTouched, setFieldError]
+    }
+  );
+
+  const getValueFromEvent = useEventCallback(
+    (event: React.SyntheticEvent<any>, fieldName: string) => {
+      // React Native/Expo Web/maybe other render envs
+      if (
+        !isReactNative &&
+        event.nativeEvent &&
+        (event.nativeEvent as any).text !== undefined
+      ) {
+        return (event.nativeEvent as any).text;
+      }
+
+      // React Native
+      if (isReactNative && event.nativeEvent) {
+        return (event.nativeEvent as any).text;
+      }
+
+      const target = event.target ? event.target : event.currentTarget;
+      const { type, value, checked, options, multiple } = target;
+
+      return /checkbox/.test(type) // checkboxes
+        ? getValueForCheckbox(getIn(state.values, fieldName!), checked, value)
+        : !!multiple // <select multiple>
+        ? getSelectedValues(options)
+        : value;
+    }
   );
 
   const getFieldProps = React.useCallback(
     (nameOrOptions): FieldInputProps<any> => {
       const isAnObject = isObject(nameOrOptions);
-      const name = isAnObject ? nameOrOptions.name : nameOrOptions;
+      const name = isAnObject
+        ? nameOrOptions.name
+          ? nameOrOptions.name
+          : nameOrOptions.id
+        : nameOrOptions;
       const valueState = getIn(state.values, name);
+      const touchedState = getIn(state.touched, name);
 
       const field: FieldInputProps<any> = {
         name,
@@ -921,6 +964,9 @@ export function useFormik<Values extends FormikValues = FormikValues>({
           value: valueProp, // value is special for checkboxes
           as: is,
           multiple,
+          parse = /number|range/.test(type) ? numberParseFn : defaultParseFn,
+          format = defaultFormatFn,
+          formatOnBlur = false,
         } = nameOrOptions;
 
         if (type === 'checkbox') {
@@ -939,10 +985,43 @@ export function useFormik<Values extends FormikValues = FormikValues>({
           field.value = field.value || [];
           field.multiple = true;
         }
+
+        if (type !== 'radio' && type !== 'checkbox' && !!format) {
+          if (formatOnBlur === true) {
+            if (touchedState === true) {
+              field.value = format(field.value);
+            }
+          } else {
+            field.value = format(field.value);
+          }
+        }
+
+        // We incorporate the fact that we know the `name` prop by scoping `onChange`.
+        // In addition, to support `parse` fn, we can't just re-use the OG `handleChange`, but
+        // instead re-implement it's guts.
+        if (type !== 'radio' && type !== 'checkbox') {
+          field.onChange = (eventOrValue: React.ChangeEvent<any> | any) => {
+            if (isInputEvent(eventOrValue)) {
+              if (eventOrValue.persist) {
+                eventOrValue.persist();
+              }
+              setFieldValue(name, parse(getValueFromEvent(eventOrValue, name)));
+            } else {
+              setFieldValue(name, parse(eventOrValue));
+            }
+          };
+        }
       }
       return field;
     },
-    [handleBlur, handleChange, state.values]
+    [
+      getValueFromEvent,
+      handleBlur,
+      handleChange,
+      setFieldValue,
+      state.touched,
+      state.values,
+    ]
   );
 
   const dirty = React.useMemo(
@@ -1142,9 +1221,16 @@ function arrayMerge(target: any[], source: any[], options: any): any[] {
 
 /** Return multi select values based on an array of options */
 function getSelectedValues(options: any[]) {
-  return Array.from(options)
-    .filter(el => el.selected)
-    .map(el => el.value);
+  const result = [];
+  if (options) {
+    for (let index = 0; index < options.length; index++) {
+      const option = options[index];
+      if (option.selected) {
+        result.push(option.value);
+      }
+    }
+  }
+  return result;
 }
 
 /** Return the next value for a checkbox */

packages/formik/src/utils.ts

@@ -40,6 +40,13 @@ export const isPromise = (value: any): value is PromiseLike<any> =>
 export const isInputEvent = (value: any): value is React.SyntheticEvent<any> =>
   value && isObject(value) && isObject(value.target);
 
+/** @private Are we in RN? */
+export const isReactNative =
+  typeof window !== 'undefined' &&
+  window.navigator &&
+  window.navigator.product &&
+  window.navigator.product === 'ReactNative';
+
 /**
  * Same as document.activeElement but wraps in a try-catch block. In IE it is
  * not safe to call document.activeElement if there is nothing focused.

packages/formik/test/Field.test.tsx

@@ -124,11 +124,11 @@ describe('Field / FastField', () => {
         </>
       );
 
-      const { handleBlur, handleChange } = getFormProps();
+      const { handleBlur } = getFormProps();
       injected.forEach((props, idx) => {
         expect(props.field.name).toBe('name');
         expect(props.field.value).toBe('jared');
-        expect(props.field.onChange).toBe(handleChange);
+        expect(props.field.onChange).toEqual(expect.any(Function));
         expect(props.field.onBlur).toBe(handleBlur);
         expect(props.form).toEqual(getFormProps());
         if (idx !== 2) {
@@ -145,7 +145,7 @@ describe('Field / FastField', () => {
 
       expect(asInjectedProps.name).toBe('name');
       expect(asInjectedProps.value).toBe('jared');
-      expect(asInjectedProps.onChange).toBe(handleChange);
+      expect(asInjectedProps.onChange).toEqual(expect.any(Function));
       expect(asInjectedProps.onBlur).toBe(handleBlur);
 
       expect(queryAllByText(TEXT)).toHaveLength(4);
@@ -170,11 +170,11 @@ describe('Field / FastField', () => {
         </>
       );
 
-      const { handleBlur, handleChange } = getFormProps();
+      const { handleBlur } = getFormProps();
       injected.forEach((props, idx) => {
         expect(props.field.name).toBe('name');
         expect(props.field.value).toBe('jared');
-        expect(props.field.onChange).toBe(handleChange);
+        expect(props.field.onChange).toEqual(expect.any(Function));
         expect(props.field.onBlur).toBe(handleBlur);
         expect(props.form).toEqual(getFormProps());
         if (idx !== 2) {
@@ -191,7 +191,7 @@ describe('Field / FastField', () => {
 
       expect(asInjectedProps.name).toBe('name');
       expect(asInjectedProps.value).toBe('jared');
-      expect(asInjectedProps.onChange).toBe(handleChange);
+      expect(asInjectedProps.onChange).toEqual(expect.any(Function));
       expect(asInjectedProps.onBlur).toBe(handleBlur);
       expect(queryAllByText(TEXT)).toHaveLength(4);
     });