@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
50 lines • 3.43 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnHidePageCustom = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
// import { useTranslation } from 'react-i18next';
const react_1 = __importDefault(require("react"));
const TableStyle_1 = require("./TableStyle");
function ColumnHidePageCustom({ instance, }) {
// const { t } = useTranslation();
const classes = (0, TableStyle_1.useStyles)();
const [isVisible, setIsVisible] = react_1.default.useState(false);
const { allColumns, toggleHideAllColumns, toggleHideColumn } = instance;
const hideableColumns = allColumns.filter((column) => !(column.id === '_selector') &&
!(column.id === 'expander') &&
!(column.id === 'hidecolumns') &&
!(column.id === '_Actions') &&
!column.id.toLowerCase().includes('action'));
const uncheckedCount = hideableColumns.reduce((acc, val) => acc + (val.isVisible ? 0 : 1), 0);
const onlyOneOptionLeft = uncheckedCount + 1 >= hideableColumns.length;
react_1.default.useEffect(() => {
if (uncheckedCount === 0) {
setIsVisible(true);
}
else {
setIsVisible(false);
}
}, [uncheckedCount]);
return hideableColumns.length > 1 ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "d-flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " mx-2 d-flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ style: {
font: 'normal normal normal 13px/17px Segoe UI',
letterSpacing: '0px',
color: '#495057 ',
} }, { children: "Afficher tous:" })), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isVisible, onChange: () => {
toggleHideAllColumns(false);
setIsVisible(true);
} })] }), "showall"), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.DividerCss }), (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { overflowY: 'auto', maxHeight: '40vh' } }, { children: hideableColumns.map((column) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: " my-1 mx-2 d-flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ style: {
font: 'normal normal normal 13px/17px Segoe UI',
letterSpacing: '0px',
color: '#495057 ',
} }, { children: column.id })), (0, jsx_runtime_1.jsx)("input", { type: "checkbox",
// {...column.getToggleHiddenProps()}
onChange: () => {
toggleHideColumn(column.id, column.isVisible);
}, disabled: column.isVisible && onlyOneOptionLeft, checked: column.isVisible })] }), column.id))) }))] }))) : null;
}
exports.ColumnHidePageCustom = ColumnHidePageCustom;
//# sourceMappingURL=ColumnHidePageCustom.js.map