fix: select field usage

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

Hide file tree

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

diff --git a/src/select-field/SelectField.test.tsx b/src/select-field/SelectField.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 userEvent from "@testing-library/user-event";
@@ -8,6 +7,7 @@ import { describe, expect, it } from "vitest";
 import { country, getLabel, getValue, options } from "./country";
 
 import { SelectField } from "./";
+import { stringField } from "@form-atoms/field";
 
 describe("<SelectField />", () => {
   const props = {
@@ -26,7 +26,7 @@ describe("<SelectField />", () => {
   });
 
   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));
 
@@ -49,7 +49,7 @@ describe("<SelectField />", () => {
   });
 
   it("should use the placeholder prop", () => {
-    const field = selectField();
+    const field = stringField();
 
     render(
       <SelectField field={field} {...props} placeholder="Pick a country" />
@@ -60,7 +60,7 @@ describe("<SelectField />", () => {
 
   describe("with optional selectField()", () => {
     it("submits with undefined", async () => {
-      const option = selectField({ optional: true });
+      const option = stringField({ optional: true });
       const form = formAtom({ option });
       const { result } = renderHook(() => useFormSubmit(form));
 

diff --git a/src/select-field/SelectField.tsx b/src/select-field/SelectField.tsx
@@ -1,28 +1,32 @@
 import {
-  SelectFieldProps,
   useSelectFieldProps,
+  SelectProps,
   useSelectOptions,
+  SelectField as SelectZodField,
 } from "@form-atoms/field";
-import { Select, SelectProps } from "flowbite-react";
+import { Select, SelectProps as FlowbiteSelectProps } from "flowbite-react";
+import { ReactNode } from "react";
 
 import { FlowbiteField } from "../field";
 
-export const SelectField = <Option,>({
+export const SelectField = <Option, Field extends SelectZodField>({
   field,
   options,
   getValue,
   getLabel,
-  label,
   placeholder,
+  label,
   helperText,
   required,
   ...uiProps
-}: SelectFieldProps<Option> & SelectProps) => {
-  const props = useSelectFieldProps(field);
-  const { renderOptions, placeholderOption } = useSelectOptions(field, {
-    getValue,
-    getLabel,
+}: SelectProps<Option, Field> &
+  FlowbiteSelectProps & { label?: ReactNode }) => {
+  // @ts-ignore
+  const props = useSelectFieldProps({ field, options, getValue });
+  const { selectOptions } = useSelectOptions({
+    field,
     options,
+    getLabel,
     placeholder,
   });
 
@@ -35,12 +39,7 @@ export const SelectField = <Option,>({
     >
       {(fieldProps) => (
         <Select role="combobox" {...uiProps} {...props} {...fieldProps}>
-          {placeholderOption}
-          {renderOptions.map(({ value, label }) => (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          ))}
+          {selectOptions}
         </Select>
       )}
     </FlowbiteField>

diff --git a/src/select-field/country.ts b/src/select-field/country.ts
@@ -1,4 +1,4 @@
-import { selectField } from "@form-atoms/field";
+import { stringField } from "@form-atoms/field";
 
 export const options = [
   { code: "SK", name: "Slovak Republic" },
@@ -10,4 +10,4 @@ type Country = { code: string; name: string };
 export const getValue = (opt: Country) => opt.code;
 export const getLabel = (opt: Country) => opt.name;
 
-export const country = selectField();
+export const country = stringField();