New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a default unique id for useInput
#9788
Changes from 9 commits
c9c7594
97ef286
8268099
f11125c
ddc2ff4
03ad677
0fc59a0
9cf621e
b74553e
b125d7c
d74a42a
eca2b4d
85092d1
5418967
5cfa4b8
df41f11
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import * as React from 'react'; | ||
import { CoreAdminContext } from '../core'; | ||
import { Form } from './Form'; | ||
import { useInput } from './useInput'; | ||
|
||
export default { | ||
title: 'ra-core/form/useInput', | ||
}; | ||
|
||
const Input = ({ source }) => { | ||
const { id, field, fieldState } = useInput({ source }); | ||
|
||
return ( | ||
<label htmlFor={id}> | ||
{id}: <input id={id} {...field} /> | ||
{fieldState.error && <span>{fieldState.error.message}</span>} | ||
</label> | ||
); | ||
}; | ||
|
||
export const Basic = () => { | ||
const [submittedData, setSubmittedData] = React.useState<any>(); | ||
return ( | ||
<CoreAdminContext> | ||
<Form onSubmit={data => setSubmittedData(data)}> | ||
<div | ||
style={{ | ||
display: 'flex', | ||
flexDirection: 'column', | ||
gap: '1em', | ||
marginBottom: '1em', | ||
}} | ||
> | ||
<Input source="field1" /> | ||
<Input source="field2" /> | ||
<Input source="field3" /> | ||
</div> | ||
<button type="submit">Submit</button> | ||
</Form> | ||
<pre>{JSON.stringify(submittedData, null, 2)}</pre> | ||
</CoreAdminContext> | ||
); | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
import { ReactElement, useEffect } from 'react'; | ||
import { ReactElement, useEffect, useId } from 'react'; | ||
import { | ||
ControllerFieldState, | ||
ControllerRenderProps, | ||
|
@@ -44,6 +44,7 @@ export const useInput = <ValueType = any>( | |
const formGroupName = useFormGroupContext(); | ||
const formGroups = useFormGroups(); | ||
const record = useRecordContext(); | ||
const defaultId = useId(); | ||
|
||
if ( | ||
!source && | ||
|
@@ -132,7 +133,9 @@ export const useInput = <ValueType = any>( | |
}; | ||
|
||
return { | ||
id: id || finalSource, | ||
id: | ||
id || | ||
`${defaultId.substring(1, defaultId.length - 1)}-${finalSource}`, | ||
field, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why not just There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It was to be more readable. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't understand why you substring There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. removed |
||
fieldState, | ||
formState, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
too much details here. Just use
autogenerated
for the default valueThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done