@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
83 lines • 5.36 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { Button, IconButton, Toolbar, Tooltip } from '@mui/material';
import { createStyles, makeStyles } from '@mui/styles';
import ViewColumnsIcon from '@mui/icons-material/ViewColumn';
import classnames from 'classnames';
import { ColumnHidePage } from './ColumnHidePage';
import GlobalFilter from './filters/GlobalFilter';
import { StyledButton } from '../components/assets/StyledButton';
import { FilterIcon } from '../components/assets/FilterIcon';
export const useStyles = makeStyles((theme) => 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,
},
},
}));
export const InstanceLabeledActionButton = ({ instance, icon, onClick, label, enabled = () => true, }) => (_jsxs(Button, Object.assign({ variant: "contained", color: "primary", onClick: onClick(instance), disabled: !enabled(instance) }, { children: [icon, label] })));
export const LabeledActionButton = ({ icon, onClick, label, enabled = true, }) => (_jsxs(Button, Object.assign({ variant: "contained", color: "primary", onClick: onClick, disabled: !enabled }, { children: [icon, label] })));
export const InstanceSmallIconActionButton = ({ instance, icon, onClick, label, enabled = () => true, variant, }) => {
const classes = useStyles({});
return (_jsx(Tooltip, Object.assign({ title: label !== undefined && label !== '' ? label : ' ', "aria-label": label }, { children: _jsx("span", { children: _jsx(IconButton, Object.assign({ className: classnames({
[classes.rightIcons]: variant === 'right',
[classes.leftIcons]: variant === 'left',
}), onClick: onClick(instance), disabled: !enabled(instance), size: "large" }, { children: icon })) }) })));
};
export const SmallIconActionButton = ({ icon, onClick, label, enabled = true, variant, }) => {
const classes = useStyles({});
return (_jsx(Tooltip, Object.assign({ title: label !== undefined && label === '' ? label : ' ', "aria-label": label }, { children: _jsx("span", { children: _jsx(IconButton, Object.assign({ className: classnames({
[classes.rightIcons]: variant === 'right',
[classes.leftIcons]: variant === 'left',
}), onClick: onClick, disabled: !enabled, size: "large" }, { children: icon })) }) })));
};
export function TableToolbar({ instance, showGlobalFilter, showFilter, showColumnIcon, filterActive, setLocalFilterActive, customJsxSideFilterButton, }) {
const { columns } = instance;
// const { t } = useTranslation();
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(undefined);
const [columnsOpen, setColumnsOpen] = React.useState(false);
const [, setFilterOpen] = React.useState(false);
const hideableColumns = columns.filter((column) => !(column.id === '_selector'));
const handleColumnsClick = React.useCallback((event) => {
setAnchorEl(event.currentTarget);
setColumnsOpen(true);
}, [setAnchorEl, setColumnsOpen]);
const handleClose = React.useCallback(() => {
setColumnsOpen(false);
setFilterOpen(false);
setAnchorEl(undefined);
}, []);
// toolbar with filter/search column select.
return (_jsxs(Toolbar, Object.assign({ className: !showGlobalFilter && !showFilter && !showColumnIcon
? 'd-none'
: classes.toolbar }, { children: [showGlobalFilter ? (_jsx(GlobalFilter, { preGlobalFilteredRows: instance.preGlobalFilteredRows, setGlobalFilter: instance.setGlobalFilter })) : null, _jsxs("div", Object.assign({ className: classes.rightButtons, style: { display: 'flex', alignItems: 'center', height: '25' } }, { children: [_jsx(ColumnHidePage, { instance: instance, onClose: handleClose, show: columnsOpen, anchorEl: anchorEl }), showColumnIcon
? hideableColumns.length > 1 && (_jsx(SmallIconActionButton, { icon: _jsx(ViewColumnsIcon, {}), onClick: handleColumnsClick, label: "Show / hide columns", variant: "right" }))
: null, showFilter ? (_jsx(React.Fragment, { children: _jsxs(StyledButton, Object.assign({ rounded: true, variant: "primary", onClick: () => {
setLocalFilterActive(!filterActive);
}, label: "Filter by columns" }, { children: [_jsx(FilterIcon, { style: {
height: '20px',
flexDirection: 'row-reverse',
marginTop: '0px',
marginRight: '9px',
width: '20px',
fill: 'white',
} }), "Filtre(s)"] })) })) : null, customJsxSideFilterButton] }))] })));
}
//# sourceMappingURL=TableToolbar.js.map