Skip to content
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.

Sign up for GitHub

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

[TypeScript] Make FormDataConsumer generic #8389

Merged
merged 5 commits into from
Feb 10, 2023
Merged

[TypeScript] Make FormDataConsumer generic #8389

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1d2aab6
enhancement: add generic type
Gabriel-Malenowitch Nov 13, 2022
4265c0f
refactor: add removed imports
Gabriel-Malenowitch Dec 26, 2022
0d18ec0
refactor: add removed imports
Gabriel-Malenowitch Dec 26, 2022
e282e45
refactor: improve code readability
Gabriel-Malenowitch Dec 27, 2022
245d2eb
refactor: fix types
Gabriel-Malenowitch Dec 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 27 additions & 17 deletions packages/ra-core/src/form/FormDataConsumer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import get from 'lodash/get';
*
* const PostEdit = (props) => (
* <Edit {...props}>
* <SimpleForm>
* <SimpleForm<FieldValues>>
* <BooleanInput source="hasEmail" />
* <FormDataConsumer>
* {({ formData, ...rest }) => formData.hasEmail &&
Expand All @@ -28,7 +28,7 @@ import get from 'lodash/get';
* <Edit {...props}>
* <SimpleForm>
* <SelectInput source="country" choices={countries} />
* <FormDataConsumer>
* <FormDataConsumer<FieldValues>>
* {({ formData, ...rest }) =>
* <SelectInput
* source="city"
Expand All @@ -41,20 +41,28 @@ import get from 'lodash/get';
* </Edit>
* );
*/
const FormDataConsumer = (props: ConnectedProps) => {
const { getValues } = useFormContext();
let formData = useWatch();
const FormDataConsumer = <TFieldValues extends FieldValues = FieldValues>(
props: ConnectedProps<TFieldValues>
) => {
const { getValues } = useFormContext<TFieldValues>();
let formData = (useWatch<TFieldValues>() as unknown) as TFieldValues;

//useWatch will initially return the provided defaultValues of the form.
//We must get the initial formData from getValues
if (Object.keys(formData).length === 0) {
(formData as FieldValues) = getValues();
formData = getValues();
}

return <FormDataConsumerView formData={formData} {...props} />;
return (
<FormDataConsumerView<TFieldValues> formData={formData} {...props} />
);
};

export const FormDataConsumerView = (props: Props) => {
export const FormDataConsumerView = <
TFieldValues extends FieldValues = FieldValues
>(
props: Props<TFieldValues>
) => {
const { children, form, formData, source, index, ...rest } = props;
let ret;

Expand All @@ -72,25 +80,27 @@ export const FormDataConsumerView = (props: Props) => {

export default FormDataConsumer;

export interface FormDataConsumerRenderParams {
formData: any;
export interface FormDataConsumerRenderParams<
TFieldValues extends FieldValues = FieldValues
> {
formData: TFieldValues;
scopedFormData?: any;
getSource?: (source: string) => string;
}

export type FormDataConsumerRender = (
params: FormDataConsumerRenderParams
) => ReactNode;
export type FormDataConsumerRender<
TFieldValues extends FieldValues = FieldValues
> = (params: FormDataConsumerRenderParams<TFieldValues>) => ReactNode;

interface ConnectedProps {
children: FormDataConsumerRender;
interface ConnectedProps<TFieldValues extends FieldValues = FieldValues> {
children: FormDataConsumerRender<TFieldValues>;
form?: string;
record?: any;
source?: string;
[key: string]: any;
}

interface Props extends ConnectedProps {
formData: any;
interface Props<TFieldValues extends FieldValues> extends ConnectedProps {
formData: TFieldValues;
index?: number;
}