Add ReferenceField component.

example/src/post.tsx

@@ -11,6 +11,7 @@ import {
  TextareaInput,
  SelectInput,
  ReferenceInput,
+ ReferenceField,
 } from "readmin";
 
 export const PostList = (props: any) => {
@@ -23,6 +24,15 @@ export const PostList = (props: any) => {
  key="categoryId"
  title="Category"
  dataIndex="categoryId"
+ render={(value) => {
+ return (
+ <ReferenceField
+ value={value}
+ resource="categories"
+ optionText="title"
+ />
+ );
+ }}
  />
  <Column key="status" title="Status" dataIndex="status" />
  </Table>

src/components/index.ts

@@ -2,6 +2,7 @@ export { Layout } from "./layout";
 export { List } from "./list";
 export { Table } from "./table";
 export { Column } from "./column";
+export { ReferenceField } from "./referenceField";
 export { Create } from "./create";
 export { Edit } from "./edit";
 export { Form, FormItem } from "./form";

src/components/referenceField/index.tsx

@@ -0,0 +1,32 @@
+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;
+ optionText?: string;
+ value: string | number;
+ record?: any;
+}
+
+export const ReferenceField: React.FC<ReferenceFieldProps> = ({
+ resource,
+ optionText = "title",
+ value,
+}) => {
+ 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>;
+ }
+
+ return <span>{data?.data[optionText]}</span>;
+};

src/index.tsx

@@ -5,6 +5,7 @@ export { Admin, Resource } from "./containers";
 export {
  List,
  Column,
+ ReferenceField,
  Table,
  Form,
  FormItem,