diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components')
18 files changed, 1094 insertions, 975 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx index b2a1f1f20..a04ab16af 100644 --- a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx +++ b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx @@ -16,14 +16,18 @@ * ============LICENSE_END========================================================================== */ import * as React from 'react'; -import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; -import Modal from '@material-ui/core/Modal'; -import Button from '@material-ui/core/Button'; -import Card from '@material-ui/core/Card'; -import CardActions from '@material-ui/core/CardActions'; -import CardContent from '@material-ui/core/CardContent'; -import Typography from '@material-ui/core/Typography'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; + +import Modal from '@mui/material/Modal'; +import Button from '@mui/material/Button'; +import Card from '@mui/material/Card'; +import CardActions from '@mui/material/CardActions'; +import CardContent from '@mui/material/CardContent'; +import Typography from '@mui/material/Typography'; import { ClearErrorInfoAction, RemoveErrorInfoAction } from '../actions/errorActions'; @@ -113,7 +117,7 @@ class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> { </Typography> </CardContent> <CardActions> - <Button size="small" onClick={() => this.props.dispatch(new RemoveErrorInfoAction(errorInfo))} >Close</Button> + <Button color="inherit" size="small" onClick={() => this.props.dispatch(new RemoveErrorInfoAction(errorInfo))} >Close</Button> </CardActions> </Card> </div> || <div></div> diff --git a/sdnr/wt/odlux/framework/src/components/logo.tsx b/sdnr/wt/odlux/framework/src/components/logo.tsx index 470eb9620..b10cc8ce1 100644 --- a/sdnr/wt/odlux/framework/src/components/logo.tsx +++ b/sdnr/wt/odlux/framework/src/components/logo.tsx @@ -34,7 +34,12 @@ import * as React from 'react'; import { withRouter, RouteComponentProps } from 'react-router-dom'; -import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles'; // infra for styling +import { Theme } from '@mui/material/styles'; // infra for styling + + +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; import defaultLogo from '../assets/images/defaultLogo.svg'; 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 diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx index 49e7be514..744cb0d24 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx @@ -1,72 +1,75 @@ -/**
- * ============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 { NavLink, Link, Route } from 'react-router-dom';
-
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { toAriaLabel } from '../../utilities/yangHelper';
-
-const styles = (theme: Theme) => createStyles({
- active: {
- backgroundColor: theme.palette.action.selected
- }
-});
-
-export interface IListItemLinkProps extends WithStyles<typeof styles> {
- icon: JSX.Element | null;
- primary: string | React.ComponentType;
- secondary?: React.ComponentType;
- to: string;
- exact?: boolean;
- external?: boolean;
-}
-
-export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => {
- const { icon, primary: Primary, secondary: Secondary, classes, to, exact = false, external=false } = props;
- const renderLink = (itemProps: any): JSX.Element => (
- props.external ? <a target="_blank" href={to} { ...itemProps }></a> :
- <NavLink exact={ exact } to={ to } activeClassName={ classes.active } { ...itemProps } />);
-
- const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName);
- return (
- <>
- <ListItem button component={ renderLink } aria-label={ariaLabel}>
- { icon
- ? <ListItemIcon>{ icon }</ListItemIcon>
- : null
- }
- { typeof Primary === 'string'
- ? <ListItemText primary={ Primary } style={{ padding: 0 }} />
- : <Primary />
- }
- </ListItem>
- { Secondary
- ? <Route exact={ exact } path={ to } component={ Secondary } />
- : null
- }
- </>
- );
- }
-);
-
-export default ListItemLink;
-
+/** + * ============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 { NavLink, Link, Route } from 'react-router-dom'; + +import ListItem from '@mui/material/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; + +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import { toAriaLabel } from '../../utilities/yangHelper'; + +const styles = (theme: Theme) => createStyles({ + active: { + backgroundColor: theme.palette.action.selected + } +}); + +export interface IListItemLinkProps extends WithStyles<typeof styles> { + icon: JSX.Element | null; + primary: string | React.ComponentType; + secondary?: React.ComponentType; + to: string; + exact?: boolean; + external?: boolean; +} + +export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => { + const { icon, primary: Primary, secondary: Secondary, classes, to, exact = false, external=false } = props; + const renderLink = (itemProps: any): JSX.Element => ( + props.external ? <a target="_blank" href={to} { ...itemProps }></a> : + <NavLink exact={ exact } to={ to } activeClassName={ classes.active } { ...itemProps } />); + + const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName); + return ( + <> + <ListItem button component={ renderLink } aria-label={ariaLabel}> + { icon + ? <ListItemIcon>{ icon }</ListItemIcon> + : null + } + { typeof Primary === 'string' + ? <ListItemText primary={ Primary } style={{ padding: 0 }} /> + : <Primary /> + } + </ListItem> + { Secondary + ? <Route exact={ exact } path={ to } component={ Secondary } /> + : null + } + </> + ); + } +); + +export default ListItemLink; + diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx index 5ab2fd415..bd523e1f4 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx @@ -19,7 +19,11 @@ import * as React from "react"; -import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; const styles = (theme: Theme) => createStyles({ "@keyframes spin": { diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx index 378d48592..6d192d2f0 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx @@ -1,73 +1,76 @@ -/**
- * ============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 { withStyles, Theme, WithStyles, createStyles } from '@material-ui/core/styles';
-
-import { ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography, ExpansionPanelActions } from '@material-ui/core';
-
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
-
-const styles = (theme: Theme) => createStyles({
- accordion: {
- // background: theme.palette.secondary.dark,
- // color: theme.palette.primary.contrastText
- },
- detail: {
- // background: theme.palette.background.paper,
- // color: theme.palette.text.primary,
- position: "relative",
- display: 'flex',
- flexDirection: 'column'
- },
- text: {
- // color: theme.palette.common.white,
- // fontSize: "1rem"
- },
-});
-
-type PanalProps = WithStyles<typeof styles> & {
- activePanel: string | null,
- panelId: string,
- title: string,
- customActionButtons?: JSX.Element[];
- onToggle: (panelId: string | null) => void;
-}
-
-const PanelComponent: React.SFC<PanalProps> = (props) => {
- const { classes, activePanel, onToggle } = props;
- return (
- <ExpansionPanel className={classes.accordion} expanded={activePanel === props.panelId} onChange={() => onToggle(props.panelId)} >
- <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
- <Typography className={classes.text} >{props.title}</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails className={classes.detail}>
- {props.children}
- </ExpansionPanelDetails>
- {props.customActionButtons
- ? <ExpansionPanelActions>
- {props.customActionButtons}
- </ExpansionPanelActions>
- : null}
- </ExpansionPanel>
- );
-};
-
-export const Panel = withStyles(styles)(PanelComponent);
+/** + * ============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 } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; + +import { Accordion, AccordionSummary, AccordionDetails, Typography, AccordionActions } from '@mui/material'; + +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { SvgIconProps } from '@mui/material/SvgIcon'; + +const styles = (theme: Theme) => createStyles({ + accordion: { + // background: theme.palette.secondary.dark, + // color: theme.palette.primary.contrastText + }, + detail: { + // background: theme.palette.background.paper, + // color: theme.palette.text.primary, + position: "relative", + flexDirection: 'column' + }, + text: { + // color: theme.palette.common.white, + // fontSize: "1rem" + }, +}); + +type PanalProps = WithStyles<typeof styles> & { + activePanel: string | null, + panelId: string, + title: string, + customActionButtons?: JSX.Element[]; + onToggle: (panelId: string | null) => void; +} + +const PanelComponent: React.SFC<PanalProps> = (props) => { + const { classes, activePanel, onToggle } = props; + return ( + <Accordion className={classes.accordion} expanded={activePanel === props.panelId} onChange={() => onToggle(props.panelId)} > + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography className={classes.text} >{props.title}</Typography> + </AccordionSummary> + <AccordionDetails className={classes.detail}> + {props.children} + </AccordionDetails> + {props.customActionButtons + ? <AccordionActions> + {props.customActionButtons} + </AccordionActions> + : null} + </Accordion> + ); +}; + +export const Panel = withStyles(styles)(PanelComponent); export default Panel;
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx index 1a29d6970..54f14a7e0 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx @@ -1,179 +1,181 @@ -/**
- * ============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 classNames from 'classnames';
-import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
-import ButtonBase from '@material-ui/core/ButtonBase';
-
-
-export const styles = (theme: Theme) => createStyles({
- /* Styles applied to the root element. */
- root: {
- ...theme.typography.button,
- height: 32,
- minWidth: 48,
- margin: 0,
- padding: `${theme.spacing(1 - 4)}px ${theme.spacing(1.5)}px`,
- borderRadius: 2,
- willChange: 'opacity',
- color: fade(theme.palette.action.active, 0.38),
- '&:hover': {
- textDecoration: 'none',
- // Reset on mouse devices
- backgroundColor: fade(theme.palette.text.primary, 0.12),
- '@media (hover: none)': {
- backgroundColor: 'transparent',
- },
- '&$disabled': {
- backgroundColor: 'transparent',
- },
- },
- '&:not(:first-child)': {
- borderTopLeftRadius: 0,
- borderBottomLeftRadius: 0,
- },
- '&:not(:last-child)': {
- borderTopRightRadius: 0,
- borderBottomRightRadius: 0,
- },
- },
- /* Styles applied to the root element if `disabled={true}`. */
- disabled: {
- color: fade(theme.palette.action.disabled, 0.12),
- },
- /* Styles applied to the root element if `selected={true}`. */
- selected: {
- color: theme.palette.action.active,
- '&:after': {
- content: '""',
- display: 'block',
- position: 'absolute',
- overflow: 'hidden',
- borderRadius: 'inherit',
- width: '100%',
- height: '100%',
- left: 0,
- top: 0,
- pointerEvents: 'none',
- zIndex: 0,
- backgroundColor: 'currentColor',
- opacity: 0.38,
- },
- '& + &:before': {
- content: '""',
- display: 'block',
- position: 'absolute',
- overflow: 'hidden',
- width: 1,
- height: '100%',
- left: 0,
- top: 0,
- pointerEvents: 'none',
- zIndex: 0,
- backgroundColor: 'currentColor',
- opacity: 0.12,
- },
- },
- /* Styles applied to the `label` wrapper element. */
- label: {
- width: '100%',
- display: 'inherit',
- alignItems: 'inherit',
- justifyContent: 'inherit',
- },
-});
-
-export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected';
-
-interface IToggleButtonProps extends WithStyles<typeof styles> {
- className?: string;
- component?: React.ReactType<IToggleButtonProps>;
- disabled?: boolean;
- disableFocusRipple?: boolean;
- disableRipple?: boolean;
- selected?: boolean;
- type?: string;
- value?: any;
- onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
- onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
-}
-
-class ToggleButtonComponent extends React.Component<IToggleButtonProps> {
- handleChange = (event: React.FormEvent<HTMLElement>) => {
- const { onChange, onClick, value } = this.props;
-
- event.stopPropagation();
- if (onClick) {
- onClick(event, value);
- if (event.isDefaultPrevented()) {
- return;
- }
- }
-
- if (onChange) {
- onChange(event, value);
- }
- event.preventDefault();
- };
-
- render() {
- const {
- children,
- className: classNameProp,
- classes,
- disableFocusRipple,
- disabled,
- selected,
- ...other
- } = this.props;
-
- const className = classNames(
- classes.root,
- {
- [classes.disabled]: disabled,
- [classes.selected]: selected,
- },
- classNameProp,
- );
-
- return (
- <ButtonBase
- className={className}
- disabled={disabled}
- focusRipple={!disableFocusRipple}
- onClick={this.handleChange}
- href="#"
- {...other}
- >
- <span className={classes.label}>{children}</span>
- </ButtonBase>
- );
- }
- public static defaultProps = {
- disabled: false,
- disableFocusRipple: false,
- disableRipple: false,
- };
-
- public static muiName = 'ToggleButton';
-}
-
-export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent);
+/** + * ============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 classNames from 'classnames'; +import { Theme, alpha } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import ButtonBase from '@mui/material/ButtonBase'; + + +export const styles = (theme: Theme) => createStyles({ + /* Styles applied to the root element. */ + root: { + ...theme.typography.button, + height: 32, + minWidth: 48, + margin: 0, + padding: `${theme.spacing(1 - 4)} ${theme.spacing(1.5)}`, + borderRadius: 2, + willChange: 'opacity', + color: alpha(theme.palette.action.active, 0.38), + '&:hover': { + textDecoration: 'none', + // Reset on mouse devices + backgroundColor: alpha(theme.palette.text.primary, 0.12), + '@media (hover: none)': { + backgroundColor: 'transparent', + }, + '&.Mui-disabled': { + backgroundColor: 'transparent', + }, + }, + '&:not(:first-child)': { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + '&:not(:last-child)': { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + }, + /* Styles applied to the root element if `disabled={true}`. */ + disabled: { + color: alpha(theme.palette.action.disabled, 0.12), + }, + /* Styles applied to the root element if `selected={true}`. */ + selected: { + color: theme.palette.action.active, + '&:after': { + content: '""', + display: 'block', + position: 'absolute', + overflow: 'hidden', + borderRadius: 'inherit', + width: '100%', + height: '100%', + left: 0, + top: 0, + pointerEvents: 'none', + zIndex: 0, + backgroundColor: 'currentColor', + opacity: 0.38, + }, + '& + &:before': { + content: '""', + display: 'block', + position: 'absolute', + overflow: 'hidden', + width: 1, + height: '100%', + left: 0, + top: 0, + pointerEvents: 'none', + zIndex: 0, + backgroundColor: 'currentColor', + opacity: 0.12, + }, + }, + /* Styles applied to the `label` wrapper element. */ + label: { + width: '100%', + display: 'inherit', + alignItems: 'inherit', + justifyContent: 'inherit', + }, +}); + +export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected'; + +interface IToggleButtonProps extends WithStyles<typeof styles> { + className?: string; + component?: React.ReactType<IToggleButtonProps>; + disabled?: boolean; + disableFocusRipple?: boolean; + disableRipple?: boolean; + selected?: boolean; + type?: string; + value?: any; + onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void; + onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void; +} + +class ToggleButtonComponent extends React.Component<IToggleButtonProps> { + handleChange = (event: React.FormEvent<HTMLElement>) => { + const { onChange, onClick, value } = this.props; + + event.stopPropagation(); + if (onClick) { + onClick(event, value); + if (event.isDefaultPrevented()) { + return; + } + } + + if (onChange) { + onChange(event, value); + } + event.preventDefault(); + }; + + render() { + const { + children, + className: classNameProp, + classes, + disableFocusRipple, + disabled, + selected, + ...other + } = this.props; + + const className = classNames( + classes.root, + { + [classes.disabled]: disabled, + [classes.selected]: selected, + }, + classNameProp, + ); + + return ( + <ButtonBase + className={className} + disabled={disabled} + focusRipple={!disableFocusRipple} + onClick={this.handleChange} + href="#" + {...other} + > + <span className={classes.label}>{children}</span> + </ButtonBase> + ); + } + public static defaultProps = { + disabled: false, + disableFocusRipple: false, + disableRipple: false, + }; + + public static muiName = 'ToggleButton'; +} + +export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent); export default ToggleButton;
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx index 6460e8a3f..bdabe0d56 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx @@ -17,7 +17,11 @@ */ import * as React from 'react'; import classNames from 'classnames'; -import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; export const styles = (theme: Theme) => createStyles({ /* Styles applied to the root element. */ diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx index e62b42472..5c23909c4 100644 --- a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx +++ b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx @@ -16,15 +16,27 @@ * ============LICENSE_END========================================================================== */ import * as React from 'react'; -import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; -import { List, ListItem, TextField, ListItemText, ListItemIcon, WithTheme, withTheme, Omit, Typography } from '@material-ui/core'; +import { makeStyles, WithStyles, WithTheme } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; -import { SvgIconProps } from '@material-ui/core/SvgIcon'; -import FileIcon from '@material-ui/icons/InsertDriveFile'; -import CloseIcon from '@material-ui/icons/ExpandLess'; -import OpenIcon from '@material-ui/icons/ExpandMore'; -import FolderIcon from '@material-ui/icons/Folder'; +import { List, ListItem, TextField, ListItemText, ListItemIcon, Typography } from '@mui/material'; +import { DistributiveOmit } from '@mui/types'; + +import withTheme from '@mui/styles/withTheme'; + +import { SvgIconProps } from '@mui/material/SvgIcon'; +import FileIcon from '@mui/icons-material/InsertDriveFile'; +import CloseIcon from '@mui/icons-material/ExpandLess'; +import OpenIcon from '@mui/icons-material/ExpandMore'; +import FolderIcon from '@mui/icons-material/Folder'; + +declare module '@mui/styles/defaultTheme' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled) + interface DefaultTheme extends Theme {} +} const styles = (theme: Theme) => createStyles({ root: { @@ -33,7 +45,7 @@ const styles = (theme: Theme) => createStyles({ paddingTop: 8, }, search: { - padding: `0px ${theme.spacing(1)}px` + padding: `0px ${theme.spacing(1)}` } }); @@ -153,7 +165,7 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr return ( <div className={this.props.className ? `${this.props.classes.root} ${this.props.className}` : this.props.classes.root} style={this.props.style}> {children} - {enableSearchBar && <TextField label={"Search"} inputProps={{'aria-label': 'treeview-searchfield'}} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null} + {enableSearchBar && <TextField variant="standard" label={"Search"} inputProps={{'aria-label': 'treeview-searchfield'}} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null} {enableSearchBar && (searchTerm === undefined || searchTerm.length===0 )&& <Typography style={{marginTop:'10px'}}>Please search for an inventory identifier or use *.</Typography>} <List> {this.renderItems(items, searchTerm && searchTerm.toLowerCase())} @@ -187,10 +199,10 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr }, [] as JSX.Element[]); } - private renderItem = (item: ExternalTreeItem<TData>, searchTerm: string | undefined, depth: number, isFolder: boolean, expanded: boolean, forceRender: boolean): JSX.Element | null => { + private renderItem = (item: ExternalTreeItem<TData> , searchTerm: string | undefined, depth: number, isFolder: boolean, expanded: boolean, forceRender: boolean): JSX.Element | null => { const styles = { item: { - paddingLeft: (((this.props.depthOffset || 0) + depth) * this.props.theme.spacing(3)), + paddingLeft: (((this.props.depthOffset || 0) + depth) * Number(this.props.theme.spacing(3).replace("px", ''))), backgroundColor: this.state.activeItem === item ? this.props.theme.palette.action.selected : undefined, height: this.props.itemHeight || undefined, cursor: item.disabled ? 'not-allowed' : 'pointer', @@ -201,8 +213,17 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr }; const text = item.content || ''; // need to keep track of search - const matchIndex = searchTerm ? text.toLowerCase().indexOf(searchTerm) : -1; - const searchTermLength = searchTerm && searchTerm.length || 0; + const search_array = searchTerm?.split("*"); + const index = search_array?.findIndex(function (_str: String) { + return _str.length > 0; + }) || 0; + const firstSearchSubString = search_array ? search_array[index] : ""; + const matchIndex = firstSearchSubString ? text.toLowerCase().indexOf(firstSearchSubString) : -1; + + const hasStarInSearch = search_array ? search_array.length > 1 : false; + const isSearchStringWithStar = hasStarInSearch && firstSearchSubString?.length > 0 || false; + + const searchTermLength = firstSearchSubString && firstSearchSubString.length || 0; const handleClickCreator = (isIcon: boolean) => (event: React.SyntheticEvent) => { if (item.disabled) return; @@ -225,9 +246,8 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr { // highlight search result - matchIndex > -1 - ? <ListItemText className={item.contentClass} primary={(<span> - {text.substring(0, matchIndex)} + isSearchStringWithStar && matchIndex > -1 + ? <ListItemText className={item.contentClass} primary={( <span style={{ display: 'inline-block', @@ -235,18 +255,29 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr padding: '3px', }} > - {text.substring(matchIndex, matchIndex + searchTermLength)} - </span> - {text.substring(matchIndex + searchTermLength)} - </span>)} /> - : <ListItemText className={item.contentClass} primary={( - <span style={item.isMatch ? { - display: 'inline-block', - backgroundColor: 'rgba(255,235,59,0.5)', - padding: '3px', - } : undefined}> - {text} </span> - )} /> + {text} + </span>)} /> + : matchIndex > -1 + ? <ListItemText className={item.contentClass} primary={(<span> + {text.substring(0, matchIndex)} + <span + style={{ + display: 'inline-block', + backgroundColor: 'rgba(255,235,59,0.5)', + padding: '3px', + }} + > + {text.substring(matchIndex, matchIndex + searchTermLength)} + </span> + {text.substring(matchIndex + searchTermLength)} + </span>)} /> + : <ListItemText className={item.contentClass} primary={( + <span style={item.isMatch ? { + display: 'inline-block', + padding: '3px', + } : undefined}> + {text} </span> + )} /> } { // display the right icon, depending on the state @@ -343,7 +374,7 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr } } -export type TreeViewCtorType<TData = { }> = new () => React.Component<Omit<TreeViewComponentProps<TData>, 'theme'|'classes'>>; +export type TreeViewCtorType<TData = { }> = new () => React.Component<DistributiveOmit<TreeViewComponentProps<TData>, 'theme'|'classes'>>; export const TreeView = withTheme(withStyles(styles)(TreeViewComponent)); export default TreeView;
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx index b50d68081..1134e230b 100644 --- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx +++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx @@ -1,214 +1,218 @@ -/**
- * ============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 { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-
-import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';
-
-import Drawer from '@material-ui/core/Drawer';
-import List from '@material-ui/core/List';
-
-import Divider from '@material-ui/core/Divider';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
-
-import ListItemLink from '../components/material-ui/listItemLink';
-
-import connect, { Connect } from '../flux/connect';
-import { MenuAction } from '../actions/menuAction';
-import * as classNames from 'classnames';
-import { transportPCEUrl } from '../app';
-
-
-const drawerWidth = 240;
-
-const extraLinks = (window as any)._odluxExtraLinks as [string, string][];
-
-const styles = (theme: Theme) => createStyles({
- drawerPaper: {
- position: 'relative',
- width: drawerWidth,
- },
- toolbar: theme.mixins.toolbar as any,
-
- drawerOpen: {
- width: drawerWidth,
- transition: theme.transitions.create('width', {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.enteringScreen,
- }),
- },
- drawerClose: {
- transition: theme.transitions.create('width', {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- overflowX: 'hidden',
- width: theme.spacing(7) + 1,
- [theme.breakpoints.up('sm')]: {
- width: theme.spacing(9) + 1,
- },
- },
- drawer: {
-
- },
- menu: {
- flex: "1 0 0%",
- },
- optLinks: {
- borderTop: "2px solid #cfcfcf",
- display: "flex",
- flexDirection: "row",
- flexWrap: "wrap",
- justifyContent: "space-around"
- },
- link: {
- margin: theme.spacing(1)+1,
- fontSize: theme.typography.fontSize-2,
- },
-});
-
-const tabletWidthBreakpoint = 768;
-
-export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {
- const { user } = state.framework.authenticationState;
- const isOpen = state.framework.applicationState.isMenuOpen;
- const closedByUser = state.framework.applicationState.isMenuClosedByUser;
- const transportUrl = state.framework.applicationState.transportpceUrl;
-
- const [responsive, setResponsive] = React.useState(false);
-
- //collapse menu on mount if necessary
- React.useEffect(()=>{
-
- if(isOpen && window.innerWidth < tabletWidthBreakpoint){
-
- setResponsive(true);
- dispatch(new MenuAction(false));
- }
-
- },[]);
-
- React.useEffect(() => {
-
- function handleResize() {
- if (user && user.isValid) {
- if (window.innerWidth < tabletWidthBreakpoint && !responsive) {
- setResponsive(true);
- if (!closedByUser) {
- console.log("responsive menu collapsed")
- dispatch(new MenuAction(false));
- }
-
- } else if (window.innerWidth > tabletWidthBreakpoint && responsive) {
- setResponsive(false);
- if (!closedByUser) {
- console.log("responsive menu restored")
- dispatch(new MenuAction(true));
- }
-
- }
- }
- }
- window.addEventListener("resize", handleResize);
-
-
- return () => {
- window.removeEventListener("resize", handleResize);
- }
- })
-
- React.useEffect(()=>{
- // trigger a resize if menu changed in case elements have to re-arrange
- window.dispatchEvent(new Event('menu-resized'));
- }, [isOpen])
-
- let menuItems = state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {
- const reg = state.framework.applicationRegistraion[key];
- return reg && (
- <ListItemLink
- key={reg.name}
- to={reg.path || `/${reg.name}`}
- primary={reg.menuEntry || reg.name}
- secondary={reg.subMenuEntry}
- icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />
- ) || null;
- }) || null;
-
- if(transportUrl.length>0){
-
- const transportPCELink = <ListItemLink
- key={"transportPCE"}
- to={transportUrl}
- primary={"TransportPCE"}
- icon={<FontAwesomeIcon icon={faProjectDiagram} />}
- external />;
-
- const linkFound = menuItems.find(obj => obj.key === "linkCalculation");
-
- if (linkFound) {
- const index = menuItems.indexOf(linkFound);
- menuItems.splice(index + 1, 0, transportPCELink);
- } else {
- menuItems.push(transportPCELink);
- }
- }
-
-
- return (
- <Drawer
- variant="permanent"
- className={
- classNames(classes.drawer, {
- [classes.drawerOpen]: isOpen,
- [classes.drawerClose]: !isOpen
- })
- }
- classes={{
- paper: classes.drawerPaper,
- }}
- >
- {user && user.isValid && <>
- <div className={classes.toolbar} />
- { /* https://fiffty.github.io/react-treeview-mui/ */}
- <List className={classes.menu} component="nav">
- <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />
- <Divider />
- {
- menuItems
- }
- <Divider />
- <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />
- {(false && process.env.NODE_ENV === "development")
- ? <>
- <Divider />
- <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} />
- </>
- : null
- }
- </List>
- {isOpen && extraLinks && <div className={classes.optLinks}>
- {extraLinks.map(linkInfo => (<a className={classes.link} href={linkInfo[1]}>{linkInfo[0]}</a>))}
- </div> || null}
- </> || null
- }
- </Drawer>)
-}));
-
+/** + * ============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 } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; + +import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons'; + +import Drawer from '@mui/material/Drawer'; +import List from '@mui/material/List'; + +import Divider from '@mui/material/Divider'; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons'; + +import ListItemLink from '../components/material-ui/listItemLink'; + +import connect, { Connect } from '../flux/connect'; +import { MenuAction } from '../actions/menuAction'; +import * as classNames from 'classnames'; +import { transportPCEUrl } from '../app'; + + +const drawerWidth = 240; + +const extraLinks = (window as any)._odluxExtraLinks as [string, string][]; + +const styles = (theme: Theme) => createStyles({ + drawerPaper: { + position: 'relative', + width: drawerWidth, + }, + toolbar: theme.mixins.toolbar as any, + + drawerOpen: { + width: drawerWidth, + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + drawerClose: { + transition: theme.transitions.create('width', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + overflowX: 'hidden', + width: theme.spacing(7) + 1, + [theme.breakpoints.up('sm')]: { + width: theme.spacing(9) + 1, + }, + }, + drawer: { + + }, + menu: { + flex: "1 0 0%", + }, + optLinks: { + borderTop: "2px solid #cfcfcf", + display: "flex", + flexDirection: "row", + flexWrap: "wrap", + justifyContent: "space-around" + }, + link: { + margin: theme.spacing(1)+1, + fontSize: theme.typography.fontSize-2, + }, +}); + +const tabletWidthBreakpoint = 768; + +export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => { + const { user } = state.framework.authenticationState; + const isOpen = state.framework.applicationState.isMenuOpen; + const closedByUser = state.framework.applicationState.isMenuClosedByUser; + const transportUrl = state.framework.applicationState.transportpceUrl; + + const [responsive, setResponsive] = React.useState(false); + + //collapse menu on mount if necessary + React.useEffect(()=>{ + + if(isOpen && window.innerWidth < tabletWidthBreakpoint){ + + setResponsive(true); + dispatch(new MenuAction(false)); + } + + },[]); + + React.useEffect(() => { + + function handleResize() { + if (user && user.isValid) { + if (window.innerWidth < tabletWidthBreakpoint && !responsive) { + setResponsive(true); + if (!closedByUser) { + console.log("responsive menu collapsed") + dispatch(new MenuAction(false)); + } + + } else if (window.innerWidth > tabletWidthBreakpoint && responsive) { + setResponsive(false); + if (!closedByUser) { + console.log("responsive menu restored") + dispatch(new MenuAction(true)); + } + + } + } + } + window.addEventListener("resize", handleResize); + + + return () => { + window.removeEventListener("resize", handleResize); + } + }) + + React.useEffect(()=>{ + // trigger a resize if menu changed in case elements have to re-arrange + window.dispatchEvent(new Event('menu-resized')); + }, [isOpen]) + + let menuItems = state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => { + const reg = state.framework.applicationRegistraion[key]; + return reg && ( + <ListItemLink + key={reg.name} + to={reg.path || `/${reg.name}`} + primary={reg.menuEntry || reg.name} + secondary={reg.subMenuEntry} + icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} /> + ) || null; + }) || null; + + if(transportUrl.length>0){ + + const transportPCELink = <ListItemLink + key={"transportPCE"} + to={transportUrl} + primary={"TransportPCE"} + icon={<FontAwesomeIcon icon={faProjectDiagram} />} + external />; + + const linkFound = menuItems.find(obj => obj.key === "linkCalculation"); + + if (linkFound) { + const index = menuItems.indexOf(linkFound); + menuItems.splice(index + 1, 0, transportPCELink); + } else { + menuItems.push(transportPCELink); + } + } + + + return ( + <Drawer + variant="permanent" + className={ + classNames(classes.drawer, { + [classes.drawerOpen]: isOpen, + [classes.drawerClose]: !isOpen + }) + } + classes={{ + paper: classes.drawerPaper, + }} + > + {user && user.isValid && <> + <div className={classes.toolbar} /> + { /* https://fiffty.github.io/react-treeview-mui/ */} + <List className={classes.menu} component="nav"> + <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} /> + <Divider /> + { + menuItems + } + <Divider /> + <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} /> + {(false && process.env.NODE_ENV === "development") + ? <> + <Divider /> + <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} /> + </> + : null + } + </List> + {isOpen && extraLinks && <div className={classes.optLinks}> + {extraLinks.map(linkInfo => (<a className={classes.link} href={linkInfo[1]}>{linkInfo[0]}</a>))} + </div> || null} + </> || null + } + </Drawer>) +})); + export default NavigationMenu;
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx index d2de7cc02..10a0547be 100644 --- a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx +++ b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx @@ -17,7 +17,7 @@ */ import * as React from "react"; -import { makeStyles } from '@material-ui/core/styles'; +import makeStyles from '@mui/styles/makeStyles'; export const getTypeName = (obj: any): string => { if (obj == null) { diff --git a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx index d212257c8..d055b8a87 100644 --- a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx +++ b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx @@ -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';
-
-import connect, { Connect } from '../../flux/connect';
-
-import { SetTitleAction } from '../../actions/titleActions';
-import { AddErrorInfoAction } from '../../actions/errorActions';
-
-import { IconType } from '../../models/iconDefinition';
-
-export interface IAppFrameProps {
- title: string;
- icon?: IconType;
- appId?: string
-}
-
-/**
- * Represents a component to wich will embed each single app providing the
- * functionality to update the title and implement an exeprion border.
- */
-export class AppFrame extends React.Component<IAppFrameProps & Connect> {
-
- public render(): JSX.Element {
- return (
- <div style={{ flex: "1", overflow: "hidden", display: "flex", flexDirection: "column" }}>
- { this.props.children }
- </div>
- )
- }
-
- public componentDidMount() {
- this.props.dispatch(new SetTitleAction(this.props.title, this.props.icon, this.props.appId));
- }
- public componentDidCatch(error: Error | null, info: object) {
- this.props.dispatch(new AddErrorInfoAction({ error, info }));
- }
-}
-
+/** + * ============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 connect, { Connect } from '../../flux/connect'; + +import { SetTitleAction } from '../../actions/titleActions'; +import { AddErrorInfoAction } from '../../actions/errorActions'; + +import { IconType } from '../../models/iconDefinition'; + +export interface IAppFrameProps { + title: string; + icon?: IconType; + appId?: string +} + +/** + * Represents a component to wich will embed each single app providing the + * functionality to update the title and implement an exeprion border. + */ +export class AppFrame extends React.Component<IAppFrameProps & Connect> { + + public render(): JSX.Element { + return ( + <div style={{ flex: "1", overflow: "hidden", display: "flex", flexDirection: "column" }}> + { this.props.children } + </div> + ) + } + + public componentDidMount() { + this.props.dispatch(new SetTitleAction(this.props.title, this.props.icon, this.props.appId)); + } + public componentDidCatch(error: Error | null, info: object) { + this.props.dispatch(new AddErrorInfoAction({ error, info })); + } +} + export default connect()(AppFrame);
\ No newline at end of file diff --git a/sdnr/wt/odlux/framework/src/components/settings/general.tsx b/sdnr/wt/odlux/framework/src/components/settings/general.tsx index ca1849049..90f15c1d2 100644 --- a/sdnr/wt/odlux/framework/src/components/settings/general.tsx +++ b/sdnr/wt/odlux/framework/src/components/settings/general.tsx @@ -16,7 +16,8 @@ * ============LICENSE_END========================================================================== */ -import { Button, FormControlLabel, makeStyles, Switch, Typography } from '@material-ui/core'; +import { Button, FormControlLabel, Switch, Typography } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; import { SettingsComponentProps } from '../../models/settings'; import * as React from 'react'; import connect, { Connect, IDispatcher } from '../../flux/connect'; @@ -94,13 +95,13 @@ const onCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{ </Typography> <FormControlLabel style={{ padding:5}} value="end" - control={<Switch color="secondary" checked={areWebsocketsEnabled} onChange={onWebsocketsChange} />} + control={<Switch color="secondary" aria-label="enable-notifications-button" aria-checked={areWebsocketsEnabled} checked={areWebsocketsEnabled} onChange={onWebsocketsChange} />} label="Enable Notifications" labelPlacement="end" /> <div className={classes.buttonPosition}> - <Button className={classes.elementMargin} variant="contained" color="primary" onClick={onCancel}>Cancel</Button> - <Button className={classes.elementMargin} variant="contained" color="secondary" onClick={onSave}>Save</Button> + <Button aria-label="cancel-button" className={classes.elementMargin} variant="contained" color="primary" onClick={onCancel}>Cancel</Button> + <Button aria-label="save-button" className={classes.elementMargin} variant="contained" color="secondary" onClick={onSave}>Save</Button> </div> </div> } diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx index 5d916e8c8..7872e51da 100644 --- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx +++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx @@ -1,218 +1,226 @@ -/**
- * ============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 { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import Block from '@material-ui/icons/Block';
-import Adjust from '@material-ui/icons/Adjust';
-import MenuIcon from '@material-ui/icons/Menu';
-import AccountCircle from '@material-ui/icons/AccountCircle';
-import MenuItem from '@material-ui/core/MenuItem';
-import Menu from '@material-ui/core/Menu';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBan } from '@fortawesome/free-solid-svg-icons';
-import { faDotCircle } from '@fortawesome/free-solid-svg-icons';
-
-import { logoutUser } from '../actions/authentication';
-import { PushAction, ReplaceAction } from '../actions/navigationActions';
-
-import connect, { Connect, IDispatcher } from '../flux/connect';
-import Logo from './logo';
-import { MenuAction, MenuClosedByUser } from '../actions/menuAction';
-
-const styles = (theme: Theme) => createStyles({
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- },
- grow: {
- flexGrow: 1,
- },
- menuButton: {
- marginLeft: -12,
- marginRight: 20,
- },
- icon: {
- marginLeft: 16,
- marginRight: 8
- },
- connected: {
- color: "green"
- },
- notConnected: {
- color: "red"
- },
- notificationInfo: {
- marginLeft: 5
- }
-});
-
-const mapDispatch = (dispatcher: IDispatcher) => {
- return {
- logout: () => {
- dispatcher.dispatch(logoutUser());
- dispatcher.dispatch(new ReplaceAction("/login"));
- },
- openSettings : () =>{
- dispatcher.dispatch(new PushAction("/settings"));
- },
- toggleMainMenu: (value: boolean, value2: boolean) => {
- dispatcher.dispatch(new MenuAction(value));
- dispatcher.dispatch(new MenuClosedByUser(value2))
- }
- }
-};
-
-type TitleBarProps = RouteComponentProps<{}> & WithStyles<typeof styles> & Connect<undefined, typeof mapDispatch>
-
-class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLElement | null }> {
-
- constructor(props: TitleBarProps) {
- super(props);
- this.state = {
- anchorEl: null
- }
-
- }
- render(): JSX.Element {
- const { classes, state, history, location } = this.props;
- const open = !!this.state.anchorEl;
- let toolbarElements: Array<JSX.Element>;
- toolbarElements = [];
-
- // create notificationInfo element
- const notificationInfo = state.framework.applicationState.isWebsocketAvailable != undefined ?
- (state.framework.applicationState.isWebsocketAvailable ?
- <Typography aria-label="notifications-are-active" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} /> |</Typography> : <Typography aria-label="notifications-are-inactive" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>)
- : <Typography variant="body1" aria-label="notifications-are-not-available" className={classes.notificationInfo}>Notifications N/A |</Typography>;
-
-
- // add notificationInfo element before help
- if (state.framework.applicationRegistraion) {
- let isNotificationInfoAdded = false;
- Object.keys(state.framework.applicationRegistraion).map(key => {
- const reg = state.framework.applicationRegistraion[key];
- if (reg && reg.statusBarElement) {
- if (key === "help") {
- isNotificationInfoAdded = true;
- toolbarElements.push(notificationInfo);
- }
- toolbarElements.push(<reg.statusBarElement key={key} />);
- }
- });
-
- // add notificationInfo in case help wasn't found
- if (!isNotificationInfoAdded) {
- toolbarElements.push(notificationInfo);
- }
- }
-
- return (
- <AppBar position="absolute" className={classes.appBar}>
- <Toolbar>
- <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleMainMenu}>
- <MenuIcon />
- </IconButton>
- <Logo />
- <Typography variant="h6" color="inherit" >
- {state.framework.applicationState.icon
- ? (<FontAwesomeIcon className={classes.icon} icon={state.framework.applicationState.icon} />)
- : null}
- {state.framework.applicationState.title}
- </Typography>
- <div className={classes.grow}></div>
- {
- // render toolbar
- toolbarElements.map((item) => {
- return item
- })
- }
-
- {state.framework.authenticationState.user
- ? (<div>
- <Button aria-label="current user menu button"
- aria-owns={open ? 'menu-appbar' : undefined}
- aria-haspopup="true"
- onClick={this.openMenu}
- color="inherit"
- >
- <AccountCircle />
- {state.framework.authenticationState.user.user}
- </Button>
- <Menu
- id="menu-appbar"
- anchorEl={this.state.anchorEl}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- open={open}
- onClose={this.closeMenu}
- >
- {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}
- <MenuItem
- aria-label="settings-button"
- onClick={ () =>{
- this.props.openSettings();
- this.closeMenu(); }}>Settings</MenuItem>
- <MenuItem
- aria-label="logout-button"
- onClick={() => {
- this.props.logout();
- this.closeMenu();
- }}>Logout</MenuItem>
- </Menu>
- </div>)
- : (<Button onClick={() => { history.push('/login') }} color="inherit" disabled={location.pathname == "/login"}>Login</Button>)}
- </Toolbar>
- </AppBar>
- );
- };
-
- private toggleMainMenu = (event: React.MouseEvent<HTMLElement>) => {
- console.log(this.props);
- if (this.props.state.framework.authenticationState.user && this.props.state.framework.authenticationState.user.isValid) {
- const isMainMenuOpen = this.props.state.framework.applicationState.isMenuOpen
- const isClosedByUser = this.props.state.framework.applicationState.isMenuClosedByUser
- this.props.toggleMainMenu(!isMainMenuOpen, !isClosedByUser);
- }
- }
-
- private openMenu = (event: React.MouseEvent<HTMLElement>) => {
- this.setState({ anchorEl: event.currentTarget });
- };
-
- private closeMenu = () => {
- this.setState({ anchorEl: null });
- };
-}
-
-//todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung
-
-export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent)));
+/** + * ============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 { withRouter, RouteComponentProps } from 'react-router-dom'; + +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import Block from '@mui/icons-material/Block'; +import Adjust from '@mui/icons-material/Adjust'; +import MenuIcon from '@mui/icons-material/Menu'; +import AccountCircle from '@mui/icons-material/AccountCircle'; +import MenuItem from '@mui/material/MenuItem'; +import Menu from '@mui/material/Menu'; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faBan } from '@fortawesome/free-solid-svg-icons'; +import { faDotCircle } from '@fortawesome/free-solid-svg-icons'; + +import { logoutUser } from '../actions/authentication'; +import { PushAction, ReplaceAction } from '../actions/navigationActions'; + +import connect, { Connect, IDispatcher } from '../flux/connect'; +import Logo from './logo'; +import { MenuAction, MenuClosedByUser } from '../actions/menuAction'; + +const styles = (theme: Theme) => createStyles({ + appBar: { + zIndex: theme.zIndex.drawer + 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + icon: { + marginLeft: 16, + marginRight: 8 + }, + connected: { + color: "green" + }, + notConnected: { + color: "red" + }, + notificationInfo: { + marginLeft: 5 + } +}); + +const mapDispatch = (dispatcher: IDispatcher) => { + return { + logout: () => { + dispatcher.dispatch(logoutUser()); + dispatcher.dispatch(new ReplaceAction("/login")); + }, + openSettings : () =>{ + dispatcher.dispatch(new PushAction("/settings")); + }, + toggleMainMenu: (value: boolean, value2: boolean) => { + dispatcher.dispatch(new MenuAction(value)); + dispatcher.dispatch(new MenuClosedByUser(value2)) + } + } +}; + +type TitleBarProps = RouteComponentProps<{}> & WithStyles<typeof styles> & Connect<undefined, typeof mapDispatch> + +class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLElement | null }> { + + constructor(props: TitleBarProps) { + super(props); + this.state = { + anchorEl: null + } + + } + render(): JSX.Element { + const { classes, state, history, location } = this.props; + const open = !!this.state.anchorEl; + let toolbarElements: Array<JSX.Element>; + toolbarElements = []; + + // create notificationInfo element + const notificationInfo = state.framework.applicationState.isWebsocketAvailable != undefined ? + (state.framework.applicationState.isWebsocketAvailable ? + <Typography aria-label="notifications-are-active" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} /> |</Typography> : <Typography aria-label="notifications-are-inactive" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>) + : <Typography variant="body1" aria-label="notifications-are-not-available" className={classes.notificationInfo}>Notifications N/A |</Typography>; + + + // add notificationInfo element before help + if (state.framework.applicationRegistraion) { + let isNotificationInfoAdded = false; + Object.keys(state.framework.applicationRegistraion).map(key => { + const reg = state.framework.applicationRegistraion[key]; + if (reg && reg.statusBarElement) { + if (key === "help") { + isNotificationInfoAdded = true; + toolbarElements.push(notificationInfo); + } + toolbarElements.push(<reg.statusBarElement key={key} />); + } + }); + + // add notificationInfo in case help wasn't found + if (!isNotificationInfoAdded) { + toolbarElements.push(notificationInfo); + } + } + + return ( + <AppBar enableColorOnDark position="absolute" className={classes.appBar}> + <Toolbar> + <IconButton + className={classes.menuButton} + color="inherit" + aria-label="Menu" + onClick={this.toggleMainMenu} + size="large"> + <MenuIcon /> + </IconButton> + <Logo /> + <Typography variant="h6" color="inherit" > + {state.framework.applicationState.icon + ? (<FontAwesomeIcon className={classes.icon} icon={state.framework.applicationState.icon} />) + : null} + {state.framework.applicationState.title} + </Typography> + <div className={classes.grow}></div> + { + // render toolbar + toolbarElements.map((item) => { + return item + }) + } + + {state.framework.authenticationState.user + ? (<div> + <Button aria-label="current user menu button" + aria-owns={open ? 'menu-appbar' : undefined} + aria-haspopup="true" + onClick={this.openMenu} + color="inherit" + > + <AccountCircle /> + {state.framework.authenticationState.user.user} + </Button> + <Menu + id="menu-appbar" + anchorEl={this.state.anchorEl} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + open={open} + onClose={this.closeMenu} + > + {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */} + <MenuItem + aria-label="settings-button" + onClick={ () =>{ + this.props.openSettings(); + this.closeMenu(); }}>Settings</MenuItem> + <MenuItem + aria-label="logout-button" + onClick={() => { + this.props.logout(); + this.closeMenu(); + }}>Logout</MenuItem> + </Menu> + </div>) + : (<Button onClick={() => { history.push('/login') }} color="inherit" disabled={location.pathname == "/login"}>Login</Button>)} + </Toolbar> + </AppBar> + ); + }; + + private toggleMainMenu = (event: React.MouseEvent<HTMLElement>) => { + console.log(this.props); + if (this.props.state.framework.authenticationState.user && this.props.state.framework.authenticationState.user.isValid) { + const isMainMenuOpen = this.props.state.framework.applicationState.isMenuOpen + const isClosedByUser = this.props.state.framework.applicationState.isMenuClosedByUser + this.props.toggleMainMenu(!isMainMenuOpen, !isClosedByUser); + } + } + + private openMenu = (event: React.MouseEvent<HTMLElement>) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + private closeMenu = () => { + this.setState({ anchorEl: null }); + }; +} + +//todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung + +export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent))); export default TitleBar;
\ No newline at end of file |