Use CheckboxField and SwitchField components (#3377)

Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>

.changeset/clever-cats-yawn.md

@@ -0,0 +1,9 @@
+---
+"@comet/admin": minor
+---
+
+Support dynamic values for the `label` prop of `SwitchField` depending on its `checked` state
+
+```tsx
+<SwitchField name="switch" label={(checked) => (checked ? "On" : "Off")} />
+```

.changeset/neat-cooks-unite.md

@@ -0,0 +1,12 @@
+---
+"@comet/admin": minor
+---
+
+Allow passing a `ReactNode` to `fieldLabel` of `CheckboxField` and `SwitchField`
+
+This enables using `FormattedMessage` for the label.
+
+```tsx
+<CheckboxField name="visible" fieldLabel={<FormattedMessage id="exampleForm.visible" defaultMessage="Visible" />} />
+<SwitchField name="visible" fieldLabel={<FormattedMessage id="exampleForm.visible" defaultMessage="Visible" />} />
+```

packages/admin/admin/src/form/fields/CheckboxField.tsx

@@ -1,10 +1,11 @@
 import { FormControlLabel, FormControlLabelProps } from "@mui/material";
+import { ReactNode } from "react";
 
 import { FinalFormCheckbox, FinalFormCheckboxProps } from "../Checkbox";
 import { Field, FieldProps } from "../Field";
 
 export interface CheckboxFieldProps extends FieldProps<string, HTMLInputElement> {
-    fieldLabel?: string;
+    fieldLabel?: ReactNode;
     componentsProps?: {
         formControlLabel?: FormControlLabelProps;
         finalFormCheckbox?: FinalFormCheckboxProps;

packages/admin/admin/src/form/fields/SwitchField.tsx

@@ -1,10 +1,12 @@
 import { FormControlLabel, FormControlLabelProps } from "@mui/material";
+import { ReactNode } from "react";
 
 import { Field, FieldProps } from "../Field";
 import { FinalFormSwitch, FinalFormSwitchProps } from "../Switch";
 
 export interface SwitchFieldProps extends FieldProps<string, HTMLInputElement> {
-    fieldLabel?: string;
+    fieldLabel?: ReactNode;
+    label?: ReactNode | ((checked?: boolean) => ReactNode);
     componentsProps?: {
         formControlLabel?: FormControlLabelProps;
         finalFormSwitch?: FinalFormSwitchProps;
@@ -16,7 +18,11 @@ export const SwitchField = ({ fieldLabel, label, componentsProps = {}, ...restPr
     return (
         <Field type="checkbox" label={fieldLabel} {...restProps}>
             {(props) => (
-                <FormControlLabel label={label} control={<FinalFormSwitch {...props} {...finalFormSwitchProps} />} {...formControlLabelProps} />
+                <FormControlLabel
+                    label={typeof label === "function" ? label(props.input.checked) : label}
+                    control={<FinalFormSwitch {...props} {...finalFormSwitchProps} />}
+                    {...formControlLabelProps}
+                />
             )}
         </Field>
     );

packages/admin/cms-admin/src/blocks/helpers/VideoOptionsFields.tsx

@@ -1,36 +1,14 @@
-import { Field, FinalFormSwitch, OnChangeField } from "@comet/admin";
-import { FormControlLabel } from "@mui/material";
+import { OnChangeField, SwitchField } from "@comet/admin";
 import { useForm } from "react-final-form";
 import { FormattedMessage } from "react-intl";
 
 export const VideoOptionsFields = () => {
     const form = useForm();
     return (
         <>
-            <Field name="autoplay" type="checkbox">
-                {(props) => (
-                    <FormControlLabel
-                        label={<FormattedMessage id="comet.blocks.video.autoplay" defaultMessage="Autoplay" />}
-                        control={<FinalFormSwitch {...props} />}
-                    />
-                )}
-            </Field>
-            <Field name="loop" type="checkbox">
-                {(props) => (
-                    <FormControlLabel
-                        label={<FormattedMessage id="comet.blocks.video.loop" defaultMessage="Loop" />}
-                        control={<FinalFormSwitch {...props} />}
-                    />
-                )}
-            </Field>
-            <Field name="showControls" type="checkbox">
-                {(props) => (
-                    <FormControlLabel
-                        label={<FormattedMessage id="comet.blocks.video.showControls" defaultMessage="Show controls" />}
-                        control={<FinalFormSwitch {...props} />}
-                    />
-                )}
-            </Field>
+            <SwitchField name="autoplay" label={<FormattedMessage id="comet.blocks.video.autoplay" defaultMessage="Autoplay" />} />
+            <SwitchField name="loop" label={<FormattedMessage id="comet.blocks.video.loop" defaultMessage="Loop" />} />
+            <SwitchField name="showControls" label={<FormattedMessage id="comet.blocks.video.showControls" defaultMessage="Show controls" />} />
             {/* case: autoplay = false and showControls = false is not allowed */}
             <OnChangeField name="autoplay">
                 {(value, previousValue) => {

packages/admin/cms-admin/src/dam/DataGrid/filter/DamTableFilter.tsx

@@ -3,12 +3,11 @@ import {
     FilterBar,
     FilterBarPopoverFilter,
     FinalFormSearchTextField,
-    FinalFormSwitch,
     IFilterApi,
     ISortInformation,
+    SwitchField,
     TableFilterFinalForm,
 } from "@comet/admin";
-import { FormControlLabel } from "@mui/material";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { DamFilter } from "../../DamTable";
@@ -37,14 +36,10 @@ export const DamTableFilter = ({ filterApi, hideArchiveFilter }: DamTableFilterP
                         label={intl.formatMessage({ id: "comet.pages.dam.archived", defaultMessage: "Archived" })}
                         sx={{ marginRight: 2, marginLeft: 2 }}
                     >
-                        <Field name="archived" type="checkbox">
-                            {(props) => (
-                                <FormControlLabel
-                                    control={<FinalFormSwitch {...props} />}
-                                    label={<FormattedMessage id="comet.pages.dam.showArchivedAssets" defaultMessage="Show archived assets" />}
-                                />
-                            )}
-                        </Field>
+                        <SwitchField
+                            name="archived"
+                            label={<FormattedMessage id="comet.pages.dam.showArchivedAssets" defaultMessage="Show archived assets" />}
+                        />
                     </FilterBarPopoverFilter>
                 )}
                 <Field<ISortInformation> name="sort">

storybook/src/admin/form/AllFieldComponents.stories.tsx

@@ -104,7 +104,7 @@ export const AllFieldComponents = {
                                     variant={fieldVariant}
                                     fullWidth
                                 />
-                                <SwitchField name="switch" label={values.switch ? "On" : "Off"} fieldLabel="Switch" variant={fieldVariant} />
+                                <SwitchField name="switch" label={(checked) => (checked ? "On" : "Off")} fieldLabel="Switch" variant={fieldVariant} />
                             </FieldSet>
                             <FieldSet title="Checkboxes">
                                 <FormSection title="Individual Checkboxes">

storybook/src/admin/form/Checkbox.stories.tsx

@@ -1,5 +1,5 @@
-import { Field, FieldContainer, FinalFormCheckbox } from "@comet/admin";
-import { Card, CardContent, FormControlLabel, Grid } from "@mui/material";
+import { CheckboxField, FieldContainer } from "@comet/admin";
+import { Card, CardContent, Grid } from "@mui/material";
 import { Form } from "react-final-form";
 
 export default {
@@ -30,20 +30,10 @@ export const Checkbox = () => {
                                 <Card variant="outlined">
                                     <CardContent>
                                         <FieldContainer label="Checkboxes">
-                                            <Field name="unchecked" type="checkbox" fullWidth>
-                                                {(props) => <FormControlLabel label="Unchecked" control={<FinalFormCheckbox {...props} />} />}
-                                            </Field>
-                                            <Field name="checked" type="checkbox" fullWidth>
-                                                {(props) => <FormControlLabel label="Checked" control={<FinalFormCheckbox {...props} />} />}
-                                            </Field>
-                                            <Field name="disabledUnchecked" type="checkbox" fullWidth disabled>
-                                                {(props) => <FormControlLabel label="Disabled" control={<FinalFormCheckbox {...props} />} />}
-                                            </Field>
-                                            <Field name="disabledChecked" type="checkbox" fullWidth disabled>
-                                                {(props) => (
-                                                    <FormControlLabel label="Disabled & Checked" control={<FinalFormCheckbox {...props} />} />
-                                                )}
-                                            </Field>
+                                            <CheckboxField name="unchecked" label="Unchecked" fullWidth />
+                                            <CheckboxField name="checked" label="Checked" fullWidth />
+                                            <CheckboxField name="disabledUnchecked" label="Disabled" fullWidth disabled />
+                                            <CheckboxField name="disabledChecked" label="Disabled & Checked" fullWidth disabled />
                                         </FieldContainer>
                                     </CardContent>
                                 </Card>

storybook/src/admin/form/Switch.stories.tsx

@@ -1,5 +1,5 @@
-import { Field, FinalFormSwitch } from "@comet/admin";
-import { Box, Card, CardContent, Divider, FormControlLabel } from "@mui/material";
+import { SwitchField } from "@comet/admin";
+import { Card, CardContent } from "@mui/material";
 import { Form } from "react-final-form";
 
 export default {
@@ -13,19 +13,18 @@ export const Switch = () => {
                 onSubmit={(values) => {
                     //
                 }}
-                render={({ handleSubmit, values }) => (
+                render={({ handleSubmit }) => (
                     <form onSubmit={handleSubmit}>
                         <Card variant="outlined">
                             <CardContent>
-                                <Field name="foo" label="Switch with yes, no">
-                                    {(props) => <FormControlLabel label={values.foo ? "Yes" : "No"} control={<FinalFormSwitch {...props} />} />}
-                                </Field>
-                                <Box marginBottom={4}>
-                                    <Divider />
-                                </Box>
-                                <Field name="bar">
-                                    {(props) => <FormControlLabel label="Switch with label on the right" control={<FinalFormSwitch {...props} />} />}
-                                </Field>
+                                <SwitchField fullWidth name="simpleSwitch" fieldLabel="Simple switch" label="With label on the right" />
+                                <SwitchField
+                                    fullWidth
+                                    name="dynamicLabel"
+                                    fieldLabel="Switch with dynamic label"
+                                    label={(checked) => (checked ? "Yes" : "No")}
+                                />
+                                <SwitchField fullWidth name="disabled" fieldLabel="Disabled switch" label="Disabled" disabled />
                             </CardContent>
                         </Card>
                     </form>

storybook/src/admin/table/filterbar/AllFiltersInFilterbar.stories.tsx

@@ -5,13 +5,13 @@ import {
     FilterBarPopoverFilter,
     FinalFormInput,
     FinalFormRangeInput,
-    FinalFormSwitch,
+    SwitchField,
     Table,
     TableFilterFinalForm,
     useTableQueryFilter,
 } from "@comet/admin";
 import { FinalFormReactSelectStaticOptions } from "@comet/admin-react-select";
-import { Box, Divider, FormControlLabel, Typography } from "@mui/material";
+import { Box, Divider, Typography } from "@mui/material";
 import faker from "faker";
 
 interface ColorFilterFieldProps {
@@ -128,9 +128,7 @@ function Story({ tableData }: StoryProps) {
                             <Box maxWidth={350}>
                                 <Field name="price" component={FinalFormRangeInput} startAdornment="€" fullWidth min={50} max={1000} />
                                 <Divider />
-                                <Field name="expressDelivery" type="checkbox" fullWidth>
-                                    {(props) => <FormControlLabel label="Express delivery" control={<FinalFormSwitch {...props} />} />}
-                                </Field>
+                                <SwitchField name="expressDelivery" label="Express delivery" fullWidth />
                                 <Box paddingBottom={4} paddingLeft={4} paddingRight={4}>
                                     <Typography variant="body2">
                                         Show all articles that can be shipped with express delivery (usually shipped within 2-3 work days)

storybook/src/admin/table/filterbar/CombinedFieldsFilter.stories.tsx

@@ -3,12 +3,12 @@ import {
     FilterBar,
     FilterBarPopoverFilter,
     FinalFormRangeInput,
-    FinalFormSwitch,
+    SwitchField,
     Table,
     TableFilterFinalForm,
     useTableQueryFilter,
 } from "@comet/admin";
-import { Box, Divider, FormControlLabel, Typography } from "@mui/material";
+import { Box, Divider, Typography } from "@mui/material";
 import faker from "faker";
 
 interface IFilterValues {
@@ -49,9 +49,7 @@ function Story({ tableData }: StoryProps) {
                         <Box maxWidth={350}>
                             <Field name="price" component={FinalFormRangeInput} startAdornment="€" fullWidth min={50} max={1000} />
                             <Divider />
-                            <Field name="expressDelivery" type="checkbox" fullWidth>
-                                {(props) => <FormControlLabel label="Express delivery" control={<FinalFormSwitch {...props} />} />}
-                            </Field>
+                            <SwitchField name="expressDelivery" label="Express delivery" fullWidth />
                             <Box paddingBottom={4} paddingLeft={4} paddingRight={4}>
                                 <Typography variant="body2">
                                     Show all articles that can be shipped with express delivery (usually shipped within 2-3 work days)

storybook/src/docs/form/Layout.stories.tsx

@@ -1,8 +1,8 @@
 import {
     CancelButton,
+    CheckboxField,
     Field,
     FieldContainer,
-    FinalFormCheckbox,
     FinalFormInput,
     FinalFormRadio,
     FinalFormSelect,
@@ -103,9 +103,7 @@ export const FieldsInSidebar = {
                                         fullWidth
                                         component={FinalFormInput}
                                     />
-                                    <Field name="checkbox" type="checkbox" fullWidth>
-                                        {(props) => <FormControlLabel label="Checkbox" control={<FinalFormCheckbox {...props} />} />}
-                                    </Field>
+                                    <CheckboxField name="checkbox" label="Checkbox" fullWidth />
                                     <FieldContainer label="Radio" fullWidth>
                                         <>
                                             {flavourOptions.map(({ value, label }) => (
@@ -164,9 +162,7 @@ export const FieldsInDialog = {
                                             fullWidth
                                             component={FinalFormInput}
                                         />
-                                        <Field name="checkbox" type="checkbox" fullWidth>
-                                            {(props) => <FormControlLabel label="Checkbox" control={<FinalFormCheckbox {...props} />} />}
-                                        </Field>
+                                        <CheckboxField name="checkbox" label="Checkbox" fullWidth />
                                     </form>
                                 </DialogContent>
                                 <DialogActions>
@@ -323,9 +319,7 @@ export const HorizontalFields = {
                                         ))}
                                     </>
                                 </FieldContainer>
-                                <Field name="checkbox" type="checkbox" label="Checkbox">
-                                    {(props) => <FormControlLabel label="" control={<FinalFormCheckbox {...props} />} />}
-                                </Field>
+                                <CheckboxField name="checkbox" fieldLabel="Checkbox" fullWidth />
                             </form>
                         )}
                     />

storybook/src/docs/form/components/FinalFormFields.stories.tsx

@@ -1,18 +1,18 @@
 import {
     Button,
+    CheckboxField,
     Field,
     FieldContainer,
     FinalForm,
     FinalFormAsyncAutocomplete,
     FinalFormAsyncSelect,
     FinalFormAutocomplete,
-    FinalFormCheckbox,
     FinalFormInput,
     FinalFormRadio,
     FinalFormRangeInput,
     FinalFormSearchTextField,
     FinalFormSelect,
-    FinalFormSwitch,
+    SwitchField,
 } from "@comet/admin";
 import { FormControlLabel } from "@mui/material";
 import { useMemo } from "react";
@@ -227,12 +227,8 @@ export const _FinalFormCheckbox = {
                     alert(JSON.stringify(values, null, 4));
                 }}
             >
-                <Field name="checkbox" label="FinalFormCheckbox" type="checkbox" fullWidth>
-                    {(props) => <FormControlLabel label="Confirm" control={<FinalFormCheckbox {...props} />} />}
-                </Field>
-                <Field name="checkboxDisabled" label="FinalFormCheckbox disabled" type="checkbox" fullWidth disabled>
-                    {(props) => <FormControlLabel label="Confirm" control={<FinalFormCheckbox {...props} />} />}
-                </Field>
+                <CheckboxField name="checkbox" fieldLabel="FinalFormCheckbox" label="Confirm" fullWidth />
+                <CheckboxField name="checkboxDisabled" fieldLabel="FinalFormCheckbox disabled" label="Confirm" fullWidth disabled />
                 <Button type="submit">Submit</Button>
             </FinalForm>
         );
@@ -250,12 +246,14 @@ export const _FinalFormSwitch = {
                     alert(JSON.stringify(values, null, 4));
                 }}
             >
-                <Field name="switch" label="FinalFormSwitch" fullWidth>
-                    {(props) => <FormControlLabel label={props.input.value ? "On" : "Off"} control={<FinalFormSwitch {...props} />} />}
-                </Field>
-                <Field name="switchDisabled" label="FinalFormSwitch disabled" fullWidth disabled>
-                    {(props) => <FormControlLabel label={props.input.value ? "On" : "Off"} control={<FinalFormSwitch {...props} />} />}
-                </Field>
+                <SwitchField name="switch" fieldLabel="FinalFormSwitch" label={(checked) => (checked ? "On" : "Off")} fullWidth />
+                <SwitchField
+                    name="switchDisabled"
+                    fieldLabel="FinalFormSwitch disabled"
+                    label={(checked) => (checked ? "On" : "Off")}
+                    fullWidth
+                    disabled
+                />
                 <Button type="submit">Submit</Button>
             </FinalForm>
         );