Merge pull request #386 from Lemoncode/feature/#351-horizontal-menu-a…

…dd-active-selected-item

add horizontal menu active selected item and refactor

src/common/components/front-rich-components/horizontal-menu/horizontal-menu.tsx

@@ -1,15 +1,18 @@
 import { Group, Rect, Text } from 'react-konva';
 import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef } from 'react';
 import { ShapeProps } from '../../front-components/shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { BASIC_SHAPE } from '../../front-components/shape.const';
 import { useShapeComponentSelection } from '../../shapes/use-shape-selection.hook';
-import { mapHorizontalMenuTextToItems } from './hozontal-menu.business';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import {
+  extractCSVHeaders,
+  splitCSVContentIntoRows,
+} from '@/common/utils/active-element-selector.utils';
 
 const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = {
-  minWidth: 75,
+  minWidth: 200,
   minHeight: 25,
   maxWidth: -1,
   maxHeight: 100,
@@ -35,36 +38,17 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
     ...shapeProps
   } = props;
 
-  const [selectedItem, setSelectedItem] = useState<number | null>(null);
-  const [items, setItems] = useState<string[]>([
-    '[*]Home, About, Services, Contact',
-  ]);
-  const handleClick = (itemIndex: number) => {
-    setSelectedItem(itemIndex);
-    onSelected(id, 'horizontal-menu', true);
-  };
+  const csvData = splitCSVContentIntoRows(text);
+  const headers = extractCSVHeaders(csvData[0]);
+  const itemLabels = headers.map(header => header.text);
 
-  useEffect(() => {
-    if (typeof text === 'string') {
-      const { items, selectedItemIndex } = mapHorizontalMenuTextToItems(text);
-      setItems(items);
-      setSelectedItem(selectedItemIndex);
-    } else {
-      setItems([]);
-    }
-  }, [text]);
+  const numberOfItems = itemLabels.length;
+  const itemSpacing = 10;
 
-  const numberOfItems = items.length;
-  const minItemWidth = 100;
-  const itemSpacing = 20;
-  const totalWidth = Math.max(
-    minItemWidth * numberOfItems + itemSpacing * (numberOfItems + 1),
-    width
-  );
   const { width: restrictedWidth, height: restrictedHeight } =
     fitSizeToShapeSizeRestrictions(
       horizontalMenuShapeSizeRestrictions,
-      totalWidth,
+      width,
       height
     );
   const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1);
@@ -76,8 +60,11 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
     otherProps,
     BASIC_SHAPE
   );
+
   const itemVerticalPadding = 4;
 
+  const activeSelected = otherProps?.activeElement ?? 0;
+
   return (
     <Group
       x={x}
@@ -100,21 +87,19 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
         cornerRadius={borderRadius}
       />
 
-      {items.map((e: string, index: number) => (
-        <Group key={index} onClick={() => handleClick(index)}>
+      {itemLabels.map((header, index) => (
+        <Group key={index}>
           <Rect
             x={itemSpacing * (index + 1) + itemWidth * index}
             y={itemVerticalPadding}
             width={itemWidth}
             height={restrictedHeight - 2 * itemVerticalPadding}
-            fill={selectedItem === index ? 'lightblue' : fill}
-            stroke={selectedItem === index ? 'skyblue' : 'transparent'}
-            strokeWidth={selectedItem === index ? 1 : 0}
+            fill={index === activeSelected ? 'lightblue' : fill}
           />
           <Text
             x={itemSpacing * (index + 1) + itemWidth * index}
             y={restrictedHeight / 2 - 8}
-            text={e}
+            text={header}
             fontFamily="Arial"
             fontSize={16}
             fill={textColor}

src/pods/canvas/canvas.model.ts

@@ -316,7 +316,7 @@ const generateDefaultTextValue = (shapeType: ShapeType): string | undefined => {
     case 'listbox':
       return '[*]Item\nItem1\nItem2\nItem3\nItem4\nItem5\nItem6';
     case 'horizontal-menu':
-      return '[*]Home, About, Services, Contact';
+      return 'Home, About, Services, Contact';
     case 'vertical-menu':
       return 'Option 1\nOption 2\n----\nOption 3\nOption 4';
     case 'heading1':
@@ -396,6 +396,14 @@ export const generateDefaultOtherProps = (
     case 'listbox':
     case 'vertical-menu':
     case 'horizontal-menu':
+      return {
+        stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,
+        backgroundColor: BASIC_SHAPE.DEFAULT_FILL_BACKGROUND,
+        textColor: BASIC_SHAPE.DEFAULT_FILL_TEXT,
+        strokeStyle: [],
+        borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`,
+        activeElement: 0,
+      };
     case 'datepickerinput':
     case 'timepickerinput':
       return {

src/pods/properties/components/active-element-selector/active-element-selector.component.tsx

@@ -26,7 +26,8 @@ export const ActiveElementSelector: React.FC<Props> = ({
   };
 
   // Checking whether the type is tabsBar and parsing the text
-  const isElementTypeSupported = type === 'tabsBar' || 'buttonBar';
+  const isElementTypeSupported =
+    type === 'tabsBar' || 'buttonBar' || 'horizontal-menu';
   const elementNames =
     isElementTypeSupported && text ? extractElementNames(text) : [];