@engagebay/engagebay-form-module 1.0.0-beta.0

package/src/form/formfields/SelectField.tsx

@@ -0,0 +1,82 @@
+import React, {useContext, useEffect, useRef, useState,} from "react";
+
+import {RegisterOptions} from "react-hook-form";
+
+import {FieldOptionsSchema, FormFieldComponentPropSchema, FormFieldType,} from "../schema/FormFieldSchema";
+import {FormContext} from "../context/FormContext";
+import {Listbox, ListboxButton,} from "@headlessui/react";
+import RenderFormField from "../util/RenderFormField";
+import RenderListOptions, {renderListBoxValue,} from "../util/RenderListOptions";
+import {handleChange, registerFormField} from "../util";
+
+const SelectField: React.FC<FormFieldComponentPropSchema> = ({
+                                                                 fieldConfig,
+                                                                 onChange,
+                                                             }: FormFieldComponentPropSchema) => {
+    const selectRef = useRef<HTMLUListElement>(null);
+    const formContext = useContext(FormContext);
+    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>(
+        fieldConfig.options ? fieldConfig.options : []
+    );
+    let registerOptions: RegisterOptions = registerFormField(fieldConfig);
+
+    let hookProps = formContext.register(fieldConfig.name, registerOptions);
+
+    useEffect(() => {
+        if (
+            (fieldConfig.options && fieldConfig.options.length > 0) ||
+            (fieldConfig.forceUpdate && fieldConfig.options)
+        ) {
+            setListOptions(fieldConfig.options);
+        }
+        if (!formContext.getValues(fieldConfig.name) && fieldConfig.defaultValue) {
+            formContext.setValue(fieldConfig.name, fieldConfig.defaultValue);
+        }
+    }, [fieldConfig.options, fieldConfig.forceUpdate]);
+
+    function getInput() {
+        return (
+            <Listbox
+                as={"div"}
+                {...hookProps}
+                value={formContext.getValues(fieldConfig.name)}
+                defaultValue={fieldConfig.defaultValue}
+                onChange={(val) => {
+                    const currentValue = formContext.getValues(fieldConfig.name);
+
+                    // If the value matches, set it to null, otherwise set it to val
+                    const newValue = currentValue === val ? null : val;
+
+                    handleChange(newValue, formContext, fieldConfig, onChange);
+                }}
+                disabled={fieldConfig.disabled}
+                className={"relative form-listbox flex-1"}>
+                <ListboxButton
+                    className={
+                        fieldConfig.customClassNames?.fieldClassName
+                            ? "form-listbox-select " +
+                            fieldConfig.customClassNames?.fieldClassName
+                            : "form-listbox-select"
+                    }>
+                    {renderListBoxValue(
+                        formContext,
+                        fieldConfig,
+                        listOptions,
+                        onChange
+                    )}
+                </ListboxButton>
+                <RenderListOptions
+                    ref={selectRef}
+                    fieldConfig={fieldConfig}
+                    formContext={formContext}
+                    formField={FormFieldType.SELECT}
+                    listOptions={listOptions}
+                    setListOptions={setListOptions}
+                />
+            </Listbox>
+        );
+    }
+
+    return <RenderFormField fieldConfig={fieldConfig} getInput={getInput}/>;
+};
+export default SelectField;

package/src/form/formfields/SwitchField.tsx

@@ -0,0 +1,131 @@
+import {Switch} from '@headlessui/react';
+import React, {Fragment, useContext, useEffect, useState} from 'react';
+import {RegisterOptions} from "react-hook-form";
+import {FormContext} from "../context/FormContext";
+import {FormFieldComponentPropSchema} from "../schema/FormFieldSchema";
+import RenderFormField from "../util/RenderFormField";
+import {handleChange, registerFormField} from "../util";
+import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon";
+import CheckIcon from "@heroicons/react/20/solid/CheckIcon";
+import clsx from 'clsx';
+
+const SwitchField: React.FC<FormFieldComponentPropSchema> = (props) => {
+    const formContext = useContext(FormContext);
+
+    const [enabled, setEnabled] = useState<boolean>(
+        formContext.getValues(props.fieldConfig.name) ?? false
+    );
+    useEffect(() => {
+        if (props.fieldConfig.defaultValue && formContext.getValues(props.fieldConfig.name)==null || undefined) {
+
+            formContext.setValue(props.fieldConfig.name, props.fieldConfig.defaultValue);
+            setEnabled(props.fieldConfig.defaultValue);
+
+        }
+    }, []);
+
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+    let hookProps = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+
+    function getInput() {
+        return (
+            <Switch
+            defaultChecked={props.fieldConfig.defaultValue as boolean}
+            {...hookProps}
+            onChange={(checked: boolean) => {
+                handleChange(
+                    checked,
+                    formContext,
+                    props.fieldConfig,
+                    props.onChange
+                );
+                setEnabled(checked);
+            }}
+            checked={enabled}
+            className="group relative inline-flex h-4 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none switch-container" 
+          >
+            <span className="sr-only">Use setting</span>
+            <span aria-hidden="true" className="pointer-events-none absolute size-full rounded-md bg-white switch-toggle-off" />
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute mx-auto h-3 w-9 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out group-data-[checked]:bg-[#4361ee] switch-toggle-on"
+            />
+            <span
+              aria-hidden="true"
+              className="pointer-events-none absolute left-0 inline-block size-4 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out group-data-[checked]:translate-x-5 switch-toggle-button"
+            />
+          </Switch>
+            // <Switch
+            //     defaultChecked={props.fieldConfig.defaultValue as boolean}
+            //     {...hookProps}
+            //     onChange={(checked: boolean) => {
+            //         handleChange(
+            //             checked,
+            //             formContext,
+            //             props.fieldConfig,
+            //             props.onChange
+            //         );
+            //         setEnabled(checked);
+            //     }}
+            //     checked={enabled}
+            //     style={{width:'44px'}}
+            //     className={clsx(
+            //         enabled ? 'switch-checked' : 'switch',
+            //         'relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 !form-switch'
+            //       )}>
+            //       {({checked}) => (
+            //         <>
+            //             <span className="sr-only">Use setting</span>
+            //             <span
+            //                 aria-hidden="true"
+            //                 style={{width:'20px', height:'20px'}}
+            //                 className={`${checked ? "translate-x-full" : "translate-x-0"}
+            //                 relative pointer-events-none inline-block  transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
+            //             >
+
+            //                 <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+            //                     {checked ? (
+            //                         <CheckIcon style={{width:'12px', height:'12px'}} />
+            //                     ) : (
+            //                         <XMarkIcon style={{width:'12px', height:'12px'}} />
+            //                     )}
+            //                 </span>
+    
+            //             </span>
+            //             {/* <span className="sr-only"></span>
+            //             <span
+            //                 aria-hidden="true"
+            //                 className="pointer-events-none absolute h-full w-full rounded-md bhite"
+            //             />
+            //             <span
+            //                 aria-hidden="true"
+            //                 className={clsx(
+            //                     checked
+            //                         ? "bg-[#377dff80]"
+            //                         : "bg-[#bdc1c6] shadow-md",
+            //                     "pointer-events-none absolute mx-auto h-3 w-8 rounded-full transition-colors duration-200 ease-in-out"
+            //                 )}
+            //             />
+            //             <span
+            //                 className={clsx(
+            //                     checked
+            //                         ? "translate-x-4 bg-[#377dff] shadow-md"
+            //                         : "translate-x-0 bg-white",
+            //                     "pointer-events-none inline-block h-4 w-4 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out"
+            //                 )}></span> */}
+            //         </>
+            //     )}
+            // </Switch>
+        );
+    }
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
+    );
+};
+
+export default SwitchField;

package/src/form/formfields/TextAreaField.tsx

@@ -0,0 +1,48 @@
+import React, { useContext } from "react";
+import { RegisterOptions } from "react-hook-form";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { Textarea } from "@headlessui/react";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+
+const TextAreaField: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  const formContext = useContext(FormContext);
+
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+  function getInput() {
+    return (
+      <Textarea
+        spellCheck="false"
+        rows={props.fieldConfig.rows ? props.fieldConfig.rows : 5}
+        {...hookProps}
+        placeholder={props.fieldConfig?.placeholder}
+        readOnly={props.fieldConfig?.readOnly}
+        disabled={props.fieldConfig?.disabled}
+        autoComplete={props.fieldConfig?.autoComplete}
+        defaultValue={props.fieldConfig.defaultValue as string}
+        className={`form-input ${
+          props.fieldConfig.customClassNames?.fieldClassName || "flex-1"
+        }`}
+        onChange={(e) => {
+          handleChange(
+            e.target.value,
+            formContext,
+            props.fieldConfig,
+            props.onChange
+          );
+        }}
+      ></Textarea>
+    );
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};
+export default TextAreaField;

package/src/form/formfields/TimeField.tsx

@@ -0,0 +1,53 @@
+import React, { useContext } from "react";
+import { RegisterOptions } from "react-hook-form";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { Input } from "@headlessui/react";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+
+const TimeField: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  const formContext = useContext(FormContext);
+
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+
+  /**
+   * Raw Form Field
+   */
+  const getInput = () => {
+    return (
+      <Input
+        type="time"
+        {...hookProps}
+        placeholder={props.fieldConfig?.placeholder}
+        readOnly={props.fieldConfig?.readOnly}
+        disabled={props.fieldConfig?.disabled}
+        autoComplete={props.fieldConfig?.autoComplete}
+        defaultValue={props.fieldConfig.defaultValue as string}
+        className={`form-input ${
+          props.fieldConfig.customClassNames?.fieldClassName || "flex-1"
+        }`}
+        onChange={(e) => {
+          handleChange(
+            e.target.value,
+            formContext,
+            props.fieldConfig,
+            props.onChange
+          );
+        }}
+        onClick={(event) => {
+          event.currentTarget.showPicker();
+        }}
+      />
+    );
+  };
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};
+export default TimeField;

package/src/form/formfields/Typeahead.tsx

@@ -0,0 +1,211 @@
+import React, {
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react";
+
+import { Listbox, ListboxButton } from "@headlessui/react";
+import axios from "axios";
+import { RegisterOptions } from "react-hook-form";
+import { reachoAPI } from "../../api";
+import { FormContext } from "../context/FormContext";
+import { getListOption, getListOptions } from "../FormFieldUtils";
+import {
+    FieldOptionsSchema,
+    FormFieldComponentPropSchema,
+    FormFieldType,
+    OutputFormatType,
+} from "../schema/FormFieldSchema";
+import { handleChange, registerFormField } from "../util";
+import RenderFormField from "../util/RenderFormField";
+import RenderListOptions, {
+    renderListBoxValue,
+} from "../util/RenderListOptions";
+
+const Typeahead: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const dynamicSelectRef = useRef<HTMLUListElement>(null);
+    const formContext = useContext(FormContext);
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+    let hookProps = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+    const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
+        []
+    );
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        if (
+            !formContext.getValues(props.fieldConfig.name) &&
+            props.fieldConfig.defaultValue
+        ) {
+            formContext.setValue(
+                props.fieldConfig.name,
+                props.fieldConfig.defaultValue
+            );
+        }
+        fetchData(undefined);
+    }, []);
+
+    const fetchData = useCallback(
+        async (_query: string | undefined) => {
+            setLoading(true);
+            try {
+                if (!props.fieldConfig.fetchUrl) return;
+
+                let url = props.fieldConfig.fetchUrl;
+                if (_query) {
+                    url = url.includes("?")
+                        ? url + "&q=" + _query
+                        : url + "?q=" + _query;
+                }
+
+                let response = await (props.fieldConfig.disableHeaderInFetch
+                    ? axios.get(url)
+                    : reachoAPI.get(url));
+                if (response.data) {
+                    const data: FieldOptionsSchema[] = getListOptions(
+                        response.data,
+                        props.fieldConfig.optionsConfig
+                    );
+                    setListOptions([...data]);
+                    let value = formContext.getValues(props.fieldConfig.name);
+                    if (
+                        value &&
+                        data.find((i) => i.value !== value)
+                    ) {
+                        if (selectedValues.find((i) => i.value !== value))
+                            fetchValue(value);
+                    }
+                    if (props.fieldConfig.fetchCallback) {
+                        props.fieldConfig.fetchCallback(response);
+                    }
+                } else {
+                    console.error(response.statusText);
+                }
+            } catch (err) {
+            } finally {
+                setLoading(false);
+            }
+        },
+        [props.fieldConfig.fetchUrl]
+    );
+
+    const fetchValue = async (value: string) => {
+        try {
+            if (
+                props.fieldConfig.ignoreFetchValue ||
+                !props.fieldConfig.fetchUrl
+            ) {
+                return;
+            }
+
+            let url = props.fieldConfig.fetchUrl;
+
+            if (value)
+                url = url.includes("?")
+                    ? url + "&values=" + value
+                    : url + "?values=" + value;
+
+            let response = await (
+                props.fieldConfig.disableHeaderInFetch
+                    ? axios.get(url)
+                    : reachoAPI.get(url)
+            );
+            if (response.data) {
+                const data: FieldOptionsSchema[] = getListOptions(
+                    response.data,
+                    props.fieldConfig.optionsConfig
+                );
+                setSelectedValues([...data]);
+            }
+        } catch (err) { }
+    };
+
+    const updateListOptions = (data: any) => {
+        const resData: FieldOptionsSchema = getListOption(
+            data,
+            props.fieldConfig.optionsConfig
+        );
+        setSelectedValues((perv) => [resData]);
+        formContext.setValue(props.fieldConfig.name, resData.value);
+    };
+
+    function getInput() {
+        return (
+            <Listbox
+                as={"div"}
+                {...hookProps}
+                className={`relative form-listbox flex-1`}
+                value={
+                    formContext.getValues(props.fieldConfig.name)
+                        ? props.fieldConfig.outputFormat ===
+                            OutputFormatType.ARRAY
+                            ? formContext.getValues(props.fieldConfig.name)[0]
+                            : formContext.getValues(props.fieldConfig.name)
+                        : undefined
+                }
+                onChange={(val) => {
+                    const currentValue = formContext.getValues(
+                        props.fieldConfig.name
+                    );
+
+                    // If the value matches, set it to null, otherwise set it to val
+                    const newValue = currentValue === val ? null : val;
+
+                    const selected = listOptions.find(o => o.value == newValue);
+                    selected && setSelectedValues([selected]);
+                    handleChange(
+                        newValue,
+                        formContext,
+                        props.fieldConfig,
+                        props.onChange
+                    );
+                }}
+                name={props.fieldConfig.name}
+                disabled={props.fieldConfig.disabled}>
+                <ListboxButton
+                    className={
+                        props.fieldConfig.customClassNames?.fieldClassName
+                            ? "form-listbox-select " +
+                            props.fieldConfig.customClassNames?.fieldClassName
+                            : "form-listbox-select"
+                    }>
+                    {renderListBoxValue(
+                        formContext,
+                        props.fieldConfig,
+                        [...selectedValues, ...listOptions],
+                        props.onChange
+                    )}
+                </ListboxButton>
+                <RenderListOptions
+                    formContext={formContext}
+                    onChange={props.onChange}
+                    formField={FormFieldType.TYPEAHEAD}
+                    ref={dynamicSelectRef}
+                    fieldConfig={props.fieldConfig}
+                    listOptions={[...selectedValues, ...listOptions]}
+                    setListOptions={setListOptions}
+                    loading={loading}
+                    setLoading={setLoading}
+                    createCallback={(data) => updateListOptions(data)}
+                    queryCallback={(query) => fetchData(query)}
+                />
+            </Listbox>
+        );
+    }
+    if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
+        return <></>;
+    }
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    );
+};
+export default Typeahead;