forked from refinedev/refine
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
39 lines (32 loc) · 1.01 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React, { useContext } from "react";
import { useQuery } from "react-query";
import { DataContext } from "@contexts/data";
import { GetOneResponse, IDataContext } from "@interfaces";
export interface ReferenceFieldProps {
resource: string;
value: string | number;
}
export const ReferenceField: React.FC<ReferenceFieldProps> = ({
resource,
value,
children,
}) => {
const { getOne } = useContext<IDataContext>(DataContext);
const { data, isFetching } = useQuery<GetOneResponse>(
[`resource/one/${resource}/`, { id: value }],
() => getOne(resource, value),
);
if (isFetching) {
// TODO: Add loding ui.
return <span>loading</span>;
}
const childrenWithProps = React.Children.map(children, (child) => {
if (React.isValidElement(child)) {
return React.cloneElement(child, {
record: data?.data,
});
}
return child;
});
return <React.Fragment>{childrenWithProps}</React.Fragment>;
};