@centreon/ui 24.4.71 → 24.4.73

package/src/RichTextEditor/plugins/ToolbarPlugin/AlignPicker.tsx

@@ -1,116 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import {
-  $getSelection,
-  $isElementNode,
-  $isRangeSelection,
-  ElementFormatType,
-  FORMAT_ELEMENT_COMMAND
-} from 'lexical';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { equals } from 'ramda';
-
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material';
-
-import { Menu } from '../../../components';
-import { getSelectedNode } from '../../utils/getSelectedNode';
-import { labelAlignPicker } from '../../translatedLabels';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-const formatOptions: Array<{
-  Icon: OverridableComponent<SvgIconTypeMap<object, 'svg'>>;
-  label: string;
-  value: ElementFormatType;
-}> = [
-  {
-    Icon: FormatAlignLeftIcon,
-    label: 'Left',
-    value: 'left'
-  },
-  {
-    Icon: FormatAlignCenterIcon,
-    label: 'Center',
-    value: 'center'
-  },
-  {
-    Icon: FormatAlignRightIcon,
-    label: 'Right',
-    value: 'right'
-  }
-];
-
-interface Props {
-  disabled: boolean;
-}
-
-const AlignPicker = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const [elementFormat, setElementFormat] = useState<ElementFormatType>('left');
-
-  const [editor] = useLexicalComposerContext();
-
-  const dispatchAlignment = (alignment: ElementFormatType) => () => {
-    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, alignment);
-  };
-
-  const updateElementFormat = useCallback(() => {
-    const selection = $getSelection();
-
-    if (!$isRangeSelection(selection)) {
-      return;
-    }
-
-    const node = getSelectedNode(selection);
-    const parent = node.getParent();
-
-    setElementFormat(
-      ($isElementNode(node) ? node.getFormatType() : parent?.getFormatType()) ||
-        'left'
-    );
-  }, [editor]);
-
-  const selectedFormat = formatOptions.find(({ value }) =>
-    equals(value, elementFormat)
-  );
-
-  useEffect(() => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        updateElementFormat();
-      });
-    });
-  }, [editor, updateElementFormat]);
-
-  return (
-    <Menu>
-      <Menu.Button
-        ariaLabel={labelAlignPicker}
-        className={classes.button}
-        disabled={disabled}
-      >
-        {selectedFormat && <selectedFormat.Icon />}
-      </Menu.Button>
-      <Menu.Items className={classes.menuItems}>
-        <div className={classes.menu}>
-          {formatOptions.map(({ Icon, value, label }) => (
-            <Menu.Item
-              isActive={equals(value, elementFormat)}
-              key={value}
-              onClick={dispatchAlignment(value)}
-            >
-              <Icon aria-label={label} />
-            </Menu.Item>
-          ))}
-        </div>
-      </Menu.Items>
-    </Menu>
-  );
-};
-
-export default AlignPicker;

package/src/RichTextEditor/plugins/ToolbarPlugin/BlockButtons.tsx

@@ -1,155 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  $createParagraphNode,
-  $getSelection,
-  $isRangeSelection,
-  $isRootOrShadowRoot,
-  COMMAND_PRIORITY_CRITICAL,
-  SELECTION_CHANGE_COMMAND
-} from 'lexical';
-import {
-  $createHeadingNode,
-  $isHeadingNode,
-  HeadingTagType
-} from '@lexical/rich-text';
-import { $setBlocksType } from '@lexical/selection';
-import { T, always, cond, equals, isNil } from 'ramda';
-import { $findMatchingParent, mergeRegister } from '@lexical/utils';
-import { useTranslation } from 'react-i18next';
-
-import TextSizeIcon from '@mui/icons-material/TextFields';
-
-import { Menu } from '../../../components';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-interface Props {
-  disabled: boolean;
-}
-
-const blockTypeToBlockName = {
-  h3: 'Huge',
-  h5: 'Large',
-  h6: 'Small',
-  paragraph: 'Normal'
-};
-
-const blockTypes = ['h3', 'h5', 'paragraph', 'h6'];
-
-const blockTypeOptions = blockTypes.map((blockType) => ({
-  id: blockType,
-  name: blockTypeToBlockName[blockType]
-}));
-
-const BlockButtons = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-  const { t } = useTranslation();
-
-  const [blockType, setBlockType] =
-    useState<keyof typeof blockTypeToBlockName>('paragraph');
-
-  const [editor] = useLexicalComposerContext();
-
-  const formatParagraph = (): void => {
-    editor.update(() => {
-      const selection = $getSelection();
-      $setBlocksType(selection, () => $createParagraphNode());
-    });
-  };
-
-  const formatHeading = (headingSize: HeadingTagType): void => {
-    if (blockType !== headingSize) {
-      editor.update(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-          $setBlocksType(selection, () => $createHeadingNode(headingSize));
-        }
-      });
-    }
-  };
-
-  const changeBlockType = (newBlockType): void => {
-    const formatFunction = cond<Array<string>, (value?) => void>([
-      [equals('h3'), always(() => formatHeading('h3'))],
-      [equals('h5'), always(() => formatHeading('h5'))],
-      [equals('h6'), always(() => formatHeading('h6'))],
-      [T, always(formatParagraph)]
-    ])(newBlockType || '');
-
-    formatFunction();
-  };
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    const anchorNode = selection?.anchor.getNode();
-    const element = equals(anchorNode?.getKey(), 'root')
-      ? anchorNode
-      : $findMatchingParent(anchorNode, (e) => {
-          const parent = e.getParent();
-
-          return parent !== null && $isRootOrShadowRoot(parent);
-        }) || anchorNode?.getTopLevelElementOrThrow();
-
-    const elementKey = element?.getKey();
-    const elementDOM = editor.getElementByKey(elementKey);
-
-    if (isNil(elementDOM)) {
-      return;
-    }
-
-    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
-
-    if (type in blockTypeToBlockName) {
-      setBlockType(type as keyof typeof blockTypeToBlockName);
-    }
-  }, [editor]);
-
-  useEffect(() => {
-    return editor.registerCommand(
-      SELECTION_CHANGE_COMMAND,
-      () => {
-        updateToolbar();
-
-        return false;
-      },
-      COMMAND_PRIORITY_CRITICAL
-    );
-  }, [editor, updateToolbar]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-      })
-    );
-  }, [editor, updateToolbar]);
-
-  return (
-    <Menu>
-      <Menu.Button
-        ariaLabel="block"
-        className={classes.button}
-        disabled={disabled}
-      >
-        <TextSizeIcon />
-      </Menu.Button>
-      <Menu.Items className={classes.menuItems}>
-        {blockTypeOptions.map(({ id, name }) => (
-          <Menu.Item
-            isActive={equals(id, blockType)}
-            key={name}
-            onClick={() => changeBlockType(id)}
-          >
-            {t(name)}
-          </Menu.Item>
-        ))}
-      </Menu.Items>
-    </Menu>
-  );
-};
-
-export default BlockButtons;

package/src/RichTextEditor/plugins/ToolbarPlugin/LinkButton.tsx

@@ -1,106 +0,0 @@
-import { useCallback, useEffect } from 'react';
-
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import {
-  $getSelection,
-  $isRangeSelection,
-  RangeSelection,
-  SELECTION_CHANGE_COMMAND,
-  ElementNode,
-  TextNode
-} from 'lexical';
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
-import { $isAtNodeEnd } from '@lexical/selection';
-import { mergeRegister } from '@lexical/utils';
-import { useAtom } from 'jotai';
-
-import LinkIcon from '@mui/icons-material/Link';
-
-import { IconButton } from '../../..';
-import { isInsertingLinkAtom } from '../../atoms';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-const LowPriority = 1;
-
-const getSelectedNode = (selection: RangeSelection): ElementNode | TextNode => {
-  const { anchor } = selection;
-  const { focus } = selection;
-  const anchorNode = selection.anchor.getNode();
-  const focusNode = selection.focus.getNode();
-  if (anchorNode === focusNode) {
-    return anchorNode;
-  }
-  const isBackward = selection.isBackward();
-  if (isBackward) {
-    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
-  }
-
-  return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
-};
-
-interface Props {
-  disabled: boolean;
-}
-
-const LinkButton = ({ disabled }: Props): JSX.Element => {
-  const { classes, cx } = useStyles();
-
-  const [isLink, setIsLink] = useAtom(isInsertingLinkAtom);
-
-  const [editor] = useLexicalComposerContext();
-
-  const updateToolbar = useCallback((): void => {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) {
-      return;
-    }
-
-    const node = getSelectedNode(selection);
-    const parent = node.getParent();
-    if ($isLinkNode(parent) || $isLinkNode(node)) {
-      setIsLink(true);
-    } else {
-      setIsLink(false);
-    }
-  }, [editor]);
-
-  const insertLink = useCallback(() => {
-    if (!isLink) {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
-    } else {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-    }
-  }, [editor, isLink]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        () => {
-          updateToolbar();
-
-          return false;
-        },
-        LowPriority
-      )
-    );
-  }, [editor, updateToolbar]);
-
-  return (
-    <IconButton
-      ariaLabel="link"
-      className={cx(classes.button, { [classes.buttonSelected]: isLink })}
-      disabled={disabled}
-      key="link"
-      size="medium"
-      title="link"
-      tooltipPlacement="top"
-      onClick={insertLink}
-    >
-      <LinkIcon />
-    </IconButton>
-  );
-};
-
-export default LinkButton;

package/src/RichTextEditor/plugins/ToolbarPlugin/ListButton.tsx

@@ -1,155 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-import {
-  $isListNode,
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  ListNode,
-  REMOVE_LIST_COMMAND
-} from '@lexical/list';
-import { $getSelection, $isRootOrShadowRoot } from 'lexical';
-import {
-  $findMatchingParent,
-  $getNearestNodeOfType,
-  mergeRegister
-} from '@lexical/utils';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { equals, isNil } from 'ramda';
-import { useTranslation } from 'react-i18next';
-
-import UnorderedListIcon from '@mui/icons-material/FormatListBulleted';
-import OrderedListIcon from '@mui/icons-material/FormatListNumbered';
-
-import { Menu } from '../../../components';
-import { labelOrderedList, labelUnorderedList } from '../../translatedLabels';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-const options = [
-  {
-    Icon: UnorderedListIcon,
-    label: labelUnorderedList,
-    value: 'bullet'
-  },
-  {
-    Icon: OrderedListIcon,
-    label: labelOrderedList,
-    value: 'number'
-  }
-];
-
-interface Props {
-  disabled?: boolean;
-}
-
-const ListButton = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-  const { t } = useTranslation();
-
-  const [editor] = useLexicalComposerContext();
-
-  const [elementList, setElementList] = useState(null);
-
-  const formatBulletList = (): void => {
-    if (elementList !== 'bullet') {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    }
-  };
-
-  const formatNumberedList = (): void => {
-    if (elementList !== 'number') {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    }
-  };
-
-  const formatList = (type): void => {
-    if (equals(type, elementList)) {
-      setElementList(null);
-    }
-
-    if (equals(type, 'bullet')) {
-      formatBulletList();
-
-      return;
-    }
-    formatNumberedList();
-  };
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    const anchorNode = selection?.anchor.getNode();
-    const element = equals(anchorNode?.getKey(), 'root')
-      ? anchorNode
-      : $findMatchingParent(anchorNode, (e) => {
-          const parent = e.getParent();
-
-          return parent !== null && $isRootOrShadowRoot(parent);
-        }) || anchorNode?.getTopLevelElementOrThrow();
-
-    const elementKey = element?.getKey();
-    const elementDOM = editor.getElementByKey(elementKey);
-
-    if (isNil(elementDOM)) {
-      return;
-    }
-
-    if ($isListNode(element)) {
-      const parentList = $getNearestNodeOfType(anchorNode, ListNode);
-      const type = parentList
-        ? parentList.getListType()
-        : element.getListType();
-      setElementList(type);
-    }
-  }, [editor]);
-
-  const selectedList = options.find(({ value }) => equals(value, elementList));
-
-  useEffect(() => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        updateToolbar();
-      });
-    });
-  }, [editor, updateToolbar]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-      })
-    );
-  }, [editor, updateToolbar]);
-
-  return (
-    <Menu>
-      <Menu.Button
-        ariaLabel="list"
-        className={classes.button}
-        disabled={disabled}
-      >
-        {selectedList ? <selectedList.Icon /> : <UnorderedListIcon />}
-      </Menu.Button>
-      <Menu.Items className={classes.menuItems}>
-        <div className={classes.menu}>
-          {options.map(({ Icon, value, label }) => (
-            <Menu.Item
-              isActive={equals(value, elementList)}
-              key={value}
-              onClick={() => formatList(value)}
-            >
-              <Icon aria-label={t(label)} />
-            </Menu.Item>
-          ))}
-        </div>
-      </Menu.Items>
-    </Menu>
-  );
-};
-
-export default ListButton;

package/src/RichTextEditor/plugins/ToolbarPlugin/MacrosButton.tsx

@@ -1,75 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { createCommand, LexicalCommand } from 'lexical';
-
-import MacrosIcon from '@mui/icons-material/TerminalOutlined';
-
-import { Menu } from '../../../components';
-
-import { useStyles } from './ToolbarPlugin.styles';
-
-const LowPriority = 1;
-
-interface Props {
-  disabled: boolean;
-}
-
-export const standardMacros = [
-  '{{SHORTDATETIME}}',
-  '{{LONGDATETIME}}',
-  '{{ALIAS}}',
-  '{{ID}}',
-  '{{NAME}}',
-  '{{OUTPUT}}',
-  '{{STATE}}'
-];
-
-const MacrosButton = ({ disabled }: Props): JSX.Element => {
-  const { classes } = useStyles();
-
-  const [editor] = useLexicalComposerContext();
-
-  const INSERT_MACROS_COMMAND: LexicalCommand<string> = createCommand();
-
-  const onClick = (macro): void => {
-    editor.dispatchCommand(INSERT_MACROS_COMMAND, macro);
-  };
-
-  editor.registerCommand(
-    INSERT_MACROS_COMMAND,
-    (payload: string) => {
-      if (!editor) {
-        return false;
-      }
-
-      document.execCommand('insertText', false, payload);
-
-      return true;
-    },
-    LowPriority
-  );
-
-  return (
-    <Menu>
-      <Menu.Button
-        ariaLabel="Macros"
-        className={classes.button}
-        disabled={disabled}
-      >
-        <MacrosIcon />
-      </Menu.Button>
-      <Menu.Items className={classes.menuItems}>
-        {standardMacros.map((name) => (
-          <Menu.Item
-            className={classes.menuItem}
-            key={name}
-            onClick={(): void => onClick(name)}
-          >
-            {name}
-          </Menu.Item>
-        ))}
-      </Menu.Items>
-    </Menu>
-  );
-};
-
-export default MacrosButton;

package/src/RichTextEditor/plugins/ToolbarPlugin/ToolbarPlugin.styles.ts

@@ -1,32 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { alpha } from '@mui/system';
-
-export const useStyles = makeStyles()((theme) => ({
-  button: {
-    color: theme.palette.text.primary
-  },
-  buttonSelected: {
-    backgroundColor: alpha(
-      theme.palette.primary.main,
-      theme.palette.action.activatedOpacity
-    )
-  },
-  menu: {
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  menuItem: {
-    '&, &.MuiMenuItem-root': {
-      fontSize: theme.typography.body2.fontSize
-    }
-  },
-  menuItems: {
-    '& > .MuiPaper-root.MuiMenu-paper': {
-      minWidth: 0
-    },
-    '& ul, & ul.MuiMenu-list': {
-      padding: 0
-    }
-  }
-}));

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.styles.ts

@@ -1,50 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-const useStyles = makeStyles()((theme) => ({
-  button: {
-    height: '100%',
-    padding: theme.spacing(0, 0.5)
-  },
-  buttonContent: {
-    alignItems: 'center',
-    columnGap: theme.spacing(1),
-    display: 'flex'
-  },
-  containerDates: {
-    display: 'flex',
-    [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column',
-      gap: theme.spacing(0.5)
-    }
-  },
-  date: {
-    minWidth: theme.spacing(12),
-    textAlign: 'start'
-  },
-  error: {
-    textAlign: 'center'
-  },
-  label: {
-    minWidth: theme.spacing(3.5),
-    textAlign: 'end'
-  },
-
-  picker: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(1),
-    justifyItems: 'center',
-    padding: theme.spacing(1, 2)
-  },
-  timeContainer: {
-    alignItems: 'center',
-    columnGap: theme.spacing(0.5),
-    display: 'flex',
-    flexDirection: 'row',
-    [theme.breakpoints.down('sm')]: {
-      alignItems: 'flex-start'
-    }
-  }
-}));
-
-export default useStyles;