add FieldCheckbox, add FieldRadio

Author: viococo

application/src/App.tsx

@@ -30,6 +30,23 @@ const App: React.FC = () => {
     <FormBuilder
       {...{
         inputs: {
+          checkbox: {
+            type: "checkbox",
+            options: {
+              a: { text: "checkbox a" },
+              b: { text: "checkbox b" },
+              c: { text: "checkbox c" }
+            }
+          },
+          radio: {
+            type: "radio",
+            options: {
+              a: { text: "radio a" },
+              b: { text: "radio b" },
+              c: { text: "radio c" }
+            }
+          },
+
           dropdown: {
             type: "dropdown",
             placeholder: "dropdown placehoder",

application/src/components/FormBuilder.tsx

@@ -1,7 +1,9 @@
 import React, { ComponentType } from "react";
 
 // Import default inputs
+import { FieldCheckbox } from "./Inputs/FieldCheckbox";
 import { FieldDropdown, IOptions } from "./Inputs/FieldDropdown";
+import { FieldRadio } from "./Inputs/FieldRadio";
 import { FieldText } from "./Inputs/FieldText";
 import { FieldTextarea } from "./Inputs/FieldTextarea";
 
@@ -30,9 +32,11 @@ interface IFormBuilder {
  * DATA
  */
 const inputsComponentsDefault: Iinputs = {
+  checkbox: FieldCheckbox,
   dropdown: FieldDropdown,
   number: FieldText,
   password: FieldText,
+  radio: FieldRadio,
   select: FieldDropdown,
   text: FieldText,
   textarea: FieldTextarea

application/src/components/Inputs/FieldCheckbox.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { IOptions } from "./FieldDropdown";
+
+/**
+ * TYPES
+ **/
+type Ivalues = Array<string>;
+interface IFieldCheckbox {
+  value: Ivalues;
+  options?: IOptions;
+  onChange: Function;
+}
+
+/**
+ * COMPONENT
+ **/
+export const FieldCheckbox = ({
+  value: currentValues = [],
+  options,
+  onChange: onChangeProps,
+  ...props
+}: IFieldCheckbox) => {
+  if (!options) throw new Error("Options is missing");
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+
+    if (currentValues.includes(value)) {
+      currentValues = currentValues.filter(e => e !== value);
+    } else currentValues = [...currentValues, value];
+
+    return onChangeProps(e, { value: currentValues });
+  };
+
+  return (
+    <div>
+      {Object.entries(options).map(([value, { text }]) => {
+        return (
+          <div {...{ key: value }}>
+            <label>
+              <input
+                {...{
+                  value,
+                  onChange,
+                  checked: currentValues.includes(value),
+                  ...props
+                }}
+              />
+              {text}
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

application/src/components/Inputs/FieldRadio.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { IOptions } from "./FieldDropdown";
+
+/**
+ * TYPES
+ **/
+interface IFieldRadio {
+  value: string;
+  options?: IOptions;
+  onChange: Function;
+}
+
+/**
+ * COMPONENT
+ **/
+export const FieldRadio = ({
+  value: currentValue,
+  options,
+  onChange: onChangeProps,
+  ...props
+}: IFieldRadio) => {
+  if (!options) throw new Error("Options is missing");
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) =>
+    onChangeProps(e, { value: e.target.value });
+
+  return (
+    <div>
+      {Object.entries(options).map(([value, { text }]) => {
+        return (
+          <div {...{ key: value }}>
+            <label>
+              <input
+                {...{
+                  value,
+                  onChange,
+                  checked: currentValue === value,
+                  ...props
+                }}
+              />
+              {text}
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

application/src/components/Inputs/index.js

@@ -1,3 +1,5 @@
+export * from "./FieldCheckbox.tsx";
 export * from "./FieldDropdown.tsx";
+export * from "./FieldRadio.tsx";
 export * from "./FieldText.tsx";
 export * from "./FieldTextarea.tsx";