Revert "Remove deprecated prop dataType from form"

This reverts commit 8c8f640.
redwoodjs · Jul 21, 2021 · 4b5252c · 4b5252c
1 parent f4c0c61
commit 4b5252c
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 8 deletions.
diff --git a/packages/forms/src/__tests__/form.test.tsx b/packages/forms/src/__tests__/form.test.tsx
@@ -222,6 +222,28 @@ describe('Form', () => {
     )
   })
 
+  it('supports "dataType" prop on input fields with deprecation warning', async () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
+    const mockFn = jest.fn()
+
+    render(
+      <Form onSubmit={mockFn}>
+        <TextField name="tf" defaultValue="3.14" dataType="Float" />
+        <Submit>Save</Submit>
+      </Form>
+    )
+
+    fireEvent.click(screen.getByText('Save'))
+
+    await waitFor(() => expect(console.warn).toHaveBeenCalledTimes(1))
+    expect(console.warn).toBeCalledWith(
+      'Using the "dataType" prop on form input fields is deprecated. Use "transformValue" instead.'
+    )
+    expect(mockFn).toHaveBeenCalledTimes(1)
+    expect(mockFn).toBeCalledWith({ tf: 3.14 }, expect.anything())
+    spy.mockRestore()
+  })
+
   it('handles int and float blank values gracefully with console warnings', async () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const mockFn = jest.fn()

diff --git a/packages/forms/src/index.tsx b/packages/forms/src/index.tsx
@@ -58,6 +58,7 @@ interface InputTagProps {
   name: string
   errorClassName?: string
   errorStyle?: React.CSSProperties
+  dataType?: TDefinedCoercionFunctions
   transformValue?: ((value: string) => any) | TDefinedCoercionFunctions
   className?: string
   style?: React.CSSProperties
@@ -70,7 +71,7 @@ interface ValidatableFieldProps extends InputTagProps {
 
 const inputTagProps = <T extends InputTagProps>(
   props: T
-): Omit<T, 'transformValue' | 'errorClassName' | 'errorStyle'> => {
+): Omit<T, 'dataType' | 'transformValue' | 'errorClassName' | 'errorStyle'> => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const { errors, setError } = useFormContext()
 
@@ -91,10 +92,11 @@ const inputTagProps = <T extends InputTagProps>(
   const validationError = errors[props.name]
 
   // get errorStyle/errorClassName and replace style/className if present
-  // Also remove transformValue from tagProps
+  // Also remove dataType and transformValue from tagProps
   const {
     errorClassName,
     errorStyle,
+    dataType, // eslint-disable-line @typescript-eslint/no-unused-vars
     transformValue, // eslint-disable-line @typescript-eslint/no-unused-vars
     ...tagProps
   } = props
@@ -240,11 +242,20 @@ const TextAreaField = forwardRef<
   const { setCoercion } = useCoercion()
 
   React.useEffect(() => {
+    if (
+      props.dataType !== undefined &&
+      (process.env.NODE_ENV === 'development' ||
+        process.env.NODE_ENV === 'test')
+    ) {
+      console.warn(
+        'Using the "dataType" prop on form input fields is deprecated. Use "transformValue" instead.'
+      )
+    }
     setCoercion({
       name: props.name,
-      transformValue: props.transformValue,
+      transformValue: props.transformValue || props.dataType,
     })
-  }, [setCoercion, props.name, props.transformValue])
+  }, [setCoercion, props.name, props.transformValue, props.dataType])
 
   const tagProps = inputTagProps(props)
   // implements JSON validation if a transformValue of 'Json' is set
@@ -321,12 +332,21 @@ export const CheckboxField = forwardRef<
   const type = 'checkbox'
 
   React.useEffect(() => {
+    if (
+      props.dataType !== undefined &&
+      (process.env.NODE_ENV === 'development' ||
+        process.env.NODE_ENV === 'test')
+    ) {
+      console.warn(
+        'Using the "dataType" prop on form input fields is deprecated. Use "transformValue" instead.'
+      )
+    }
     setCoercion({
       name: props.name,
       type,
-      transformValue: props.transformValue,
+      transformValue: props.transformValue || props.dataType,
     })
-  }, [setCoercion, props.name, type, props.transformValue])
+  }, [setCoercion, props.name, type, props.transformValue, props.dataType])
 
   const tagProps = inputTagProps(props)
 
@@ -368,12 +388,27 @@ const InputField = forwardRef<
   const { register } = useFormContext()
   const { setCoercion } = useCoercion()
   React.useEffect(() => {
+    if (
+      props.dataType !== undefined &&
+      (process.env.NODE_ENV === 'development' ||
+        process.env.NODE_ENV === 'test')
+    ) {
+      console.warn(
+        'Using the "dataType" prop on form input fields is deprecated. Use "transformValue" instead.'
+      )
+    }
     setCoercion({
       name: props.name,
       type: props.type,
-      transformValue: props.transformValue,
+      transformValue: props.transformValue || props.dataType,
     })
-  }, [setCoercion, props.name, props.type, props.transformValue])
+  }, [
+    setCoercion,
+    props.name,
+    props.type,
+    props.transformValue,
+    props.dataType,
+  ])
 
   const tagProps = inputTagProps(props)