CalculatedField

CalculatedField evalúa una cadena de fórmula (ej. "{precio} * {cantidad}") sobre un contexto de evaluación (objeto plano cuyos keys coinciden con los placeholders) y muestra el resultado. Es completamente de solo lectura; no hay interacción del usuario. Una función formatResult opcional puede formatear el valor calculado antes de mostrarlo, y onResultChange se dispara cada vez que el resultado cambia.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | formula | string | Sí | — | Cadena de fórmula a evaluar. Los placeholders usan sintaxis de llaves, ej. "{qty} * {price}". | | evaluationContext | Record<string, any> | Sí | — | Objeto cuyos keys se sustituyen en la fórmula. | | label | string | No | — | Etiqueta mostrada sobre el resultado. | | description | string | No | — | Texto de ayuda mostrado debajo del resultado. | | formatResult | (value: string \| number \| null \| undefined) => string | No | — | Formateador opcional aplicado al valor calculado antes de mostrarlo. | | onResultChange | (value: string \| number \| null \| undefined) => void | No | — | Callback disparado cuando el resultado calculado cambia. | | containerStyle | React.CSSProperties | No | — | Estilos del div raíz. | | labelStyle | React.CSSProperties | No | — | Estilos del div de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del div de descripción. | | className | string | No | — | Clase CSS del div raíz. | | id | string | No | — | Atributo id del div raíz. |

Uso

Básico

import React, { useState } from 'react';
import CalculatedField from '@/components/fields/CalculatedField';

export default function Example() {
  const [qty, setQty] = useState(3);
  const [price, setPrice] = useState(150);

  return (
    <CalculatedField
      label="Total"
      formula="{qty} * {price}"
      evaluationContext={{ qty, price }}
    />
  );
}

Con formateador y callback de cambio

<CalculatedField
  label="Subtotal"
  formula="{qty} * {unitPrice}"
  evaluationContext={{ qty: 5, unitPrice: 99.99 }}
  formatResult={(val) => `$${Number(val).toFixed(2)}`}
  onResultChange={(val) => console.log('Subtotal cambió a', val)}
/>