From 1a868116614dd9996c78e69941b537e9da19460b Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Tue, 1 Feb 2022 13:18:42 +0100 Subject: Update ODLUX Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes Issue-ID: CCSDK-3580 Signed-off-by: Aijana Schumann Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c --- .../src/components/material-ui/listItemLink.tsx | 147 ++++----- .../src/components/material-ui/loader.tsx | 6 +- .../framework/src/components/material-ui/panel.tsx | 147 ++++----- .../src/components/material-ui/toggleButton.tsx | 358 +++++++++++---------- .../components/material-ui/toggleButtonGroup.tsx | 6 +- .../src/components/material-ui/treeView.tsx | 89 +++-- 6 files changed, 400 insertions(+), 353 deletions(-) (limited to 'sdnr/wt/odlux/framework/src/components/material-ui') 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 { - 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 ? : - ); - - const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName); - return ( - <> - - { icon - ? { icon } - : null - } - { typeof Primary === 'string' - ? - : - } - - { 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 { + 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 ? : + ); + + const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName); + return ( + <> + + { icon + ? { icon } + : null + } + { typeof Primary === 'string' + ? + : + } + + { 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 & { - activePanel: string | null, - panelId: string, - title: string, - customActionButtons?: JSX.Element[]; - onToggle: (panelId: string | null) => void; -} - -const PanelComponent: React.SFC = (props) => { - const { classes, activePanel, onToggle } = props; - return ( - onToggle(props.panelId)} > - }> - {props.title} - - - {props.children} - - {props.customActionButtons - ? - {props.customActionButtons} - - : null} - - ); -}; - -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 & { + activePanel: string | null, + panelId: string, + title: string, + customActionButtons?: JSX.Element[]; + onToggle: (panelId: string | null) => void; +} + +const PanelComponent: React.SFC = (props) => { + const { classes, activePanel, onToggle } = props; + return ( + onToggle(props.panelId)} > + }> + {props.title} + + + {props.children} + + {props.customActionButtons + ? + {props.customActionButtons} + + : null} + + ); +}; + +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 { - className?: string; - component?: React.ReactType; - disabled?: boolean; - disableFocusRipple?: boolean; - disableRipple?: boolean; - selected?: boolean; - type?: string; - value?: any; - onClick?: (event: React.FormEvent, value?: any) => void; - onChange?: (event: React.FormEvent, value?: any) => void; -} - -class ToggleButtonComponent extends React.Component { - handleChange = (event: React.FormEvent) => { - 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 ( - - {children} - - ); - } - 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 { + className?: string; + component?: React.ReactType; + disabled?: boolean; + disableFocusRipple?: boolean; + disableRipple?: boolean; + selected?: boolean; + type?: string; + value?: any; + onClick?: (event: React.FormEvent, value?: any) => void; + onChange?: (event: React.FormEvent, value?: any) => void; +} + +class ToggleButtonComponent extends React.Component { + handleChange = (event: React.FormEvent) => { + 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 ( + + {children} + + ); + } + 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 extends React.Component {children} - {enableSearchBar && || null} + {enableSearchBar && || null} {enableSearchBar && (searchTerm === undefined || searchTerm.length===0 )&& Please search for an inventory identifier or use *.} {this.renderItems(items, searchTerm && searchTerm.toLowerCase())} @@ -187,10 +199,10 @@ class TreeViewComponent extends React.Component, searchTerm: string | undefined, depth: number, isFolder: boolean, expanded: boolean, forceRender: boolean): JSX.Element | null => { + private renderItem = (item: ExternalTreeItem , 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 extends React.Component 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 extends React.Component -1 - ? - {text.substring(0, matchIndex)} + isSearchStringWithStar && matchIndex > -1 + ? extends React.Component - {text.substring(matchIndex, matchIndex + searchTermLength)} - - {text.substring(matchIndex + searchTermLength)} - )} /> - : - {text} - )} /> + {text} + )} /> + : matchIndex > -1 + ? + {text.substring(0, matchIndex)} + + {text.substring(matchIndex, matchIndex + searchTermLength)} + + {text.substring(matchIndex + searchTermLength)} + )} /> + : + {text} + )} /> } { // display the right icon, depending on the state @@ -343,7 +374,7 @@ class TreeViewComponent extends React.Component = new () => React.Component, 'theme'|'classes'>>; +export type TreeViewCtorType = new () => React.Component, 'theme'|'classes'>>; export const TreeView = withTheme(withStyles(styles)(TreeViewComponent)); export default TreeView; \ No newline at end of file -- cgit 1.2.3-korg