[1275] Add support for Label widget in Form Description Editor

Bug: #1275 Signed-off-by: Florian Barbin <florian.barbin@obeo.fr>
eclipse-sirius · Aug 25, 2022 · 6f916f8 · 6f916f8
1 parent 2d64ee5
commit 6f916f8
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 0 deletions.
diff --git a/...tend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx b/...tend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx
@@ -22,6 +22,7 @@ import Typography from '@material-ui/core/Typography';
 import ArrowDropDownCircleIcon from '@material-ui/icons/ArrowDropDownCircle';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import LabelOutlinedIcon from '@material-ui/icons/LabelOutlined';
 import CloseIcon from '@material-ui/icons/Close';
 import PieChartIcon from '@material-ui/icons/PieChart';
 import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
@@ -369,6 +370,18 @@ export const FormDescriptionEditorRepresentation = ({
               MultiSelect
             </Typography>
           </div>
+          <div
+            id="Label"
+            data-testid="FormDescriptionEditor-Label"
+            draggable="true"
+            className={classes.widgetKind}
+            onDragStart={handleDragStart}
+          >
+            <LabelOutlinedIcon />
+            <Typography variant="caption" gutterBottom>
+              Label
+            </Typography>
+          </div>
           <div
             id="Button"
             data-testid="FormDescriptionEditor-Button"

diff --git a/...sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.types.ts b/...sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.types.ts
@@ -18,6 +18,7 @@ export type Kind =
   | 'Select'
   | 'MultiSelect'
   | 'Button'
+  | 'Label'
   | 'BarChart'
   | 'PieChart'
   | 'FlexboxContainer';
diff --git a/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LabelWidget.tsx b/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LabelWidget.tsx
@@ -0,0 +1,50 @@
+/*******************************************************************************
+ * Copyright (c) 2022 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import { WidgetProps } from './WidgetEntry.types';
+import { useEffect, useRef, useState } from 'react';
+
+const useStyles = makeStyles((theme) => ({
+  selected: {
+    color: theme.palette.primary.main,
+  },
+}));
+
+export const LabelWidget = ({ widget, selection }: WidgetProps) => {
+  const classes = useStyles();
+
+  const [selected, setSelected] = useState<boolean>(false);
+
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current && selection.entries.find((entry) => entry.id === widget.id)) {
+      ref.current.focus();
+      setSelected(true);
+    } else {
+      setSelected(false);
+    }
+  }, [selection, widget]);
+
+  return (
+    <div>
+      <Typography variant="subtitle2" className={selected ? classes.selected : ''}>
+        {widget.label}
+      </Typography>
+      <Typography ref={ref} onFocus={() => setSelected(true)} onBlur={() => setSelected(false)} tabIndex={0}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      </Typography>
+    </div>
+  );
+};
diff --git a/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx b/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx
@@ -48,6 +48,7 @@ import { TextfieldWidget } from './TextfieldWidget';
 import { WidgetEntryProps, WidgetEntryState, WidgetEntryStyleProps } from './WidgetEntry.types';
 import { isKind } from './WidgetOperations';
 import { ButtonWidget } from './ButtonWidget';
+import { LabelWidget } from './LabelWidget';
 
 const useWidgetEntryStyles = makeStyles<Theme, WidgetEntryStyleProps>(() => ({
   widget: {
@@ -315,6 +316,16 @@ export const WidgetEntry = ({
         onDropBefore={onDropBefore}
       />
     );
+  } else if (widget.kind === 'Label') {
+    widgetElement = (
+      <LabelWidget
+        data-testid={widget.id}
+        widget={widget}
+        selection={selection}
+        setSelection={setSelection}
+        onDropBefore={onDropBefore}
+      />
+    );
   } else if (widget.kind === 'BarChart') {
     widgetElement = (
       <BarChartWidget

diff --git a/...riptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetOperations.tsx b/...riptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetOperations.tsx
@@ -21,6 +21,7 @@ export const isKind = (value: string): value is Kind => {
     value === 'Select' ||
     value === 'MultiSelect' ||
     value === 'Button' ||
+    value === 'Label' ||
     value === 'BarChart' ||
     value === 'PieChart' ||
     value === 'FlexboxContainer'