diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/material-table')
5 files changed, 174 insertions, 124 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts index 8124e450d..ce5b2cd1e 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts +++ b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts @@ -1,55 +1,55 @@ -/**
- * ============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';
-
-export enum ColumnType {
- text,
- numeric,
- boolean,
- date,
- custom
-}
-
-type CustomControl<TData> = {
- className?: string;
- style?: React.CSSProperties;
- rowData: TData;
-}
-
-export type ColumnModel<TData> = {
- title?: string;
- disablePadding?: boolean;
- width?: string | number ;
- className?: string;
- style?: React.CSSProperties;
- align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
- disableSorting?: boolean;
- disableFilter?: boolean;
-} & ({
- property: string;
- type: ColumnType.custom;
- customControl: React.ComponentType<CustomControl<TData>>;
-} | {
- property: keyof TData;
- type: ColumnType.boolean;
- labels?: { "true": string, "false": string };
-} | {
- property: keyof TData;
- type?: ColumnType.numeric | ColumnType.text | ColumnType.date;
+/** + * ============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'; + +export enum ColumnType { + text, + numeric, + boolean, + date, + custom +} + +type CustomControl<TData> = { + className?: string; + style?: React.CSSProperties; + rowData: TData; +} + +export type ColumnModel<TData> = { + title?: string; + disablePadding?: boolean; + width?: string | number ; + className?: string; + style?: React.CSSProperties; + align?: 'inherit' | 'left' | 'center' | 'right' | 'justify'; + disableSorting?: boolean; + disableFilter?: boolean; +} & ({ + property: string; + type: ColumnType.custom; + customControl: React.ComponentType<CustomControl<TData>>; +} | { + property: keyof TData; + type: ColumnType.boolean; + labels?: { "true": string, "false": string }; +} | { + property: keyof TData; + type?: ColumnType.numeric | ColumnType.text | ColumnType.date; });
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx index cb675218f..aac2a1252 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx @@ -16,29 +16,36 @@ * ============LICENSE_END========================================================================== */ import * as React from 'react'; -import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import TableCell from '@material-ui/core/TableCell'; -import TableContainer from '@material-ui/core/TableContainer'; -import TablePagination from '@material-ui/core/TablePagination'; -import TableRow from '@material-ui/core/TableRow'; -import Paper from '@material-ui/core/Paper'; -import Checkbox from '@material-ui/core/Checkbox'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; + +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableContainer from '@mui/material/TableContainer'; +import TablePagination from '@mui/material/TablePagination'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; +import Checkbox from '@mui/material/Checkbox'; import { TableToolbar } from './tableToolbar'; import { EnhancedTableHead } from './tableHead'; import { EnhancedTableFilter } from './tableFilter'; import { ColumnModel, ColumnType } from './columnModel'; -import { Omit, Menu, makeStyles } from '@material-ui/core'; +import { Menu } from '@mui/material'; +import { DistributiveOmit } from '@mui/types'; + +import makeStyles from '@mui/styles/makeStyles'; -import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon'; +import { SvgIconProps } from '@mui/material/SvgIcon'; -import { DividerTypeMap } from '@material-ui/core/Divider'; -import { MenuItemProps } from '@material-ui/core/MenuItem'; -import { flexbox } from '@material-ui/system'; +import { DividerTypeMap } from '@mui/material/Divider'; +import { MenuItemProps } from '@mui/material/MenuItem'; +import { flexbox } from '@mui/system'; import { RowDisabled } from './utilities'; import { toAriaLabel } from '../../utilities/yangHelper'; export { ColumnModel, ColumnType } from './columnModel'; @@ -51,7 +58,7 @@ export type DataCallback<TData = dataType> = (page?: number, rowsPerPage?: numbe function regExpEscape(s: string) { return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); -}; +} function wildcardCheck(input: string, pattern: string) { if (!pattern) return true; @@ -61,7 +68,7 @@ function wildcardCheck(input: string, pattern: string) { (!pattern.endsWith('*') ? '$' : '') ); return input.match(regex) !== null && input.match(regex)!.length >= 1; -}; +} function desc(a: dataType, b: dataType, orderBy: string) { if ((b[orderBy] || "") < (a[orderBy] || "")) { @@ -240,7 +247,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate <TableContainer className={classes.container}> <TableToolbar tableId={this.props.tableId} numSelected={selected && selected.length} title={this.props.title} customActionButtons={this.props.customActionButtons} onExportToCsv={this.exportToCsv} onToggleFilter={toggleFilter} /> - <Table aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'} stickyHeader={this.props.stickyHeader || false} > + <Table padding="normal" aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'} stickyHeader={this.props.stickyHeader || false} > <EnhancedTableHead columns={columns} numSelected={selected && selected.length} @@ -330,15 +337,15 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate count={rowCount} rowsPerPage={rowsPerPage} page={page} - aria-label={"table-pagination-footer" } + aria-label={this.props.isPopup ? "popup-table-pagination-footer" : "table-pagination-footer" } backIconButtonProps={{ 'aria-label': this.props.isPopup ? 'popup-previous-page' : 'previous-page', }} nextIconButtonProps={{ 'aria-label': this.props.isPopup ? 'popup-next-page': 'next-page', }} - onChangePage={this.onHandleChangePage} - onChangeRowsPerPage={this.onHandleChangeRowsPerPage} + onPageChange={this.onHandleChangePage} + onRowsPerPageChange={this.onHandleChangeRowsPerPage} /> </Paper> ); @@ -371,7 +378,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate private static updateRows(props: MaterialTableComponentPropsWithRows, state: MaterialTableComponentState): { rows: {}[], total: number, page: number } { - let data = [...props.rows as dataType[] || []]; + let data = [...(props.rows as dataType[] || [])]; const columns = props.columns; const { page, rowsPerPage, order, orderBy, filter } = state; @@ -661,7 +668,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate } } -export type MaterialTableCtorType<TData extends {} = {}> = new () => React.Component<Omit<MaterialTableComponentProps<TData>, 'classes'>>; +export type MaterialTableCtorType<TData extends {} = {}> = new () => React.Component<DistributiveOmit<MaterialTableComponentProps<TData>, 'classes'>>; export const MaterialTable = withStyles(styles)(MaterialTableComponent); export default MaterialTable;
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx index e4cc5ab7c..a46dd18d8 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx @@ -18,13 +18,18 @@ import * as React from 'react'; import { ColumnModel, ColumnType } from './columnModel'; -import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; -import TableCell from '@material-ui/core/TableCell'; -import TableRow from '@material-ui/core/TableRow'; -import Input from '@material-ui/core/Input'; -import { Select, FormControl, InputLabel, MenuItem } from '@material-ui/core'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; + + +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; +import Input from '@mui/material/Input'; +import { Select, FormControl, InputLabel, MenuItem, SelectChangeEvent } from '@mui/material'; import { toAriaLabel } from '../../utilities/yangHelper'; @@ -49,9 +54,13 @@ interface IEnhancedTableFilterComponentProps extends WithStyles<typeof styles> { } class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterComponentProps> { - createFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => { - this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value); + createSelectFilterHandler = (property: string) => (event: SelectChangeEvent<HTMLSelectElement | string>) => { + this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value as string); }; + createInputFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { + this.props.onFilterChanged && this.props.onFilterChanged(property, event.currentTarget.value); + }; + render() { const { columns, filter, classes } = this.props; @@ -68,20 +77,26 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC <TableCell className={col.type === ColumnType.numeric ? classes.numberInput : ''} key={col.property} - padding={col.disablePadding ? 'none' : 'default'} + padding={col.disablePadding ? 'none' : 'normal'} style={style} > {col.disableFilter || (col.type === ColumnType.custom) ? null : (col.type === ColumnType.boolean) - ? <Select className={classes.input} aria-label={col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter`} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} > + ? <Select variant="standard" className={classes.input} aria-label={col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter`} + value={filter[col.property] !== undefined ? filter[col.property] : ''} + onChange={this.createSelectFilterHandler(col.property)} + inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} > <MenuItem value={undefined} aria-label="none-value" > <em>None</em> </MenuItem> <MenuItem aria-label="true-value" value={true as any as string}>{col.labels ? col.labels["true"] : "true"}</MenuItem> <MenuItem aria-label="false-value" value={false as any as string}>{col.labels ? col.labels["false"] : "false"}</MenuItem> </Select> - : <Input className={classes.input} inputProps={{ 'aria-label': col.title ? toAriaLabel(col.title as string)+ '-filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />} + : <Input className={classes.input} + inputProps={{ 'aria-label': col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter` }} + value={filter[col.property] || ''} + onChange={this.createInputFilterHandler(col.property)} />} </TableCell> ); }, this)} diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx index 428f4cf3f..c500f44ce 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx @@ -18,16 +18,31 @@ import * as React from 'react'; import { ColumnModel, ColumnType } from './columnModel'; -import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TableRow from '@material-ui/core/TableRow'; -import Checkbox from '@material-ui/core/Checkbox'; -import Tooltip from '@material-ui/core/Tooltip'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; -interface IEnhancedTableHeadComponentProps { +import TableSortLabel from '@mui/material/TableSortLabel'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Checkbox from '@mui/material/Checkbox'; +import Tooltip from '@mui/material/Tooltip'; + +const styles = (theme: Theme) => createStyles({ + header: { + backgroundColor: "#fafafa", + position: "sticky", + top: 0 + } +}); + + +type styles_header = WithStyles<typeof styles>; + +interface IEnhancedTableHeadComponentProps extends styles_header { numSelected: number | null; onRequestSort: (event: React.SyntheticEvent, property: string) => void; onSelectAllClick: () => void; @@ -45,12 +60,13 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo render() { const { onSelectAllClick, order, orderBy, numSelected, rowCount, columns } = this.props; + const {classes} = this.props; return ( <TableHead> <TableRow> { this.props.enableSelection - ? <TableCell padding="checkbox" style={ { width: "50px" } }> + ? <TableCell padding="checkbox" style={ { width: "50px" } } className= {classes.header} > <Checkbox indeterminate={ numSelected && numSelected > 0 && numSelected < rowCount || undefined } checked={ numSelected === rowCount } @@ -62,10 +78,10 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo { columns.map(col => { const style = col.width ? { width: col.width } : {}; return ( - <TableCell + <TableCell className= {classes.header} key={ col.property } align={ col.type === ColumnType.numeric ? 'right' : 'left' } - padding={ col.disablePadding ? 'none' : 'default' } + padding={ col.disablePadding ? 'none' : 'normal' } sortDirection={ orderBy === (col.property) ? order : false } style={ style } > @@ -76,7 +92,7 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo > { col.title || col.property } </TableSortLabel> - : <Tooltip + : <Tooltip disableInteractive title="Sort" placement={ col.type === ColumnType.numeric ? 'bottom-end' : 'bottom-start' } enterDelay={ 300 } @@ -98,4 +114,4 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo } } -export const EnhancedTableHead = EnhancedTableHeadComponent;
\ No newline at end of file +export const EnhancedTableHead = withStyles(styles)(EnhancedTableHeadComponent);
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx index 4ad6422dc..426436d44 100644 --- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx @@ -16,27 +16,30 @@ * ============LICENSE_END========================================================================== */ import * as React from 'react'; -import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme, lighten } from '@mui/material/styles'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; -import DeleteIcon from '@material-ui/icons/Delete'; -import MoreIcon from '@material-ui/icons/MoreVert'; -import FilterListIcon from '@material-ui/icons/FilterList'; -import MenuItem from '@material-ui/core/MenuItem'; -import Menu from '@material-ui/core/Menu'; -import { lighten } from '@material-ui/core/styles/colorManipulator'; -import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon'; -import { Button } from '@material-ui/core'; +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'; const styles = (theme: Theme) => createStyles({ root: { paddingRight: theme.spacing(1), }, highlight: - theme.palette.type === 'light' + theme.palette.mode === 'light' ? { color: theme.palette.secondary.main, backgroundColor: lighten(theme.palette.secondary.light, 0.85), @@ -109,32 +112,41 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, <div className={classes.actions}> {this.props.customActionButtons ? this.props.customActionButtons.map((action, ind) => ( - <Tooltip key={`custom-action-${ind}`} title={action.tooltip || ''}> - <IconButton disabled={action.disabled} aria-label={`${buttonPrefix}-${action.ariaLabel}-button`} onClick={() => action.onClick()}> + <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 title="Delete"> - <IconButton aria-label={`${buttonPrefix}-delete-button`}> + <Tooltip disableInteractive title="Delete"> + <IconButton aria-label={`${buttonPrefix}-delete-button`} size="large"> <DeleteIcon /> </IconButton> </Tooltip> ) : ( - <Tooltip title="Filter list"> - <IconButton aria-label={`${buttonPrefix}-filter-list-button`} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}> + <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 title="Actions"> - <IconButton color="inherit" - aria-label={`${buttonPrefix}-additional-actions-button`} + <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} > + onClick={this.handleMenu} + size="large"> <MoreIcon /> </IconButton> </Tooltip> @@ -146,6 +158,6 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, </Toolbar> ); } -}; +} export const TableToolbar = withStyles(styles)(TableToolbarComponent);
\ No newline at end of file |