-
-
Notifications
You must be signed in to change notification settings - Fork 5.3k
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
[Doc] Convert Inputs Tutorial Examples to TS #9183
Conversation
ret = children({ formData, ...rest }); | ||
ret = children({ | ||
formData, | ||
getSource: (scopedSource: string) => scopedSource, |
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.
This ensures TS users don't have to check that getSource
is defined before calling it
docs/Inputs.md
Outdated
const { source, ...rest } = props; | ||
|
||
return ( | ||
<span> | ||
<BoundedTextField | ||
source="lat" | ||
label="Latitude" | ||
validate={required()} | ||
{...rest} | ||
/> | ||
| ||
<BoundedTextField | ||
source="lng" | ||
label="Longitude" | ||
validate={required()} | ||
{...rest} | ||
/> | ||
</span> | ||
); |
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.
weird (too large?) indentation
docs/Inputs.md
Outdated
extends Omit< | ||
TextFieldProps, | ||
"label" | "helperText" | "onChange" | "onBlur" | "type" | "defaultValue" | ||
>, | ||
InputProps {} | ||
|
||
const BoundedTextField = (props: BoundedTextFieldProps) => { | ||
const { onChange, onBlur, label, ...rest } = props; | ||
const { | ||
field, | ||
fieldState: { isTouched, invalid, error }, | ||
formState: { isSubmitted }, | ||
isRequired, | ||
} = useInput({ | ||
// Pass the event handlers to the hook but not the component as the field property already has them. | ||
// useInput will call the provided onChange and onBlur in addition to the default needed by react-hook-form. | ||
onChange, | ||
onBlur, | ||
...rest, | ||
}); | ||
|
||
return ( | ||
<TextField | ||
{...field} | ||
label={label} | ||
error={(isTouched || isSubmitted) && invalid} | ||
helperText={(isTouched || isSubmitted) && invalid ? error?.message : ""} | ||
required={isRequired} | ||
{...rest} | ||
/> | ||
); |
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.
weird indentation
docs/Inputs.md
Outdated
<Edit> | ||
<SimpleForm> | ||
<SelectInput source="country" choices={toChoices(countries)} /> | ||
<FormDataConsumer<{ country: string }>> | ||
{({ formData, ...rest }) => ( | ||
<SelectInput | ||
source="cities" | ||
choices={ | ||
formData.country ? toChoices(cities[formData.country]) : [] | ||
} | ||
{...rest} | ||
/> | ||
)} | ||
</FormDataConsumer> | ||
</SimpleForm> | ||
</Edit> |
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.
indentation too large
docs/Inputs.md
Outdated
const cities: Record<string, string[]> = { | ||
USA: ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"], | ||
UK: ["London", "Birmingham", "Glasgow", "Liverpool", "Bristol"], | ||
France: ["Paris", "Marseille", "Lyon", "Toulouse", "Nice"], | ||
}; |
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.
indentation too large
docs/Inputs.md
Outdated
const CityInput = (props: SelectInputProps) => { | ||
const country = useWatch<{ country: string }>({ name: "country" }); | ||
|
||
return ( | ||
<SelectInput | ||
choices={country ? toChoices(cities[country]) : []} | ||
{...props} | ||
/> | ||
); | ||
}; |
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.
indentation too large
No description provided.