MNES-385 remove warning, resolve PR feedback

mnestix · Jul 5, 2024 · 661fd33 · 661fd33
1 parent 06f80cd
commit 661fd33
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/src/app/[locale]/viewer/_components/submodel-elements/TreeItem.tsx b/src/app/[locale]/viewer/_components/submodel-elements/TreeItem.tsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { Box, Typography, styled, useTheme } from '@mui/material';
-import { TreeItem, TreeItemContentProps, TreeItemProps } from '@mui/x-tree-view';
+import { Box, Theme, Typography, useTheme } from '@mui/material';
+import { TreeItemContentProps, TreeItemProps } from '@mui/x-tree-view';
 import { ISubmodelElement } from '@aas-core-works/aas-core3.0-typescript/types';
 import { IconCircleWrapper } from 'components/basics/IconCircleWrapper';
-import { theme } from 'layout/theme/theme';
-import { AssetIcon } from 'components/custom-icons/AssetIcon';
-
 
 export interface CustomTreeItemProps extends TreeItemProps {
     data?: ISubmodelElement;
@@ -14,13 +11,13 @@ export interface CustomTreeItemProps extends TreeItemProps {
 export interface CustomTreeItemContentProps extends TreeItemContentProps {
     data?: ISubmodelElement;
 }
+
 export interface ExpandableTreeItemContentProps extends TreeItemContentProps {
     icon: React.ReactNode,
     dataIcon: JSX.Element
 }
 
-
-export const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
+export const getTreeItemStyle = (theme: Theme) => ({
     '.MuiTreeItem-content': {
         userSelect: 'none',
         margin: 0,
@@ -36,9 +33,9 @@ export const StyledTreeItem = styled(TreeItem)(({ theme }) => ({
             backgroundColor: theme.palette.action.selected,
         },
     },
-}));
+});
 
-export const ExpandableTreeitem = React.forwardRef(function CustomContent(props: ExpandableTreeItemContentProps, ref) {
+export const ExpandableTreeitem = React.forwardRef(function CustomContent(props: ExpandableTreeItemContentProps) {
     const theme = useTheme();
     const {
         classes,

diff --git a/src/app/[locale]/viewer/_components/submodel-elements/entity-component/EntityTreeItem.tsx b/src/app/[locale]/viewer/_components/submodel-elements/entity-component/EntityTreeItem.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useTreeItemState } from '@mui/x-tree-view';
+import { TreeItem, useTreeItemState } from '@mui/x-tree-view';
 import clsx from 'clsx';
-import { Box, Button, IconButton } from '@mui/material';
+import { Box, Button, IconButton, styled } from '@mui/material';
 import { Entity, ISubmodelElement, KeyTypes, RelationshipElement } from '@aas-core-works/aas-core3.0-typescript/types';
 import { AssetIcon } from 'components/custom-icons/AssetIcon';
 import { ArrowForward, ArticleOutlined, InfoOutlined, PinDropOutlined } from '@mui/icons-material';
@@ -13,9 +13,7 @@ import { EntityDetailsDialog } from './EntityDetailsDialog';
 import { RelationShipDetailsDialog } from './RelationShipDetailsDialog';
 import { GetKeyType } from 'lib/util/KeyTypeUtil';
 import { useApis } from 'components/azureAuthentication/ApiProvider';
-import { CustomTreeItemContentProps, CustomTreeItemProps, ExpandableTreeitem, StyledTreeItem } from '../TreeItem';
-
-
+import { CustomTreeItemContentProps, CustomTreeItemProps, ExpandableTreeitem, getTreeItemStyle } from '../TreeItem';
 
 const CustomContent = React.forwardRef(function CustomContent(props: CustomTreeItemContentProps, ref) {
     const navigate = useRouter();
@@ -130,6 +128,8 @@ const CustomContent = React.forwardRef(function CustomContent(props: CustomTreeI
     );
 });
 
+const StyledTreeItem = styled(TreeItem)(({ theme }) => getTreeItemStyle(theme))
+
 export const EntityTreeItem = (props: CustomTreeItemProps) => {
     const { data, ...other } = props;
     /* eslint-disable @typescript-eslint/no-explicit-any */

diff --git a/...components/submodel/bill-of-applications/visualization-components/ApplicationTreeItem.tsx b/...components/submodel/bill-of-applications/visualization-components/ApplicationTreeItem.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { ArrowForward, InfoOutlined } from '@mui/icons-material';
 import AppShortcutIcon from '@mui/icons-material/AppShortcut';
-import { useTreeItemState } from '@mui/x-tree-view';
-import { Box, Button, IconButton, useTheme } from '@mui/material';
+import { TreeItem, useTreeItemState } from '@mui/x-tree-view';
+import { Box, Button, IconButton, styled } from '@mui/material';
 import clsx from 'clsx';
 import { messages } from 'lib/i18n/localization';
 import { FormattedMessage } from 'react-intl';
@@ -12,7 +12,7 @@ import { useAasState } from 'components/contexts/CurrentAasContext';
 import { encodeBase64 } from 'lib/util/Base64Util';
 import { GetKeyType } from 'lib/util/KeyTypeUtil';
 import { EntityDetailsDialog } from 'app/[locale]/viewer/_components/submodel-elements/entity-component/EntityDetailsDialog';
-import { CustomTreeItemContentProps, CustomTreeItemProps, ExpandableTreeitem, StyledTreeItem } from '../../../submodel-elements/TreeItem';
+import { CustomTreeItemContentProps, CustomTreeItemProps, ExpandableTreeitem, getTreeItemStyle } from '../../../submodel-elements/TreeItem';
 
 interface ApplicationTreeItemProps extends CustomTreeItemProps {
     hasChildEntities: boolean;
@@ -24,6 +24,8 @@ interface ApplicationTreeItemContentProps extends CustomTreeItemContentProps {
     applicationUrl?: string;
 }
 
+const StyledTreeItem = styled(TreeItem)(({ theme }) => getTreeItemStyle(theme))
+
 const CustomContent = React.forwardRef(function CustomContent(props: ApplicationTreeItemContentProps, ref) {
     const {
         classes,