@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
59 lines • 2.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnHidePage = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const styles_1 = require("@mui/styles");
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 ColumnHidePage({ instance, anchorEl, onClose, show, }) {
const classes = useStyles({});
const { allColumns, toggleHideColumn } = instance;
const hideableColumns = allColumns.filter((column) => !(column.id === '_selector') &&
!(column.id === 'expander') &&
!(column.id === 'hidecolumns'));
const checkedCount = hideableColumns.reduce((acc, val) => acc + (val.isVisible ? 0 : 1), 0);
const onlyOneOptionLeft = checkedCount + 1 >= hideableColumns.length;
return hideableColumns.length > 1 ? ((0, jsx_runtime_1.jsx)("div", { children: (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',
}, style: { padding: 24 } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (classes.columnsPopOver, classes.grid, classes.cell) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.popoverTitle }, { children: "Visible Columns" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { display: 'grid' } }, { children: hideableColumns.map((column) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { value: `${column.id}`, disabled: column.isVisible && onlyOneOptionLeft }), label: column.id,
// label={column.render('Header')}
checked: column.isVisible, onChange: () => toggleHideColumn(column.id, column.isVisible) }, column.id))) }))] })) })) })) : null;
}
exports.ColumnHidePage = ColumnHidePage;
//# sourceMappingURL=ColumnHidePage.js.map