pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
62 lines (61 loc) • 4.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Stack } from '@mantine/core';
import { Checkbox, Label } from 'flowbite-react';
import { useEffect, useRef, useState } from 'react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components';
import { exportToCsv, exportToPdf, exportToXlsx } from './exportUtils';
const ExportDropdown = ({ data, columns, containerClassName, buttonClassName, }) => {
const [popoverOpened, setPopoverOpened] = useState(false);
const [exportType, setExportType] = useState(null);
const [excludedColumns, setExcludedColumns] = useState(['action']);
const popoverRef = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
if (popoverRef.current && !popoverRef.current.contains(event.target)) {
setPopoverOpened(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
const exportOptions = [
{ value: 'csv', label: 'Export as CSV' },
{ value: 'xlsx', label: 'Export as XLSX' },
{ value: 'pdf', label: 'Export as PDF' },
];
const handleCheckboxChange = (columnKey, checked) => {
setExcludedColumns((prev) => (checked ? [...prev, columnKey] : prev.filter((key) => key !== columnKey)));
};
const getIncludedColumns = () => {
return columns.filter((col) => !excludedColumns.includes(col.accessorKey));
};
const handleContinue = () => {
const includedColumns = getIncludedColumns();
if (exportType === 'csv') {
exportToCsv(data, includedColumns);
}
else if (exportType === 'xlsx') {
exportToXlsx(data, includedColumns);
}
else if (exportType === 'pdf') {
exportToPdf(data, includedColumns);
}
setPopoverOpened(false);
setExportType(null);
};
const handleExportChange = (type) => {
setExportType(type === 'none' ? null : type);
setPopoverOpened(type !== exportType);
};
return (_jsxs("div", { className: `w-40 ${containerClassName ?? ''}`, children: [_jsxs(Select, { value: exportType ?? 'none', 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)))] })] }, "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" }), _jsx(Stack, { children: columns.map((col) => {
if (col.accessorKey !== 'action') {
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-core-add checked:!border-core-add" }), _jsx(Label, { htmlFor: "rememberMe", children: col.header })] }, col.accessorKey));
}
}) }), _jsx("button", { className: `w-full mt-4 px-4 py-2 rounded-md text-white
${getIncludedColumns().length === 0
? 'bg-gray-300 cursor-not-allowed'
: 'bg-core-add hover:bg-core-add-hover'}`, onClick: handleContinue, disabled: getIncludedColumns().length === 0, children: "Continue" })] }))] }));
};
export default ExportDropdown;