fix: update radio field usage

form-atoms · Mar 14, 2023 · a5a21b6 · a5a21b6
1 parent 3b5b955
commit a5a21b6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 24 deletions.
diff --git a/src/radio-field/RadioField.stories.tsx b/src/radio-field/RadioField.stories.tsx
@@ -1,8 +1,7 @@
-import { selectField } from "@form-atoms/field";
-
 import { RadioField } from "./RadioField";
 import { country, getLabel, getValue, options } from "../select-field/country";
 import { FormStory, meta, optionalField } from "../stories";
+import { stringField } from "@form-atoms/field";
 
 export default {
   title: "RadioField",
@@ -25,7 +24,7 @@ export const Required: FormStory = {
   },
 };
 
-const optional = selectField({ optional: true });
+const optional = stringField({ optional: true });
 
 export const Optional: FormStory = {
   ...optionalField,

diff --git a/src/radio-field/RadioField.test.tsx b/src/radio-field/RadioField.test.tsx
@@ -1,4 +1,3 @@
-import { selectField } from "@form-atoms/field";
 import { render, screen } from "@testing-library/react";
 import { act as domAct, renderHook } from "@testing-library/react-hooks/dom";
 import { formAtom, useFormSubmit } from "form-atoms";
@@ -7,6 +6,7 @@ import { describe, expect, it } from "vitest";
 import { getLabel, getValue, options } from "../select-field/country";
 
 import { RadioField } from ".";
+import { stringField } from "@form-atoms/field";
 
 describe("<RadioField />", () => {
   const props = {
@@ -17,7 +17,7 @@ describe("<RadioField />", () => {
   };
 
   it("should render error message when submitting empty & required", async () => {
-    const field = selectField();
+    const field = stringField();
     const form = formAtom({ field });
     const { result } = renderHook(() => useFormSubmit(form));
 
@@ -35,9 +35,9 @@ describe("<RadioField />", () => {
     expect(onSubmit).not.toBeCalled();
   });
 
-  describe("with optional selectField()", () => {
+  describe("with optional stringField()", () => {
     it("submits form with undefined empty value", async () => {
-      const option = selectField({ optional: true });
+      const option = stringField({ optional: true });
       const form = formAtom({ option });
       const { result } = renderHook(() => useFormSubmit(form));
 

diff --git a/src/radio-field/RadioField.tsx b/src/radio-field/RadioField.tsx
@@ -1,13 +1,15 @@
 import {
-  SelectFieldProps,
+  RadioGroupProps,
+  useOptions,
+  SelectField,
   useSelectFieldProps,
-  useSelectOptions,
+  FieldProps,
 } from "@form-atoms/field";
 import { HelperText, Label, Radio } from "flowbite-react";
 
 import { FlowbiteField } from "../field";
 
-export const RadioField = <Option,>({
+export const RadioField = <Option, Field extends SelectField>({
   field,
   options,
   getValue,
@@ -16,13 +18,10 @@ export const RadioField = <Option,>({
   helperText,
   required,
   ...uiProps
-}: SelectFieldProps<Option>) => {
-  const props = useSelectFieldProps(field);
-  const { renderOptions } = useSelectOptions(field, {
-    getValue,
-    getLabel,
-    options,
-  });
+}: RadioGroupProps<Option, Field> & Omit<FieldProps<Field>, "field">) => {
+  // @ts-ignore
+  const props = useSelectFieldProps({ field, options, getValue });
+  const { renderOptions } = useOptions({ field, options, getLabel });
 
   return (
     <FlowbiteField
@@ -31,22 +30,22 @@ export const RadioField = <Option,>({
       label={label}
       helperText={helperText}
     >
-      {({ color, helperText, id: _, ...fieldProps }) => (
+      {({ color, helperText, id, ...fieldProps }) => (
         <>
-          {renderOptions.map(({ value, label, isActive }) => (
+          {renderOptions.map(({ id, value, label }) => (
             <div className="flex items-center gap-2" key={value}>
               <Radio
                 {...props}
                 role="radio"
-                id={value}
+                id={id}
                 value={value}
-                name={props.name ?? props.id}
-                checked={isActive}
-                aria-checked={isActive}
+                name={props.name ?? id}
+                checked={props.value === value}
+                aria-checked={props.value === value}
                 {...uiProps}
                 {...fieldProps}
               />
-              <Label htmlFor={value}>{label}</Label>
+              <Label htmlFor={id}>{label}</Label>
             </div>
           ))}
           {helperText && <HelperText color={color}>{helperText}</HelperText>}