diff options
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/material-ui')
6 files changed, 400 insertions, 353 deletions
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 |