@mrii/react-table-builder
Version:
library to easily build tables using MUI grid
140 lines (137 loc) • 5.32 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Menu, Box, MenuItem, Tooltip, Button, Badge } from '@mui/material';
import { styled, alpha } from '@mui/material/styles';
import { CheckBox, CheckBoxOutlineBlank, FilterList } from '@mui/icons-material';
import { memo, forwardRef, useRef, useCallback, useMemo } from 'react';
import { useGridApiContext, useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid';
import { useTableBuilderFilters } from '../../../context/filter/provider.mjs';
import { useTranslation } from '../../../context/translation/provider.mjs';
import { mergeRefs } from '../../../utils/merge-refs/index.mjs';
import { allowedFilterTypes } from '../../../types/column-type-union/index.mjs';
import { useTableBuilderColumns } from '../../../context/table-builder/provider.mjs';
const filterInitialValue = {
date: [
null,
null
]
};
const StyledMenu = styled((props)=>/*#__PURE__*/ jsx(Menu, {
anchorOrigin: {
vertical: 'bottom',
horizontal: 'left'
},
transformOrigin: {
vertical: 'top',
horizontal: 'left'
},
...props
}))(({ theme })=>({
'& .MuiPaper-root': {
minWidth: 180,
color: 'text.secondary',
'& .MuiMenuItem-root': {
'& .MuiSvgIcon-root': {
fontSize: 18,
color: 'text.secondary',
marginRight: theme.spacing(1.5)
},
'&:active': {
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
}
}
}
}));
const CustomGridToolbarFilterButton = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef((props, ref)=>{
const apiRef = useGridApiContext();
const anchor = useRef(null);
const columns = useTableBuilderColumns((s)=>s.columns);
const [filters, panel, setPanel, addFilter, deleteFilter] = useTableBuilderFilters((s)=>[
s.filters,
s.panel,
s.setPanel,
s.addFilter,
s.deleteFilter
]);
const t = useTranslation((s)=>s.getFieldLabel);
const lookup = useGridSelector(apiRef, gridColumnLookupSelector);
const toggleFiltersPanel = useCallback(()=>setPanel((v)=>!v), [
setPanel
]);
const tooltipContentNode = useMemo(()=>{
if (filters.length === 0) return apiRef?.current.getLocaleText('toolbarFiltersTooltipShow');
return /*#__PURE__*/ jsxs("div", {
children: [
apiRef?.current.getLocaleText('toolbarFiltersTooltipActive')(filters.length),
/*#__PURE__*/ jsx(Box, {
component: "ul",
sx: {
margin: (theme)=>theme.spacing(1, 1, 0.5),
padding: (theme)=>theme.spacing(0, 1)
},
children: filters.map((el)=>lookup[el.field] && /*#__PURE__*/ jsx("li", {
children: `${lookup[el.field].headerName || el.field}
${el.value}`
}, el.field))
})
]
});
}, [
filters,
apiRef,
lookup
]);
const refs = useMemo(()=>mergeRefs(ref, anchor), [
ref
]);
const items = useMemo(()=>columns.filter((el)=>el.filterable && allowedFilterTypes.includes(el.type)).map((el)=>{
const active = filters.findIndex((e)=>e.field === el.field) !== -1;
return /*#__PURE__*/ jsxs(MenuItem, {
onClick: ()=>{
active ? deleteFilter(el.field) : addFilter({
field: el.field,
column: el,
value: filterInitialValue[el.type] ?? ''
});
},
children: [
active ? /*#__PURE__*/ jsx(CheckBox, {}) : /*#__PURE__*/ jsx(CheckBoxOutlineBlank, {}),
t(el.field, true)
]
}, el.field);
}), [
addFilter,
columns,
deleteFilter,
filters,
t
]);
return /*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx(Tooltip, {
title: tooltipContentNode,
enterDelay: 1000,
children: /*#__PURE__*/ jsx(Button, {
ref: refs,
size: "small",
color: "primary",
...props,
onClick: toggleFiltersPanel,
startIcon: /*#__PURE__*/ jsx(Badge, {
badgeContent: filters.length,
color: "primary",
children: /*#__PURE__*/ jsx(FilterList, {})
}),
children: apiRef?.current.getLocaleText('toolbarFilters')
})
}),
/*#__PURE__*/ jsx(StyledMenu, {
anchorEl: anchor.current,
open: panel,
onClose: toggleFiltersPanel,
children: items
})
]
});
}));
export { CustomGridToolbarFilterButton };
//# sourceMappingURL=index.mjs.map