@addsign/moje-agenda-shared-lib 0.0.70 → 0.0.71
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 +3 -0
- package/dist/components/form/DateField.d.ts +8 -0
- package/dist/components/form/DateField.js +98 -0
- package/dist/components/form/DateField.js.map +1 -0
- package/dist/components/form/FormField.d.ts +2 -0
- package/dist/components/form/FormField.js +5 -1
- package/dist/components/form/FormField.js.map +1 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.js +2 -0
- package/dist/main.js.map +1 -1
- package/package.json +1 -1
package/dist/assets/tailwind.css
CHANGED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { IFormFieldGlobalProps } from '../../types';
|
|
2
|
+
|
|
3
|
+
export interface IDateInputFieldProps extends IFormFieldGlobalProps {
|
|
4
|
+
minDate?: Date;
|
|
5
|
+
maxDate?: Date;
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
}
|
|
8
|
+
export default function DateField({ label, name, value, description, required, onInputChange, placeholder, className, register, disabled, minDate, maxDate, errors, ...rest }: IDateInputFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { D as Datepicker } from "../../index.esm-DjnEVdAW.js";
|
|
3
|
+
function DateField({
|
|
4
|
+
label,
|
|
5
|
+
name,
|
|
6
|
+
value,
|
|
7
|
+
description,
|
|
8
|
+
required,
|
|
9
|
+
onInputChange,
|
|
10
|
+
placeholder,
|
|
11
|
+
className,
|
|
12
|
+
register,
|
|
13
|
+
disabled,
|
|
14
|
+
minDate,
|
|
15
|
+
maxDate,
|
|
16
|
+
errors = {},
|
|
17
|
+
...rest
|
|
18
|
+
}) {
|
|
19
|
+
var _a;
|
|
20
|
+
const createMockChangeEvent = (name2, value2) => {
|
|
21
|
+
return {
|
|
22
|
+
target: { name: name2, value: value2 },
|
|
23
|
+
currentTarget: { name: name2, value: value2 },
|
|
24
|
+
preventDefault: () => {
|
|
25
|
+
},
|
|
26
|
+
stopPropagation: () => {
|
|
27
|
+
},
|
|
28
|
+
nativeEvent: new Event("change"),
|
|
29
|
+
bubbles: true,
|
|
30
|
+
cancelable: true,
|
|
31
|
+
defaultPrevented: false,
|
|
32
|
+
eventPhase: 0,
|
|
33
|
+
isTrusted: true,
|
|
34
|
+
timeStamp: Date.now(),
|
|
35
|
+
type: "change",
|
|
36
|
+
persist: () => {
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
console.log(
|
|
41
|
+
"%clibcomponents\formDateField.tsx:41 value",
|
|
42
|
+
"color: #007acc;",
|
|
43
|
+
value
|
|
44
|
+
);
|
|
45
|
+
const handleValueChange = (newValue) => {
|
|
46
|
+
console.log("newValue:", newValue);
|
|
47
|
+
const startEvent = createMockChangeEvent(name, newValue.startDate);
|
|
48
|
+
onInputChange(startEvent);
|
|
49
|
+
};
|
|
50
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
className: "min-h-30 flex-col justify-start items-start gap-1.5 w-full relative " + className,
|
|
54
|
+
children: [
|
|
55
|
+
/* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex py-1", children: [
|
|
56
|
+
label && /* @__PURE__ */ jsxs("div", { className: "text-slate-700 text-sm font-medium leading-tight", children: [
|
|
57
|
+
label,
|
|
58
|
+
required ? "*" : ""
|
|
59
|
+
] }),
|
|
60
|
+
JSON.stringify(value),
|
|
61
|
+
/* @__PURE__ */ jsx(
|
|
62
|
+
Datepicker,
|
|
63
|
+
{
|
|
64
|
+
minDate,
|
|
65
|
+
maxDate,
|
|
66
|
+
useRange: false,
|
|
67
|
+
asSingle: true,
|
|
68
|
+
primaryColor: "indigo",
|
|
69
|
+
placeholder,
|
|
70
|
+
startFrom: value.startDate ? new Date(value.startDate) : void 0,
|
|
71
|
+
disabled,
|
|
72
|
+
startWeekOn: "mon",
|
|
73
|
+
i18n: "cs",
|
|
74
|
+
value,
|
|
75
|
+
onChange: handleValueChange,
|
|
76
|
+
displayFormat: "DD.MM.YYYY",
|
|
77
|
+
inputClassName: (className2) => {
|
|
78
|
+
return className2 + " focus:ring-indigo-200 focus:ring-4 border !border-gray-200 !font-normal";
|
|
79
|
+
},
|
|
80
|
+
containerClassName: (className2) => {
|
|
81
|
+
return className2 + " ";
|
|
82
|
+
},
|
|
83
|
+
separator: "-",
|
|
84
|
+
...rest
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
] }),
|
|
88
|
+
description && /* @__PURE__ */ jsx("div", { className: "self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
|
|
89
|
+
" ",
|
|
90
|
+
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 })
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
) });
|
|
94
|
+
}
|
|
95
|
+
export {
|
|
96
|
+
DateField as default
|
|
97
|
+
};
|
|
98
|
+
//# sourceMappingURL=DateField.js.map
|
|
@@ -0,0 +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?: Date;\r\n maxDate?: Date;\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 ...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 console.log(\r\n \"%clibcomponents\\formDateField.tsx:41 value\",\r\n \"color: #007acc;\",\r\n value\r\n );\r\n const handleValueChange = (newValue: any) => {\r\n console.log(\"newValue:\", newValue);\r\n\r\n const startEvent = createMockChangeEvent(name, newValue.startDate);\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 \" +\r\n className\r\n }\r\n >\r\n <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex py-1\">\r\n {label && (\r\n <div className=\"text-slate-700 text-sm font-medium leading-tight\">\r\n {label}\r\n {required ? \"*\" : \"\"}\r\n </div>\r\n )}\r\n {JSON.stringify(value)}\r\n <Datepicker\r\n minDate={minDate}\r\n maxDate={maxDate}\r\n useRange={false}\r\n asSingle={true}\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 i18n={\"cs\"}\r\n value={value}\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:ring-4 border !border-gray-200 !font-normal\"\r\n );\r\n }}\r\n containerClassName={(className) => {\r\n return className + \" \";\r\n }}\r\n separator={\"-\"}\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,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;AAGM,UAAA;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEI,QAAA,oBAAoB,CAAC,aAAkB;AACnC,YAAA,IAAI,aAAa,QAAQ;AAEjC,UAAM,aAAa,sBAAsB,MAAM,SAAS,SAAS;AAEjE,kBAAc,UAAU;AAAA,EAAA;AAG1B,SAEI,oBAAA,UAAA,EAAA,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WACE,0EACA;AAAA,MAGF,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAU,qEACZ,UAAA;AAAA,UACC,SAAA,qBAAC,OAAI,EAAA,WAAU,qDACZ,UAAA;AAAA,YAAA;AAAA,YACA,WAAW,MAAM;AAAA,UAAA,GACpB;AAAA,UAED,KAAK,UAAU,KAAK;AAAA,UACrB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,UAAU;AAAA,cACV,cAAc;AAAA,cACd;AAAA,cACA,WAAW,MAAM,YAAY,IAAI,KAAK,MAAM,SAAS,IAAI;AAAA,cACzD;AAAA,cACA,aAAY;AAAA,cACZ,MAAM;AAAA,cACN;AAAA,cACA,UAAU;AAAA,cACV,eAAe;AAAA,cACf,gBAAgB,CAACC,eAAc;AAC7B,uBACEA,aACA;AAAA,cAEJ;AAAA,cACA,oBAAoB,CAACA,eAAc;AACjC,uBAAOA,aAAY;AAAA,cACrB;AAAA,cACA,WAAW;AAAA,cACV,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;"}
|
|
@@ -20,6 +20,8 @@ export interface FormFieldProps {
|
|
|
20
20
|
className?: string;
|
|
21
21
|
valueKey?: string;
|
|
22
22
|
labelKey?: string;
|
|
23
|
+
minDate?: string;
|
|
24
|
+
maxDate?: string;
|
|
23
25
|
onInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any>) => void;
|
|
24
26
|
}
|
|
25
27
|
declare const FormField: React.FC<FormFieldProps>;
|
|
@@ -25,7 +25,9 @@ const FormField = ({
|
|
|
25
25
|
valueKey,
|
|
26
26
|
labelKey,
|
|
27
27
|
maxLength,
|
|
28
|
-
className
|
|
28
|
+
className,
|
|
29
|
+
minDate,
|
|
30
|
+
maxDate
|
|
29
31
|
}) => {
|
|
30
32
|
var _a, _b, _c, _d, _e;
|
|
31
33
|
const [isFocused, setIsFocused] = useState(false);
|
|
@@ -237,6 +239,8 @@ const FormField = ({
|
|
|
237
239
|
ref,
|
|
238
240
|
placeholder,
|
|
239
241
|
onChange: onInputChange,
|
|
242
|
+
min: minDate,
|
|
243
|
+
max: maxDate,
|
|
240
244
|
onFocus: () => setIsFocused(true),
|
|
241
245
|
onBlur: (e) => {
|
|
242
246
|
formOnBlur(e);
|
|
@@ -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 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}) => {\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 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 inline-flex 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 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 inline-flex 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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"}
|
package/dist/main.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export { default as DataTable } from './components/datatable/DataTable.tsx';
|
|
|
15
15
|
export { default as DataTableServer } from './components/datatable/DataTableServer.tsx';
|
|
16
16
|
export { default as ProfileOverview } from './components/profiles/ProfileOverview.tsx';
|
|
17
17
|
export { default as DateRangeField } from './components/form/DateRangeField.tsx';
|
|
18
|
+
export { default as DateField } from './components/form/DateField.tsx';
|
|
18
19
|
export * from './components/datatable/types.ts';
|
|
19
20
|
export * from './contexts/FederationContext.tsx';
|
|
20
21
|
export * from './contexts/useFederationContext.ts';
|
package/dist/main.js
CHANGED
|
@@ -15,6 +15,7 @@ import { default as default13 } from "./components/datatable/DataTable.js";
|
|
|
15
15
|
import { default as default14 } from "./components/datatable/DataTableServer.js";
|
|
16
16
|
import { default as default15 } from "./components/profiles/ProfileOverview.js";
|
|
17
17
|
import { default as default16 } from "./components/form/DateRangeField.js";
|
|
18
|
+
import { default as default17 } from "./components/form/DateField.js";
|
|
18
19
|
import { FederationContext, FederationContextProvider } from "./contexts/FederationContext.js";
|
|
19
20
|
import { useFederationContext } from "./contexts/useFederationContext.js";
|
|
20
21
|
import { getFullName, getFullNameList, getFullNameListPositionWithEmployee, getFullNamePositionWithEmployee } from "./utils/getFullName.js";
|
|
@@ -28,6 +29,7 @@ export {
|
|
|
28
29
|
ConfirmationModalDialog,
|
|
29
30
|
default13 as DataTable,
|
|
30
31
|
default14 as DataTableServer,
|
|
32
|
+
default17 as DateField,
|
|
31
33
|
default16 as DateRangeField,
|
|
32
34
|
EApproverRoles,
|
|
33
35
|
EApproverTypes,
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"main.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
|