diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx')
| -rw-r--r-- | sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx | 191 |
1 files changed, 0 insertions, 191 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx deleted file mode 100644 index 143b802a4..000000000 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx +++ /dev/null @@ -1,191 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. - * ================================================================================================= - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under the License - * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing permissions and limitations under - * the License. - * ============LICENSE_END========================================================================== - */ -import * as React from 'react'; -import { Theme, lighten } from '@mui/material/styles'; - -import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; -import createStyles from '@mui/styles/createStyles'; - -import IconButton from '@mui/material/IconButton'; -import Tooltip from '@mui/material/Tooltip'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import DeleteIcon from '@mui/icons-material/Delete'; -import MoreIcon from '@mui/icons-material/MoreVert'; -import FilterListIcon from '@mui/icons-material/FilterList'; -import MenuItem from '@mui/material/MenuItem'; -import Menu from '@mui/material/Menu'; -import { SvgIconProps } from '@mui/material/SvgIcon'; -import { Button } from '@mui/material'; -import { ColumnModel } from './columnModel'; -import ShowColumnsDialog from './showColumnDialog' - -const styles = (theme: Theme) => createStyles({ - root: { - paddingRight: theme.spacing(1), - }, - highlight: - theme.palette.mode === 'light' - ? { - color: theme.palette.secondary.main, - backgroundColor: lighten(theme.palette.secondary.light, 0.85), - } - : { - color: theme.palette.text.primary, - backgroundColor: theme.palette.secondary.dark, - }, - spacer: { - flex: '1 1 100%', - }, - actions: { - color: theme.palette.text.secondary, - display: "flex", - flex: "auto", - flexDirection: "row" - }, - title: { - flex: '0 0 auto', - }, - menuButton: { - marginLeft: -12, - marginRight: 20, - }, -}); - -interface ITableToolbarComponentProps extends WithStyles<typeof styles> { - numSelected: number | null; - title?: string; - tableId: string | null; - customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, ariaLabel: string, onClick: () => void, disabled?: boolean }[]; - columns: ColumnModel<{}>[]; - onHideColumns: (columnNames: string[]) => void - onShowColumns: (columnNames: string[]) => void - onToggleFilter: () => void; - onExportToCsv: () => void; -} - -class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, { anchorEl: EventTarget & HTMLElement | null, anchorElDialog: HTMLElement | null }> { - - - constructor(props: ITableToolbarComponentProps) { - super(props); - - this.state = { - anchorEl: null, - anchorElDialog: null - }; - } - - private handleMenu = (event: React.MouseEvent<HTMLElement>) => { - this.setState({ anchorEl: event.currentTarget }); - }; - - private handleClose = () => { - this.setState({ anchorEl: null }); - }; - - private showColumnsDialog = (event: React.MouseEvent<HTMLElement>) =>{ - this.setState({ anchorElDialog: this.state.anchorEl }); - } - - private onCloseDialog = () =>{ - this.setState({ anchorElDialog: null }); - - } - - render() { - const { numSelected, classes } = this.props; - const open = !!this.state.anchorEl; - const buttonPrefix = this.props.tableId !== null ? this.props.tableId : 'table'; - return ( - <> - <Toolbar className={`${classes.root} ${numSelected && numSelected > 0 ? classes.highlight : ''} `} > - <div className={classes.title}> - {numSelected && numSelected > 0 ? ( - <Typography color="inherit" variant="subtitle1"> - {numSelected} selected - </Typography> - ) : ( - <Typography variant="h5" id="tableTitle"> - {this.props.title || null} - </Typography> - )} - </div> - <div className={classes.spacer} /> - <div className={classes.actions}> - {this.props.customActionButtons - ? this.props.customActionButtons.map((action, ind) => ( - <Tooltip disableInteractive key={`custom-action-${ind}`} title={action.tooltip || ''}> - <IconButton - disabled={action.disabled} - aria-label={`${buttonPrefix}-${action.ariaLabel}-button`} - onClick={() => action.onClick()} - size="large"> - <action.icon /> - </IconButton> - </Tooltip> - )) - : null} - {numSelected && numSelected > 0 ? ( - <Tooltip disableInteractive title="Delete"> - <IconButton aria-label={`${buttonPrefix}-delete-button`} size="large"> - <DeleteIcon /> - </IconButton> - </Tooltip> - ) : ( - <Tooltip disableInteractive title="Filter list"> - <IconButton - aria-label={`${buttonPrefix}-filter-list-button`} - onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }} - size="large"> - <FilterListIcon /> - </IconButton> - </Tooltip> - )} - <Tooltip disableInteractive title="Actions"> - <IconButton - color="inherit" - aria-label={`${buttonPrefix}-additional-actions-button`} - aria-owns={open ? 'menu-appbar' : undefined} - aria-haspopup="true" - onClick={this.handleMenu} - size="large"> - <MoreIcon /> - </IconButton> - </Tooltip> - <Menu id="menu-appbar" anchorEl={this.state.anchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} - transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={open} onClose={this.handleClose} > - <MenuItem aria-label="export-table-as-csv" onClick={(e) =>{ this.props.onExportToCsv(); this.handleClose()}}>Export as CSV</MenuItem> - <MenuItem aria-label="hide-show-table-columns" onClick={(e) =>{ this.showColumnsDialog(e); this.handleClose()}}>Hide/show columns</MenuItem> - </Menu> - </div> - </Toolbar> - <ShowColumnsDialog - anchorEl={this.state.anchorElDialog} - onClose={this.onCloseDialog} - settingsName={this.props.tableId} - columns={this.props.columns} - hideColumns={this.props.onHideColumns} - showColumns={this.props.onShowColumns} /> - </> - ); - } -} - -export const TableToolbar = withStyles(styles)(TableToolbarComponent);
\ No newline at end of file |