Merge pull request #141 from manugallegob/feature/#115-Make-the-combo…

…box-editable-(inline-edit) #115-make combobox editable inline
Lemoncode · Aug 8, 2024 · 2ef468b · 2ef468b
2 parents 0433d4f + ea7ab35
commit 2ef468b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/common/components/front-components/combobox-shape.tsx b/src/common/components/front-components/combobox-shape.tsx
@@ -17,7 +17,7 @@ export const getComboBoxShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   comboBoxShapeRestrictions;
 
 export const ComboBoxShape = forwardRef<any, ShapeProps>(
-  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(comboBoxShapeRestrictions, width, height);
 
@@ -53,7 +53,7 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>(
         <Text
           x={10}
           y={(height - 25) / 2 + 5}
-          text="Select an option"
+          text={text}
           fontSize={20}
           fontFamily="Arial"
           fill="black"

diff --git a/src/pods/canvas/canvas.model.ts b/src/pods/canvas/canvas.model.ts
@@ -102,6 +102,7 @@ const doesShapeAllowInlineEdition = (shapeType: ShapeType): boolean => {
   switch (shapeType) {
     case 'input':
     case 'label':
+    case 'combobox':
     case 'button':
       return true;
     default:
@@ -115,6 +116,8 @@ const generateDefaultTextValue = (shapeType: ShapeType): string | undefined => {
       return '';
     case 'label':
       return 'Label';
+    case 'combobox':
+      return 'Select an option';
     case 'button':
       return 'Click Me!';
     default:

diff --git a/src/pods/canvas/shape-renderer/simple-component/combobox.renderer.tsx b/src/pods/canvas/shape-renderer/simple-component/combobox.renderer.tsx
@@ -24,6 +24,8 @@ export const renderComboBox = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
     />
   );
 };