@centreon/ui 25.1.0 → 25.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.1.0",
+  "version": "25.1.2",
   "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/Dialog/UnsavedChanges/index.tsx

@@ -38,9 +38,9 @@ const UnsavedChangesDialog = ({
 
   const labelConfirm = isValidForm ? labelSave : labelResolve;
 
-  const labelMessage = `${
-    isValidForm ? labelIfYouClickOnDiscard : labelThereAreErrorsInTheForm
-  } ${isValidForm ? '' : labelDoYouWantToQuitWithoutResolving}`;
+  const labelMessage = isValidForm
+    ? labelIfYouClickOnDiscard
+    : `${labelThereAreErrorsInTheForm} ${labelDoYouWantToQuitWithoutResolving}`;
 
   if (not(dialogOpened)) {
     return null;

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';