@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
65 lines • 2.57 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterPage = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styles_1 = require("@mui/styles");
const material_1 = require("@mui/material");
const react_1 = __importDefault(require("react"));
const useStyles = (0, styles_1.makeStyles)((0, styles_1.createStyles)({
columnsPopOver: {
padding: 24,
display: 'flex',
},
filtersResetButton: {
position: 'absolute',
top: 18,
right: 21,
},
popoverTitle: {
fontWeight: 500,
padding: '0 24px 24px 0',
textTransform: 'uppercase',
},
grid: {
display: 'grid',
gridTemplateColumns: 'repeat(2, 218px)',
'@media (max-width: 600px)': {
gridTemplateColumns: 'repeat(1, 180px)',
},
gridColumnGap: 24,
gridRowGap: 24,
},
cell: {
width: '100%',
display: 'flex',
flexDirection: 'column',
},
hidden: {
display: 'none',
},
}));
function FilterPage({ instance, anchorEl, onClose, show, }) {
const classes = useStyles({});
const { allColumns } = instance;
const onSubmit = react_1.default.useCallback((e) => {
e.preventDefault();
onClose();
}, [onClose]);
// const resetFilters = React.useCallback(() => {
// setAllFilters([]);
// }, [setAllFilters]);
return ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ anchorEl: anchorEl, id: 'popover-filters', onClose: onClose, open: show, anchorOrigin: {
vertical: 'bottom',
horizontal: 'right',
}, transformOrigin: {
vertical: 'top',
horizontal: 'right',
} }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (classes.columnsPopOver, classes.grid, classes.cell) }, { children: (0, jsx_runtime_1.jsx)("form", Object.assign({ onSubmit: onSubmit, className: classes.cell }, { children: (0, jsx_runtime_1.jsx)("div", { children: allColumns
.filter((it) => it.canFilter)
.map((column) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "d-flex mt-2" }, { children: column.render('Filter') }), column.id))) }) })) })) })));
}
exports.FilterPage = FilterPage;
//# sourceMappingURL=FilterPage.js.map