MantineINRView#

@palmyralabs/rt-forms-mantine · form/view/MantineINRView.tsx

Overview#

Read-only numeric display with Indian-numbering formatting. Renders monetary / numeric / percentage values, and — for 'amount' format — offers a click-to-toggle between digits (₹ 1,25,00,000) and words (1 Crore 25 Lakhs). The only view in this folder that pulls in Mantine (Tooltip) and react-icons for the toggle chrome.

Props — `ITextFieldDefinition & TextViewAttributeDefinition`#

Note this view redeclares TextViewAttributeDefinition locally; it is not the shared one used by the other views — viewType is absent, and valueFormat / maxFraction are added:

interface TextViewAttributeDefinition {
  textAlign?:   'left' | 'right' | 'center';
  variant?:     'standard' | 'outlined' | 'filled';
  valueFormat?: 'amount' | 'number' | 'text' | 'percentage';
  maxFraction?: number;
}

Prop	Purpose
`valueFormat`	`'amount'` (default) — INR digits + optional words · `'number'` — plain formatted number · `'percentage'` — appends `%`, uses `toFixed(maxFraction \|\| 2)` · `'text'` — raw text
`maxFraction`	Decimal places for `'percentage'` (default 2)

Ref — `ITextField`#

Spread getFieldHandler(fieldManager) + focus().

Example#

<MantineINRView
  attribute="totalAmount"
  label="Total"
  valueFormat="amount"
  textAlign="right"
  variant="outlined"
/>

<MantineINRView
  attribute="gstRate"
  label="GST"
  valueFormat="percentage"
  maxFraction={2}
/>

<MantineINRView
  attribute="units"
  label="Units"
  valueFormat="number"
/>

Notes#

The digit-vs-words toggle is rendered only for valueFormat === 'amount'; for 'number' and 'percentage' the toggle UI is hidden and the block right-aligns the formatted value.
Indian groupings (Crores / Lakhs / Thousand / Hundred / Rupees) come from the package-local formatAmountText helper; digit formatting delegates to formatAmount in ../../FormatCurrency.