Skip to content

Commit

Permalink
Add RadioGroupField component to make it easier to create radio gro…
Browse files Browse the repository at this point in the history 
…up fields in forms (#2400)

You can now do:

```tsx
<RadioGroupField
    label="Radio"
    name="radio"
    fullWidth
    options={[
        {
            label: "Option One",
            value: "option-one",
        },
        {
            label: "Option Two",
            value: "option-two",
        },
    ]}
/>
```

instead of:

```tsx
<FieldContainer label="Radio" fullWidth>
    <Field name="radio" type="radio" value="option-one">
        {(props) => <FormControlLabel label="Option One" control={<FinalFormRadio {...props} />} />}
    </Field>
    <Field name="radio" type="radio" value="option-two">
        {(props) => <FormControlLabel label="Option Two" control={<FinalFormRadio {...props} />} />}
    </Field>
</FieldContainer>
```

---------

Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
  • Loading branch information
@jamesricky @johnnyomair
jamesricky and johnnyomair authored Aug 8, 2024
1 parent bbb7536 commit 99a1f0a
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 30 deletions.
38 changes: 38 additions & 0 deletions .changeset/sharp-mails-film.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
"@comet/admin": minor
---

Add `RadioGroupField` component to make it easier to create radio group fields in forms

You can now do:

```tsx
<RadioGroupField
label="Radio"
name="radio"
fullWidth
options={[
{
label: "Option One",
value: "option-one",
},
{
label: "Option Two",
value: "option-two",
},
]}
/>
```

instead of:

```tsx
<FieldContainer label="Radio" fullWidth>
<Field name="radio" type="radio" value="option-one">
{(props) => <FormControlLabel label="Option One" control={<FinalFormRadio {...props} />} />}
</Field>
<Field name="radio" type="radio" value="option-two">
{(props) => <FormControlLabel label="Option Two" control={<FinalFormRadio {...props} />} />}
</Field>
</FieldContainer>
```
29 changes: 29 additions & 0 deletions packages/admin/admin/src/form/fields/RadioGroupField.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { FormControlLabel, RadioGroup } from "@mui/material";
import MuiRadio from "@mui/material/Radio";
import React from "react";

import { Field, FieldProps } from "../../form/Field";

type RadioGroupFieldOption<Value extends string> = {
label: React.ReactNode;
value: Value;
};

export type RadioGroupFieldProps<Value extends string> = FieldProps<Value, HTMLInputElement> & {
options: RadioGroupFieldOption<Value>[];
layout?: "row" | "column";
};

export const RadioGroupField = <Value extends string>({ options, layout = "row", ...restProps }: RadioGroupFieldProps<Value>) => {
return (
<Field<Value> {...restProps}>
{({ input: { checked, value, onBlur, onFocus, ...restInput } }) => (
<RadioGroup {...restInput} row={layout === "row"}>
{options.map(({ value, label }) => (
<FormControlLabel key={value} label={label} value={value} control={<MuiRadio />} />
))}
</RadioGroup>
)}
</Field>
);
};
1 change: 1 addition & 0 deletions packages/admin/admin/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export { AsyncSelectField, AsyncSelectFieldProps } from "./form/fields/AsyncSele
export { AutocompleteField, AutocompleteFieldProps } from "./form/fields/AutocompleteField";
export { CheckboxField, CheckboxFieldProps } from "./form/fields/CheckboxField";
export { NumberField, NumberFieldProps } from "./form/fields/NumberField";
export { RadioGroupField, RadioGroupFieldProps } from "./form/fields/RadioGroupField";
export { SearchField, SearchFieldProps } from "./form/fields/SearchField";
export { SelectField, SelectFieldProps } from "./form/fields/SelectField";
export { SwitchField, SwitchFieldProps } from "./form/fields/SwitchField";
Expand Down
105 changes: 75 additions & 30 deletions storybook/src/admin/form/AllFieldComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import {
Field,
FieldContainer,
FieldSet,
FinalFormRadio,
FinalFormRangeInput,
NumberField,
RadioGroupField,
SearchField,
SelectField,
SwitchField,
Expand All @@ -17,7 +17,7 @@ import {
} from "@comet/admin";
import { ColorField } from "@comet/admin-color-picker";
import { DateField, DateRangeField, DateTimeField, TimeField, TimeRangeField } from "@comet/admin-date-time";
import { Box, Button, FormControlLabel, Link, MenuItem } from "@mui/material";
import { Box, Button, Link, MenuItem } from "@mui/material";
import { select } from "@storybook/addon-knobs";
import { storiesOf } from "@storybook/react";
import * as React from "react";
Expand Down Expand Up @@ -95,6 +95,7 @@ function Story() {
fullWidth
/>
</FieldSet>

<FieldSet title="Field-Components with Field-Container">
<CheckboxField name="singleCheckbox" fieldLabel="Single Checkbox" variant={fieldVariant} fullWidth />
<CheckboxField
Expand All @@ -121,34 +122,78 @@ function Story() {
<CheckboxField name="checkboxList" label="Checkbox five" value="checkbox-five" />
</FieldContainer>
<SwitchField name="switch" label={values.switch ? "On" : "Off"} fieldLabel="Switch" variant={fieldVariant} />
<FieldContainer label="Radio" variant={fieldVariant} fullWidth>
<Field name="radio" type="radio" value="option-one">
{(props) => <FormControlLabel label="Option One" control={<FinalFormRadio {...props} />} />}
</Field>
<Field name="radio" type="radio" value="option-two">
{(props) => <FormControlLabel label="Option Two" control={<FinalFormRadio {...props} />} />}
</Field>
</FieldContainer>
<FieldContainer label="Radio (many options)" variant={fieldVariant} fullWidth>
<Field name="radioManyOptions" type="radio" value="option-one">
{(props) => <FormControlLabel label="Option One" control={<FinalFormRadio {...props} />} />}
</Field>
<Field name="radioManyOptions" type="radio" value="option-two">
{(props) => <FormControlLabel label="Option Two" control={<FinalFormRadio {...props} />} />}
</Field>
<Field name="radioManyOptions" type="radio" value="option-three">
{(props) => <FormControlLabel label="Option Three" control={<FinalFormRadio {...props} />} />}
</Field>
<Field name="radioManyOptions" type="radio" value="option-four">
{(props) => <FormControlLabel label="Option Four" control={<FinalFormRadio {...props} />} />}
</Field>
<Field name="radioManyOptions" type="radio" value="option-five">
{(props) => <FormControlLabel label="Option Five" control={<FinalFormRadio {...props} />} />}
</Field>
<Field name="radioManyOptions" type="radio" value="option-six">
{(props) => <FormControlLabel label="Option Six" control={<FinalFormRadio {...props} />} />}
</Field>
</FieldContainer>
</FieldSet>
<FieldSet title="Radio Groups">
<RadioGroupField
label="Required"
name="radio"
variant={fieldVariant}
fullWidth
required
options={[
{
label: "Option One",
value: "option-one",
},
{
label: "Option Two",
value: "option-two",
},
]}
/>
<RadioGroupField
label="Many Options"
name="radioGroupManyOptions"
variant={fieldVariant}
fullWidth
options={[
{
label: "Option One",
value: "option-one",
},
{
label: "Option Two",
value: "option-two",
},
{
label: "Option Three",
value: "option-three",
},
{
label: "Option Four",
value: "option-four",
},
{
label: "Option Five",
value: "option-five",
},
{
label: "Option Six",
value: "option-six",
},
]}
/>
<RadioGroupField
label="Column Layout"
name="radioGroupFullWidthOptions"
variant={fieldVariant}
layout="column"
fullWidth
options={[
{
label: "Option One",
value: "option-one",
},
{
label: "Option Two",
value: "option-two",
},
{
label: "Option Three",
value: "option-three",
},
]}
/>
</FieldSet>
<FieldSet title="Number Range">
<Field
Expand Down

0 comments on commit 99a1f0a

Please sign in to comment.