@aures/custom-react-table
Version:
dynamic table based on react table v7
115 lines • 6.45 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterChipBar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const styles_1 = require("@mui/styles");
const react_i18next_1 = require("react-i18next");
const material_1 = require("@mui/material");
const FixedHeightDiv_1 = __importDefault(require("../components/FixedHeightDiv"));
const CrossIcon_1 = require("../components/assets/CrossIcon");
const important_1 = require("../utils/important");
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',
},
div_filter_elements_clz: {
maxHeight: '75px !important',
zIndex: '0',
},
divFilterItemsExTrue: { maxHeight: 'none', overflow: 'hidden' },
divFilterItemsExFalse: { maxHeight: '85px !important', overflow: 'hidden' },
}));
// 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;
// };
function FilterChipBar({ instance, setLocalFilterActive, filterActive, }) {
const { t } = (0, react_i18next_1.useTranslation)();
const [renderFilters, setRenderFilters] = react_1.default.useState(false);
const classes = useStyles({});
const { allColumns, setFilter, setAllFilters, state: { filters }, } = instance;
const [isExpanded, setIsExpanded] = react_1.default.useState(false);
const contentRef = (0, react_1.useRef)(null);
const [isOverflowing, setIsOverflowing] = (0, react_1.useState)(false);
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 : []);
}, [setFilter, filters]);
const resetFilters = react_1.default.useCallback(() => {
setAllFilters([]);
}, [setAllFilters]);
react_1.default.useEffect(() => {
setRenderFilters(filters.some((filterValue) => filterValue.value.length > 0));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [filters]);
return renderFilters && (0, important_1.ifOneExists)(allColumns, filters) ? ((0, jsx_runtime_1.jsx)(FixedHeightDiv_1.default, Object.assign({ height: "90px", setIsFilterShowingTab: setLocalFilterActive, filters: filters, filterActive: filterActive }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: contentRef, 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: t('Delete all') })), filters &&
(0, important_1.ifOneExists)(allColumns, filters) &&
allColumns.map((column) => {
var _a;
const filter = filters.find((f) => f.id === column.id);
const values = filter && filter.value;
return (((_a = filter === null || filter === void 0 ? void 0 : filter.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((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: [values.join(','), ' '] }))] }),
// onDelete={() => handleDelete(column.id, Filtervalue)}
// onDelete={() => handleDelete(column.id, Filtervalue)}
variant: "outlined" }, values.join(','))));
})] })) }))) : null;
}
exports.FilterChipBar = FilterChipBar;
//# sourceMappingURL=FilterChipBar.js.map