Add RadioInput and RadioGroupInput component. (refinedev#28)

example/src/post.tsx

@@ -106,7 +106,9 @@ export const PostCreate = (props: any) => {
  field: "title",
  order: "asc",
  }}
- />
+ >
+ <SelectInput />
+ </ReferenceInput>
  </FormItem>
  <FormItem
  label="User"
@@ -119,17 +121,15 @@ export const PostCreate = (props: any) => {
  help="Autocomplete (search user email)"
  >
  <ReferenceInput
- showSearch
  reference="users"
  optionText="email"
  sort={{
  field: "email",
  order: "asc",
  }}
- filter={{
- status: true,
- }}
- />
+ >
+ <SelectInput showSearch />
+ </ReferenceInput>
  </FormItem>
  </Form>
  </Create>
@@ -205,7 +205,9 @@ export const PostEdit = (props: any) => {
  },
  ]}
  >
- <ReferenceInput reference="categories" optionText="title" />
+ <ReferenceInput reference="categories" optionText="title">
+ <SelectInput />
+ </ReferenceInput>
  </FormItem>
  <FormItem
  label="User"
@@ -217,11 +219,9 @@ export const PostEdit = (props: any) => {
  ]}
  help="Autocomplete (search user email)"
  >
- <ReferenceInput
- showSearch
- reference="users"
- optionText="email"
- />
+ <ReferenceInput reference="users" optionText="email">
+ <SelectInput showSearch />
+ </ReferenceInput>
  </FormItem>
  </Form>
  </Edit>

src/components/index.ts

@@ -7,5 +7,6 @@ export { Edit } from "./edit";
 export { Form, FormItem } from "./form";
 export { TextInput, TextareaInput } from "./textInput";
 export { SelectInput } from "./selectInput";
+export { RadioInput, RadioGroupInput } from "./radioInput";
 export { AutoCompleteInput } from "./autocompleteInput";
 export { ReferenceInput } from "./referenceInput";

src/components/radioInput/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Radio as AntdRadio } from "antd";
+import { RadioProps, RadioGroupProps } from "antd/lib/radio";
+
+export const RadioInput: React.FC<RadioProps> = ({ ...rest }) => {
+ return <AntdRadio {...rest} />;
+};
+
+export const RadioGroupInput: React.FC<RadioGroupProps> = ({ ...rest }) => {
+ return <AntdRadio.Group {...rest} />;
+};

src/components/referenceInput/index.tsx

@@ -1,35 +1,35 @@
 import React, { useContext } from "react";
 import { useQuery } from "react-query";
-import { SelectProps } from "antd/lib/select";
 
-import { SelectInput } from "@components";
 import { DataContext } from "@contexts/data";
 import { GetListResponse, IDataContext, Sort } from "@interfaces";
 
-export interface ReferenceInputProps extends SelectProps<any> {
+export interface ReferenceInputProps {
  reference: string;
+ onChange?: (value: string | number) => void;
+ value?: string | number;
  optionText?: string;
  optionValue?: string;
  pageSize?: number;
  sort?: Sort;
- filter?: [k: string]: any;
+ filter?: { [k: string]: any };
 }
 
 interface Option {
  label: string;
  value: any;
- key: any;
 }
 
 export const ReferenceInput: React.FC<ReferenceInputProps> = ({
  reference,
+ onChange,
+ value,
  optionText = "name",
  optionValue = "id",
- showSearch,
  pageSize = 25,
  sort,
  filter,
- ...rest
+ children,
 }) => {
  const [search, setSearch] = React.useState<string | undefined>();
  const [options, setOptions] = React.useState<Option[]>();
@@ -51,7 +51,6 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = ({
  const options: Option[] = data.data.map((item) => ({
  label: item[optionText],
  value: item[optionValue],
- key: item[optionValue],
  }));
 
  setOptions(options);
@@ -64,14 +63,19 @@ export const ReferenceInput: React.FC<ReferenceInputProps> = ({
  refetch();
  };
 
- return (
- <SelectInput
- optionFilterProp="label"
- showSearch={showSearch}
- onSearch={onSearch}
- loading={isLoading}
- options={options}
- {...rest}
- />
- );
+ const childrenWithProps = React.Children.map(children, (child) => {
+ // checking isValidElement is the safe way and avoids a typescript error too
+ if (React.isValidElement(child)) {
+ return React.cloneElement(child, {
+ onChange,
+ onSearch,
+ value,
+ options,
+ loading: isLoading,
+ });
+ }
+ return child;
+ });
+
+ return <React.Fragment>{childrenWithProps}</React.Fragment>;
 };

src/index.tsx

@@ -13,6 +13,8 @@ export {
  TextInput,
  TextareaInput,
  SelectInput,
+ RadioInput,
+ RadioGroupInput,
  AutoCompleteInput,
  ReferenceInput,
 } from "./components";