Add a new prop to select the color of the selected item band on the l…

…ist box
Lemoncode · Oct 9, 2024 · 3ccef86 · 3ccef86
1 parent b8f0027
commit 3ccef86
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git a/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx b/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx
@@ -69,10 +69,14 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle, fill, borderRadius, textColor } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const {
+    stroke,
+    strokeStyle,
+    fill,
+    borderRadius,
+    textColor,
+    selectedBackgroundColor,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -106,8 +110,10 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
               y={0 + index * singleHeaderHeight}
               width={restrictedWidth}
               height={singleHeaderHeight}
-              fill={selectedItem === index ? 'lightblue' : fill}
-              stroke={selectedItem === index ? 'skyblue' : 'transparent'}
+              fill={selectedItem === index ? selectedBackgroundColor : fill}
+              stroke={
+                selectedItem === index ? selectedBackgroundColor : 'transparent'
+              }
               strokeWidth={selectedItem === index ? 1 : 0}
             />
             <Text

diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts
@@ -42,6 +42,11 @@ export const useShapeProps = (
     return typeof prog === 'string' ? parseFloat(prog) : prog;
   }, [otherProps?.progress]);
 
+  const selectedBackgroundColor = useMemo(
+    () => otherProps?.selectedBackgroundColor ?? '#add8e6',
+    [otherProps?.selectedBackgroundColor]
+  );
+
   return {
     stroke,
     fill,
@@ -50,5 +55,6 @@ export const useShapeProps = (
     borderRadius,
     isOn,
     progress,
+    selectedBackgroundColor,
   };
 };
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
@@ -161,6 +161,7 @@ export interface OtherProps {
   progress?: string;
   borderRadius?: string;
   activeElement?: number;
+  selectedBackgroundColor?: string;
 }
 
 export const BASE_ICONS_URL = '/icons/';

diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts
@@ -393,7 +393,6 @@ export const generateDefaultOtherProps = (
       };
     case 'button':
     case 'textarea':
-    case 'listbox':
     case 'vertical-menu':
     case 'horizontal-menu':
       return {
@@ -444,6 +443,13 @@ export const generateDefaultOtherProps = (
         strokeStyle: [],
         borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
       };
+    case 'listbox':
+      return {
+        stroke: '#000000',
+        backgroundColor: '#ffffff',
+        textColor: '#000000',
+        selectedBackgroundColor: '#add8e6',
+      };
 
     case 'circle':
     case 'star':

diff --git a/src/pods/properties/properties.pod.tsx b/src/pods/properties/properties.pod.tsx
@@ -148,6 +148,15 @@ export const PropertiesPod = () => {
           }
         />
       )}
+      {selectedShapeData?.otherProps?.selectedBackgroundColor != undefined && (
+        <ColorPicker
+          label="Selected Background"
+          color={selectedShapeData.otherProps.selectedBackgroundColor}
+          onChange={color =>
+            updateOtherPropsOnSelected('selectedBackgroundColor', color)
+          }
+        />
+      )}
     </div>
   );
 };