From 5b2e5081e0985a61cefca5496b17047434bee658 Mon Sep 17 00:00:00 2001 From: John Rom Date: Thu, 17 Dec 2020 18:59:13 -0500 Subject: [PATCH 1/4] Housekeeping --- .../@formik/reducer-refs/src/FastField.tsx | 208 ------------------ .../src/{ => components}/ErrorMessage.tsx | 2 +- .../reducer-refs/src/components/FastField.tsx | 37 ++++ .../reducer-refs/src/components/Field.tsx | 89 ++++++++ .../src/{ => components}/FieldArray.tsx | 2 +- .../src/{ => components}/Form.tsx | 2 +- .../src/{ => components}/Formik.tsx | 6 +- .../src/{Field.tsx => hooks/useField.tsx} | 105 +-------- packages/@formik/reducer-refs/src/index.tsx | 20 +- .../@formik/reducer-refs/src/withFormik.tsx | 2 +- 10 files changed, 152 insertions(+), 321 deletions(-) delete mode 100644 packages/@formik/reducer-refs/src/FastField.tsx rename packages/@formik/reducer-refs/src/{ => components}/ErrorMessage.tsx (97%) create mode 100644 packages/@formik/reducer-refs/src/components/FastField.tsx create mode 100644 packages/@formik/reducer-refs/src/components/Field.tsx rename packages/@formik/reducer-refs/src/{ => components}/FieldArray.tsx (99%) rename packages/@formik/reducer-refs/src/{ => components}/Form.tsx (94%) rename packages/@formik/reducer-refs/src/{ => components}/Formik.tsx (91%) rename packages/@formik/reducer-refs/src/{Field.tsx => hooks/useField.tsx} (55%) diff --git a/packages/@formik/reducer-refs/src/FastField.tsx b/packages/@formik/reducer-refs/src/FastField.tsx deleted file mode 100644 index a3613957a..000000000 --- a/packages/@formik/reducer-refs/src/FastField.tsx +++ /dev/null @@ -1,208 +0,0 @@ -import * as React from 'react'; -import { - FormikProps, - GenericFieldHTMLAttributes, - FormikContextType, - FieldMetaProps, - FieldInputProps, - getIn, - isEmptyChildren, - isFunction, -} from '@formik/core'; -import invariant from 'tiny-warning'; -import { FieldConfig } from './Field'; -import { connect } from './connect'; - -type $FixMe = any; - -export interface FastFieldProps { - field: FieldInputProps; - meta: FieldMetaProps; - form: FormikProps; // if ppl want to restrict this for a given form, let them. -} - -export type FastFieldConfig = FieldConfig & { - /** Override FastField's default shouldComponentUpdate */ - shouldUpdate?: ( - nextProps: T & GenericFieldHTMLAttributes, - props: {} - ) => boolean; -}; - -export type FastFieldAttributes = GenericFieldHTMLAttributes & - FastFieldConfig & - T; - -type FastFieldInnerProps< - Values = {}, - Props = {} -> = FastFieldAttributes & { formik: FormikContextType }; - -/** - * Custom Field component for quickly hooking into Formik - * context and wiring up forms. - */ -class FastFieldInner extends React.Component< - FastFieldInnerProps, - {} -> { - constructor(props: FastFieldInnerProps) { - super(props); - const { render, children, component, as: is, name } = props; - invariant( - !render, - ` has been deprecated. Please use a child callback function instead: {props => ...} instead.` - ); - invariant( - !(component && render), - 'You should not use and in the same component; will be ignored' - ); - - invariant( - !(is && children && isFunction(children)), - 'You should not use and as a function in the same component; will be ignored.' - ); - - invariant( - !(component && children && isFunction(children)), - 'You should not use and as a function in the same component; will be ignored.' - ); - - invariant( - !(render && children && !isEmptyChildren(children)), - 'You should not use and in the same component; will be ignored' - ); - } - - shouldComponentUpdate(props: FastFieldInnerProps) { - if (this.props.shouldUpdate) { - return this.props.shouldUpdate(props, this.props); - } else if ( - props.name !== this.props.name || - getIn(props.formik.values, this.props.name) !== - getIn(this.props.formik.values, this.props.name) || - getIn(props.formik.errors, this.props.name) !== - getIn(this.props.formik.errors, this.props.name) || - getIn(props.formik.touched, this.props.name) !== - getIn(this.props.formik.touched, this.props.name) || - Object.keys(this.props).length !== Object.keys(props).length || - props.formik.isSubmitting !== this.props.formik.isSubmitting - ) { - return true; - } else { - return false; - } - } - - componentDidMount() { - // Register the Field with the parent Formik. Parent will cycle through - // registered Field's validate fns right prior to submit - this.props.formik.registerField(this.props.name, { - validate: this.props.validate, - }); - } - - componentDidUpdate(prevProps: FastFieldAttributes) { - if (this.props.name !== prevProps.name) { - this.props.formik.unregisterField(prevProps.name); - this.props.formik.registerField(this.props.name, { - validate: this.props.validate, - }); - } - - if (this.props.validate !== prevProps.validate) { - this.props.formik.registerField(this.props.name, { - validate: this.props.validate, - }); - } - } - - componentWillUnmount() { - this.props.formik.unregisterField(this.props.name); - } - - render() { - const { - validate, - name, - render, - as: is, - children, - component, - shouldUpdate, - formik, - ...props - } = this.props as FastFieldInnerProps; - - const { - validate: _validate, - validationSchema: _validationSchema, - ...restOfFormik - } = formik; - const field = { - value: - props.type === 'radio' || props.type === 'checkbox' - ? props.value // React uses checked={} for these inputs - : getIn(formik.values, name), - name, - onChange: formik.handleChange, - onBlur: formik.handleBlur, - }; - const meta = { - value: getIn(formik.values, name), - error: getIn(formik.errors, name), - touched: !!getIn(formik.touched, name), - initialValue: getIn(formik.initialValues, name), - initialTouched: !!getIn(formik.initialTouched, name), - initialError: getIn(formik.initialErrors, name), - }; - - const bag = { field, meta, form: restOfFormik }; - - if (render) { - return (render as any)(bag); - } - - if (isFunction(children)) { - return (children as (props: FastFieldProps) => React.ReactNode)(bag); - } - - if (component) { - // This behavior is backwards compat with earlier Formik 0.9 to 1.x - if (typeof component === 'string') { - const { innerRef, ...rest } = props; - return React.createElement( - component, - { ref: innerRef, ...field, ...(rest as $FixMe) }, - children - ); - } - // We don't pass `meta` for backwards compat - return React.createElement( - component as React.ComponentClass<$FixMe>, - { field, form: formik, ...props }, - children - ); - } - - // default to input here so we can check for both `as` and `children` above - const asElement = is || 'input'; - - if (typeof asElement === 'string') { - const { innerRef, ...rest } = props; - return React.createElement( - asElement, - { ref: innerRef, ...field, ...(rest as $FixMe) }, - children - ); - } - - return React.createElement( - asElement as React.ComponentClass, - { ...field, ...props }, - children - ); - } -} - -export const FastField = connect, any>(FastFieldInner); diff --git a/packages/@formik/reducer-refs/src/ErrorMessage.tsx b/packages/@formik/reducer-refs/src/components/ErrorMessage.tsx similarity index 97% rename from packages/@formik/reducer-refs/src/ErrorMessage.tsx rename to packages/@formik/reducer-refs/src/components/ErrorMessage.tsx index 97573ccdc..9db3cbe07 100644 --- a/packages/@formik/reducer-refs/src/ErrorMessage.tsx +++ b/packages/@formik/reducer-refs/src/components/ErrorMessage.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { FormikContextType, getIn, isFunction } from '@formik/core'; -import { connect } from './connect'; +import { connect } from '../connect'; export interface ErrorMessageProps { name: string; diff --git a/packages/@formik/reducer-refs/src/components/FastField.tsx b/packages/@formik/reducer-refs/src/components/FastField.tsx new file mode 100644 index 000000000..0f3073d7e --- /dev/null +++ b/packages/@formik/reducer-refs/src/components/FastField.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { + GenericFieldHTMLAttributes, + FormikValues, +} from '@formik/core'; +import { FieldConfig, FieldProps } from '../hooks/useField'; +import { Field } from './Field'; + +/** + * @deprecated please use FieldProps (and Field or useField!) + */ +export type FastFieldProps = FieldProps; + +/** + * @deprecated please use FieldConfig (and Field or useField!) + */ +export type FastFieldConfig = FieldConfig & { + /** Override FastField's default shouldComponentUpdate */ + shouldUpdate?: ( + nextProps: T & GenericFieldHTMLAttributes, + props: {} + ) => boolean; +}; + +/** + * @deprecated please use FieldAttributes (and Field or useField!) + */ +export type FastFieldAttributes = GenericFieldHTMLAttributes & + FastFieldConfig & + T; + +/** + * @deprecated Please use Field! We promise it is fast now! + */ +export const FastField = ( + { shouldUpdate, ...fieldProps }: FastFieldConfig +) => ; diff --git a/packages/@formik/reducer-refs/src/components/Field.tsx b/packages/@formik/reducer-refs/src/components/Field.tsx new file mode 100644 index 000000000..47df77fb8 --- /dev/null +++ b/packages/@formik/reducer-refs/src/components/Field.tsx @@ -0,0 +1,89 @@ +import * as React from 'react'; +import { + isFunction, + isEmptyChildren, +} from '@formik/core'; +import invariant from 'tiny-warning'; +import { useFormikApi } from '../hooks/useFormikApi'; +import { FieldAttributes, useField } from '../hooks/useField'; + +export function Field(rawProps: FieldAttributes) { + const { + render, + children, + as: is, // `as` is reserved in typescript lol + component, + ...props + } = rawProps; + + if (__DEV__) { + // eslint-disable-next-line react-hooks/rules-of-hooks + React.useEffect(() => { + invariant( + !render, + ` has been deprecated and will be removed in future versions of Formik. Please use a child callback function instead. To get rid of this warning, replace ...} /> with {({field, form, meta}) => ...}` + ); + + invariant( + !(is && children && isFunction(children)), + 'You should not use and as a function in the same component; will be ignored.' + ); + + invariant( + !(component && children && isFunction(children)), + 'You should not use and as a function in the same component; will be ignored.' + ); + + invariant( + !(render && children && !isEmptyChildren(children)), + 'You should not use and in the same component; will be ignored' + ); + // eslint-disable-next-line + }, []); + } + + const formik = useFormikApi(); + const [field, meta] = useField(props); + + const legacyBag = { field, form: formik }; + + if (render) { + return render({ ...legacyBag, meta }); + } + + if (isFunction(children)) { + return children({ ...legacyBag, meta }); + } + + if (component) { + // This behavior is backwards compat with earlier Formik 0.9 to 1.x + if (typeof component === 'string') { + const { innerRef, ...rest } = props; + return React.createElement( + component, + { ref: innerRef, ...field, ...rest }, + children + ); + } + // We don't pass `meta` for backwards compat + return React.createElement( + component, + { field, form: formik, ...props }, + children + ); + } + + // default to input here so we can check for both `as` and `children` above + const asElement = is || 'input'; + + if (typeof asElement === 'string') { + const { innerRef, ...rest } = props; + return React.createElement( + asElement, + { ref: innerRef, ...field, ...rest }, + children + ); + } + + return React.createElement(asElement, { ...field, ...props }, children); +} diff --git a/packages/@formik/reducer-refs/src/FieldArray.tsx b/packages/@formik/reducer-refs/src/components/FieldArray.tsx similarity index 99% rename from packages/@formik/reducer-refs/src/FieldArray.tsx rename to packages/@formik/reducer-refs/src/components/FieldArray.tsx index 7702f2136..a1bef30d6 100644 --- a/packages/@formik/reducer-refs/src/FieldArray.tsx +++ b/packages/@formik/reducer-refs/src/components/FieldArray.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import cloneDeep from 'lodash/cloneDeep'; -import { connect } from './connect'; +import { connect } from '../connect'; import { FormikContextType, FormikState, diff --git a/packages/@formik/reducer-refs/src/Form.tsx b/packages/@formik/reducer-refs/src/components/Form.tsx similarity index 94% rename from packages/@formik/reducer-refs/src/Form.tsx rename to packages/@formik/reducer-refs/src/components/Form.tsx index 093c6d722..4e9310b30 100644 --- a/packages/@formik/reducer-refs/src/Form.tsx +++ b/packages/@formik/reducer-refs/src/components/Form.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { useFormikApi } from './hooks/useFormikApi'; +import { useFormikApi } from '../hooks/useFormikApi'; export type FormikFormProps = Pick< React.FormHTMLAttributes, diff --git a/packages/@formik/reducer-refs/src/Formik.tsx b/packages/@formik/reducer-refs/src/components/Formik.tsx similarity index 91% rename from packages/@formik/reducer-refs/src/Formik.tsx rename to packages/@formik/reducer-refs/src/components/Formik.tsx index 36c5397ee..d5d5ce14d 100644 --- a/packages/@formik/reducer-refs/src/Formik.tsx +++ b/packages/@formik/reducer-refs/src/components/Formik.tsx @@ -7,9 +7,9 @@ import { isEmptyChildren, } from '@formik/core'; import invariant from 'tiny-warning'; -import { useFormik } from './hooks/useFormik'; -import { FormikApiContext } from './contexts/FormikApiContext'; -import { useFormikStateInternal } from './hooks/useFormikState'; +import { useFormik } from '../hooks/useFormik'; +import { FormikApiContext } from '../contexts/FormikApiContext'; +import { useFormikStateInternal } from '../hooks/useFormikState'; export function Formik< Values extends FormikValues = FormikValues, diff --git a/packages/@formik/reducer-refs/src/Field.tsx b/packages/@formik/reducer-refs/src/hooks/useField.tsx similarity index 55% rename from packages/@formik/reducer-refs/src/Field.tsx rename to packages/@formik/reducer-refs/src/hooks/useField.tsx index c22fc1a1a..c81a1a52a 100644 --- a/packages/@formik/reducer-refs/src/Field.tsx +++ b/packages/@formik/reducer-refs/src/hooks/useField.tsx @@ -1,20 +1,9 @@ import * as React from 'react'; -import { - isFunction, - isEmptyChildren, - isObject, - FormikProps, - GenericFieldHTMLAttributes, - FieldMetaProps, - FieldHelperProps, - FieldInputProps, - FieldValidator, - selectGetFieldMeta -} from '@formik/core'; -import invariant from 'tiny-warning'; -import { useFormikApi } from './hooks/useFormikApi'; -import { FormEffect } from './types'; +import { FormEffect } from '../types'; import isEqual from 'react-fast-compare'; +import { FieldHelperProps, FieldInputProps, FieldMetaProps, FieldValidator, FormikProps, GenericFieldHTMLAttributes, isObject, selectGetFieldMeta } from '@formik/core'; +import { useFormikApi } from './useFormikApi'; +import invariant from 'tiny-warning'; export interface FieldProps { field: FieldInputProps; @@ -105,7 +94,8 @@ export function useField( const [fieldMeta, setFieldMeta] = React.useState(fieldMetaRef.current); const maybeUpdateFieldMeta = React.useCallback>((formikState) => { - // we could use formikApi.getFieldMeta... but is that cheating? + // we could use formikApi.getFieldMeta... but is that correct? + // I think we should use the value passed to this callback const fieldMeta = selectGetFieldMeta(() => formikState)(fieldName); if (!isEqual(fieldMeta, fieldMetaRef.current)) { @@ -149,85 +139,4 @@ export function useField( fieldMeta, getFieldHelpers(fieldName), ]; -} - -export function Field(rawProps: FieldAttributes) { - const { - render, - children, - as: is, // `as` is reserved in typescript lol - component, - ...props - } = rawProps; - - if (__DEV__) { - // eslint-disable-next-line react-hooks/rules-of-hooks - React.useEffect(() => { - invariant( - !render, - ` has been deprecated and will be removed in future versions of Formik. Please use a child callback function instead. To get rid of this warning, replace ...} /> with {({field, form, meta}) => ...}` - ); - - invariant( - !(is && children && isFunction(children)), - 'You should not use and as a function in the same component; will be ignored.' - ); - - invariant( - !(component && children && isFunction(children)), - 'You should not use and as a function in the same component; will be ignored.' - ); - - invariant( - !(render && children && !isEmptyChildren(children)), - 'You should not use and in the same component; will be ignored' - ); - // eslint-disable-next-line - }, []); - } - - const [field, meta] = useField(props); - const formik = useFormikApi(); - - const legacyBag = { field, form: formik }; - - if (render) { - return render({ ...legacyBag, meta }); - } - - if (isFunction(children)) { - return children({ ...legacyBag, meta }); - } - - if (component) { - // This behavior is backwards compat with earlier Formik 0.9 to 1.x - if (typeof component === 'string') { - const { innerRef, ...rest } = props; - return React.createElement( - component, - { ref: innerRef, ...field, ...rest }, - children - ); - } - // We don't pass `meta` for backwards compat - return React.createElement( - component, - { field, form: formik, ...props }, - children - ); - } - - // default to input here so we can check for both `as` and `children` above - const asElement = is || 'input'; - - if (typeof asElement === 'string') { - const { innerRef, ...rest } = props; - return React.createElement( - asElement, - { ref: innerRef, ...field, ...rest }, - children - ); - } - - return React.createElement(asElement, { ...field, ...props }, children); -} +} \ No newline at end of file diff --git a/packages/@formik/reducer-refs/src/index.tsx b/packages/@formik/reducer-refs/src/index.tsx index f5ed668e3..5805972d0 100644 --- a/packages/@formik/reducer-refs/src/index.tsx +++ b/packages/@formik/reducer-refs/src/index.tsx @@ -1,11 +1,15 @@ +export * from './components/ErrorMessage'; +export * from './components/FastField'; +export * from './components/Field'; +export * from './components/FieldArray'; +export * from './components/Form'; +export * from './components/Formik'; +export * from './connect'; +export * from './contexts/FormikApiContext'; +export * from './contexts/FormikContext'; +export * from './hooks/useField'; export * from './hooks/useFormik'; export * from './hooks/useFormikApi'; -export * from './contexts/FormikContext'; -export * from './Formik'; -export * from './Field'; -export * from './Form'; +export * from './hooks/useFormikContext'; +export * from './hooks/useFormikState'; export * from './withFormik'; -export * from './FieldArray'; -export * from './connect'; -export * from './ErrorMessage'; -export * from './FastField'; diff --git a/packages/@formik/reducer-refs/src/withFormik.tsx b/packages/@formik/reducer-refs/src/withFormik.tsx index 28a8b40cb..49e984144 100644 --- a/packages/@formik/reducer-refs/src/withFormik.tsx +++ b/packages/@formik/reducer-refs/src/withFormik.tsx @@ -1,6 +1,6 @@ import hoistNonReactStatics from 'hoist-non-react-statics'; import * as React from 'react'; -import { Formik } from './Formik'; +import { Formik } from './components/Formik'; import { FormikHelpers, FormikProps, From 1d9a209bb030b119ceda5363c76d0bf2da23af71 Mon Sep 17 00:00:00 2001 From: John Rom Date: Thu, 17 Dec 2020 19:24:04 -0500 Subject: [PATCH 2/4] Move scoped package --- packages/{formik-codemod => @formik/codemod}/.gitignore | 0 packages/{formik-codemod => @formik/codemod}/README.md | 0 packages/{formik-codemod => @formik/codemod}/bin/cli.ts | 0 .../{formik-codemod => @formik/codemod}/bin/formik-codemod.ts | 0 packages/{formik-codemod => @formik/codemod}/package.json | 0 .../__testfixtures__/field-to-legacy-field/name-import.input.js | 0 .../field-to-legacy-field/name-import.output.js | 0 .../codemod}/transforms/__tests__/field-to-legacy-field.test.js | 0 .../codemod}/transforms/field-to-legacy-field.ts | 0 packages/{formik-codemod => @formik/codemod}/tsconfig.json | 2 +- 10 files changed, 1 insertion(+), 1 deletion(-) rename packages/{formik-codemod => @formik/codemod}/.gitignore (100%) rename packages/{formik-codemod => @formik/codemod}/README.md (100%) rename packages/{formik-codemod => @formik/codemod}/bin/cli.ts (100%) rename packages/{formik-codemod => @formik/codemod}/bin/formik-codemod.ts (100%) rename packages/{formik-codemod => @formik/codemod}/package.json (100%) rename packages/{formik-codemod => @formik/codemod}/transforms/__testfixtures__/field-to-legacy-field/name-import.input.js (100%) rename packages/{formik-codemod => @formik/codemod}/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js (100%) rename packages/{formik-codemod => @formik/codemod}/transforms/__tests__/field-to-legacy-field.test.js (100%) rename packages/{formik-codemod => @formik/codemod}/transforms/field-to-legacy-field.ts (100%) rename packages/{formik-codemod => @formik/codemod}/tsconfig.json (87%) diff --git a/packages/formik-codemod/.gitignore b/packages/@formik/codemod/.gitignore similarity index 100% rename from packages/formik-codemod/.gitignore rename to packages/@formik/codemod/.gitignore diff --git a/packages/formik-codemod/README.md b/packages/@formik/codemod/README.md similarity index 100% rename from packages/formik-codemod/README.md rename to packages/@formik/codemod/README.md diff --git a/packages/formik-codemod/bin/cli.ts b/packages/@formik/codemod/bin/cli.ts similarity index 100% rename from packages/formik-codemod/bin/cli.ts rename to packages/@formik/codemod/bin/cli.ts diff --git a/packages/formik-codemod/bin/formik-codemod.ts b/packages/@formik/codemod/bin/formik-codemod.ts similarity index 100% rename from packages/formik-codemod/bin/formik-codemod.ts rename to packages/@formik/codemod/bin/formik-codemod.ts diff --git a/packages/formik-codemod/package.json b/packages/@formik/codemod/package.json similarity index 100% rename from packages/formik-codemod/package.json rename to packages/@formik/codemod/package.json diff --git a/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.input.js b/packages/@formik/codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.input.js similarity index 100% rename from packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.input.js rename to packages/@formik/codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.input.js diff --git a/packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js b/packages/@formik/codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js similarity index 100% rename from packages/formik-codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js rename to packages/@formik/codemod/transforms/__testfixtures__/field-to-legacy-field/name-import.output.js diff --git a/packages/formik-codemod/transforms/__tests__/field-to-legacy-field.test.js b/packages/@formik/codemod/transforms/__tests__/field-to-legacy-field.test.js similarity index 100% rename from packages/formik-codemod/transforms/__tests__/field-to-legacy-field.test.js rename to packages/@formik/codemod/transforms/__tests__/field-to-legacy-field.test.js diff --git a/packages/formik-codemod/transforms/field-to-legacy-field.ts b/packages/@formik/codemod/transforms/field-to-legacy-field.ts similarity index 100% rename from packages/formik-codemod/transforms/field-to-legacy-field.ts rename to packages/@formik/codemod/transforms/field-to-legacy-field.ts diff --git a/packages/formik-codemod/tsconfig.json b/packages/@formik/codemod/tsconfig.json similarity index 87% rename from packages/formik-codemod/tsconfig.json rename to packages/@formik/codemod/tsconfig.json index e4d709c4e..8795475ff 100644 --- a/packages/formik-codemod/tsconfig.json +++ b/packages/@formik/codemod/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.json", + "extends": "../../../tsconfig.json", "compilerOptions": { "module": "commonjs", "sourceMap": true, From e3f52ae0d669a427638a9b014cf39da7e4d41a00 Mon Sep 17 00:00:00 2001 From: John Rom Date: Thu, 17 Dec 2020 19:24:51 -0500 Subject: [PATCH 3/4] Some tiny updates --- app/package.json | 4 ++-- packages/@formik/reducer-refs/package.json | 8 ++++---- packages/@formik/reducer-refs/tsconfig.build.json | 2 +- yarn.lock | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/package.json b/app/package.json index 2f42bda3e..f4074ebfe 100644 --- a/app/package.json +++ b/app/package.json @@ -8,9 +8,9 @@ "serve": "next start" }, "dependencies": { + "@formik/reducer-refs": "^3.0.0-core1", "format-string-by-pattern": "^1.2.1", "formik": "^2.1.5", - "@formik/reducer-refs": "^3.0.0-core1", "next": "9.5.3", "react": "^17.0.1", "react-dom": "^17.0.1", @@ -18,7 +18,7 @@ }, "devDependencies": { "@types/node": "^14.14.6", - "@types/react": "^16.9.56", + "@types/react": "^16.9.55", "@types/react-dom": "^16.9.9" } } diff --git a/packages/@formik/reducer-refs/package.json b/packages/@formik/reducer-refs/package.json index 77c11a787..6afa84378 100644 --- a/packages/@formik/reducer-refs/package.json +++ b/packages/@formik/reducer-refs/package.json @@ -46,14 +46,14 @@ "use-context-selector": "^1.1.2" }, "resolutions": { - "@types/react": "16.9.17", - "@types/react-dom": "16.9.4" + "@types/react": "^16.9.55", + "@types/react-dom": "^16.9.9" }, "devDependencies": { "@types/hoist-non-react-statics": "^3.3.1", "@types/lodash": "^4.14.119", - "@types/react": "^16.9.17", - "@types/react-dom": "^16.9.4", + "@types/react": "^16.9.55", + "@types/react-dom": "^16.9.9", "@types/warning": "^3.0.0", "@types/yup": "^0.24.9", "just-debounce-it": "^1.1.0", diff --git a/packages/@formik/reducer-refs/tsconfig.build.json b/packages/@formik/reducer-refs/tsconfig.build.json index 16d4e436c..23b876fcc 100644 --- a/packages/@formik/reducer-refs/tsconfig.build.json +++ b/packages/@formik/reducer-refs/tsconfig.build.json @@ -1,6 +1,6 @@ { "extends": "../../../tsconfig.base.json", - "include": ["src", "types", "../../types", "../core/dist/types"], + "include": ["src", "types", "../../../types"], "compilerOptions": { "rootDir": "./src" } diff --git a/yarn.lock b/yarn.lock index a4f5487d3..788c79643 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3153,7 +3153,7 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== -"@types/react-dom@^16.9.4", "@types/react-dom@^16.9.9": +"@types/react-dom@^16.9.9": version "16.9.10" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.10.tgz#4485b0bec3d41f856181b717f45fd7831101156f" integrity sha512-ItatOrnXDMAYpv6G8UCk2VhbYVTjZT9aorLtA/OzDN9XJ2GKcfam68jutoAcILdRjsRUO8qb7AmyObF77Q8QFw== @@ -3176,7 +3176,7 @@ "@types/prop-types" "*" csstype "^3.0.2" -"@types/react@^16", "@types/react@^16.8.23", "@types/react@^16.9.17", "@types/react@^16.9.55", "@types/react@^16.9.56": +"@types/react@^16", "@types/react@^16.8.23", "@types/react@^16.9.55": version "16.14.2" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c" integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ== From 1876dd40d173c2bbacb279da3efdb7f34aa006df Mon Sep 17 00:00:00 2001 From: John Rom Date: Thu, 17 Dec 2020 19:58:23 -0500 Subject: [PATCH 4/4] Whoops, silly typescripts --- app/package.json | 2 +- app/pages/format.tsx | 2 +- app/pages/perf500.tsx | 4 ++-- app/pages/perf500v3.tsx | 8 ++++---- app/pages/v3.tsx | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/app/package.json b/app/package.json index f4074ebfe..5b4804fdc 100644 --- a/app/package.json +++ b/app/package.json @@ -10,7 +10,7 @@ "dependencies": { "@formik/reducer-refs": "^3.0.0-core1", "format-string-by-pattern": "^1.2.1", - "formik": "^2.1.5", + "formik": "^3.0.0-next.7", "next": "9.5.3", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/app/pages/format.tsx b/app/pages/format.tsx index 35f42e3f4..321a7c629 100644 --- a/app/pages/format.tsx +++ b/app/pages/format.tsx @@ -31,7 +31,7 @@ export default function Example() { diff --git a/app/pages/perf500.tsx b/app/pages/perf500.tsx index b27a6d834..e526c58cd 100644 --- a/app/pages/perf500.tsx +++ b/app/pages/perf500.tsx @@ -19,13 +19,13 @@ const Input = (p: FieldHookConfig) => { ); }; -const isRequired = (v) => { +const isRequired = (v: string) => { return v && v.trim() !== "" ? undefined : "Required"; }; const array = new Array(500).fill(undefined); -const initialValues = array.reduce((prev, curr, idx) => { +const initialValues = array.reduce((prev, _curr, idx) => { prev[`Input ${idx}`] = ""; return prev; }, {}); diff --git a/app/pages/perf500v3.tsx b/app/pages/perf500v3.tsx index ca6fcd2c0..0f56258e7 100644 --- a/app/pages/perf500v3.tsx +++ b/app/pages/perf500v3.tsx @@ -1,7 +1,7 @@ import React from "react"; -import { Formik, Form, useField, FieldHookConfig } from "formik"; +import { Formik, Form, useField, FieldConfig } from "formik"; -const Input = (p: FieldHookConfig) => { +const Input = (p: FieldConfig) => { const [field, meta] = useField(p); const renders = React.useRef(0); return ( @@ -19,13 +19,13 @@ const Input = (p: FieldHookConfig) => { ); }; -const isRequired = (v) => { +const isRequired = (v: string) => { return v && v.trim() !== "" ? undefined : "Required"; }; const array = new Array(500).fill(undefined); -const initialValues = array.reduce((prev, curr, idx) => { +const initialValues = array.reduce((prev, _curr, idx) => { prev[`Input ${idx}`] = ""; return prev; }, {}); diff --git a/app/pages/v3.tsx b/app/pages/v3.tsx index 15816aa81..2fc0d0116 100644 --- a/app/pages/v3.tsx +++ b/app/pages/v3.tsx @@ -65,14 +65,14 @@ export default function Example() { ) : ( )}