@kadconsulting/dry
Version:
KAD Reusable Component Library
89 lines • 5.59 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect } from 'react';
import Modal from '../../Modal/Modal';
import useModalState from '../../../hooks/useModalState';
import { Button } from '../../Button';
import TextInput from '../../TextInput/TextInput';
import { DropdownCheckboxGroup } from '../../DropdownCheckboxGroup';
import { FilterType } from '../DataTableTypes';
import './ColumnControls.scss';
const ColumnControls = ({ columns, filters, columnUniqueValues, onFilterChange, columnOrder, onColumnOrderChange, columnWidths, onColumnResize, onColumnVisibilityChange, onColumnPinningChange, }) => {
const [localColumnOrder, setLocalColumnOrder] = useState(columnOrder);
const [localColumnWidths, setLocalColumnWidths] = useState(columnWidths);
const [localVisibleColumns, setLocalVisibleColumns] = useState([]);
const [localPinnedColumns, setLocalPinnedColumns] = useState([]);
const [showFilters, setShowFilters] = useState(false);
const [localFilters, setLocalFilters] = useState({});
const [isModalOpen, openModal, closeModal] = useModalState();
useEffect(() => {
setLocalColumnOrder(columnOrder);
setLocalColumnWidths(columnWidths);
setLocalFilters(filters);
}, [columnOrder, columnWidths, filters]);
const handleFilterChange = (columnId, value) => {
const newFilters = { ...localFilters, [columnId]: value };
setLocalFilters(newFilters);
onFilterChange(newFilters);
};
const handleClearFilterChange = () => {
setLocalFilters({});
onFilterChange({});
};
const renderFilterInput = (column) => {
const columnId = column.accessor;
const columnHeader = column.Header;
const filterValue = localFilters[columnId] || '';
switch (column.filterType) {
case FilterType.Text:
return (_jsx(DropdownCheckboxGroup, { options: columnUniqueValues && columnUniqueValues[columnId]
? Array.from(columnUniqueValues[columnId]).reduce((acc, value) => {
acc.push({ LabelContent: value, value: value });
return acc;
}, [])
: [], handleUpdate: (selectedValues) => {
handleFilterChange(columnId, selectedValues);
}, buttonText: `${columnHeader} Options`, isLayedOut: false, buttonClassName: 'column-controls__dropdown', buttonWidth: '100%', isButtonFullWidth: false }));
case FilterType.Number:
return (_jsx(TextInput, { value: filterValue, inputType: 'number', onChange: (e) => handleFilterChange(columnId, Number(e.target.value)) }));
case FilterType.DateRange:
return (_jsxs(_Fragment, { children: [_jsx(TextInput, { value: (localFilters[columnId] || {}).startDate || '', inputType: 'date', onChange: (e) => handleFilterChange(columnId, {
...localFilters[columnId],
startDate: e.target.value,
}) }), _jsx(TextInput, { value: (localFilters[columnId] || {}).endDate || '', inputType: 'date', onChange: (e) => handleFilterChange(columnId, {
...localFilters[columnId],
endDate: e.target.value,
}) })] }));
default:
return null;
}
};
const handleModalClick = () => {
if (isModalOpen) {
closeModal();
}
else {
openModal();
}
};
return (_jsxs("div", { className: 'column-controls', children: [_jsx("div", { children: _jsx(Button, { onClick: handleModalClick, buttonType: 'tertiary', icon: _jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', children: _jsx("path", { d: 'M5 10H15M2.5 5H17.5M7.5 15H12.5', stroke: '#C45C0D', strokeWidth: '1.66667', strokeLinecap: 'round', strokeLinejoin: 'round' }) }), text: 'filter' }) }), _jsxs(Modal, { isOpen: isModalOpen, onClose: closeModal, isLight: true, hasCloseButton: false, children: [columns.map((column, index) => {
let header = null;
if (typeof column.Header === 'string' &&
(column.filterType === FilterType.Number ||
column.filterType === FilterType.DateRange)) {
header = column.Header;
}
else if (React.isValidElement(column.Header)) {
header = column.Header;
}
else if (typeof column.Header === 'function') {
const HeaderFunction = column.Header;
const possibleElement = HeaderFunction();
if (React.isValidElement(possibleElement)) {
header = possibleElement;
}
}
return (_jsxs("div", { className: 'column-controls__item', children: [header && (_jsx("div", { className: 'column-controls__item-header', children: header })), renderFilterInput(column)] }, index));
}), _jsx(Button, { onClick: handleClearFilterChange, buttonType: 'primary', text: 'Reset all filters' })] })] }));
};
export default ColumnControls;
//# sourceMappingURL=ColumnControls.js.map