Merge branch 'main' into keep_sort_when_switching_between_tabs

gridsuite · Jul 18, 2024 · 18e5c4a · 18e5c4a
2 parents 5a68e42 + 93d900e
commit 18e5c4a
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@gridsuite/commons-ui": "0.62.0",
+        "@gridsuite/commons-ui": "0.63.1",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",

diff --git a/src/components/top-bar-equipment-seach-dialog/custom-suffix-renderer.tsx b/src/components/top-bar-equipment-seach-dialog/custom-suffix-renderer.tsx
@@ -5,37 +5,40 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import {
-    EquipmentInfos,
+    FunctionComponent,
+    MouseEvent as ReactMouseEvent,
+    useCallback,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+    equipmentStyles,
     TagRenderer,
     TagRendererProps,
-    equipmentStyles,
 } from '@gridsuite/commons-ui';
 import { IconButton } from '@mui/material';
+import {
+    GpsFixed as GpsFixedIcon,
+    Timeline as TimelineIcon,
+} from '@mui/icons-material';
 import {
     DiagramType,
     NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS,
-} from 'components/diagrams/diagram-common';
+} from '../diagrams/diagram-common';
 import {
     EQUIPMENT_INFOS_TYPES,
     EQUIPMENT_TYPES,
-} from 'components/utils/equipment-types';
-import { FunctionComponent, useCallback } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { centerOnSubstation, openDiagram } from 'redux/actions';
-import { fetchNetworkElementInfos } from 'services/study/network';
-import {
-    GpsFixed as GpsFixedIcon,
-    Timeline as TimelineIcon,
-} from '@mui/icons-material';
-import { ReduxState } from 'redux/reducer.type';
+} from '../utils/equipment-types';
+import { centerOnSubstation, openDiagram } from '../../redux/actions';
+import { fetchNetworkElementInfos } from '../../services/study/network';
+import { ReduxState } from '../../redux/reducer.type';
 
 interface CustomSuffixRendererProps extends TagRendererProps {
     onClose?: () => void;
 }
 
 export const CustomSuffixRenderer: FunctionComponent<
     CustomSuffixRendererProps
-> = ({ props, element, onClose }) => {
+> = ({ element, onClose, ...tagRendererProps }) => {
     const dispatch = useDispatch();
     const studyUuid = useSelector((state: ReduxState) => state.studyUuid);
     const currentNode = useSelector(
@@ -49,10 +52,7 @@ export const CustomSuffixRenderer: FunctionComponent<
     );
 
     const centerOnSubstationCB = useCallback(
-        (
-            e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-            element: EquipmentInfos
-        ) => {
+        (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
             e.stopPropagation();
             if (!studyUuid || !currentNode) {
                 return;
@@ -76,19 +76,16 @@ export const CustomSuffixRenderer: FunctionComponent<
                 e.stopPropagation();
             });
         },
-        [dispatch, onClose, studyUuid, currentNode]
+        [studyUuid, currentNode, element.type, element.id, dispatch, onClose]
     );
 
     const openNetworkAreaDiagramCB = useCallback(
-        (
-            e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-            element: EquipmentInfos
-        ) => {
+        (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
             dispatch(openDiagram(element.id, DiagramType.NETWORK_AREA_DIAGRAM));
             onClose?.();
             e.stopPropagation();
         },
-        [dispatch, onClose]
+        [dispatch, element.id, onClose]
     );
 
     if (
@@ -104,29 +101,30 @@ export const CustomSuffixRenderer: FunctionComponent<
                                 NETWORK_AREA_DIAGRAM_NB_MAX_VOLTAGE_LEVELS &&
                             networkAreaDiagramDepth !== 0
                         }
-                        onClick={(e) => openNetworkAreaDiagramCB(e, element)}
-                        size={'small'}
+                        onClick={openNetworkAreaDiagramCB}
+                        size="small"
                     >
-                        <TimelineIcon fontSize={'small'} />
+                        <TimelineIcon fontSize="small" />
                     </IconButton>
                 )}
                 <IconButton
                     disabled={
                         (!studyUuid || !currentNode) &&
                         element.type !== EQUIPMENT_TYPES.SUBSTATION
                     }
-                    onClick={(e) => centerOnSubstationCB(e, element)}
-                    size={'small'}
+                    onClick={centerOnSubstationCB}
+                    size="small"
                 >
-                    <GpsFixedIcon fontSize={'small'} />
+                    <GpsFixedIcon fontSize="small" />
                 </IconButton>
             </>
         );
     } else {
         return (
             <TagRenderer
-                props={{ ...props, styles: equipmentStyles }}
+                {...tagRendererProps}
                 element={element}
+                styles={equipmentStyles}
             />
         );
     }