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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/link.sh +1 -1
  2. package/package.json +17 -1
  3. package/src/api/AxiosConfigProvider.tsx +53 -0
  4. package/src/api/index.ts +15 -1
  5. package/src/form/Form.tsx +6 -0
  6. package/src/form/context/FormContext.tsx +2 -0
  7. package/src/form/formfields/BusinessHoursField.tsx +293 -181
  8. package/src/form/formfields/ColorPickerField.tsx +43 -42
  9. package/src/form/formfields/DatePickerField.tsx +66 -69
  10. package/src/form/formfields/DynamicMultiSelect.tsx +167 -166
  11. package/src/form/formfields/DynamicSelect.tsx +4 -5
  12. package/src/form/formfields/MultipleSelectField.tsx +70 -74
  13. package/src/form/formfields/RadioField.tsx +73 -86
  14. package/src/form/formfields/Typeahead.tsx +6 -7
  15. package/src/form/formfields/TypeaheadMultiSelect.tsx +189 -175
  16. package/src/form/schema/FormFieldSchema.ts +17 -0
  17. package/src/form/util/RenderFormField.tsx +2 -0
  18. package/src/form/util/RenderListOptions.tsx +49 -36
  19. package/src/index.js +116 -0
  20. package/src/util/svg/HELPER_ICONS.ts +1 -0
package/src/form/formfields/MultipleSelectField.tsx CHANGED
@@ -1,98 +1,94 @@
1
1
  import React, {
2
- Fragment,
3
- useContext,
4
- useEffect,
5
- useRef,
6
- useState,
2
+ Fragment,
3
+ useContext,
4
+ useEffect,
5
+ useRef,
6
+ useState,
7
7
  } from "react";
8
8
 
9
9
  import { RegisterOptions } from "react-hook-form";
10
10
  import { Listbox, ListboxButton, Transition } from "@headlessui/react";
11
11
 
12
12
  import {
13
- FieldOptionsSchema,
14
- FormFieldComponentPropSchema,
15
- FormFieldType,
13
+ FieldOptionsSchema,
14
+ FormFieldComponentPropSchema,
15
+ FormFieldType,
16
16
  } from "../schema/FormFieldSchema";
17
17
  import { FormContext } from "../context/FormContext";
18
18
  import RenderFormField from "../util/RenderFormField";
19
19
  import RenderListOptions, {
20
- renderListBoxValue,
20
+ renderListBoxValue,
21
21
  } from "../util/RenderListOptions";
22
22
  import { handleChange, registerFormField } from "../util";
23
23
 
24
24
  const MultipleSelectField: React.FC<FormFieldComponentPropSchema> = ({
25
- fieldConfig,
26
- onChange,
25
+ fieldConfig,
26
+ onChange,
27
27
  }: FormFieldComponentPropSchema) => {
28
- const multiSelectRef = useRef<HTMLUListElement>(null);
29
- const formContext = useContext(FormContext);
30
- let registerOptions: RegisterOptions = registerFormField(fieldConfig, true);
31
- let hookProps = formContext.register(fieldConfig.name, registerOptions);
28
+ const multiSelectRef = useRef<HTMLUListElement>(null);
29
+ const formContext = useContext(FormContext);
30
+ let registerOptions: RegisterOptions = registerFormField(fieldConfig, true);
31
+ let hookProps = formContext.register(fieldConfig.name, registerOptions);
32
32
 
33
- const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>(
34
- fieldConfig.options ? fieldConfig.options : []
35
- );
36
-
37
- const validSelectedValues = (formContext.getValues(fieldConfig.name) ||[])
38
- .filter((selectedValue:any) =>
39
- fieldConfig.options && fieldConfig.options.some(option => option.value === selectedValue)
40
- );
33
+ const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>(
34
+ fieldConfig.options ? fieldConfig.options : []
35
+ );
41
36
 
42
- useEffect(() => {
43
- if (
44
- !formContext.getValues(fieldConfig.name) &&
45
- fieldConfig.defaultValue
46
- )
47
- formContext.setValue(fieldConfig.name, fieldConfig.defaultValue);
37
+ const validSelectedValues = (
38
+ formContext.getValues(fieldConfig.name) || []
39
+ ).filter(
40
+ (selectedValue: any) =>
41
+ fieldConfig.options &&
42
+ fieldConfig.options.some((option) => option.value === selectedValue)
43
+ );
48
44
 
49
- if (fieldConfig.options && fieldConfig.options.length > 0) {
50
- setListOptions(fieldConfig.options);
51
- return;
52
- }
53
- }, [fieldConfig.options]);
45
+ useEffect(() => {
46
+ if (!formContext.getValues(fieldConfig.name) && fieldConfig.defaultValue)
47
+ formContext.setValue(fieldConfig.name, fieldConfig.defaultValue);
54
48
 
55
- function getInput() {
56
- return (
57
- <Listbox
58
- as={"div"}
59
- {...hookProps}
60
- value={validSelectedValues}
61
- defaultValue={fieldConfig.defaultValue}
62
- onChange={(val) =>
63
- handleChange(val, formContext, fieldConfig, onChange)
64
- }
65
- disabled={fieldConfig.disabled}
66
- multiple
67
- className={"relative form-listbox flex-1"}>
68
- <ListboxButton
69
- className={
70
- fieldConfig.customClassNames?.fieldClassName
71
- ? "form-listbox-select " +
72
- fieldConfig.customClassNames?.fieldClassName
73
- : "form-listbox-select"
74
- }>
75
- {renderListBoxValue(
76
- formContext,
77
- fieldConfig,
78
- listOptions,
79
- onChange
80
- )
81
- }
82
- </ListboxButton>
83
- <RenderListOptions
84
- formContext={formContext}
85
- onChange={onChange}
86
- formField={FormFieldType.MULTI_SELECT}
87
- ref={multiSelectRef}
88
- fieldConfig={fieldConfig}
89
- listOptions={listOptions}
90
- setListOptions={setListOptions}
91
- />
92
- </Listbox>
93
- );
49
+ if (fieldConfig.options && fieldConfig.options.length > 0) {
50
+ setListOptions(fieldConfig.options);
51
+ return;
94
52
  }
53
+ }, [fieldConfig.options]);
54
+
55
+ function getInput() {
56
+ return (
57
+ <Listbox
58
+ as={"div"}
59
+ {...hookProps}
60
+ value={validSelectedValues}
61
+ defaultValue={fieldConfig.defaultValue}
62
+ onChange={(val) =>
63
+ handleChange(val, formContext, fieldConfig, onChange)
64
+ }
65
+ disabled={fieldConfig.disabled}
66
+ multiple
67
+ className={"relative form-listbox flex-1 overflow-hidden"}
68
+ >
69
+ <ListboxButton
70
+ className={
71
+ fieldConfig.customClassNames?.fieldClassName
72
+ ? "form-listbox-select " +
73
+ fieldConfig.customClassNames?.fieldClassName
74
+ : "form-listbox-select"
75
+ }
76
+ >
77
+ {renderListBoxValue(formContext, fieldConfig, listOptions, onChange)}
78
+ </ListboxButton>
79
+ <RenderListOptions
80
+ formContext={formContext}
81
+ onChange={onChange}
82
+ formField={FormFieldType.MULTI_SELECT}
83
+ ref={multiSelectRef}
84
+ fieldConfig={fieldConfig}
85
+ listOptions={listOptions}
86
+ setListOptions={setListOptions}
87
+ />
88
+ </Listbox>
89
+ );
90
+ }
95
91
 
96
- return <RenderFormField fieldConfig={fieldConfig} getInput={getInput} />;
92
+ return <RenderFormField fieldConfig={fieldConfig} getInput={getInput} />;
97
93
  };
98
94
  export default MultipleSelectField;
package/src/form/formfields/RadioField.tsx CHANGED
@@ -8,97 +8,84 @@ import { Input, Radio, RadioGroup } from "@headlessui/react";
8
8
  import clsx from "clsx";
9
9
 
10
10
  const RadioField: React.FC<FormFieldComponentPropSchema> = (
11
- props: FormFieldComponentPropSchema
11
+ props: FormFieldComponentPropSchema
12
12
  ) => {
13
- const formContext = useContext(FormContext);
13
+ const formContext = useContext(FormContext);
14
14
 
15
- let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
15
+ let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
16
16
 
17
- let hookProps = formContext.register(
18
- props.fieldConfig.name,
19
- registerOptions
20
- );
21
-
22
- function getInput() {
23
- return (
24
- props.fieldConfig.options && (
25
- <RadioGroup
26
- {...hookProps}
27
- value={formContext.getValues(props.fieldConfig.name) ?? props.fieldConfig.defaultValue}
28
- className={
29
- props.fieldConfig.customClassNames
30
- ?.fieldClassName ||
31
- "form-check-container"
32
- }
33
- onChange={(value) => {
34
- handleChange(
35
- value,
36
- formContext,
37
- props.fieldConfig,
38
- props.onChange
39
- );
40
- }}>
41
- {props.fieldConfig.options.map((option) => {
42
- return (
43
- <Radio
44
- value={option.value}
45
- key={option.value}
46
- disabled={option.isDisabled}
47
- className={
48
- props.fieldConfig.customClassNames
49
- ?.optionClassName ||
50
- "form-check-container"
51
- }
52
- >
53
- {({ checked }) => {
54
- return props.fieldConfig
55
- .fieldOptionWrapper ? (
56
- <props.fieldConfig.fieldOptionWrapper
57
- data={option}
58
- selected={
59
- checked
60
- }></props.fieldConfig.fieldOptionWrapper>
61
- ) : (
62
- <>
63
- <span
64
- className={"form-check-radio flex items-center"}>
65
- <span
66
- className={clsx("form-radio ")}
67
- >
68
- {checked &&
69
- <span className="checked"></span>
70
- }
71
- </span>
72
- <label htmlFor={option.value} className="cursor-pointer">
73
- {option.label}
74
- {option.icon && (
75
- <span
76
- className={
77
- "listbox-svg ml-2 cursor-pointer"
78
- }>
79
- {option.icon}
80
- </span>
81
- )}
82
- </label>
83
- </span>
84
- {option.helpText && (
85
- <p className="ms-6 text-tiny text-gray-500">
86
- {option.helpText}
87
- </p>
88
- )}
89
- </>
90
- );
91
- }}
92
- </Radio>
93
- );
94
- })}
95
- </RadioGroup>
96
- )
97
- );
98
- }
17
+ let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
99
18
 
19
+ function getInput() {
100
20
  return (
101
- <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
21
+ props.fieldConfig.options && (
22
+ <RadioGroup
23
+ {...hookProps}
24
+ value={
25
+ formContext.getValues(props.fieldConfig.name) ??
26
+ props.fieldConfig.defaultValue
27
+ }
28
+ className={
29
+ props.fieldConfig.customClassNames?.fieldClassName ||
30
+ "form-check-container"
31
+ }
32
+ onChange={(value) => {
33
+ handleChange(value, formContext, props.fieldConfig, props.onChange);
34
+ }}
35
+ >
36
+ {props.fieldConfig.options.map((option) => {
37
+ return (
38
+ <Radio
39
+ value={option.value}
40
+ key={option.value}
41
+ disabled={option.isDisabled}
42
+ className={
43
+ props.fieldConfig.customClassNames?.optionClassName ||
44
+ "form-check-container"
45
+ }
46
+ >
47
+ {({ checked }) => {
48
+ return props.fieldConfig.fieldOptionWrapper ? (
49
+ <props.fieldConfig.fieldOptionWrapper
50
+ data={option}
51
+ selected={checked}
52
+ ></props.fieldConfig.fieldOptionWrapper>
53
+ ) : (
54
+ <>
55
+ <span className={"form-check-radio flex items-center"}>
56
+ <span className={clsx("form-radio ")}>
57
+ {checked && <span className="checked"></span>}
58
+ </span>
59
+ <label
60
+ htmlFor={option.value}
61
+ className="cursor-pointer"
62
+ >
63
+ {option.label}
64
+ {option.icon && (
65
+ <span className={"listbox-svg ml-2 cursor-pointer"}>
66
+ {option.icon}
67
+ </span>
68
+ )}
69
+ </label>
70
+ </span>
71
+ {option.helpText && (
72
+ <p className="ms-6 text-tiny text-gray-500">
73
+ {option.helpText}
74
+ </p>
75
+ )}
76
+ </>
77
+ );
78
+ }}
79
+ </Radio>
80
+ );
81
+ })}
82
+ </RadioGroup>
83
+ )
102
84
  );
85
+ }
86
+
87
+ return (
88
+ <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
89
+ );
103
90
  };
104
91
  export default RadioField;
package/src/form/formfields/Typeahead.tsx CHANGED
@@ -9,7 +9,6 @@ import React, {
9
9
  import { Listbox, ListboxButton } from "@headlessui/react";
10
10
  import axios from "axios";
11
11
  import { RegisterOptions } from "react-hook-form";
12
- import { reachoAPI } from "../../api";
13
12
  import { FormContext } from "../context/FormContext";
14
13
  import { getListOption, getListOptions } from "../FormFieldUtils";
15
14
  import {
@@ -68,8 +67,8 @@ const Typeahead: React.FC<FormFieldComponentPropSchema> = (
68
67
 
69
68
  let response = await (props.fieldConfig.disableHeaderInFetch
70
69
  ? axios.get(url)
71
- : reachoAPI.get(url));
72
- if (response.data) {
70
+ : formContext.axiosInstance?.get(url));
71
+ if (response?.data) {
73
72
  const data: FieldOptionsSchema[] = getListOptions(
74
73
  response.data,
75
74
  props.fieldConfig.optionsConfig
@@ -87,7 +86,7 @@ const Typeahead: React.FC<FormFieldComponentPropSchema> = (
87
86
  props.fieldConfig.fetchCallback(response);
88
87
  }
89
88
  } else {
90
- console.error(response.statusText);
89
+ console.error(response?.statusText);
91
90
  }
92
91
  } catch (err) {
93
92
  } finally {
@@ -116,11 +115,11 @@ const Typeahead: React.FC<FormFieldComponentPropSchema> = (
116
115
  let response = await (
117
116
  props.fieldConfig.disableHeaderInFetch
118
117
  ? axios.get(url)
119
- : reachoAPI.get(url)
118
+ : formContext.axiosInstance?.get(url)
120
119
  );
121
- if (response.data) {
120
+ if (response?.data) {
122
121
  const data: FieldOptionsSchema[] = getListOptions(
123
- response.data,
122
+ response?.data,
124
123
  props.fieldConfig.optionsConfig
125
124
  );
126
125
  setSelectedValues([...data]);