@addsign/moje-agenda-shared-lib 2.0.27 → 2.0.29
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/components/datatable/DataTableServer.d.ts +3 -2
- package/dist/components/datatable/DataTableServer.js +8 -6
- package/dist/components/datatable/DataTableServer.js.map +1 -1
- package/dist/components/form/DateField.js +1 -0
- package/dist/components/form/DateField.js.map +1 -1
- package/lib/components/datatable/DataTableServer.tsx +9 -5
- package/lib/components/form/DateField.tsx +1 -0
- package/package.json +1 -1
|
@@ -68,6 +68,7 @@ function DateField({
|
|
|
68
68
|
placeholder,
|
|
69
69
|
startFrom: (localValue == null ? void 0 : localValue.startDate) ? new Date(localValue.startDate) : void 0,
|
|
70
70
|
disabled,
|
|
71
|
+
readOnly: true,
|
|
71
72
|
startWeekOn: "mon",
|
|
72
73
|
minDate: minDate ? new Date(minDate) : null,
|
|
73
74
|
maxDate: maxDate ? new Date(maxDate) : null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateField.js","sources":["../../../lib/components/form/DateField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent, useMemo } 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 onInputChange(startEvent);\r\n };\r\n\r\n const localValue = useMemo(() => {\r\n return {\r\n startDate: value,\r\n endDate: value,\r\n };\r\n }, [value]);\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={\r\n localValue?.startDate ? new Date(localValue.startDate) : undefined\r\n }\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={localValue}\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] py-2.5 font-normal ${rounded ? \" rounded-lg \" : \" !rounded-none \"} outline-none shadow-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\r\n className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}{\" \"}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\"\r\n id={name + \":error\"}\r\n >\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;AACjE,kBAAc,UAAU;AAAA,EAAA;AAGpB,QAAA,aAAa,QAAQ,MAAM;AACxB,WAAA;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX,GACC,CAAC,KAAK,CAAC;AAEV,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,YACE,yCAAY,aAAY,IAAI,KAAK,WAAW,SAAS,IAAI;AAAA,cAE3D;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,cACP,UAAU;AAAA,cACV,eAAe;AAAA,cACf,gBAAgB,CAACC,eAAc;AAC7B,uBACEA,aACA,8HAA8H,UAAU,iBAAiB,iBAAiB;AAAA,cAE9K;AAAA,cACA,oBAAoB,CAACA,eAAc;AACjC,uBAAOA,aAAY;AAAA,cACrB;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,QAAA,GACF;AAAA,QACC,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,OAAO;AAAA,YAEV,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACC;AAAA,QACF,OAAO,IAAI,KACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,OAAO;AAAA,YAEV,WAAA,YAAO,IAAI,MAAX,mBAAc;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"DateField.js","sources":["../../../lib/components/form/DateField.tsx"],"sourcesContent":["import Datepicker from \"react-tailwindcss-datepicker\";\r\nimport { ChangeEvent, useMemo } 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 onInputChange(startEvent);\r\n };\r\n\r\n const localValue = useMemo(() => {\r\n return {\r\n startDate: value,\r\n endDate: value,\r\n };\r\n }, [value]);\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={\r\n localValue?.startDate ? new Date(localValue.startDate) : undefined\r\n }\r\n disabled={disabled}\r\n readOnly={true}\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={localValue}\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] py-2.5 font-normal ${rounded ? \" rounded-lg \" : \" !rounded-none \"} outline-none shadow-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\r\n className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\"\r\n id={name + \":description\"}\r\n >\r\n {description}\r\n </div>\r\n )}{\" \"}\r\n {errors[name] && (\r\n <div\r\n className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\"\r\n id={name + \":error\"}\r\n >\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;AACjE,kBAAc,UAAU;AAAA,EAAA;AAGpB,QAAA,aAAa,QAAQ,MAAM;AACxB,WAAA;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX,GACC,CAAC,KAAK,CAAC;AAEV,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,YACE,yCAAY,aAAY,IAAI,KAAK,WAAW,SAAS,IAAI;AAAA,cAE3D;AAAA,cACA,UAAU;AAAA,cACV,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,cACP,UAAU;AAAA,cACV,eAAe;AAAA,cACf,gBAAgB,CAACC,eAAc;AAC7B,uBACEA,aACA,8HAA8H,UAAU,iBAAiB,iBAAiB;AAAA,cAE9K;AAAA,cACA,oBAAoB,CAACA,eAAc;AACjC,uBAAOA,aAAY;AAAA,cACrB;AAAA,cACC,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,QAAA,GACF;AAAA,QACC,eACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,OAAO;AAAA,YAEV,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACC;AAAA,QACF,OAAO,IAAI,KACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,OAAO;AAAA,YAEV,WAAA,YAAO,IAAI,MAAX,mBAAc;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}
|
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
DateField,
|
|
13
13
|
DateRangeField,
|
|
14
14
|
FormField,
|
|
15
|
+
IOptionItem,
|
|
15
16
|
IPageable,
|
|
16
17
|
Spinner,
|
|
17
18
|
handleErrors,
|
|
@@ -52,7 +53,13 @@ interface DataTableServerProps<T> {
|
|
|
52
53
|
bulkAction?: (items: T[]) => JSX.Element;
|
|
53
54
|
filters?: object;
|
|
54
55
|
selectedItemKey?: string;
|
|
56
|
+
itemsPerPageOptions?: IOptionItem[];
|
|
55
57
|
}
|
|
58
|
+
const defaultItemsPerPageOptions: IOptionItem[] = [
|
|
59
|
+
{ value: 10, label: "10" },
|
|
60
|
+
{ value: 50, label: "50" },
|
|
61
|
+
{ value: 100, label: "100" },
|
|
62
|
+
];
|
|
56
63
|
|
|
57
64
|
type DataTableInternalItems = {
|
|
58
65
|
_isHighlighted?: boolean;
|
|
@@ -90,6 +97,7 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
90
97
|
bulkAction,
|
|
91
98
|
filters,
|
|
92
99
|
selectedItemKey = "id",
|
|
100
|
+
itemsPerPageOptions = defaultItemsPerPageOptions,
|
|
93
101
|
}: DataTableServerProps<T>) {
|
|
94
102
|
const abortControllerRef = useRef<AbortController | null>(null);
|
|
95
103
|
const [itemsPerPageLocal, setItemsPerPageLocal] = useState<number>();
|
|
@@ -926,11 +934,7 @@ function DataTableServer<T extends DataTableInternalItems>({
|
|
|
926
934
|
name="itemsPerPage"
|
|
927
935
|
onInputChange={handleItemsPerPageChange}
|
|
928
936
|
className="!w-[100px]"
|
|
929
|
-
options={
|
|
930
|
-
{ value: 10, label: "10" },
|
|
931
|
-
{ value: 50, label: "50" },
|
|
932
|
-
{ value: 100, label: "100" },
|
|
933
|
-
]}
|
|
937
|
+
options={itemsPerPageOptions || defaultItemsPerPageOptions}
|
|
934
938
|
value={itemsPerPageLocal}
|
|
935
939
|
/>
|
|
936
940
|
</div>
|
|
@@ -81,6 +81,7 @@ export default function DateField({
|
|
|
81
81
|
localValue?.startDate ? new Date(localValue.startDate) : undefined
|
|
82
82
|
}
|
|
83
83
|
disabled={disabled}
|
|
84
|
+
readOnly={true}
|
|
84
85
|
startWeekOn="mon"
|
|
85
86
|
minDate={minDate ? new Date(minDate) : null}
|
|
86
87
|
maxDate={maxDate ? new Date(maxDate) : null}
|