@centreon/ui 24.5.12 → 24.5.13

package/src/ParentSize/ParentSize.tsx

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+
+import { Responsive } from '@visx/visx';
+
+type ParentSizeState = {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+};
+
+type Props = {
+  children: (args: ParentSizeState) => ReactElement;
+};
+
+const ParentSize = ({ children, ...props }: Props): JSX.Element => {
+  return (
+    <Responsive.ParentSize {...props} debounceTime={0}>
+      {children}
+    </Responsive.ParentSize>
+  );
+};
+
+export default ParentSize;

package/src/ParentSize/index.ts

@@ -0,0 +1 @@
+export { default as ParentSize } from './ParentSize';

package/src/PopoverMenu/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import { makeStyles } from 'tss-react/mui';
 
@@ -6,28 +6,38 @@ import {
   ClickAwayListener,
   Paper,
   Popper,
-  PopperPlacementType,
-  useTheme
+  PopperPlacementType
 } from '@mui/material';
+import { PopperProps } from '@mui/material/Popper';
 
 import { IconButton } from '..';
 
-const useStyles = makeStyles()(() => ({
+const useStyles = makeStyles()((theme) => ({
+  popover: {
+    zIndex: theme.zIndex.tooltip
+  },
   popoverIconButton: {
     padding: 0,
     width: '100%'
   }
 }));
 
+interface PopoverData {
+  anchorEl: HTMLElement | undefined;
+  setAnchorEl: Dispatch<SetStateAction<HTMLElement | undefined>>;
+}
+
 interface Props {
   canOpen?: boolean;
   children: (props?) => JSX.Element;
   className?: string;
   dataTestId?: string;
+  getPopoverData?: (data: PopoverData) => void;
   icon: JSX.Element;
   onClose?: () => void;
   onOpen?: () => void;
   popperPlacement?: PopperPlacementType;
+  popperProps?: Partial<PopperProps>;
   title?: string;
 }
 
@@ -40,20 +50,20 @@ const PopoverMenu = ({
   onClose,
   canOpen = true,
   className,
-  dataTestId
+  dataTestId,
+  getPopoverData,
+  popperProps
 }: Props): JSX.Element => {
-  const theme = useTheme();
   const { classes, cx } = useStyles();
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
-
   const isOpen = Boolean(anchorEl);
 
   const close = (reason?): void => {
     const isClosedByInputClick = reason?.type === 'mousedown';
-
     if (isClosedByInputClick) {
       return;
     }
+
     onClose?.();
     setAnchorEl(undefined);
   };
@@ -75,6 +85,10 @@ const PopoverMenu = ({
     }
   }, [canOpen]);
 
+  useEffect(() => {
+    getPopoverData?.({ anchorEl, setAnchorEl });
+  }, [anchorEl]);
+
   return (
     <>
       <IconButton
@@ -92,11 +106,12 @@ const PopoverMenu = ({
           <Popper
             open
             anchorEl={anchorEl}
+            className={classes.popover}
             nonce={undefined}
             placement={popperPlacement}
-            style={{ zIndex: theme.zIndex.tooltip }}
             onResize={(): undefined => undefined}
             onResizeCapture={(): undefined => undefined}
+            {...popperProps}
           >
             <Paper>{children({ close })}</Paper>
           </Popper>

package/src/RichTextEditor/ContentEditable.tsx

@@ -9,17 +9,17 @@ import { Typography } from '@mui/material';
 
 interface StyleProps {
   editable: boolean;
+  error?: string;
   minInputHeight: number;
 }
 
 const useStyles = makeStyles<StyleProps>()(
-  (theme, { minInputHeight, editable }) => ({
+  (theme, { minInputHeight, editable, error }) => ({
     container: {
-      '& p': {
-        margin: 0
-      },
       backgroundColor: theme.palette.background.paper,
-      border: '1px solid transparent',
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : '1px solid transparent',
       borderRadius: theme.shape.borderRadius,
       padding: theme.spacing(0.5, 1)
     },
@@ -31,27 +31,45 @@ const useStyles = makeStyles<StyleProps>()(
       outline: '0px solid transparent'
     },
     inputFocused: {
-      border: `1px solid ${theme.palette.primary.main}`
+      border: error
+        ? `1px solid ${theme.palette.error.main}`
+        : `1px solid ${theme.palette.primary.main}`
+    },
+    notEditable: {
+      backgroundColor: 'transparent'
     },
     placeholder: {
       color: theme.palette.grey[500],
       pointerEvents: 'none'
+    },
+    root: {
+      '& p,h1,h2,h3,h4,h5,h6,span': {
+        margin: 0
+      }
     }
   })
 );
 
 interface Props {
+  className?: string;
+  disabled?: boolean;
   editable: boolean;
   editorState?: string;
+  error?: string;
   hasInitialTextContent?: boolean;
   initialEditorState?: string;
+  initialize?: (editor) => void;
   inputClassname?: string;
   minInputHeight: number;
   namespace: string;
+  onBlur?: (e: string) => void;
   placeholder: string;
   resetEditorToInitialStateCondition?: () => boolean;
 }
 
+const defaultState =
+  '{"root":{"children":[{"children":[],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+
 const ContentEditable = ({
   minInputHeight,
   inputClassname,
@@ -61,13 +79,17 @@ const ContentEditable = ({
   editorState,
   namespace,
   resetEditorToInitialStateCondition,
-  initialEditorState
+  initialEditorState,
+  error,
+  onBlur,
+  className,
+  disabled,
+  initialize
 }: Props): JSX.Element => {
-  const { classes, cx } = useStyles({ editable, minInputHeight });
+  const { classes, cx } = useStyles({ editable, error, minInputHeight });
   const { t } = useTranslation();
 
   const [editor] = useLexicalComposerContext();
-  const [isEditable, setEditable] = useState(false);
   const [isFocused, setFocused] = useState(false);
   const [root, setRoot] = useState('');
 
@@ -79,17 +101,13 @@ const ContentEditable = ({
   );
 
   useLayoutEffect(() => {
-    setEditable(editor.isEditable());
-
-    if (editorState && !editable) {
-      const newEditorState = editor.parseEditorState(editorState);
+    if (!editable) {
+      const newEditorState = editor.parseEditorState(
+        editorState || defaultState
+      );
 
       editor.setEditorState(newEditorState);
     }
-
-    return editor.registerEditableListener((currentIsEditable) => {
-      setEditable(currentIsEditable);
-    });
   }, [editor, editorState]);
 
   useEffect(() => {
@@ -108,21 +126,49 @@ const ContentEditable = ({
     const shouldResetEditorToInitialState =
       resetEditorToInitialStateCondition?.();
 
-    if (!shouldResetEditorToInitialState || isNil(initialEditorState)) {
+    if (!shouldResetEditorToInitialState) {
       return;
     }
 
-    const newEditorState = editor.parseEditorState(initialEditorState);
+    const newEditorState = editor.parseEditorState(
+      initialEditorState || defaultState
+    );
 
     editor.setEditorState(newEditorState);
   }, [editorState]);
 
-  const isTextEmpty = isEmpty(root);
+  const isTextEmpty =
+    isEmpty(root) &&
+    !editor.getEditorState().toJSON().root.children?.[0]?.children?.length;
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
+    setFocused(false);
+    onBlur?.(event);
+  };
+
+  const isEditable = editor.isEditable();
+
+  useEffect(() => {
+    if (isNil(disabled)) {
+      return;
+    }
+
+    editor.setEditable(!disabled);
+  }, [disabled]);
+
+  useEffect(() => {
+    initialize?.(editor);
+  }, []);
 
   return (
     <div
-      className={cx(classes.container, isFocused && classes.inputFocused)}
-      id={namespace}
+      className={cx(
+        classes.root,
+        editable && classes.container,
+        !isEditable && !disabled && classes.notEditable,
+        className,
+        isFocused && classes.inputFocused
+      )}
     >
       {editable && isTextEmpty && (
         <Typography className={classes.placeholder}>
@@ -132,14 +178,14 @@ const ContentEditable = ({
       <div
         aria-label={namespace}
         className={cx(
-          isTextEmpty && classes.emptyInput,
+          editable && isTextEmpty && classes.emptyInput,
           classes.input,
           inputClassname
         )}
         contentEditable={isEditable}
         data-testid={namespace}
         ref={ref}
-        onBlur={(): void => setFocused(false)}
+        onBlur={handleBlur}
         onFocus={(): void => setFocused(true)}
       />
     </div>