@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
94 lines • 6.68 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableToolbar = exports.SmallIconActionButton = exports.InstanceSmallIconActionButton = exports.LabeledActionButton = exports.InstanceLabeledActionButton = exports.useStyles = 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 ViewColumn_1 = __importDefault(require("@mui/icons-material/ViewColumn"));
const classnames_1 = __importDefault(require("classnames"));
const ColumnHidePage_1 = require("./ColumnHidePage");
const GlobalFilter_1 = __importDefault(require("./filters/GlobalFilter"));
const StyledButton_1 = require("../components/assets/StyledButton");
const FilterIcon_1 = require("../components/assets/FilterIcon");
exports.useStyles = (0, styles_1.makeStyles)((theme) => (0, styles_1.createStyles)({
toolbar: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
},
leftButtons: {},
rightButtons: {},
leftIcons: {
'&:first-of-type': {
marginLeft: -12,
},
},
rightIcons: {
padding: 12,
marginTop: '-6px',
width: 48,
height: 48,
'&:last-of-type': {
marginRight: -12,
},
},
}));
const InstanceLabeledActionButton = ({ instance, icon, onClick, label, enabled = () => true, }) => ((0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", color: "primary", onClick: onClick(instance), disabled: !enabled(instance) }, { children: [icon, label] })));
exports.InstanceLabeledActionButton = InstanceLabeledActionButton;
const LabeledActionButton = ({ icon, onClick, label, enabled = true, }) => ((0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "contained", color: "primary", onClick: onClick, disabled: !enabled }, { children: [icon, label] })));
exports.LabeledActionButton = LabeledActionButton;
const InstanceSmallIconActionButton = ({ instance, icon, onClick, label, enabled = () => true, variant, }) => {
const classes = (0, exports.useStyles)({});
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: label !== undefined && label !== '' ? label : ' ', "aria-label": label }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)({
[classes.rightIcons]: variant === 'right',
[classes.leftIcons]: variant === 'left',
}), onClick: onClick(instance), disabled: !enabled(instance), size: "large" }, { children: icon })) }) })));
};
exports.InstanceSmallIconActionButton = InstanceSmallIconActionButton;
const SmallIconActionButton = ({ icon, onClick, label, enabled = true, variant, }) => {
const classes = (0, exports.useStyles)({});
return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: label !== undefined && label === '' ? label : ' ', "aria-label": label }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)({
[classes.rightIcons]: variant === 'right',
[classes.leftIcons]: variant === 'left',
}), onClick: onClick, disabled: !enabled, size: "large" }, { children: icon })) }) })));
};
exports.SmallIconActionButton = SmallIconActionButton;
function TableToolbar({ instance, showGlobalFilter, showFilter, showColumnIcon, filterActive, setLocalFilterActive, customJsxSideFilterButton, }) {
const { columns } = instance;
// const { t } = useTranslation();
const classes = (0, exports.useStyles)();
const [anchorEl, setAnchorEl] = react_1.default.useState(undefined);
const [columnsOpen, setColumnsOpen] = react_1.default.useState(false);
const [, setFilterOpen] = react_1.default.useState(false);
const hideableColumns = columns.filter((column) => !(column.id === '_selector'));
const handleColumnsClick = react_1.default.useCallback((event) => {
setAnchorEl(event.currentTarget);
setColumnsOpen(true);
}, [setAnchorEl, setColumnsOpen]);
const handleClose = react_1.default.useCallback(() => {
setColumnsOpen(false);
setFilterOpen(false);
setAnchorEl(undefined);
}, []);
// toolbar with filter/search column select.
return ((0, jsx_runtime_1.jsxs)(material_1.Toolbar, Object.assign({ className: !showGlobalFilter && !showFilter && !showColumnIcon
? 'd-none'
: classes.toolbar }, { children: [showGlobalFilter ? ((0, jsx_runtime_1.jsx)(GlobalFilter_1.default, { preGlobalFilteredRows: instance.preGlobalFilteredRows, setGlobalFilter: instance.setGlobalFilter })) : null, (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.rightButtons, style: { display: 'flex', alignItems: 'center', height: '25' } }, { children: [(0, jsx_runtime_1.jsx)(ColumnHidePage_1.ColumnHidePage, { instance: instance, onClose: handleClose, show: columnsOpen, anchorEl: anchorEl }), showColumnIcon
? hideableColumns.length > 1 && ((0, jsx_runtime_1.jsx)(exports.SmallIconActionButton, { icon: (0, jsx_runtime_1.jsx)(ViewColumn_1.default, {}), onClick: handleColumnsClick, label: "Show / hide columns", variant: "right" }))
: null, showFilter ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsxs)(StyledButton_1.StyledButton, Object.assign({ rounded: true, variant: "primary", onClick: () => {
setLocalFilterActive(!filterActive);
}, label: "Filter by columns" }, { children: [(0, jsx_runtime_1.jsx)(FilterIcon_1.FilterIcon, { style: {
height: '20px',
flexDirection: 'row-reverse',
marginTop: '0px',
marginRight: '9px',
width: '20px',
fill: 'white',
} }), "Filtre(s)"] })) })) : null, customJsxSideFilterButton] }))] })));
}
exports.TableToolbar = TableToolbar;
//# sourceMappingURL=TableToolbar.js.map