diff --git a/src/components/CheckboxField/index.tsx b/src/components/CheckboxField/index.tsx index e69b8e054..c150f518d 100644 --- a/src/components/CheckboxField/index.tsx +++ b/src/components/CheckboxField/index.tsx @@ -1,7 +1,7 @@ import { Checkbox } from '@scaleway/ui' import { FieldState } from 'final-form' import { ComponentProps, ReactNode, Ref, forwardRef } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { useErrors } from '../../providers/ErrorContext' import { BaseFieldProps } from '../../types' @@ -48,7 +48,7 @@ export const CheckboxField = forwardRef( ): JSX.Element => { const { getError } = useErrors() - const { input, meta } = useField(name, { + const { input, meta } = useFormField(name, { required, type: 'checkbox', validate, diff --git a/src/components/DateField/index.tsx b/src/components/DateField/index.tsx index e410f3a84..e7d2d1408 100644 --- a/src/components/DateField/index.tsx +++ b/src/components/DateField/index.tsx @@ -1,7 +1,7 @@ import { DateInput } from '@scaleway/ui' import { FieldState } from 'final-form' import { ComponentProps, FocusEvent } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { useErrors } from '../../providers/ErrorContext' import { BaseFieldProps } from '../../types' @@ -57,7 +57,7 @@ export const DateField = ({ }: DateFieldProps) => { const { getError } = useErrors() - const { input, meta } = useField(name, { + const { input, meta } = useFormField(name, { formatOnBlur, initialValue, maxDate, diff --git a/src/components/RadioField/index.tsx b/src/components/RadioField/index.tsx index efedc3999..bffff346d 100644 --- a/src/components/RadioField/index.tsx +++ b/src/components/RadioField/index.tsx @@ -1,7 +1,7 @@ import { Radio } from '@scaleway/ui' import { FieldState } from 'final-form' import { ComponentProps, ReactNode } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { useErrors } from '../../providers/ErrorContext' import { BaseFieldProps } from '../../types' @@ -38,7 +38,7 @@ export const RadioField = ({ }: RadioFieldProps): JSX.Element => { const { getError } = useErrors() - const { input, meta } = useField(name, { + const { input, meta } = useFormField(name, { required, type: 'radio', validate, diff --git a/src/components/RichSelectField/index.tsx b/src/components/RichSelectField/index.tsx index 2e5f38a24..e6b72b845 100644 --- a/src/components/RichSelectField/index.tsx +++ b/src/components/RichSelectField/index.tsx @@ -7,7 +7,7 @@ import { useCallback, useMemo, } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { useErrors } from '../../providers/ErrorContext' import { BaseFieldProps } from '../../types' @@ -155,7 +155,7 @@ export const RichSelectField = < [formatProp, multiple, name, options], ) - const { input, meta } = useField(name, { + const { input, meta } = useFormField(name, { format, formatOnBlur, maxLength, diff --git a/src/components/SelectNumberField/index.tsx b/src/components/SelectNumberField/index.tsx index 29c85369e..9fa5a6731 100644 --- a/src/components/SelectNumberField/index.tsx +++ b/src/components/SelectNumberField/index.tsx @@ -1,6 +1,6 @@ import { SelectNumber } from '@scaleway/ui' import { ComponentProps, FocusEvent, FocusEventHandler } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { BaseFieldProps } from '../../types' type SelectNumberValue = NonNullable< @@ -51,7 +51,7 @@ export const SelectNumberField = ({ value, className, }: SelectNumberValueFieldProps) => { - const { input } = useField(name, { + const { input } = useFormField(name, { required, type: 'number', validate, diff --git a/src/components/SelectableCardField/index.tsx b/src/components/SelectableCardField/index.tsx index 0941a99d7..c15281e46 100644 --- a/src/components/SelectableCardField/index.tsx +++ b/src/components/SelectableCardField/index.tsx @@ -1,7 +1,7 @@ import { SelectableCard } from '@scaleway/ui' import { FieldState } from 'final-form' import { ComponentProps } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { useErrors } from '../../providers/ErrorContext' import { BaseFieldProps } from '../../types' @@ -54,7 +54,7 @@ export const SelectableCardField = ({ }: SelectableCardFieldProps): JSX.Element => { const { getError } = useErrors() - const { input, meta } = useField(name, { + const { input, meta } = useFormField(name, { required, type: type ?? 'radio', validate, diff --git a/src/components/TagsField/index.tsx b/src/components/TagsField/index.tsx index bc5773513..63b036b85 100644 --- a/src/components/TagsField/index.tsx +++ b/src/components/TagsField/index.tsx @@ -1,6 +1,6 @@ import { Tags } from '@scaleway/ui' import { ComponentProps } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { BaseFieldProps } from '../../types' export type TagsFieldProps = BaseFieldProps & @@ -27,7 +27,7 @@ export const TagsField = ({ validate, variant, }: TagsFieldProps): JSX.Element => { - const { input } = useField(name, { + const { input } = useFormField(name, { required, type: 'text', validate, diff --git a/src/components/TextBoxField/__stories__/index.stories.tsx b/src/components/TextBoxField/__stories__/index.stories.tsx index 855428cd8..c3be1edf4 100644 --- a/src/components/TextBoxField/__stories__/index.stories.tsx +++ b/src/components/TextBoxField/__stories__/index.stories.tsx @@ -1,6 +1,6 @@ import { Checkbox } from '@scaleway/ui' import { Meta, Story } from '@storybook/react' -import { ComponentProps } from 'react' +import { ComponentProps, useState } from 'react' import { Form, Submit, TextBoxField } from '../..' import { mockErrors } from '../../../mocks/mockErrors' @@ -57,7 +57,7 @@ Required.args = { export const DynamicRequired: Story< ComponentProps > = args => { - const [isRequired, setIsRequired] = React.useState(true) + const [isRequired, setIsRequired] = useState(true) return ( <> diff --git a/src/components/TextBoxField/index.tsx b/src/components/TextBoxField/index.tsx index f42d425a1..95e57d145 100644 --- a/src/components/TextBoxField/index.tsx +++ b/src/components/TextBoxField/index.tsx @@ -1,7 +1,7 @@ import { TextBox } from '@scaleway/ui' import { FieldState } from 'final-form' import { ComponentProps, FocusEvent, Ref, forwardRef } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { useErrors } from '../../providers/ErrorContext' import { BaseFieldProps } from '../../types' @@ -108,7 +108,7 @@ export const TextBoxField = forwardRef( ): JSX.Element => { const { getError } = useErrors() - const { input, meta } = useField(name, { + const { input, meta } = useFormField(name, { afterSubmit, allowNull, beforeSubmit, diff --git a/src/components/TimeField/index.tsx b/src/components/TimeField/index.tsx index 5edadb70f..237fa2119 100644 --- a/src/components/TimeField/index.tsx +++ b/src/components/TimeField/index.tsx @@ -1,6 +1,6 @@ import { TimeInput } from '@scaleway/ui' import { ComponentProps, useMemo } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { BaseFieldProps } from '../../types' const parseTime = (date?: Date | string): { label: string; value: string } => { @@ -45,7 +45,7 @@ export const TimeField = ({ isSearchable, options, }: TimeFieldProps) => { - const { input, meta } = useField(name, { + const { input, meta } = useFormField(name, { formatOnBlur, initialValue, required, diff --git a/src/components/ToggleField/index.tsx b/src/components/ToggleField/index.tsx index 708bc78e4..b1a6ea9de 100644 --- a/src/components/ToggleField/index.tsx +++ b/src/components/ToggleField/index.tsx @@ -1,6 +1,6 @@ import { Toggle } from '@scaleway/ui' import { ComponentProps } from 'react' -import { useField } from '../../hooks' +import { useFormField } from '../../hooks' import { BaseFieldProps } from '../../types' type ToggleFieldProps = BaseFieldProps & @@ -44,7 +44,7 @@ export const ToggleField = ({ value, labelPosition, }: ToggleFieldProps) => { - const { input } = useField(name, { + const { input } = useFormField(name, { afterSubmit, allowNull, beforeSubmit, diff --git a/src/hooks/__tests__/useField.spec.tsx b/src/hooks/__tests__/useFormField.spec.tsx similarity index 62% rename from src/hooks/__tests__/useField.spec.tsx rename to src/hooks/__tests__/useFormField.spec.tsx index 5b649db1e..8de694519 100644 --- a/src/hooks/__tests__/useField.spec.tsx +++ b/src/hooks/__tests__/useFormField.spec.tsx @@ -1,15 +1,17 @@ import { renderHook } from '@testing-library/react' -import React, { ReactElement } from 'react' +import { ReactElement } from 'react' import { Form } from '../../components' import { mockErrors } from '../../mocks' -import { useField } from '../useField' +import { useFormField } from '../useFormField' -describe('useField', () => { +describe('useFormField', () => { test('should render correctly', () => { const wrapper = ({ children }: { children: ReactElement }) => (
{children}
) - const { result } = renderHook(() => useField('fieldName', {}), { wrapper }) + const { result } = renderHook(() => useFormField('fieldName', {}), { + wrapper, + }) expect(result.current).toBeDefined() }) }) diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 6b054bb12..d28fd5f0d 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,2 +1,2 @@ export { useValidation } from './useValidation' -export { useField } from './useField' +export { useFormField } from './useFormField' diff --git a/src/hooks/useField.ts b/src/hooks/useFormField.ts similarity index 89% rename from src/hooks/useField.ts rename to src/hooks/useFormField.ts index 3b0391478..1ece50994 100644 --- a/src/hooks/useField.ts +++ b/src/hooks/useFormField.ts @@ -1,10 +1,10 @@ import { useMemo } from 'react' -import { UseFieldConfig, useField as useFinalFormField } from 'react-final-form' +import { UseFieldConfig, useField } from 'react-final-form' import { pickValidators } from '../helpers' import { ValidatorProps } from '../types' import { useValidation } from './useValidation' -export const useField = < +export const useFormField = < FieldValue = unknown, T extends HTMLElement = HTMLElement, InputValue = FieldValue, @@ -56,11 +56,10 @@ export const useField = < // eslint-disable-next-line react-hooks/exhaustive-deps const data = useMemo(() => ({ key: Math.random() }), [validateFn]) - return useFinalFormField(name, { + return useField(name, { afterSubmit, allowNull, beforeSubmit, - data, defaultValue, format, formatOnBlur, @@ -73,5 +72,6 @@ export const useField = < validate: validateFn, validateFields, value, + data, }) }