Add textField component. (refinedev#34)

example/src/post.tsx

@@ -12,6 +12,7 @@ import {
  SelectInput,
  ReferenceInput,
  ReferenceField,
+ TextField,
 } from "readmin";
 
 export const PostList = (props: any) => {
@@ -26,11 +27,9 @@ export const PostList = (props: any) => {
  dataIndex="categoryId"
  render={(value) => {
  return (
- <ReferenceField
- value={value}
- resource="categories"
- optionText="title"
- />
+ <ReferenceField value={value} resource="categories">
+ <TextField source="title" />
+ </ReferenceField>
  );
  }}
  />

src/components/index.ts

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

src/components/referenceField/index.tsx

@@ -6,15 +6,13 @@ 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,
+ children,
 }) => {
  const { getOne } = useContext<IDataContext>(DataContext);
 
@@ -28,5 +26,14 @@ export const ReferenceField: React.FC<ReferenceFieldProps> = ({
  return <span>loading</span>;
  }
 
- return <span>{data?.data[optionText]}</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>;
 };

src/components/textField/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export interface TextFieldProps {
+ record?: any;
+ source: string;
+}
+
+export const TextField: React.FC<TextFieldProps> = ({ record, source }) => {
+ return <span>{record[source]}</span>;
+};

src/index.tsx

@@ -18,6 +18,7 @@ export {
  RadioGroupInput,
  AutoCompleteInput,
  ReferenceInput,
+ TextField,
 } from "./components";
 
 export { IAuthContext as AuthProvider, Sort, Pagination } from "./interfaces";