my-idea-pool-client icon indicating copy to clipboard operation
my-idea-pool-client copied to clipboard

Published 20 hours ago • verified publisher icon functionalStoic

fix(deps): update dependency formik to v2

Open renovate[bot] opened this issue 6 years ago • 1 comments

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
formik (source) 1.5.8 -> 2.2.9 age adoption passing confidence

Release Notes

formium/formik

v2.2.9

Compare Source

Patch Changes

v2.2.8

Compare Source

Patch Changes

v2.2.7

Compare Source

Patch Changes

  • e50040a #​2881 Thanks @​jinmayamashita! - Prevent calling getSelectedValues when the element has not options

  • 31405ab #​3201 Thanks @​artola! - Fixes regression that resulted in error update race condition from when using validateOnMount

  • c2d6926 #​2995 Thanks @​johnrom! - Allow explicitly setting <form action> to empty string (#​2981). Note: previous code which passed an empty string would result in a noop (simply appending # to the url), but this will now result in a form submission to the current page.

v2.2.6

Compare Source

Patch Changes

v2.2.5

Compare Source

Patch Changes

v2.2.4

Compare Source

Patch Changes

v2.2.3

Compare Source

Patch Changes

v2.2.2

Compare Source

Patch Changes

v2.2.1

Compare Source

Patch Changes

v2.2.0

Compare Source

Minor Changes

  • 4148181 #​2794 Thanks @​jaredpalmer! - setValue can now optionally accept a function as a callback, exposing React.SetStateAction functionality. Previously, only the entire object was allowed which caused issues with stale props.

    setValues(prevValues => ({...prevValues, ... }))

v2.1.7

Compare Source

Patch Changes

v2.1.6

Compare Source

v2.1.5

Compare Source

v2.1.4

Compare Source

v2.1.3

Compare Source

v2.1.2

Compare Source

v2.1.1

Compare Source

Patches
  • Update website: d1059c8
  • Small spelling error: #​2161
  • Correctly handle single checkboxes and grouped ones values: #​2159. Fixed a bug when value was not specified on a checkbox as well as when there is just one checkbox.
  • Adds a community article: #​2157
  • Update contributing guidelines start step: #​2158
  • Force FieldArray to use latest values for validation: #​2166
Credits

Huge thanks to @​wallymathieu, @​eliamaino-fp, and @​mrmuhammadali for helping!

v2.1.0

Compare Source

Minor Changes

  • Add FieldHelpers object to the array returned by useField: #​2124. This exposes three helper functions to allow you to imperatively change the field in question:

    1. setValue(value: any)
    2. setTouched(value: boolean)
    3. setError(value: string)

    Before

    const MyInput = (props) => {
 const formik = useFormikContext() 
 const [field, meta] = useField(props)
 const handleThing = () => {
    formik.setFieldValue(props.name, 'boop') 
 }
 // ...
}

    After

    const MyInput = (props) => {
 const [field, meta, helpers] = useField(props)
 const handleThing = () => {
    helpers.setValue('boop') 
 }
 // ...
}
Credits

Huge thanks to @​drivasperez for helping!

v2.0.11

Compare Source

Patches
  • Keep empty array values on FieldArray: #​2144
Credits

Huge thanks to @​viniciusdacal for helping!

v2.0.10

Compare Source

TS Patch

  • Fix useField<T> generic.

v2.0.9

Compare Source

Patches
  • Hotfix: Revert throwing combined errors: #​2103
  • Abort submit if instance of real Error: #​2104
  • Remove inline cDU usage in FieldArray: #​2114
  • Remodel FieldArray validation side effect to cDU: #​2115
  • Allow forced validation to run anywhere #​2116
  • Handle promise rejection in handleSubmit #​2136
  • Fix unhandled promise exception in low priority validation #​2119

v2.0.8

Compare Source

Patches
  • Hotfix: Revert throwing combined errors: #​2103
  • Abort submit if instance of real Error: #​2104
  • Remove inline cDU usage in FieldArray: #​2114
  • Remodel FieldArray validation side effect to cDU: #​2115

v2.0.7

Compare Source

Improvements

  • Massive perf boost over 2.0.6! We now save renders by comparing errors more efficiently in useFormik/Formik.
  • FastField is now even faster. We fixed up our implementation of shouldComponentUpdate by refactoring the component away from using static contextType and back to using the connect() higher order component.

Bug fixes

  • Fixed regression where dirty is wasn't re-evaluated after resetForm()

  • Fixed regression where handleChange would explode when event.target didn't exist (e.g. event.currentTarget

  • If there are validation errors while calling submitForm(), the promise will now rejects with errors (and of course abort the submit). Previously, it would abort the submit and resolve. The nuance is hard to describe so here is the difference.

    Before (2.0.6)

     submitForm() // imagine there are some Yup validation errors
  .then(() => console.log("abort submit, did not call onSubmit, and end up here"))
  .catch(() => console.log("abort submit, did not call onSubmit, but only because of a runtime error"));

    After (2.0.7)

     submitForm() // imagine there are some Yup validation errors
  .then(() => console.log("executed onSubmit"))
  .catch((err) => console.log("aborted submit attempt"));

    2.0.6: https://codesandbox.io/s/gracious-noether-bu8u6 2.0.7: https://codesandbox.io/s/objective-perlman-jxhuq

Commits

v2.0.6

Compare Source

Bugfix

  • Change onSubmit's type signature to accept Promise<any>. This allows folks to return a promise that returns something (which is pretty common). Sorry about that folks.

Commits

  • Generate 2.0.6 docs e933b9c
  • Correct 2.0.5 docs 67e9071
  • Change type signature of onSubmit to accept Promise 2738bbc

v2.0.5

Compare Source

Bugfixes

  • Changed onSubmit behavior to mimic v1 if the function is synchronous. This means fixes a bug where isSubmitting was never toggled. To summarize: If onSubmit is async, then Formik will automatically set isSubmitting to false on your behalf once the submission is completed. This means you do NOT need to call formikBag.setSubmitting(false) manually in v2. HOWEVER, if your onSubmit function is synchronous (e.g. v1), then you need to still call setSubmitting(false) on your own. (#​1987)
  • Fix checkbox bug with null value (#​2027)
  • Update validateFormWithLowPriority with to use fresh values (#​2025)

Commits

v2.0.4

Compare Source

Bugfixes

  • Fix prepareDataForValidation work with instances (#​1949) ec7810a. this fixed a regression where people were having issues when keeping wonky objects like Moment() as values.
  • Fixed scheduler dep.

Internal

  • Moved docs (and jaredpalmer.com) off of Netlify to Now.sh v2.
  • Bumped React and TypeScript
  • Cleaned up migration docs

Commits

v2.0.3

Compare Source

Bugfixes

  • Fixed TypeScript when using <Form> due to omitted 2nd generic to React.forwardRef. TypeScript users should use this version.

Commits

v2.0.2

Compare Source

Bugfixes

  • Fixed return TS type of of useField so that it returns a tuple

Commits

v2.0.1

Compare Source

Formik 2 Migration Guide

Breaking Changes

Minimum Requirements
  • Since Formik 2 is built on top of React Hooks, you must be on React 16.8.x or higher
  • Since Formik 2 uses the unknown type, you must be on TypeScript 3.0 or higher
resetForm

There is only one tiny breaking change in Formik 2.x. Luckily, it probably won't impact verry many people. Long story short, because we introduced initialErrors, initialTouched, initialStatus props, resetForm's signature has changed. It now accepts the next initial state of Formik (instead of just the next initial values).

v1

resetForm(nextValues);

v2

resetForm({ values: nextValues /* errors, touched, etc ... */ });

What's New?

Checkboxes and Select multiple

Similarly to Angular, Vue, or Svelte, Formik 2 "fixes" React checkboxes and multi-selects with built-in array binding and boolean behavior. This was one of the most confusing things for people in Formik 1.x.

import React from 'react';
import { Formik, Field, Form } from 'formik';
import { Debug } from './Debug';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const CheckboxExample = () => (
  <div>
    <h1>Checkboxes</h1>
    <p>
      This example demonstrates how to properly create checkboxes with Formik.
    </p>
    <Formik
      initialValues={{
        isAwesome: false,
        terms: false,
        newsletter: false,
        jobType: ['designer'],
        location: [],
      }}
      onSubmit={async values => {
        await sleep(1000);
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ isSubmitting, getFieldProps, handleChange, handleBlur, values }) => (
        <Form>
          {/* 
            This first checkbox will result in a boolean value being stored.
          */}
          <div className="label">Basic Info</div>
          <label>
            <Field type="checkbox" name="isAwesome" />
            Are you awesome?
          </label>
          {/* 
            Multiple checkboxes with the same name attribute, but different
            value attributes will be considered a "checkbox group". Formik will automagically
            bind the checked values to a single array for your benefit. All the add and remove
            logic will be taken care of for you.
          */}
          <div className="label">
            What best describes you? (check all that apply)
          </div>
          <label>
            <Field type="checkbox" name="jobType" value="designer" />
            Designer
          </label>
          <label>
            <Field type="checkbox" name="jobType" value="developer" />
            Developer
          </label>
          <label>
            <Field type="checkbox" name="jobType" value="product" />
            Product Manager
          </label>
          {/*
           You do not _need_ to use <Field>/useField to get this behaviorr, 
           using handleChange, handleBlur, and values works as well. 
          */}
          <label>
            <input
              type="checkbox"
              name="jobType"
              value="founder"
              checked={values.jobType.includes('founder')}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            CEO / Founder
          </label>

          {/* 
           The <select> element will also behave the same way if 
           you pass `multiple` prop to it. 
          */}
          <label htmlFor="location">Where do you work?</label>
          <Field
            component="select"
            id="location"
            name="location"
            multiple={true}
          >
            <option value="NY">New York</option>
            <option value="SF">San Francisco</option>
            <option value="CH">Chicago</option>
            <option value="OTHER">Other</option>
          </Field>
          <label>
            <Field type="checkbox" name="terms" />I accept the terms and
            conditions.
          </label>
          {/* Here's how you can use a checkbox to show / hide another field */}
          {!!values.terms ? (
            <div>
              <label>
                <Field type="checkbox" name="newsletter" />
                Send me the newsletter <em style={{ color: 'rebeccapurple' }}>
                  (This is only shown if terms = true)
                </em>
              </label>
            </div>
          ) : null}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
          <Debug />
        </Form>
      )}
    </Formik>
  </div>
);

export default CheckboxExample;
useField()

Just what you think, it's like <Field>, but with a hook. See docs for usage.

useFormikContext()

A hook that is equivalent to connect().

<Field as>

<Field/> now accepts a prop called as which will inject onChange, onBlur, value etc. directly through to the component or string. This is useful for folks using Emotion or Styled components as they no longer need to clean up component's render props in a wrapped function.

Misc
  • FormikContext is now exported
  • validateOnMount?: boolean = false
  • initialErrors, initialTouched, initialStatus have been added
// <input className="form-input" placeHolder="Jane"  />
<Field name="firstName" className="form-input" placeholder="Jane" />

// <textarea className="form-textarea"/></textarea>
<Field name="message" as="textarea"  className="form-input"/>

// <select className="my-select"/>
<Field name="colors" as="select" className="my-select">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</Field>

// with styled-components/emotion
const MyStyledInput = styled.input`
  padding: .5em;
  border: 1px solid #eee;
  /* ... */
`
const MyStyledTextarea = MyStyledInput.withComponent('textarea');

// <input className="czx_123" placeHolder="google.com"  />
<Field name="website" as={MyStyledInput} placeHolder="google.com"/>

// <textarea  placeHolder="Post a message..." rows={5}></textarea>
<Field name="message" as={MyStyledTextArea} placeHolder="Post a message.." rows={4}/>
getFieldProps(nameOrProps)

There are two useful additions to FormikProps, getFieldProps and getFieldMeta. These are Kent C. Dodds-esque prop getters that can be useful if you love prop drilling, are not using the context-based API's, or if you are building a custom useField.

export interface FieldInputProps<Value> {
  /** Value of the field */
  value: Value;
  /** Name of the field */
  name: string;
  /** Multiple select? */
  multiple?: boolean;
  /** Is the field checked? */
  checked?: boolean;
  /** Change event handler */
  onChange: FormikHandlers['handleChange'];
  /** Blur event handler */
  onBlur: FormikHandlers['handleBlur'];
}
getFieldMeta(name)

Given a name it will return an object:

export interface FieldMetaProps<Value> {
  /** Value of the field */
  value: Value;
  /** Error message of the field */
  error?: string;
  /** Has the field been visited? */
  touched: boolean;
  /** Initial value of the field */
  initialValue?: Value;
  /** Initial touched state of the field */
  initialTouched: boolean;
  /** Initial error message of the field */
  initialError?: string;
}

Deprecation Warnings

All render props have been deprecated with a console warning.

For <Field>, <FastField>, <Formik>,<FieldArray>, the render prop has been deprecated with a warning as it will be removed in future versions. Instead, use a child callback function. This deprecation is meant to parallel React Context Consumer's usage.

- <Field name="firstName" render={props => ....} />
+ <Field name="firstName">{props => ... }</Field>

v2.0.0

Compare Source

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

renovate[bot] avatar Oct 25 '19 16:10 renovate[bot]

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠ Warning: custom changes will be lost.

renovate[bot] avatar Mar 12 '23 21:03 renovate[bot]