@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
72 lines • 3.72 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { createStyles, makeStyles } from '@mui/styles';
// import { useTranslation } from 'react-i18next';
import { Chip } from '@mui/material';
import { CrossIcon } from '../components/assets/CrossIcon';
const useStyles = makeStyles(createStyles({
filtersActiveLabel: {
color: '#2B2828',
fontSize: '14px',
paddingRight: 10,
},
chipZone: {
padding: '18px 0 5px 10px',
width: '100%',
},
chipLabel: {
fontWeight: 500,
marginRight: 5,
color: '#2B2828 !important',
},
filterChip: {
border: '1px solid #626368 !important',
background: '#F6F6F6 0% 0% no-repeat padding-box !important',
marginRight: '5px!important',
marginBottom: '5px!important',
},
}));
// between filter to be used in next level inchallah
// const getFilterValue = (column: ColumnInstance<any>, filterValue: FilterValue) => {
// switch (column.filter) {
// case 'between':
// const min = filterValue[0];
// const max = filterValue[1];
// return min ? (max ? `${min}-${max}` : `>=${min}`) : `<=${max}`;
// }
// return filterValue;
// };
export function FilterChipBar({ instance, }) {
// const { t } = useTranslation();
const [renderFilters, setRenderFilters] = React.useState(false);
const classes = useStyles({});
const { allColumns, setFilter, setAllFilters, state: { filters }, } = instance;
const handleDelete = React.useCallback((id, selectedFilterValue) => {
const filtered = filters.find((f) => f.id === id);
const newValues = filtered !== undefined &&
(filtered === null || filtered === void 0 ? void 0 : filtered.value.filter((f) => f !== selectedFilterValue));
setFilter(id, (newValues === null || newValues === void 0 ? void 0 : newValues.length) > 0 ? newValues : []);
}, [setFilter, filters]);
const resetFilters = React.useCallback(() => {
setAllFilters([]);
}, [setAllFilters]);
React.useEffect(() => {
setRenderFilters(filters.some((filterValue) => filterValue.value.length > 0));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [filters]);
return renderFilters ? (_jsxs("div", Object.assign({ className: classes.chipZone }, { children: [_jsx("span", Object.assign({ className: classes.filtersActiveLabel, style: {
color: '#FF0000',
textDecoration: 'underline',
cursor: 'pointer',
fontWeight: 'bold',
}, onClick: () => resetFilters() }, { children: "Effacer tous" })), filters &&
allColumns.map((column) => {
const filter = filters.find((f) => f.id === column.id);
const values = filter && filter.value;
return (values &&
values.map((Filtervalue) => (_jsx(Chip, { className: classes.filterChip, deleteIcon: _jsx(CrossIcon, { height: 10, width: 10, fill: "#2B2828" }), label: _jsxs(React.Fragment, { children: [_jsxs("span", Object.assign({ className: classes.chipLabel }, { children: [column.render('Header'), ":", ' '] })), _jsxs("span", Object.assign({ className: classes.chipLabel }, { children: [Filtervalue, " "] }))] }), onDelete: () => handleDelete(column.id, Filtervalue),
// onDelete={() => handleDelete(column.id, Filtervalue)}
variant: "outlined" }, Filtervalue))));
})] }))) : null;
}
//# sourceMappingURL=FilterChipBar.js.map