CalculatedField

CalculatedField evaluates a formula string (e.g. "{price} * {quantity}") against an evaluation context (a plain object whose keys match the placeholders) and displays the result. It is purely read-only; no user input is involved. An optional formatResult function can format the computed value before display, and onResultChange fires whenever the result changes.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | formula | string | Yes | — | Formula string to evaluate. Placeholders use curly-brace syntax, e.g. "{qty} * {price}". | | evaluationContext | Record<string, any> | Yes | — | Object whose keys are substituted into the formula. | | label | string | No | — | Label rendered above the result. | | description | string | No | — | Helper text rendered below the result. | | formatResult | (value: string \| number \| null \| undefined) => string | No | — | Optional formatter applied to the computed value before display. | | onResultChange | (value: string \| number \| null \| undefined) => void | No | — | Callback fired whenever the computed result changes. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root div. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label div. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description div. | | className | string | No | — | CSS class name applied to the root div. | | id | string | No | — | id attribute on the root div. |

Usage

Basic

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 }}
    />
  );
}

With formatter and change callback

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