@addsign/moje-agenda-shared-lib 1.0.11 → 1.0.13
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.
- package/dist/assets/tailwind.css +8 -5
- package/dist/components/Calendar.js +4 -4
- package/dist/components/Calendar.js.map +1 -1
- package/dist/components/datatable/DataTableServer.js +1 -4
- package/dist/components/datatable/DataTableServer.js.map +1 -1
- package/dist/components/form/DateField.d.ts +2 -2
- package/dist/components/form/DateField.js +13 -3
- package/dist/components/form/DateField.js.map +1 -1
- package/dist/components/form/FormField.js +1 -1
- package/dist/components/form/FormField.js.map +1 -1
- package/dist/components/form/InputField.d.ts +1 -1
- package/dist/components/form/InputField.js +9 -4
- package/dist/components/form/InputField.js.map +1 -1
- package/dist/components/form/RadioGroup.js +17 -24
- package/dist/components/form/RadioGroup.js.map +1 -1
- package/dist/components/layout/PageBar.d.ts +7 -0
- package/dist/components/layout/PageBar.js +11 -0
- package/dist/components/layout/PageBar.js.map +1 -0
- package/dist/components/layout/SectionTitle.js +2 -2
- package/dist/components/layout/SectionTitle.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { IFormFieldGlobalProps } from '../../types';
|
|
2
2
|
|
|
3
3
|
export interface IDateInputFieldProps extends IFormFieldGlobalProps {
|
|
4
|
-
minDate?:
|
|
5
|
-
maxDate?:
|
|
4
|
+
minDate?: string;
|
|
5
|
+
maxDate?: string;
|
|
6
6
|
[key: string]: any;
|
|
7
7
|
}
|
|
8
8
|
export default function DateField({ label, name, value, description, required, onInputChange, placeholder, className, register, disabled, minDate, maxDate, errors, rounded, ...rest }: IDateInputFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -40,6 +40,11 @@ function DateField({
|
|
|
40
40
|
};
|
|
41
41
|
const handleValueChange = (newValue) => {
|
|
42
42
|
const startEvent = createMockChangeEvent(name, newValue.startDate);
|
|
43
|
+
console.log(
|
|
44
|
+
"%clibcomponents\formDateField.tsx:52 startEvent",
|
|
45
|
+
"color: #007acc;",
|
|
46
|
+
startEvent
|
|
47
|
+
);
|
|
43
48
|
onInputChange(startEvent);
|
|
44
49
|
};
|
|
45
50
|
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
|
|
@@ -50,22 +55,27 @@ function DateField({
|
|
|
50
55
|
/* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex ", children: [
|
|
51
56
|
label && /* @__PURE__ */ jsxs("div", { className: "text-slate-700 text-sm font-medium leading-tight", children: [
|
|
52
57
|
label,
|
|
58
|
+
" ",
|
|
53
59
|
required ? "*" : ""
|
|
54
60
|
] }),
|
|
55
61
|
/* @__PURE__ */ jsx(
|
|
56
62
|
Datepicker,
|
|
57
63
|
{
|
|
64
|
+
inputId: name,
|
|
58
65
|
primaryColor: "indigo",
|
|
59
66
|
placeholder,
|
|
60
67
|
startFrom: value.startDate ? new Date(value.startDate) : void 0,
|
|
61
68
|
disabled,
|
|
62
69
|
startWeekOn: "mon",
|
|
63
|
-
minDate,
|
|
64
|
-
maxDate,
|
|
70
|
+
minDate: minDate ? new Date(minDate) : null,
|
|
71
|
+
maxDate: maxDate ? new Date(maxDate) : null,
|
|
65
72
|
useRange: false,
|
|
66
73
|
asSingle: true,
|
|
67
74
|
i18n: "cs",
|
|
68
|
-
value
|
|
75
|
+
value: {
|
|
76
|
+
startDate: value,
|
|
77
|
+
endDate: value
|
|
78
|
+
},
|
|
69
79
|
onChange: handleValueChange,
|
|
70
80
|
displayFormat: "DD.MM.YYYY",
|
|
71
81
|
inputClassName: (className2) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.js","sources":["../../../lib/components/form/DateField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent } from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\n\r\nexport interface IDateInputFieldProps extends IFormFieldGlobalProps {\r\n minDate?:
|
|
1
|
+
{"version":3,"file":"DateField.js","sources":["../../../lib/components/form/DateField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent } from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\n\r\nexport interface IDateInputFieldProps extends IFormFieldGlobalProps {\r\n minDate?: string;\r\n maxDate?: string;\r\n [key: string]: any;\r\n}\r\n\r\nexport default function DateField({\r\n label,\r\n name,\r\n value,\r\n description,\r\n required,\r\n onInputChange,\r\n placeholder,\r\n className,\r\n register,\r\n disabled,\r\n minDate,\r\n maxDate,\r\n errors = {},\r\n rounded = true,\r\n ...rest\r\n}: IDateInputFieldProps) {\r\n // Utility function to create a mock ChangeEvent\r\n const createMockChangeEvent = (\r\n name: string,\r\n value: any\r\n ): ChangeEvent<any> => {\r\n return {\r\n target: { name, value },\r\n currentTarget: { name, value },\r\n preventDefault: () => {},\r\n stopPropagation: () => {},\r\n nativeEvent: new Event(\"change\"),\r\n bubbles: true,\r\n cancelable: true,\r\n defaultPrevented: false,\r\n eventPhase: 0,\r\n isTrusted: true,\r\n timeStamp: Date.now(),\r\n type: \"change\",\r\n persist: () => {},\r\n } as ChangeEvent<any>;\r\n };\r\n\r\n const handleValueChange = (newValue: any) => {\r\n const startEvent = createMockChangeEvent(name, newValue.startDate);\r\n console.log(\r\n \"%clibcomponents\\formDateField.tsx:52 startEvent\",\r\n \"color: #007acc;\",\r\n startEvent\r\n );\r\n onInputChange(startEvent);\r\n };\r\n\r\n return (\r\n <>\r\n <div\r\n className={\r\n \"min-h-30 flex-col justify-start items-start gap-1.5 w-full relative min-w-[120px] \" +\r\n className\r\n }\r\n >\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex \">\r\n {label && (\r\n <div className=\"text-slate-700 text-sm font-medium leading-tight\">\r\n {label} {required ? \"*\" : \"\"}\r\n </div>\r\n )}\r\n <Datepicker\r\n inputId={name}\r\n primaryColor={\"indigo\"}\r\n placeholder={placeholder}\r\n startFrom={value.startDate ? new Date(value.startDate) : undefined}\r\n disabled={disabled}\r\n startWeekOn=\"mon\"\r\n minDate={minDate ? new Date(minDate) : null}\r\n maxDate={maxDate ? new Date(maxDate) : null}\r\n useRange={false}\r\n asSingle={true}\r\n i18n={\"cs\"}\r\n value={{\r\n startDate: value,\r\n endDate: value,\r\n }}\r\n onChange={handleValueChange}\r\n displayFormat={\"DD.MM.YYYY\"}\r\n inputClassName={(className) => {\r\n return (\r\n className +\r\n ` focus:!ring-indigo-200 focus:!border-indigo-300 focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? \" rounded-lg \" : \" !rounded-none \"}`\r\n );\r\n }}\r\n containerClassName={(className) => {\r\n return className + \" \";\r\n }}\r\n {...rest}\r\n />\r\n </div>\r\n {description && (\r\n <div className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n {description}\r\n </div>\r\n )}{\" \"}\r\n {errors[name] && (\r\n <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n );\r\n}\r\n"],"names":["name","value","className"],"mappings":";;AAUA,SAAwB,UAAU;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV,UAAU;AAAA,EACV,GAAG;AACL,GAAyB;;AAEjB,QAAA,wBAAwB,CAC5BA,OACAC,WACqB;AACd,WAAA;AAAA,MACL,QAAQ,EAAE,MAAAD,OAAM,OAAAC,OAAM;AAAA,MACtB,eAAe,EAAE,MAAAD,OAAM,OAAAC,OAAM;AAAA,MAC7B,gBAAgB,MAAM;AAAA,MAAC;AAAA,MACvB,iBAAiB,MAAM;AAAA,MAAC;AAAA,MACxB,aAAa,IAAI,MAAM,QAAQ;AAAA,MAC/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,WAAW,KAAK,IAAI;AAAA,MACpB,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,MAAC;AAAA,IAAA;AAAA,EAClB;AAGI,QAAA,oBAAoB,CAAC,aAAkB;AAC3C,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AACzD,YAAA;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAEF,kBAAc,UAAU;AAAA,EAAA;AAG1B,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,wFACA;AAAA,MAGF,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,iEACZ,UAAA;AAAA,UACC,SAAA,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,YAAA;AAAA,YAAM;AAAA,YAAE,WAAW,MAAM;AAAA,UAAA,GAC5B;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,cAAc;AAAA,cACd;AAAA,cACA,WAAW,MAAM,YAAY,IAAI,KAAK,MAAM,SAAS,IAAI;AAAA,cACzD;AAAA,cACA,aAAY;AAAA,cACZ,SAAS,UAAU,IAAI,KAAK,OAAO,IAAI;AAAA,cACvC,SAAS,UAAU,IAAI,KAAK,OAAO,IAAI;AAAA,cACvC,UAAU;AAAA,cACV,UAAU;AAAA,cACV,MAAM;AAAA,cACN,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,SAAS;AAAA,cACX;AAAA,cACA,UAAU;AAAA,cACV,eAAe;AAAA,cACf,gBAAgB,CAACC,eAAc;AAC7B,uBACEA,aACA,uHAAuH,UAAU,iBAAiB,iBAAiB;AAAA,cAEvK;AAAA,cACA,oBAAoB,CAACA,eAAc;AACjC,uBAAOA,aAAY;AAAA,cACrB;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,QAAA,GACF;AAAA,QACC,eACC,oBAAC,OAAI,EAAA,WAAU,iEACZ,UACH,aAAA;AAAA,QACC;AAAA,QACF,OAAO,IAAI,KACT,oBAAA,OAAA,EAAI,WAAU,wEACZ,WAAA,YAAO,IAAI,MAAX,mBAAc,QACjB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}
|
|
@@ -267,7 +267,7 @@ const FormField = ({
|
|
|
267
267
|
/* @__PURE__ */ jsx(
|
|
268
268
|
"div",
|
|
269
269
|
{
|
|
270
|
-
className: `self-stretch px-3 py-1 rounded-lg justify-start items-center inline-flex outline-none border ${isFocused && !((_b = errors[name]) == null ? void 0 : _b.message) ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300" : ""} ${isFocused && ((_c = errors[name]) == null ? void 0 : _c.message) ? "outline-4 outline-red-200 outline-offset-0 border-none" : ""} ${!isFocused && ((_d = errors[name]) == null ? void 0 : _d.message) ? "border-red-200" : ""} ${disabled ? "bg-gray-100" : "bg-
|
|
270
|
+
className: `self-stretch px-3 py-1 rounded-lg justify-start items-center inline-flex outline-none border ${isFocused && !((_b = errors[name]) == null ? void 0 : _b.message) ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300" : ""} ${isFocused && ((_c = errors[name]) == null ? void 0 : _c.message) ? "outline-4 outline-red-200 outline-offset-0 border-none" : ""} ${!isFocused && ((_d = errors[name]) == null ? void 0 : _d.message) ? "border-red-200" : ""} ${disabled ? "bg-gray-100" : "bg-white"} ` + className,
|
|
271
271
|
children: /* @__PURE__ */ jsxs("div", { className: "flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-1 w-full ", children: [
|
|
272
272
|
renderInput(),
|
|
273
273
|
children && /* @__PURE__ */ jsx("div", { onClick: focusInput, children }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sources":["../../../lib/components/form/FormField.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\n\r\nexport interface FormFieldProps {\r\n label?: string;\r\n description?: string;\r\n name: string;\r\n type: string;\r\n value?: any;\r\n register?: any;\r\n\r\n errors?: any;\r\n disabled?: boolean;\r\n required?: boolean;\r\n clearable?: boolean;\r\n placeholder?: string;\r\n options?: IOptionItem[];\r\n children?: React.ReactNode;\r\n fetchUrl?: string;\r\n maxLength?: number;\r\n\r\n className?: string;\r\n valueKey?: string;\r\n labelKey?: string;\r\n minDate?: string;\r\n maxDate?: string;\r\n onInputChange: (\r\n e: React.ChangeEvent<\r\n HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any\r\n >\r\n ) => void;\r\n}\r\n\r\nconst FormField: React.FC<FormFieldProps> = ({\r\n label,\r\n name,\r\n type,\r\n register,\r\n disabled,\r\n errors = {},\r\n required,\r\n clearable,\r\n value,\r\n description,\r\n onInputChange,\r\n options,\r\n placeholder,\r\n children,\r\n fetchUrl,\r\n valueKey,\r\n labelKey,\r\n maxLength,\r\n className,\r\n minDate,\r\n maxDate,\r\n}) => {\r\n const [isFocused, setIsFocused] = useState(false);\r\n\r\n const [localOptions, setLocalOptions] = useState(options);\r\n const fallbackRef = useRef(null); // Create a fallback ref\r\n const {\r\n ref: registeredRef = fallbackRef,\r\n onBlur: formOnBlur = () => {} /* default function */,\r\n ...rest\r\n } = register ? register(name) : {};\r\n\r\n const apiClient = useFederationContext()?.apiClient;\r\n const ref = registeredRef || fallbackRef;\r\n const focusInput = () => {\r\n if (ref.current) {\r\n ref.current.focus();\r\n }\r\n };\r\n const handleMultiSelectChange = (\r\n event: React.ChangeEvent<HTMLSelectElement>\r\n ) => {\r\n const selectedOptions = Array.from(\r\n event.target.selectedOptions,\r\n (option) => option.value\r\n );\r\n\r\n onInputChange({\r\n ...event,\r\n target: {\r\n value: selectedOptions,\r\n name: event.target.name,\r\n },\r\n });\r\n };\r\n\r\n const handleCheckBoxChange = (\r\n event: React.ChangeEvent<HTMLSelectElement>\r\n ) => {\r\n onInputChange({\r\n ...event,\r\n target: {\r\n value: event.target.value == \"on\" ? true : false,\r\n name: event.target.name,\r\n },\r\n });\r\n };\r\n\r\n const handleClear = (e: any) => {\r\n value;\r\n onInputChange({\r\n ...e,\r\n target: {\r\n value: \"\",\r\n name: name,\r\n },\r\n });\r\n };\r\n useEffect(() => {\r\n const fetchOptions = async (fetchUrl: string) => {\r\n const { data } = await apiClient.get(fetchUrl);\r\n\r\n // Check if the first item in the data array is a number to determine the data type\r\n const isArrayOfNumbers = typeof data[0] === \"number\";\r\n\r\n // Transform data based on its type\r\n const transformedOptions = data.map((item: any) => {\r\n if (isArrayOfNumbers) {\r\n // If it's a number, use the number for both value and label\r\n return { value: item, label: item.toString() };\r\n } else {\r\n // Otherwise, extract using predefined keys or defaults\r\n return {\r\n value: item[valueKey || \"id\"],\r\n label: item[labelKey || \"name\"],\r\n };\r\n }\r\n });\r\n\r\n setLocalOptions([\r\n { value: null, label: \" \" }, // Add an empty option as the first item\r\n ...transformedOptions,\r\n ]);\r\n };\r\n\r\n if (fetchUrl) fetchOptions(fetchUrl);\r\n if (options) setLocalOptions(options);\r\n }, [fetchUrl, options, apiClient, valueKey, labelKey]); // ensure valueKey and labelKey are also in the dependency array if they are dynamic\r\n\r\n const renderInput = () => {\r\n switch (type) {\r\n case \"select\":\r\n return (\r\n <>\r\n <select\r\n id={name}\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full\"\r\n disabled={disabled}\r\n value={value}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={onInputChange}\r\n onFocus={() => setIsFocused(true)}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n >\r\n {placeholder && <option label={placeholder}></option>}\r\n {localOptions?.map((option, index) => (\r\n <option\r\n key={index}\r\n value={\r\n option.value !== undefined && option.value !== null\r\n ? option.value.toString()\r\n : \"\"\r\n }\r\n >\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n </>\r\n );\r\n case \"multiSelect\":\r\n return (\r\n <>\r\n <select\r\n id={name}\r\n multiple\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-max-full \"\r\n disabled={disabled}\r\n value={Array.isArray(value) ? value : []} // Ensure value is always an array\r\n {...rest}\r\n ref={ref}\r\n onChange={handleMultiSelectChange} // Use the custom multi-select handler\r\n onFocus={() => setIsFocused(true)}\r\n onBlur={(e) => {\r\n formOnBlur(e);\r\n setIsFocused(false);\r\n }}\r\n >\r\n {options?.map((option) => (\r\n <option\r\n key={option.value}\r\n value={option.value ? option.value : undefined}\r\n >\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n </>\r\n );\r\n case \"radioGroup\":\r\n return (\r\n <div className=\"flex flex-col\">\r\n {options?.map((option, index) => (\r\n <label\r\n key={index}\r\n className=\"inline-flex items-center space-x-2 my-2\"\r\n >\r\n <input\r\n type=\"radio\"\r\n name={name}\r\n value={option.value}\r\n checked={value === option.value}\r\n disabled={disabled}\r\n {...register(name)} // Spread the rest of register's return value\r\n onChange={onInputChange}\r\n className=\"text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2\"\r\n />\r\n <span className=\"text-gray-900 text-sm font-normal leading-tight\">\r\n {option.label}\r\n </span>\r\n </label>\r\n ))}\r\n </div>\r\n );\r\n case \"textarea\":\r\n return (\r\n <textarea\r\n id={name}\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none \"\r\n disabled={disabled}\r\n value={value}\r\n rows={3}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={onInputChange}\r\n onFocus={() => setIsFocused(true)}\r\n maxLength={maxLength || 4000}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n />\r\n );\r\n case \"checkbox\":\r\n return (\r\n <>\r\n <input\r\n type=\"checkbox\"\r\n id={name}\r\n className=\"shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none\"\r\n checked={value}\r\n disabled={disabled}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={handleCheckBoxChange}\r\n onFocus={() => setIsFocused(true)}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n />\r\n <label htmlFor={name}>{label}</label>\r\n </>\r\n );\r\n default:\r\n return (\r\n <>\r\n <input\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full\"\r\n id={name}\r\n readOnly={disabled}\r\n value={value}\r\n type={type}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n placeholder={placeholder}\r\n onChange={onInputChange}\r\n min={minDate}\r\n max={maxDate}\r\n maxLength={maxLength}\r\n onFocus={() => setIsFocused(true)}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n />\r\n </>\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex \">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n <div\r\n className={\r\n `self-stretch px-3 py-1 rounded-lg justify-start items-center inline-flex outline-none border ` +\r\n ` ${\r\n isFocused && !errors[name]?.message\r\n ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n : \"\"\r\n }` +\r\n ` ${\r\n isFocused && errors[name]?.message\r\n ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n : \"\"\r\n } ` +\r\n ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n ` ${disabled ? \"bg-gray-100\" : \"bg-transparent\"}` +\r\n \" \" +\r\n className\r\n }\r\n >\r\n <div className=\"flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-1 w-full \">\r\n {renderInput()}\r\n {children && <div onClick={focusInput}>{children}</div>}\r\n {clearable && value && (\r\n <div className=\"flex items-center justify-center\">\r\n <MdClose onClick={handleClear} size={20}></MdClose>\r\n </div>\r\n )}{\" \"}\r\n </div>\r\n </div>\r\n </div>\r\n {description && (\r\n <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n {description}\r\n </div>\r\n )}\r\n {errors[name] && (\r\n <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default FormField;\r\n"],"names":["fetchUrl"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FormField.js","sources":["../../../lib/components/form/FormField.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { IOptionItem, useFederationContext } from \"../../main\";\r\n\r\nexport interface FormFieldProps {\r\n label?: string;\r\n description?: string;\r\n name: string;\r\n type: string;\r\n value?: any;\r\n register?: any;\r\n\r\n errors?: any;\r\n disabled?: boolean;\r\n required?: boolean;\r\n clearable?: boolean;\r\n placeholder?: string;\r\n options?: IOptionItem[];\r\n children?: React.ReactNode;\r\n fetchUrl?: string;\r\n maxLength?: number;\r\n\r\n className?: string;\r\n valueKey?: string;\r\n labelKey?: string;\r\n minDate?: string;\r\n maxDate?: string;\r\n onInputChange: (\r\n e: React.ChangeEvent<\r\n HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any\r\n >\r\n ) => void;\r\n}\r\n\r\nconst FormField: React.FC<FormFieldProps> = ({\r\n label,\r\n name,\r\n type,\r\n register,\r\n disabled,\r\n errors = {},\r\n required,\r\n clearable,\r\n value,\r\n description,\r\n onInputChange,\r\n options,\r\n placeholder,\r\n children,\r\n fetchUrl,\r\n valueKey,\r\n labelKey,\r\n maxLength,\r\n className,\r\n minDate,\r\n maxDate,\r\n}) => {\r\n const [isFocused, setIsFocused] = useState(false);\r\n\r\n const [localOptions, setLocalOptions] = useState(options);\r\n const fallbackRef = useRef(null); // Create a fallback ref\r\n const {\r\n ref: registeredRef = fallbackRef,\r\n onBlur: formOnBlur = () => {} /* default function */,\r\n ...rest\r\n } = register ? register(name) : {};\r\n\r\n const apiClient = useFederationContext()?.apiClient;\r\n const ref = registeredRef || fallbackRef;\r\n const focusInput = () => {\r\n if (ref.current) {\r\n ref.current.focus();\r\n }\r\n };\r\n const handleMultiSelectChange = (\r\n event: React.ChangeEvent<HTMLSelectElement>\r\n ) => {\r\n const selectedOptions = Array.from(\r\n event.target.selectedOptions,\r\n (option) => option.value\r\n );\r\n\r\n onInputChange({\r\n ...event,\r\n target: {\r\n value: selectedOptions,\r\n name: event.target.name,\r\n },\r\n });\r\n };\r\n\r\n const handleCheckBoxChange = (\r\n event: React.ChangeEvent<HTMLSelectElement>\r\n ) => {\r\n onInputChange({\r\n ...event,\r\n target: {\r\n value: event.target.value == \"on\" ? true : false,\r\n name: event.target.name,\r\n },\r\n });\r\n };\r\n\r\n const handleClear = (e: any) => {\r\n value;\r\n onInputChange({\r\n ...e,\r\n target: {\r\n value: \"\",\r\n name: name,\r\n },\r\n });\r\n };\r\n useEffect(() => {\r\n const fetchOptions = async (fetchUrl: string) => {\r\n const { data } = await apiClient.get(fetchUrl);\r\n\r\n // Check if the first item in the data array is a number to determine the data type\r\n const isArrayOfNumbers = typeof data[0] === \"number\";\r\n\r\n // Transform data based on its type\r\n const transformedOptions = data.map((item: any) => {\r\n if (isArrayOfNumbers) {\r\n // If it's a number, use the number for both value and label\r\n return { value: item, label: item.toString() };\r\n } else {\r\n // Otherwise, extract using predefined keys or defaults\r\n return {\r\n value: item[valueKey || \"id\"],\r\n label: item[labelKey || \"name\"],\r\n };\r\n }\r\n });\r\n\r\n setLocalOptions([\r\n { value: null, label: \" \" }, // Add an empty option as the first item\r\n ...transformedOptions,\r\n ]);\r\n };\r\n\r\n if (fetchUrl) fetchOptions(fetchUrl);\r\n if (options) setLocalOptions(options);\r\n }, [fetchUrl, options, apiClient, valueKey, labelKey]); // ensure valueKey and labelKey are also in the dependency array if they are dynamic\r\n\r\n const renderInput = () => {\r\n switch (type) {\r\n case \"select\":\r\n return (\r\n <>\r\n <select\r\n id={name}\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full\"\r\n disabled={disabled}\r\n value={value}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={onInputChange}\r\n onFocus={() => setIsFocused(true)}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n >\r\n {placeholder && <option label={placeholder}></option>}\r\n {localOptions?.map((option, index) => (\r\n <option\r\n key={index}\r\n value={\r\n option.value !== undefined && option.value !== null\r\n ? option.value.toString()\r\n : \"\"\r\n }\r\n >\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n </>\r\n );\r\n case \"multiSelect\":\r\n return (\r\n <>\r\n <select\r\n id={name}\r\n multiple\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-max-full \"\r\n disabled={disabled}\r\n value={Array.isArray(value) ? value : []} // Ensure value is always an array\r\n {...rest}\r\n ref={ref}\r\n onChange={handleMultiSelectChange} // Use the custom multi-select handler\r\n onFocus={() => setIsFocused(true)}\r\n onBlur={(e) => {\r\n formOnBlur(e);\r\n setIsFocused(false);\r\n }}\r\n >\r\n {options?.map((option) => (\r\n <option\r\n key={option.value}\r\n value={option.value ? option.value : undefined}\r\n >\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n </>\r\n );\r\n case \"radioGroup\":\r\n return (\r\n <div className=\"flex flex-col\">\r\n {options?.map((option, index) => (\r\n <label\r\n key={index}\r\n className=\"inline-flex items-center space-x-2 my-2\"\r\n >\r\n <input\r\n type=\"radio\"\r\n name={name}\r\n value={option.value}\r\n checked={value === option.value}\r\n disabled={disabled}\r\n {...register(name)} // Spread the rest of register's return value\r\n onChange={onInputChange}\r\n className=\"text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2\"\r\n />\r\n <span className=\"text-gray-900 text-sm font-normal leading-tight\">\r\n {option.label}\r\n </span>\r\n </label>\r\n ))}\r\n </div>\r\n );\r\n case \"textarea\":\r\n return (\r\n <textarea\r\n id={name}\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none \"\r\n disabled={disabled}\r\n value={value}\r\n rows={3}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={onInputChange}\r\n onFocus={() => setIsFocused(true)}\r\n maxLength={maxLength || 4000}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n />\r\n );\r\n case \"checkbox\":\r\n return (\r\n <>\r\n <input\r\n type=\"checkbox\"\r\n id={name}\r\n className=\"shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none\"\r\n checked={value}\r\n disabled={disabled}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={handleCheckBoxChange}\r\n onFocus={() => setIsFocused(true)}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n />\r\n <label htmlFor={name}>{label}</label>\r\n </>\r\n );\r\n default:\r\n return (\r\n <>\r\n <input\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-transparent w-full\"\r\n id={name}\r\n readOnly={disabled}\r\n value={value}\r\n type={type}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n placeholder={placeholder}\r\n onChange={onInputChange}\r\n min={minDate}\r\n max={maxDate}\r\n maxLength={maxLength}\r\n onFocus={() => setIsFocused(true)}\r\n // Combine custom onBlur with form's onBlur\r\n onBlur={(e) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n }}\r\n />\r\n </>\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex \">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n <div\r\n className={\r\n `self-stretch px-3 py-1 rounded-lg justify-start items-center inline-flex outline-none border ` +\r\n ` ${\r\n isFocused && !errors[name]?.message\r\n ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300\"\r\n : \"\"\r\n }` +\r\n ` ${\r\n isFocused && errors[name]?.message\r\n ? \"outline-4 outline-red-200 outline-offset-0 border-none\"\r\n : \"\"\r\n } ` +\r\n ` ${!isFocused && errors[name]?.message ? \"border-red-200\" : \"\"} ` +\r\n ` ${disabled ? \"bg-gray-100\" : \"bg-white\"}` +\r\n \" \" +\r\n className\r\n }\r\n >\r\n <div className=\"flex relative grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-stretch gap-1 w-full \">\r\n {renderInput()}\r\n {children && <div onClick={focusInput}>{children}</div>}\r\n {clearable && value && (\r\n <div className=\"flex items-center justify-center\">\r\n <MdClose onClick={handleClear} size={20}></MdClose>\r\n </div>\r\n )}{\" \"}\r\n </div>\r\n </div>\r\n </div>\r\n {description && (\r\n <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n {description}\r\n </div>\r\n )}\r\n {errors[name] && (\r\n <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n};\r\n\r\nexport default FormField;\r\n"],"names":["fetchUrl"],"mappings":";;;;;;;AAmCA,MAAM,YAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,OAAO;AAClD,QAAA,cAAc,OAAO,IAAI;AACzB,QAAA;AAAA,IACJ,KAAK,gBAAgB;AAAA,IACrB,QAAQ,aAAa,MAAM;AAAA,IAAC;AAAA,IAC5B,GAAG;AAAA,EACD,IAAA,WAAW,SAAS,IAAI,IAAI,CAAA;AAE1B,QAAA,aAAY,0BAAwB,MAAxB,mBAAwB;AAC1C,QAAM,MAAM,iBAAiB;AAC7B,QAAM,aAAa,MAAM;AACvB,QAAI,IAAI,SAAS;AACf,UAAI,QAAQ;IACd;AAAA,EAAA;AAEI,QAAA,0BAA0B,CAC9B,UACG;AACH,UAAM,kBAAkB,MAAM;AAAA,MAC5B,MAAM,OAAO;AAAA,MACb,CAAC,WAAW,OAAO;AAAA,IAAA;AAGP,kBAAA;AAAA,MACZ,GAAG;AAAA,MACH,QAAQ;AAAA,QACN,OAAO;AAAA,QACP,MAAM,MAAM,OAAO;AAAA,MACrB;AAAA,IAAA,CACD;AAAA,EAAA;AAGG,QAAA,uBAAuB,CAC3B,UACG;AACW,kBAAA;AAAA,MACZ,GAAG;AAAA,MACH,QAAQ;AAAA,QACN,OAAO,MAAM,OAAO,SAAS,OAAO,OAAO;AAAA,QAC3C,MAAM,MAAM,OAAO;AAAA,MACrB;AAAA,IAAA,CACD;AAAA,EAAA;AAGG,QAAA,cAAc,CAAC,MAAW;AAEhB,kBAAA;AAAA,MACZ,GAAG;AAAA,MACH,QAAQ;AAAA,QACN,OAAO;AAAA,QACP;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EAAA;AAEH,YAAU,MAAM;AACR,UAAA,eAAe,OAAOA,cAAqB;AAC/C,YAAM,EAAE,KAAK,IAAI,MAAM,UAAU,IAAIA,SAAQ;AAG7C,YAAM,mBAAmB,OAAO,KAAK,CAAC,MAAM;AAG5C,YAAM,qBAAqB,KAAK,IAAI,CAAC,SAAc;AACjD,YAAI,kBAAkB;AAEpB,iBAAO,EAAE,OAAO,MAAM,OAAO,KAAK;QAAW,OACxC;AAEE,iBAAA;AAAA,YACL,OAAO,KAAK,YAAY,IAAI;AAAA,YAC5B,OAAO,KAAK,YAAY,MAAM;AAAA,UAAA;AAAA,QAElC;AAAA,MAAA,CACD;AAEe,sBAAA;AAAA,QACd,EAAE,OAAO,MAAM,OAAO,IAAI;AAAA;AAAA,QAC1B,GAAG;AAAA,MAAA,CACJ;AAAA,IAAA;AAGC,QAAA;AAAU,mBAAa,QAAQ;AAC/B,QAAA;AAAS,sBAAgB,OAAO;AAAA,EAAA,GACnC,CAAC,UAAU,SAAS,WAAW,UAAU,QAAQ,CAAC;AAErD,QAAM,cAAc,MAAM;AACxB,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,eAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACJ;AAAA,YACA,UAAU;AAAA,YACV,SAAS,MAAM,aAAa,IAAI;AAAA,YAEhC,QAAQ,CAAC,MAAM;AACb,yBAAW,CAAC;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA,YAEC,UAAA;AAAA,cAAe,eAAA,oBAAC,UAAO,EAAA,OAAO,YAAa,CAAA;AAAA,cAC3C,6CAAc,IAAI,CAAC,QAAQ,UAC1B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,OACE,OAAO,UAAU,UAAa,OAAO,UAAU,OAC3C,OAAO,MAAM,SACb,IAAA;AAAA,kBAGL,UAAO,OAAA;AAAA,gBAAA;AAAA,gBAPH;AAAA,cAAA;AAAA,YASR;AAAA,UAAA;AAAA,QAEL,EAAA,CAAA;AAAA,MAEJ,KAAK;AACH,eAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,UAAQ;AAAA,YACR,WAAU;AAAA,YACV;AAAA,YACA,OAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;AAAA,YACtC,GAAG;AAAA,YACJ;AAAA,YACA,UAAU;AAAA,YACV,SAAS,MAAM,aAAa,IAAI;AAAA,YAChC,QAAQ,CAAC,MAAM;AACb,yBAAW,CAAC;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA,YAEC,UAAA,mCAAS,IAAI,CAAC,WACb;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,OAAO,OAAO,QAAQ,OAAO,QAAQ;AAAA,gBAEpC,UAAO,OAAA;AAAA,cAAA;AAAA,cAHH,OAAO;AAAA,YAAA;AAAA,UAKf;AAAA,QAEL,EAAA,CAAA;AAAA,MAEJ,KAAK;AAED,eAAA,oBAAC,SAAI,WAAU,iBACZ,6CAAS,IAAI,CAAC,QAAQ,UACrB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL;AAAA,kBACA,OAAO,OAAO;AAAA,kBACd,SAAS,UAAU,OAAO;AAAA,kBAC1B;AAAA,kBACC,GAAG,SAAS,IAAI;AAAA,kBACjB,UAAU;AAAA,kBACV,WAAU;AAAA,gBAAA;AAAA,cACZ;AAAA,cACC,oBAAA,QAAA,EAAK,WAAU,mDACb,iBAAO,OACV;AAAA,YAAA;AAAA,UAAA;AAAA,UAfK;AAAA,QAiBR,GACH,CAAA;AAAA,MAEJ,KAAK;AAED,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,MAAM;AAAA,YACL,GAAG;AAAA,YACJ;AAAA,YACA,UAAU;AAAA,YACV,SAAS,MAAM,aAAa,IAAI;AAAA,YAChC,WAAW,aAAa;AAAA,YAExB,QAAQ,CAAC,MAAM;AACb,yBAAW,CAAC;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA,UAAA;AAAA,QAAA;AAAA,MAGN,KAAK;AACH,eAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,IAAI;AAAA,cACJ,WAAU;AAAA,cACV,SAAS;AAAA,cACT;AAAA,cACC,GAAG;AAAA,cACJ;AAAA,cACA,UAAU;AAAA,cACV,SAAS,MAAM,aAAa,IAAI;AAAA,cAEhC,QAAQ,CAAC,MAAM;AACb,2BAAW,CAAC;AACZ,6BAAa,KAAK;AAAA,cACpB;AAAA,YAAA;AAAA,UACF;AAAA,UACC,oBAAA,SAAA,EAAM,SAAS,MAAO,UAAM,OAAA;AAAA,QAC/B,EAAA,CAAA;AAAA,MAEJ;AACE,eAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,YACJ,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,KAAK;AAAA,YACL,KAAK;AAAA,YACL;AAAA,YACA,SAAS,MAAM,aAAa,IAAI;AAAA,YAEhC,QAAQ,CAAC,MAAM;AACb,yBAAW,CAAC;AACZ,2BAAa,KAAK;AAAA,YACpB;AAAA,UAAA;AAAA,QAEJ,EAAA,CAAA;AAAA,IAEN;AAAA,EAAA;AAIA,SAAA,qBAAC,OAAI,EAAA,WAAU,6EACb,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,kEACZ,UAAA;AAAA,MACC,SAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UAER,UAAA;AAAA,YAAA;AAAA,YAAM;AAAA,YAAE,WAAW,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5B;AAAA,MAEF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WACE,oGAEE,aAAa,GAAC,YAAO,IAAI,MAAX,mBAAc,WACxB,oEACA,EACN,IAEE,eAAa,YAAO,IAAI,MAAX,mBAAc,WACvB,2DACA,EACN,KACI,CAAC,eAAa,YAAO,IAAI,MAAX,mBAAc,WAAU,mBAAmB,EAAE,KAC3D,WAAW,gBAAgB,UAAU,MAEzC;AAAA,UAGF,UAAA,qBAAC,OAAI,EAAA,WAAU,wGACZ,UAAA;AAAA,YAAY,YAAA;AAAA,YACZ,YAAY,oBAAC,OAAI,EAAA,SAAS,YAAa,UAAS;AAAA,YAChD,aAAa,SACX,oBAAA,OAAA,EAAI,WAAU,oCACb,UAAC,oBAAA,SAAA,EAAQ,SAAS,aAAa,MAAM,GAAI,CAAA,GAC3C;AAAA,YACC;AAAA,UAAA,GACL;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF;AAAA,IACC,eACC,oBAAC,OAAI,EAAA,WAAU,0EACZ,UACH,aAAA;AAAA,IAED,OAAO,IAAI,KACT,oBAAA,OAAA,EAAI,WAAU,wEACZ,WAAA,YAAO,IAAI,MAAX,mBAAc,QACjB,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
|
|
@@ -4,4 +4,4 @@ export interface IInputFieldProps extends IFormFieldGlobalProps {
|
|
|
4
4
|
maxLength?: number;
|
|
5
5
|
debounceTimeout?: number;
|
|
6
6
|
}
|
|
7
|
-
export default function InputField({ label, name, value, description, onInputChange, placeholder, className, register, type, disabled, maxLength, errors, rounded, debounceTimeout, }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default function InputField({ label, name, value, description, onInputChange, placeholder, className, register, type, disabled, maxLength, errors, rounded, debounceTimeout, required, }: IInputFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -18,7 +18,8 @@ function InputField({
|
|
|
18
18
|
maxLength,
|
|
19
19
|
errors = {},
|
|
20
20
|
rounded = true,
|
|
21
|
-
debounceTimeout
|
|
21
|
+
debounceTimeout,
|
|
22
|
+
required
|
|
22
23
|
}) {
|
|
23
24
|
var _a;
|
|
24
25
|
const wrapperRef = React.useRef(null);
|
|
@@ -91,7 +92,7 @@ function InputField({
|
|
|
91
92
|
"textarea",
|
|
92
93
|
{
|
|
93
94
|
id: name,
|
|
94
|
-
className: "grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none ",
|
|
95
|
+
className: "grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-white ",
|
|
95
96
|
disabled,
|
|
96
97
|
value: inputValue || "",
|
|
97
98
|
rows: 3,
|
|
@@ -130,7 +131,11 @@ function InputField({
|
|
|
130
131
|
id: "component",
|
|
131
132
|
children: [
|
|
132
133
|
/* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex", children: [
|
|
133
|
-
label && /* @__PURE__ */
|
|
134
|
+
label && /* @__PURE__ */ jsxs("div", { className: "text-slate-700 text-sm font-medium leading-tight", children: [
|
|
135
|
+
label,
|
|
136
|
+
" ",
|
|
137
|
+
required ? "*" : ""
|
|
138
|
+
] }),
|
|
134
139
|
/* @__PURE__ */ jsxs(
|
|
135
140
|
"div",
|
|
136
141
|
{
|
|
@@ -159,7 +164,7 @@ function InputField({
|
|
|
159
164
|
] }),
|
|
160
165
|
description && !isFocused && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
|
|
161
166
|
" ",
|
|
162
|
-
errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (_a = errors[name]) == null ? void 0 : _a.message })
|
|
167
|
+
errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight mt-1", children: (_a = errors[name]) == null ? void 0 : _a.message })
|
|
163
168
|
]
|
|
164
169
|
}
|
|
165
170
|
) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.js","sources":["../../../lib/components/form/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { FaSpinner } from \"react-icons/fa\";\r\nimport SpinnerIcon from \"../SpinnerIcon\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n maxLength?: number;\r\n debounceTimeout?: number;\r\n}\r\n\r\nexport default function InputField({\r\n label,\r\n name,\r\n value,\r\n description,\r\n onInputChange,\r\n placeholder,\r\n className,\r\n register,\r\n type,\r\n disabled,\r\n maxLength,\r\n errors = {},\r\n rounded = true,\r\n debounceTimeout,\r\n}: IInputFieldProps) {\r\n const wrapperRef = React.useRef(null);\r\n const [isFocused, setIsFocused] = React.useState(false);\r\n const [inputValue, setInputValue] = React.useState(value); // Local state for input value\r\n const debounceTimeoutRef = React.useRef<NodeJS.Timeout | null>(null); // Ref to hold the debounce timeout\r\n const [inputIsChanging, setInputIsChanging] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n setInputValue(value);\r\n }, [value]);\r\n const handleClear = (e: any) => {\r\n setInputValue(\"\"); // Clear local state\r\n onInputChange({\r\n ...e,\r\n target: {\r\n value: \"\",\r\n name: name,\r\n },\r\n });\r\n };\r\n const fallbackRef = React.useRef(null);\r\n const {\r\n ref: registeredRef = fallbackRef,\r\n onBlur: formOnBlur = () => {} /* default function */,\r\n ...rest\r\n } = register ? register(name) : {};\r\n\r\n const ref = registeredRef || fallbackRef;\r\n const handleSetFocus = () => {\r\n setIsFocused(true);\r\n ref.current.focus();\r\n };\r\n useClickAway(wrapperRef, () => {\r\n if (isFocused) {\r\n setIsFocused(false);\r\n }\r\n });\r\n\r\n const handleDebouncedChange = React.useCallback(\r\n (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n const { value } = e.target;\r\n setInputValue(value); // Update local state\r\n setInputIsChanging(true);\r\n\r\n if (debounceTimeout) {\r\n // Clear any previous debounce timeout\r\n if (debounceTimeoutRef.current)\r\n clearTimeout(debounceTimeoutRef.current);\r\n\r\n // Set a new debounce timeout\r\n debounceTimeoutRef.current = setTimeout(() => {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }, debounceTimeout);\r\n } else {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n },\r\n [debounceTimeout, debounceTimeoutRef, onInputChange, setInputValue]\r\n );\r\n\r\n const handleBlur = (\r\n e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>\r\n ) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n\r\n if (debounceTimeoutRef.current && inputIsChanging) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n };\r\n\r\n const renderInput = () => {\r\n switch (type) {\r\n case \"textarea\":\r\n return (\r\n <textarea\r\n id={name}\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none \"\r\n disabled={disabled}\r\n value={inputValue || \"\"}\r\n rows={3}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => setIsFocused(true)}\r\n maxLength={maxLength || 4000}\r\n onBlur={handleBlur}\r\n />\r\n );\r\n default:\r\n return (\r\n <>\r\n <input\r\n className={`text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full `}\r\n id={name}\r\n disabled={disabled}\r\n value={inputValue || \"\"}\r\n type={type}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n placeholder={placeholder}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => setIsFocused(true)}\r\n onBlur={handleBlur}\r\n />\r\n </>\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n <div\r\n className={\r\n \"min-h-30 flex-col justify-start items-start gap-1.5 w-full relative \" +\r\n className\r\n }\r\n ref={wrapperRef}\r\n id=\"component\"\r\n >\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <div className=\"text-slate-700 text-sm font-medium leading-tight\">\r\n {label}\r\n </div>\r\n )}\r\n <div\r\n className={`self-stretch w-full px-3 py-1 bg-white border justify-start items-center gap-0 inline-flex outline-none \r\n ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}\r\n ${rounded ? \" rounded-lg \" : \" rounded-none \"}\r\n ${disabled ? \"!bg-gray-100 \" : \"\"}`}\r\n onClick={handleSetFocus}\r\n >\r\n <div className=\"grow shrink basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n {renderInput()}\r\n </div>\r\n {inputIsChanging === true && <SpinnerIcon icon={<FaSpinner />} />}\r\n {value && !disabled && (\r\n <div\r\n className=\"w-6 h-6 relative cursor-pointer \"\r\n onClick={handleClear}\r\n >\r\n <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n <MdClose />\r\n </div>{\" \"}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n {description && !isFocused && (\r\n <div className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n {description}\r\n </div>\r\n )}{\" \"}\r\n {errors[name] && (\r\n <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n );\r\n}\r\n"],"names":["value"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"InputField.js","sources":["../../../lib/components/form/InputField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps } from \"../../types\";\r\nimport { MdClose } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\nimport { FaSpinner } from \"react-icons/fa\";\r\nimport SpinnerIcon from \"../SpinnerIcon\";\r\n\r\nexport interface IInputFieldProps extends IFormFieldGlobalProps {\r\n maxLength?: number;\r\n debounceTimeout?: number;\r\n}\r\n\r\nexport default function InputField({\r\n label,\r\n name,\r\n value,\r\n description,\r\n onInputChange,\r\n placeholder,\r\n className,\r\n register,\r\n type,\r\n disabled,\r\n maxLength,\r\n errors = {},\r\n rounded = true,\r\n debounceTimeout,\r\n required,\r\n}: IInputFieldProps) {\r\n const wrapperRef = React.useRef(null);\r\n const [isFocused, setIsFocused] = React.useState(false);\r\n const [inputValue, setInputValue] = React.useState(value); // Local state for input value\r\n const debounceTimeoutRef = React.useRef<NodeJS.Timeout | null>(null); // Ref to hold the debounce timeout\r\n const [inputIsChanging, setInputIsChanging] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n setInputValue(value);\r\n }, [value]);\r\n const handleClear = (e: any) => {\r\n setInputValue(\"\"); // Clear local state\r\n onInputChange({\r\n ...e,\r\n target: {\r\n value: \"\",\r\n name: name,\r\n },\r\n });\r\n };\r\n const fallbackRef = React.useRef(null);\r\n const {\r\n ref: registeredRef = fallbackRef,\r\n onBlur: formOnBlur = () => {} /* default function */,\r\n ...rest\r\n } = register ? register(name) : {};\r\n\r\n const ref = registeredRef || fallbackRef;\r\n const handleSetFocus = () => {\r\n setIsFocused(true);\r\n ref.current.focus();\r\n };\r\n useClickAway(wrapperRef, () => {\r\n if (isFocused) {\r\n setIsFocused(false);\r\n }\r\n });\r\n\r\n const handleDebouncedChange = React.useCallback(\r\n (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n const { value } = e.target;\r\n setInputValue(value); // Update local state\r\n setInputIsChanging(true);\r\n\r\n if (debounceTimeout) {\r\n // Clear any previous debounce timeout\r\n if (debounceTimeoutRef.current)\r\n clearTimeout(debounceTimeoutRef.current);\r\n\r\n // Set a new debounce timeout\r\n debounceTimeoutRef.current = setTimeout(() => {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }, debounceTimeout);\r\n } else {\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n },\r\n [debounceTimeout, debounceTimeoutRef, onInputChange, setInputValue]\r\n );\r\n\r\n const handleBlur = (\r\n e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>\r\n ) => {\r\n formOnBlur(e); // Call React Hook Form's onBlur\r\n setIsFocused(false); // Then call your custom onBlur logic\r\n\r\n if (debounceTimeoutRef.current && inputIsChanging) {\r\n clearTimeout(debounceTimeoutRef.current);\r\n onInputChange(e);\r\n setInputIsChanging(false);\r\n }\r\n };\r\n\r\n const renderInput = () => {\r\n switch (type) {\r\n case \"textarea\":\r\n return (\r\n <textarea\r\n id={name}\r\n className=\"grow shrink basis-0 text-gray-900 text-sm font-normal leading-tight focus:border-none bg-white \"\r\n disabled={disabled}\r\n value={inputValue || \"\"}\r\n rows={3}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => setIsFocused(true)}\r\n maxLength={maxLength || 4000}\r\n onBlur={handleBlur}\r\n />\r\n );\r\n default:\r\n return (\r\n <>\r\n <input\r\n className={`text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full `}\r\n id={name}\r\n disabled={disabled}\r\n value={inputValue || \"\"}\r\n type={type}\r\n {...rest} // Spread the rest of register's return value\r\n ref={ref}\r\n placeholder={placeholder}\r\n onChange={(e) => handleDebouncedChange(e)}\r\n onFocus={() => setIsFocused(true)}\r\n onBlur={handleBlur}\r\n />\r\n </>\r\n );\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n <div\r\n className={\r\n \"min-h-30 flex-col justify-start items-start gap-1.5 w-full relative \" +\r\n className\r\n }\r\n ref={wrapperRef}\r\n id=\"component\"\r\n >\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n {label && (\r\n <div className=\"text-slate-700 text-sm font-medium leading-tight\">\r\n {label} {required ? \"*\" : \"\"}\r\n </div>\r\n )}\r\n <div\r\n className={`self-stretch w-full px-3 py-1 bg-white border justify-start items-center gap-0 inline-flex outline-none \r\n ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}\r\n ${rounded ? \" rounded-lg \" : \" rounded-none \"}\r\n ${disabled ? \"!bg-gray-100 \" : \"\"}`}\r\n onClick={handleSetFocus}\r\n >\r\n <div className=\"grow shrink basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n {renderInput()}\r\n </div>\r\n {inputIsChanging === true && <SpinnerIcon icon={<FaSpinner />} />}\r\n {value && !disabled && (\r\n <div\r\n className=\"w-6 h-6 relative cursor-pointer \"\r\n onClick={handleClear}\r\n >\r\n <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n <MdClose />\r\n </div>{\" \"}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n {description && !isFocused && (\r\n <div className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n {description}\r\n </div>\r\n )}{\" \"}\r\n {errors[name] && (\r\n <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight mt-1\">\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n );\r\n}\r\n"],"names":["value"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ function RadioGroup({
|
|
|
14
14
|
}) {
|
|
15
15
|
var _a;
|
|
16
16
|
return /* @__PURE__ */ jsxs("div", { className: "w-full min-h-30 flex-col justify-start items-start gap-1.5 sharedLibrary", children: [
|
|
17
|
-
/* @__PURE__ */ jsx("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex ", children: label && /* @__PURE__ */ jsxs(
|
|
17
|
+
/* @__PURE__ */ jsx("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex mb-2", children: label && /* @__PURE__ */ jsxs(
|
|
18
18
|
"label",
|
|
19
19
|
{
|
|
20
20
|
className: "text-slate-700 text-sm leading-tight font-medium",
|
|
@@ -26,29 +26,22 @@ function RadioGroup({
|
|
|
26
26
|
]
|
|
27
27
|
}
|
|
28
28
|
) }),
|
|
29
|
-
/* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsxs(
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
),
|
|
47
|
-
/* @__PURE__ */ jsx("span", { className: "text-gray-900 text-sm font-normal leading-tight", children: option.label })
|
|
48
|
-
]
|
|
49
|
-
},
|
|
50
|
-
index
|
|
51
|
-
)) }),
|
|
29
|
+
/* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center space-x-2", children: [
|
|
30
|
+
/* @__PURE__ */ jsx(
|
|
31
|
+
"input",
|
|
32
|
+
{
|
|
33
|
+
type: "radio",
|
|
34
|
+
name,
|
|
35
|
+
value: option.value,
|
|
36
|
+
checked: value === option.value,
|
|
37
|
+
disabled,
|
|
38
|
+
...register(name),
|
|
39
|
+
onChange: onInputChange,
|
|
40
|
+
className: "text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2"
|
|
41
|
+
}
|
|
42
|
+
),
|
|
43
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-900 text-sm font-normal leading-tight", children: option.label })
|
|
44
|
+
] }, index)) }),
|
|
52
45
|
description && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
|
|
53
46
|
errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (_a = errors[name]) == null ? void 0 : _a.message })
|
|
54
47
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../lib/components/form/RadioGroup.tsx"],"sourcesContent":["import { IFormFieldGlobalProps, IOptionItem } from \"../../types\";\r\n\r\nexport interface IRadioGroupProps extends IFormFieldGlobalProps {\r\n options?: IOptionItem[];\r\n valueKey?: string;\r\n labelKey?: string;\r\n}\r\n\r\nexport default function RadioGroup({\r\n label,\r\n name,\r\n value,\r\n description,\r\n onInputChange,\r\n options,\r\n errors = {},\r\n required,\r\n disabled,\r\n register = () => {},\r\n}: IRadioGroupProps) {\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex \">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n </div>\r\n <div className=\"flex flex-col\">\r\n {options?.map((option, index) => (\r\n <label
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../lib/components/form/RadioGroup.tsx"],"sourcesContent":["import { IFormFieldGlobalProps, IOptionItem } from \"../../types\";\r\n\r\nexport interface IRadioGroupProps extends IFormFieldGlobalProps {\r\n options?: IOptionItem[];\r\n valueKey?: string;\r\n labelKey?: string;\r\n}\r\n\r\nexport default function RadioGroup({\r\n label,\r\n name,\r\n value,\r\n description,\r\n onInputChange,\r\n options,\r\n errors = {},\r\n required,\r\n disabled,\r\n register = () => {},\r\n}: IRadioGroupProps) {\r\n return (\r\n <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5 sharedLibrary\">\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex mb-2\">\r\n {label && (\r\n <label\r\n className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n htmlFor={name}\r\n >\r\n {label} {required ? \"*\" : \"\"}\r\n </label>\r\n )}\r\n </div>\r\n <div className=\"flex flex-col gap-1\">\r\n {options?.map((option, index) => (\r\n <label key={index} className=\"inline-flex items-center space-x-2\">\r\n <input\r\n type=\"radio\"\r\n name={name}\r\n value={option.value}\r\n checked={value === option.value}\r\n disabled={disabled}\r\n {...register(name)} // Spread the rest of register's return value\r\n onChange={onInputChange}\r\n className=\"text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2\"\r\n />\r\n <span className=\"text-gray-900 text-sm font-normal leading-tight\">\r\n {option.label}\r\n </span>\r\n </label>\r\n ))}\r\n </div>\r\n {description && (\r\n <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n {description}\r\n </div>\r\n )}\r\n {errors[name] && (\r\n <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n {errors[name]?.message}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n"],"names":[],"mappings":";AAQA,SAAwB,WAAW;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EAAC;AACpB,GAAqB;;AAEjB,SAAA,qBAAC,OAAI,EAAA,WAAU,6EACb,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAI,WAAU,sEACZ,UACC,SAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS;AAAA,QAER,UAAA;AAAA,UAAA;AAAA,UAAM;AAAA,UAAE,WAAW,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAGhC;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,uBACZ,UAAS,mCAAA,IAAI,CAAC,QAAQ,UACrB,qBAAC,SAAkB,EAAA,WAAU,sCAC3B,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,OAAO,OAAO;AAAA,UACd,SAAS,UAAU,OAAO;AAAA,UAC1B;AAAA,UACC,GAAG,SAAS,IAAI;AAAA,UACjB,UAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MACC,oBAAA,QAAA,EAAK,WAAU,mDACb,iBAAO,OACV;AAAA,IAAA,KAbU,KAcZ,IAEJ;AAAA,IACC,eACC,oBAAC,OAAI,EAAA,WAAU,0EACZ,UACH,aAAA;AAAA,IAED,OAAO,IAAI,KACT,oBAAA,OAAA,EAAI,WAAU,wEACZ,WAAA,YAAO,IAAI,MAAX,mBAAc,QACjB,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface IPageBarProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
3
|
+
textSize?: string;
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export default function PageBar({ children }: IPageBarProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageBar.js","sources":["../../../lib/components/layout/PageBar.tsx"],"sourcesContent":["interface IPageBarProps extends React.HTMLAttributes<HTMLHeadingElement> {\n textSize?: string;\n children?: React.ReactNode;\n}\n\nexport default function PageBar({ children }: IPageBarProps) {\n // Combine textSize with the other fixed class names\n\n return <div className=\"flex\"> {children}</div>;\n}\n"],"names":[],"mappings":";AAKwB,SAAA,QAAQ,EAAE,YAA2B;AAGpD,SAAA,qBAAC,OAAI,EAAA,WAAU,QAAO,UAAA;AAAA,IAAA;AAAA,IAAE;AAAA,EAAS,EAAA,CAAA;AAC1C;"}
|
|
@@ -4,8 +4,8 @@ function SectionTitle({
|
|
|
4
4
|
textSize = "text-lg",
|
|
5
5
|
...props
|
|
6
6
|
}) {
|
|
7
|
-
const className = ` text-gray-900 ${textSize} font-
|
|
8
|
-
return /* @__PURE__ */ jsx("div", { className: "border-b border-gray-300 pt-2 mb-5
|
|
7
|
+
const className = ` text-gray-900 ${textSize} font-semibold font-['Inter'] leading-7 mb-3`;
|
|
8
|
+
return /* @__PURE__ */ jsx("div", { className: "border-b border-gray-300 pt-2 mb-5 ", children: /* @__PURE__ */ jsx("h2", { ...props, className, children }) });
|
|
9
9
|
}
|
|
10
10
|
export {
|
|
11
11
|
SectionTitle as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionTitle.js","sources":["../../../lib/components/layout/SectionTitle.tsx"],"sourcesContent":["import * as React from \"react\";\n\ninterface ISectionTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n textSize?: string;\n children?: React.ReactNode;\n}\nexport default function SectionTitle({\n children,\n textSize = \"text-lg\",\n ...props\n}: ISectionTitleProps) {\n // Combine textSize with the other fixed class names\n const className = ` text-gray-900 ${textSize} font-
|
|
1
|
+
{"version":3,"file":"SectionTitle.js","sources":["../../../lib/components/layout/SectionTitle.tsx"],"sourcesContent":["import * as React from \"react\";\n\ninterface ISectionTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n textSize?: string;\n children?: React.ReactNode;\n}\nexport default function SectionTitle({\n children,\n textSize = \"text-lg\",\n ...props\n}: ISectionTitleProps) {\n // Combine textSize with the other fixed class names\n const className = ` text-gray-900 ${textSize} font-semibold font-['Inter'] leading-7 mb-3`;\n\n return (\n <div className=\"border-b border-gray-300 pt-2 mb-5 \">\n <h2 {...props} className={className}>\n {children}\n </h2>\n </div>\n );\n}\n"],"names":[],"mappings":";AAMA,SAAwB,aAAa;AAAA,EACnC;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GAAuB;AAEf,QAAA,YAAY,kBAAkB,QAAQ;AAG1C,SAAA,oBAAC,OAAI,EAAA,WAAU,wCACb,UAAA,oBAAC,QAAI,GAAG,OAAO,WACZ,SACH,CAAA,EACF,CAAA;AAEJ;"}
|