@pagamio/frontend-commons-lib 0.8.193 → 0.8.194
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.
|
@@ -5,16 +5,16 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
5
5
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
|
|
6
6
|
import { exportToCsv, exportToPdf, exportToXlsx } from './exportUtils';
|
|
7
7
|
const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, extraOptions = [], pdfOptions, xlsxOptions, csvOptions, exportAll = false, fetchData, }) => {
|
|
8
|
-
const [popoverOpened, setPopoverOpened] = useState(false);
|
|
9
8
|
const [exportType, setExportType] = useState(null);
|
|
10
9
|
const [excludedColumns, setExcludedColumns] = useState(['action']);
|
|
11
10
|
const [isExporting, setIsExporting] = useState(false);
|
|
12
11
|
const [exportAllData, setExportAllData] = useState(false);
|
|
12
|
+
const [selectOpen, setSelectOpen] = useState(false);
|
|
13
13
|
const popoverRef = useRef(null);
|
|
14
14
|
useEffect(() => {
|
|
15
15
|
const handleClickOutside = (event) => {
|
|
16
16
|
if (popoverRef.current && !popoverRef.current.contains(event.target)) {
|
|
17
|
-
|
|
17
|
+
setExportType(null);
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
20
|
document.addEventListener('mousedown', handleClickOutside);
|
|
@@ -63,28 +63,26 @@ const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, ex
|
|
|
63
63
|
}
|
|
64
64
|
finally {
|
|
65
65
|
setIsExporting(false);
|
|
66
|
-
setPopoverOpened(false);
|
|
67
66
|
setExportType(null);
|
|
68
67
|
}
|
|
69
68
|
};
|
|
70
69
|
const handleExportChange = (type) => {
|
|
71
70
|
if (!type || type === 'none') {
|
|
72
71
|
setExportType(null);
|
|
73
|
-
setPopoverOpened(false);
|
|
74
72
|
return;
|
|
75
73
|
}
|
|
76
74
|
// Check if type is an extraOption
|
|
77
75
|
const extra = extraOptions.find((opt) => opt.value === type);
|
|
78
76
|
if (extra) {
|
|
79
77
|
extra.onClick();
|
|
80
|
-
setPopoverOpened(false);
|
|
81
78
|
setExportType(null);
|
|
82
79
|
return;
|
|
83
80
|
}
|
|
84
81
|
setExportType(type);
|
|
85
|
-
setPopoverOpened(type !== exportType);
|
|
86
82
|
};
|
|
87
|
-
|
|
83
|
+
// Show popover when exportType is set and Select is closed
|
|
84
|
+
const popoverOpened = exportType !== null && !selectOpen;
|
|
85
|
+
return (_jsxs("div", { className: `w-40 ${containerClassName ?? ''}`, children: [_jsxs(Select, { value: exportType ?? 'none', open: selectOpen, onOpenChange: setSelectOpen, onValueChange: (value) => handleExportChange(value === 'none' ? null : value), children: [_jsx(SelectTrigger, { className: `w-full ${buttonClassName ?? ''}`, children: _jsx(SelectValue, { placeholder: "Export Data" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "none", children: _jsx("span", { className: "text-gray-500", children: "Export Data As" }) }, "reset"), exportOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))), extraOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value)))] })] }, "export-dropdown"), popoverOpened && (_jsxs("div", { ref: popoverRef, className: "mt-2 bg-white rounded-md shadow-lg p-4 z-50 absolute w-45", children: [_jsx("div", { className: "text-sm text-gray-500 pb-3", children: "Uncheck to exclude column from export" }), _jsxs("div", { className: "mb-4 p-3 bg-gray-50 rounded-md", children: [_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: "export-all-data", checked: exportAllData, onChange: (event) => setExportAllData(event.currentTarget.checked), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsx(Label, { htmlFor: "export-all-data", className: "text-sm font-medium", children: "Export all data" })] }), _jsx("p", { className: "text-xs text-gray-500 mt-1 ml-6", children: "This will fetch all records for the table" })] }), _jsx(Stack, { children: columns.map((col) => {
|
|
88
86
|
if (col.accessorKey !== 'action') {
|
|
89
87
|
return (_jsxs("div", { className: "flex items-center gap-x-2", children: [_jsx(Checkbox, { id: col.header, checked: !excludedColumns.includes(col.accessorKey), onChange: (event) => handleCheckboxChange(col.accessorKey, !event.currentTarget.checked), className: "checked:!bg-primary-500 checked:!border-primary-500" }), _jsx(Label, { htmlFor: "rememberMe", children: col.header })] }, col.accessorKey));
|
|
90
88
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pagamio/frontend-commons-lib",
|
|
3
3
|
"description": "Pagamio library for Frontend reusable components like the form engine and table container",
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.194",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"provenance": false
|