Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create an input stepper component (place it under rich components) #216

Open
brauliodiez opened this issue Aug 18, 2024 · 0 comments · May be fixed by #387
Open

Create an input stepper component (place it under rich components) #216

brauliodiez opened this issue Aug 18, 2024 · 0 comments · May be fixed by #387
Assignees

Comments

@brauliodiez
Copy link
Member

image
<svg width="120" height="50" xmlns="http://www.w3.org/2000/svg">
  <!-- Caja del input -->
  <rect x="10" y="10" width="60" height="30" style="fill:white;stroke:black;stroke-width:2"/>

  <!-- Texto del input -->
  <text x="60" y="30" font-family="Arial" font-size="16" fill="black" text-anchor="end">0</text>

  <!-- Botón de incremento (flecha arriba) -->
  <rect x="70" y="10" width="20" height="15" style="fill:lightgray;stroke:black;stroke-width:2"/>
  <text x="77" y="22" font-family="Arial" font-size="14" fill="black">▲</text>

  <!-- Botón de decremento (flecha abajo) -->
  <rect x="70" y="25" width="20" height="15" style="fill:lightgray;stroke:black;stroke-width:2"/>
  <text x="77" y="37" font-family="Arial" font-size="14" fill="black">▼</text>
</svg>

Tsx (just take it as starting point):

import React, { useState, forwardRef } from 'react';
import { Group, Rect, Text } from 'react-konva';
import { ShapeConfig } from 'konva/lib/Shape';

interface InputWithStepperProps extends ShapeConfig {
  id: string;
  x: number;
  y: number;
  width: number;
  height: number;
  initialValue?: number;
}

export const InputWithStepper = forwardRef<any, InputWithStepperProps>(
  ({ x, y, width, height, initialValue = 0, id, ...shapeProps }, ref) => {
    const [value, setValue] = useState(initialValue);

    const handleIncrement = () => {
      setValue(value + 1);
    };

    const handleDecrement = () => {
      setValue(value - 1);
    };

    const inputWidth = width - 30;  // Reservar espacio para el stepper
    const buttonHeight = height / 2;

    return (
      <Group x={x} y={y} ref={ref} {...shapeProps}>
        {/* Caja del input */}
        <Rect
          x={0}
          y={0}
          width={inputWidth / 2}  // Reducir ancho a la mitad
          height={height}
          fill="white"
          stroke="black"
          strokeWidth={2}
          cornerRadius={0}  // Sin bordes redondeados
        />

        {/* Texto del input */}
        <Text
          x={inputWidth / 2 - 10}  // Alinear a la derecha
          y={height / 2 - 8}  // Centrar verticalmente
          text={value.toString()}
          fontFamily="Arial"
          fontSize={16}
          fill="black"
          align="right"
        />

        {/* Botón de incremento (flecha arriba) */}
        <Group x={inputWidth / 2} y={0} onClick={handleIncrement}>
          <Rect
            x={0}
            y={0}
            width={30}
            height={buttonHeight}
            fill="lightgray"
            stroke="black"
            strokeWidth={2}
          />
          <Text
            x={10}
            y={buttonHeight / 2 - 8}
            text="▲"
            fontFamily="Arial"
            fontSize={14}
            fill="black"
          />
        </Group>

        {/* Botón de decremento (flecha abajo) */}
        <Group x={inputWidth / 2} y={buttonHeight} onClick={handleDecrement}>
          <Rect
            x={0}
            y={0}
            width={30}
            height={buttonHeight}
            fill="lightgray"
            stroke="black"
            strokeWidth={2}
          />
          <Text
            x={10}
            y={buttonHeight / 2 - 8}
            text="▼"
            fontFamily="Arial"
            fontSize={14}
            fill="black"
          />
        </Group>
      </Group>
    );
  }
);

export default InputWithStepper;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: In Review
Development

Successfully merging a pull request may close this issue.

2 participants