fix

Author: antonio06

src/common/components/mock-components/front-rich-components/input-stepper.tsx

@@ -22,8 +22,17 @@ export const getInputStepperShapeSizeRestrictions = (): ShapeSizeRestrictions =>
 const shapeType: ShapeType = 'inputStepper';
 
 export const InputStepperShape = forwardRef<any, ShapeProps>((props, ref) => {
-  const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } =
-    props;
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    text,
+    onSelected,
+    otherProps,
+    ...shapeProps
+  } = props;
 
   const restrictedSize = fitSizeToShapeSizeRestrictions(
     InputStepperShapeSizeRestrictions,
@@ -33,7 +42,7 @@ export const InputStepperShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const handleButtonWidth = (restrictedWidth: number): number => {
+  const getButtonWidth = (restrictedWidth: number): number => {
     const buttonWidth = restrictedWidth * 0.3;
     const minButtonWidth = 30;
     const maxButtonWidth = 70;
@@ -43,7 +52,7 @@ export const InputStepperShape = forwardRef<any, ShapeProps>((props, ref) => {
     return buttonWidth;
   };
 
-  const buttonWidth = handleButtonWidth(restrictedWidth);
+  const buttonWidth = getButtonWidth(restrictedWidth);
   const buttonHeight = restrictedHeight / 2;
 
   const commonGroupProps = useGroupShapeProps(
@@ -60,7 +69,6 @@ export const InputStepperShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   return (
     <Group {...commonGroupProps} {...shapeProps}>
-      {/* Caja del input */}
       <Rect
         x={0}
         y={0}
@@ -77,7 +85,7 @@ export const InputStepperShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth - buttonWidth - 8}
         x={0} // Alinear a la derecha dependiendo de la cantidad de dígitos
         y={restrictedHeight / 2 - 6} // Centrar verticalmente
-        text={'0'}
+        text={text}
         fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE + 2}
         fill={textColor}

src/pods/canvas/model/inline-editable.model.ts

@@ -84,6 +84,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'loading-indicator',
   'gauge',
   'fileTree',
+  'inputStepper',
 ]);
 
 // Map of ShapeTypes to their default text values
@@ -125,6 +126,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   browser: 'https://example.com',
   modalDialog: 'Title here...',
   'loading-indicator': 'Loading...',
+  inputStepper: '0',
 };
 
 export const generateDefaultTextValue = (

src/pods/canvas/model/shape-other-props.utils.ts

@@ -292,8 +292,6 @@ export const generateDefaultOtherProps = (
         stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,
         backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
         textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
-        borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
-        disabled: INPUT_SHAPE.DEFAULT_DISABLED,
         strokeStyle: [],
       };
     default:

src/pods/canvas/model/transformer.model.ts

@@ -71,6 +71,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'buttonBar':
     case 'slider':
     case 'chip':
+    case 'inputStepper':
       return ['middle-left', 'middle-right'];
     case 'verticalLine':
     case 'verticalScrollBar':

src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx

@@ -13,18 +13,22 @@ export const renderInputStepper = (
     <InputStepperShape
       id={shape.id}
       key={shape.id}
-      ref={shapeRefs.current[shape.id]}
       x={shape.x}
       y={shape.y}
-      name="shape"
       width={shape.width}
       height={shape.height}
+      name="shape"
       draggable
       typeOfTransformer={shape.typeOfTransformer}
       onSelected={handleSelected}
+      ref={shapeRefs.current[shape.id]}
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      editType={shape.editType}
+      isEditable={true}
+      text={shape.text}
+      otherProps={shape.otherProps}
     />
   );
 };