From 3986c6d64272da81bd52d0d9a7abac5d4b7f65a9 Mon Sep 17 00:00:00 2001
From: eric-burel <eb@lebrun-burel.com>
Date: Tue, 17 May 2022 16:56:42 +0200
Subject: [PATCH] fix Select input for boostrap, expose reusable FormOption
 type

---
 .../components/form/inputs/Select.tsx         | 32 +++++++++++--------
 packages/react-ui/components/form/index.ts    |  2 +-
 packages/react-ui/components/form/typings.ts  | 12 +++++++
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/packages/react-ui-bootstrap/components/form/inputs/Select.tsx b/packages/react-ui-bootstrap/components/form/inputs/Select.tsx
index ec1df372..fd709410 100644
--- a/packages/react-ui-bootstrap/components/form/inputs/Select.tsx
+++ b/packages/react-ui-bootstrap/components/form/inputs/Select.tsx
@@ -1,39 +1,43 @@
 import { useIntlContext } from "@vulcanjs/react-i18n";
-import { useVulcanComponents } from "@vulcanjs/react-ui";
-import React from "react";
+import { FormInputProps, useVulcanComponents } from "@vulcanjs/react-ui";
+import type { FormOption } from "@vulcanjs/react-ui";
+import React, { ElementType } from "react";
 import { FormControl } from "react-bootstrap";
 
-// copied from vulcan:forms/utils.js to avoid extra dependency
-const getFieldType = (datatype) =>
-  datatype && datatype.length && datatype[0].type;
-
 export const FormComponentSelect = ({
+  path,
+  label,
   refFunction,
   inputProperties,
   itemProperties,
   datatype,
   options,
-}) => {
+}: FormInputProps<HTMLSelectElement>) => {
   const Components = useVulcanComponents();
   const intl = useIntlContext();
-  const noneOption = {
+  const noneOption: FormOption<any> = {
     label: intl.formatMessage({ id: "forms.select_option" }),
-    value:
-      getFieldType(datatype) === String || getFieldType(datatype) === Number
-        ? ""
-        : null, // depending on field type, empty value can be '' or null
+    value: datatype === String || datatype === Number ? "" : null, // depending on field type, empty value can be '' or null
     disabled: true,
   };
   let otherOptions = Array.isArray(options) && options.length ? options : [];
   const allOptions = [noneOption, ...otherOptions];
+  // @ts-ignore
   const { options: deleteOptions, ...newInputProperties } = inputProperties;
   return (
     <Components.FormItem
-      path={inputProperties.path}
+      path={path}
       label={inputProperties.label}
+      name={inputProperties.name}
       {...itemProperties}
     >
-      <FormControl as="select" {...newInputProperties} ref={refFunction}>
+      /* @ts-ignpore */
+      <FormControl
+        // @ts-ignore
+        as={"select" as ElementType}
+        {...newInputProperties}
+        ref={refFunction}
+      >
         {allOptions.map(({ value, label, intlId, ...rest }) => (
           <option key={value} value={value} {...rest}>
             {label}
diff --git a/packages/react-ui/components/form/index.ts b/packages/react-ui/components/form/index.ts
index 9a6558b9..f4a284e9 100644
--- a/packages/react-ui/components/form/index.ts
+++ b/packages/react-ui/components/form/index.ts
@@ -2,6 +2,6 @@ export * from "./core/FormContext";
 export * from "./core/Form";
 export * from "./core/FormContainer";
 
-export type { FormInputProps } from "./typings";
+export type { FormInputProps, FormOption } from "./typings";
 
 export * from "./utils";
diff --git a/packages/react-ui/components/form/typings.ts b/packages/react-ui/components/form/typings.ts
index 5d41789b..eaa11254 100644
--- a/packages/react-ui/components/form/typings.ts
+++ b/packages/react-ui/components/form/typings.ts
@@ -10,6 +10,10 @@ import type {
 export interface FormComponentProps<TField = any>
   extends Omit<FormField, "type"> {
   document: any;
+  /**
+   * Legacy type was Array<{type: Number | String | Boolean} = the "type" of a SimpleSchema object
+   * Now it's just the type from the JSON schema:
+   */
   datatype: VulcanFieldType; // TODO: type of the field, replace this by a cleaner value like we do in graphql to get the field type
   disabled: boolean;
   errors: Array<any>;
@@ -52,6 +56,14 @@ export type FormOption<TField = any> = {
   value: TField;
   /** Can force a default value */
   checked?: boolean;
+  /**
+   * Translated option
+   */
+  intlId?: string;
+  /**
+   * Non clickable option (visual clue)
+   */
+  disabled?: boolean;
 };
 
 /**