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 index a4f7f9db..838234ae 100644 --- 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((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((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} /> 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 index 442f9da7..dd30a5a1 100644 --- 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 index 1719e50c..84c97869 100644 --- 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 index 04eaebd2..839d1257 100644 --- 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 && ( + + updateOtherPropsOnSelected('selectedBackgroundColor', color) + } + /> + )} ); };