@centreon/ui 25.1.1 → 25.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.1.1",
+  "version": "25.1.3",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Dashboard/Dashboard.styles.ts

@@ -80,6 +80,10 @@ export const useDashboardItemStyles = makeStyles<{ hasHeader: boolean }>()(
       height: '100%',
       width: '100%'
     },
+    widgetSubContainer: {
+      height: '100%',
+      width: '100%'
+    },
     widgetContent: {
       height: hasHeader
         ? `calc(100% - ${theme.spacing(3.5)} - ${theme.spacing(0.5)})`

package/src/Dashboard/Item.tsx

@@ -9,13 +9,13 @@ import {
 } from 'react';
 
 import { useAtomValue } from 'jotai';
-import { equals, isNil, prop } from 'ramda';
+import { equals, isNil, prop, type } from 'ramda';
 
 import { Card, useTheme } from '@mui/material';
-
 import LoadingSkeleton from '../LoadingSkeleton';
+import ExpandableContainer from '../components/ExpandableContainer';
+import { Parameters } from '../components/ExpandableContainer/models';
 import { useMemoComponent, useViewportIntersection } from '../utils';
-
 import { useDashboardItemStyles } from './Dashboard.styles';
 import { isResizingItemAtom } from './atoms';
 
@@ -25,7 +25,7 @@ interface DashboardItemProps {
   children: ReactElement;
   className?: string;
   disablePadding?: boolean;
-  header?: ReactElement;
+  header?: ReactElement | ((params: Parameters) => ReactElement);
   id: string;
   onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void;
   onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void;
@@ -86,51 +86,76 @@ const Item = forwardRef<HTMLDivElement, DashboardItemProps>(
       setElement(ref.current);
     }, [ref]);
 
+    const originStyle = {
+      ...style,
+      width: `calc(${prop('width', style) || '0px'} - 12px)`
+    };
+
     return useMemoComponent({
       Component: (
         <div
+          ref={ref}
           {...cardContainerListeners}
           className={sanitizedReactGridLayoutClassName}
-          ref={ref}
-          style={{
-            ...style,
-            width: `calc(${prop('width', style) || '0px'} - 12px)`
-          }}
+          style={originStyle}
         >
-          <Card
-            className={classes.widgetContainer}
-            data-padding={!disablePadding}
-          >
-            {header && (
-              <div className={classes.widgetHeader} data-canMove={canMove}>
-                {canMove && (
-                  <div
-                    {...listeners}
-                    className={classes.widgetHeaderDraggable}
-                    data-testid={`${id}_move_panel`}
-                  />
-                )}
-                {header}
-              </div>
-            )}
-            <div
-              className={cx(
-                classes.widgetContent,
-                !disablePadding && classes.widgetPadding
-              )}
-            >
-              {!isInViewport ? (
-                <LoadingSkeleton
-                  animation={false}
-                  data-widget-skeleton={id}
-                  height="100%"
-                  width="100%"
-                />
-              ) : (
-                children
-              )}
-            </div>
-          </Card>
+          <ExpandableContainer>
+            {({ isExpanded, label, key, ...rest }) => {
+              const canControl = isExpanded ? false : canMove;
+
+              const childrenHeader = equals(type(header), 'Function')
+                ? (header as (params: Parameters) => ReactElement)({
+                    isExpanded,
+                    label,
+                    ref,
+                    key,
+                    ...rest
+                  })
+                : header;
+
+              return (
+                <div key={key} className={classes.widgetSubContainer}>
+                  <Card
+                    className={classes.widgetContainer}
+                    data-padding={!disablePadding}
+                  >
+                    {childrenHeader && (
+                      <div
+                        className={classes.widgetHeader}
+                        data-canMove={canControl}
+                      >
+                        {canControl && (
+                          <div
+                            {...listeners}
+                            className={classes.widgetHeaderDraggable}
+                            data-testid={`${id}_move_panel`}
+                          />
+                        )}
+                        {childrenHeader}
+                      </div>
+                    )}
+                    <div
+                      className={cx(
+                        classes.widgetContent,
+                        !disablePadding && classes.widgetPadding
+                      )}
+                    >
+                      {!isInViewport ? (
+                        <LoadingSkeleton
+                          animation={false}
+                          data-widget-skeleton={id}
+                          height="100%"
+                          width="100%"
+                        />
+                      ) : (
+                        children
+                      )}
+                    </div>
+                  </Card>
+                </div>
+              );
+            }}
+          </ExpandableContainer>
         </div>
       ),
       memoProps: isInViewport

package/src/components/ExpandableContainer/ExpandableContainer.tsx

@@ -0,0 +1,63 @@
+import { OpenInFull } from '@mui/icons-material';
+import { useState } from 'react';
+import { Modal } from '../Modal';
+import { useStyles } from './expandableContainer.styles';
+import { Parameters } from './models';
+import { labelExpand, labelReduce } from './translatedLabels';
+
+interface Props {
+  children: (params: Omit<Parameters, 'ref'>) => JSX.Element;
+}
+
+const ExpandableContainer = ({ children }: Props) => {
+  const { classes } = useStyles();
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpand = (): void => {
+    setIsExpanded(!isExpanded);
+  };
+  const currentMode = isExpanded ? labelExpand : labelReduce;
+
+  const reducedChildrenData = {
+    toggleExpand,
+    isExpanded: false,
+    label: labelExpand,
+    Icon: OpenInFull,
+    key: currentMode
+  };
+
+  const expandedChildrenData = {
+    toggleExpand,
+    isExpanded,
+    label: labelReduce,
+    Icon: OpenInFull,
+    key: currentMode
+  };
+
+  return (
+    <>
+      {children(reducedChildrenData)}
+      {isExpanded && (
+        <Modal
+          open={isExpanded}
+          size="xlarge"
+          classes={{
+            paper: classes.papper
+          }}
+          PaperProps={{
+            style: {
+              width: '90vw',
+              maxWidth: '90vw'
+            }
+          }}
+          hasCloseButton={false}
+        >
+          {children(expandedChildrenData)}
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default ExpandableContainer;

package/src/components/ExpandableContainer/expandableContainer.styles.ts

@@ -0,0 +1,9 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()({
+  papper: {
+    backgroundColor: 'transparent',
+    border: 'initial',
+    height: '90vh'
+  }
+});

package/src/components/ExpandableContainer/index.tsx

@@ -0,0 +1,3 @@
+import ExpandableContainer from './ExpandableContainer';
+
+export default ExpandableContainer;

package/src/components/ExpandableContainer/models.ts

@@ -0,0 +1,12 @@
+import { SvgIconComponent } from '@mui/icons-material';
+import { CSSProperties, ForwardedRef } from 'react';
+
+export interface Parameters {
+  toggleExpand: () => void;
+  Icon: SvgIconComponent;
+  isExpanded: boolean;
+  label: string;
+  style?: CSSProperties;
+  ref: ForwardedRef<HTMLDivElement>;
+  key: string;
+}

package/src/components/ExpandableContainer/translatedLabels.ts

@@ -0,0 +1,2 @@
+export const labelExpand = 'Expand';
+export const labelReduce = 'Reduce';

package/src/components/Zoom/Zoom.tsx

@@ -1,42 +1,45 @@
+import { type MutableRefObject } from 'react';
 import { Zoom as VisxZoom } from '@visx/zoom';
+import { TransformMatrix } from '@visx/zoom/lib/types';
 
 import { ParentSize } from '../..';
 
 import ZoomContent from './ZoomContent';
-import type { ChildrenProps, MinimapPosition } from './models';
+import type { MinimapPosition, ZoomChildren } from './models';
 
-export interface ZoomProps {
-  children: (args: ChildrenProps) => JSX.Element;
+export interface ZoomProps extends ZoomChildren {
   id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;
   scaleMin?: number;
   showMinimap?: boolean;
+  contentRef?: MutableRefObject<SVGGElement | null>;
+  transformMatrix?: TransformMatrix;
 }
 
-const initialTransform = {
-  scaleX: 1,
-  scaleY: 1,
-  skewX: 0,
-  skewY: 0,
-  translateX: 0,
-  translateY: 0
-};
-
 const Zoom = ({
   children,
   scaleMin = 0.5,
   scaleMax = 4,
   showMinimap = false,
   minimapPosition = 'top-left',
-  id = 0
+  id = 0,
+  contentRef,
+  transformMatrix = {
+    scaleX: 1,
+    scaleY: 1,
+    skewX: 0,
+    skewY: 0,
+    translateX: 0,
+    translateY: 0
+  }
 }: ZoomProps): JSX.Element => {
   return (
     <ParentSize>
       {({ width, height }) => (
         <VisxZoom<SVGSVGElement>
           height={height}
-          initialTransformMatrix={initialTransform}
+          initialTransformMatrix={transformMatrix}
           scaleXMax={scaleMax}
           scaleXMin={scaleMin}
           scaleYMax={scaleMax}
@@ -51,6 +54,7 @@ const Zoom = ({
               showMinimap={showMinimap}
               width={width}
               zoom={zoom}
+              ref={contentRef}
             >
               {children}
             </ZoomContent>

package/src/components/Zoom/ZoomContent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { type ForwardedRef, forwardRef, MutableRefObject, useEffect, useRef, useState } from 'react';
 
 import { RectClipPath } from '@visx/clip-path';
 
@@ -8,38 +8,38 @@ import ReplayIcon from '@mui/icons-material/Replay';
 
 import { IconButton } from '../Button';
 
-import Minimap from './Minimap';
-import { useZoomStyles } from './Zoom.styles';
 import { minimapScale, radius } from './constants';
-import type { ChildrenProps, MinimapPosition, ZoomInterface } from './models';
 import { useZoom } from './useZoom';
+import { useZoomStyles } from './Zoom.styles';
+import Minimap from './Minimap';
+import { ZoomChildren, type Dimension, type MinimapPosition, type ZoomInterface } from './models';
 
-export interface Props extends ZoomInterface {
-  children: (args: ChildrenProps) => JSX.Element;
-  height: number;
+export interface Props extends Dimension, ZoomInterface, ZoomChildren {
   id?: number | string;
   minimapPosition: MinimapPosition;
   showMinimap?: boolean;
-  width: number;
 }
 
-const ZoomContent = ({
-  zoom,
-  width,
-  height,
-  children,
-  showMinimap,
-  minimapPosition,
-  id
-}: Props): JSX.Element => {
+const ZoomContent = forwardRef(
+  (
+    {
+      zoom,
+      width,
+      height,
+      children,
+      showMinimap,
+      minimapPosition,
+      id
+    }: Props,
+    ref?: ForwardedRef<SVGGElement | null>
+  ) : JSX.Element => {
   const { classes } = useZoomStyles();
-  const contentRef = useRef<SVGGElement | null>(null);
+
+  const fallbackRef = useRef<SVGGElement | null>(null)
+  const contentRef = (ref || fallbackRef) as MutableRefObject<SVGGElement | null>;
   const minimapSvgRef = useRef<SVGSVGElement | null>(null);
   const minimapContentRef = useRef<SVGSVGElement | null>(null);
-  const [contentClientRect, setContentClientRect] = useState<{
-    height: number;
-    width: number;
-  } | null>(null);
+  const [contentClientRect, setContentClientRect] = useState<Dimension | null>(null);
 
   const resizeObserver = new ResizeObserver(() => {
     const contentBoundingClientRect = (
@@ -105,8 +105,8 @@ const ZoomContent = ({
             contentClientRect,
             height,
             transformMatrix: zoom.transformMatrix,
-            setTransformMatrix: zoom.setTransformMatrix,
-            width
+            width,
+            zoom
           })}
         </g>
       </svg>
@@ -135,8 +135,8 @@ const ZoomContent = ({
                   contentClientRect,
                   height,
                   transformMatrix: zoom.transformMatrix,
-                  setTransformMatrix: zoom.setTransformMatrix,
-                  width
+                  width,
+                  zoom
                 })}
               </g>
             </Minimap>
@@ -165,6 +165,6 @@ const ZoomContent = ({
       </div>
     </div>
   );
-};
+});
 
 export default ZoomContent;

package/src/components/Zoom/models.ts

@@ -1,15 +1,12 @@
-import type { ProvidedZoom } from '@visx/zoom/lib/types';
+import { ProvidedZoom, TransformMatrix } from '@visx/zoom/lib/types';
 
 export interface ZoomState {
-  transformMatrix: {
-    scaleX: number;
-    scaleY: number;
-    skewX: number;
-    skewY: number;
-    translateX: number;
-    translateY: number;
-  };
-  setTransformMatrix?: ProvidedZoom<SVGSVGElement>['setTransformMatrix'];
+  transformMatrix: TransformMatrix;
+}
+
+export interface Dimension {
+  height: number;
+  width: number;
 }
 
 export type MinimapPosition =
@@ -22,11 +19,12 @@ export interface ZoomInterface {
   zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
 }
 
-export interface ChildrenProps extends ZoomState {
-  contentClientRect: {
-    height: number;
-    width: number;
-  } | null;
-  height: number;
-  width: number;
+export interface ChildrenProps extends ZoomState, Dimension, ZoomInterface {
+  contentClientRect: Dimension | null;
+}
+
+export interface ZoomChildren {
+  children: (args: ChildrenProps) => JSX.Element;
 }
+
+