theoludwig/react-component-form
1
1
Fork 0
mirror of https://github.com/theoludwig/react-component-form.git synced 2024-07-17 07:30:13 +02:00
Code Issues Releases Activity

fix: rename value to message in HandleUseFormCallback return type

Browse Source 
BREAKING CHANGE: Migrate your onSubmit handlers to return a `message` instead of `value`
This commit is contained in:
Divlo 2023-04-02 22:08:32 +02:00
parent 69f12002c7
commit 5bb73df804
No known key found for this signature in database
GPG Key ID: 8F9478F220CE65E9
4 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -89,13 +89,13 @@ export const Example = () => {
formData, formData,
formElement formElement
) => { ) => {
console.log(formData) // { inputName: 'value of the input validated' } console.log(formData) // { inputName: 'value of the input validated and type-safe' }
formElement.reset() formElement.reset()
// The return can be either `null` or an object with a global message of type `'error' | 'success'`. // The return can be either `null` or an object with a global message of type `'error' | 'success'`.
return { return {
type: 'success', type: 'success',
value: 'Success: Form submitted' message: 'Success: Form submitted'
} }
} }

4
example/components/FormExample.tsx
View File

@ -23,12 +23,12 @@ export const FormExample: React.FC = () => {
formData, formData,
formElement formElement
) => { ) => {
await simulateServerRequest(2000) await simulateServerRequest(2_000)
console.log('onSubmit:', formData) console.log('onSubmit:', formData)
formElement.reset() formElement.reset()
return { return {
type: 'success', type: 'success',
value: 'common:success-message' message: 'common:success-message'
} }
} }

2
example/cypress/e2e/Form.cy.ts
View File

@ -3,7 +3,7 @@ describe('Form', () => {
cy.visit('/') cy.visit('/')
}) })
it('suceeds, reset input values and display the global success message', () => { it('succeeds, reset input values and display the global success message', () => {
cy.get('[data-cy=input-name]').type('John') cy.get('[data-cy=input-name]').type('John')
cy.get('[data-cy=input-email]').type('john@john.com') cy.get('[data-cy=input-email]').type('john@john.com')
cy.get('#error-name').should('not.exist') cy.get('#error-name').should('not.exist')

8
src/hooks/useForm.ts
View File

@ -38,13 +38,13 @@ export type HandleUseForm<K extends Schema> = (
export interface GlobalMessage { export interface GlobalMessage {
type: 'error' | 'success' type: 'error' | 'success'
value?: string message?: string
properties?: undefined properties?: undefined
} }
export interface PropertiesMessage<K extends Schema> { export interface PropertiesMessage<K extends Schema> {
type: 'error' type: 'error'
value?: string message?: string
properties: { [key in keyof Partial<K>]: string } properties: { [key in keyof Partial<K>]: string }
} }
@ -129,8 +129,8 @@ export const useForm = <K extends Schema>(
formElement formElement
) )
if (message != null) { if (message != null) {
const { value, type, properties } = message const { message: messageValue, type, properties } = message
setMessage(value) setMessage(messageValue)
setFetchState(type) setFetchState(type)
if (type === 'error') { if (type === 'error') {
const propertiesErrors: ErrorsObject<typeof validationSchema> = const propertiesErrors: ErrorsObject<typeof validationSchema> =