@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
92 lines • 5.36 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterChipBarCollapsible = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const material_1 = require("@mui/material");
const styles_1 = require("@mui/styles");
const CrossIcon_1 = require("../components/assets/CrossIcon");
const useStyles = (0, styles_1.makeStyles)((0, styles_1.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',
},
}));
// 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;
// };
function FilterChipBarCollapsible({ instance, showMore, setDesignationFilter, }) {
// const { t } = useTranslation();
const classes = useStyles({});
const { allColumns, setFilter, setAllFilters, state: { filters }, } = instance;
const handleDelete = react_1.default.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 : undefined);
}, [setFilter, filters]);
const resetFilters = react_1.default.useCallback(() => {
setAllFilters([]);
setDesignationFilter('');
// eslint-disable-next-line
}, [setAllFilters]);
const [expanded, setExpanded] = react_1.default.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
function FilteredChipBar({ splicedFilter, showMore, }) {
const [filtersToShow, setFiltersToShow] = react_1.default.useState(() => filters);
react_1.default.useEffect(() => {
if (showMore) {
setFiltersToShow(splicedFilter ? filters.slice(2, filters.length) : filters.slice(0, 2));
}
}, [showMore, splicedFilter]);
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: allColumns.map((column) => {
const filter = filtersToShow.find((f) => f.id === column.id);
const filterValues = filter && filter.value;
return (filterValues &&
filterValues.map((Filtervalue) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.filterChip, deleteIcon: (0, jsx_runtime_1.jsx)(CrossIcon_1.CrossIcon, { height: 10, width: 10, fill: "#2B2828" }), label: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: classes.chipLabel }, { children: [column.render('Header'), ":", ' '] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: classes.chipLabel }, { children: [Filtervalue, " "] }))] }), onDelete: () => handleDelete(column.id, Filtervalue), variant: "outlined" }, Filtervalue))));
}) }));
}
return filters.some((filterValue) => filterValue.value.length > 0) ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.chipZone }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: classes.filtersActiveLabel, style: {
color: '#FF0000',
textDecoration: 'underline',
cursor: 'pointer',
fontWeight: 'bold',
}, onClick: () => resetFilters() }, { children: "Effacer tous" })), filters.length > 0 ? ((0, jsx_runtime_1.jsx)(FilteredChipBar, { splicedFilter: false, showMore: showMore })) : null, (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expanded }, { children: filters.length > 2 ? ((0, jsx_runtime_1.jsx)(FilteredChipBar, { splicedFilter: true, showMore: showMore })) : null })), showMore ? ((0, jsx_runtime_1.jsx)("span", Object.assign({ onClick: () => handleExpandClick(), style: {
textAlign: 'end',
color: '#0077D7',
textDecoration: 'underline',
cursor: 'pointer',
alignItems: 'flex-end',
display: 'block',
marginRight: '11px',
} }, { children: expanded ? 'Afficher moins' : 'Afficher plus' }))) : null] }))) : null;
}
exports.FilterChipBarCollapsible = FilterChipBarCollapsible;
//# sourceMappingURL=FilterChipBarCollapsible.js.map