Mini Widgets
Custom NumPad
Numpad en React
Introduce números mediante un teclado en pantalla, por ejemplo cantidades o importes. El resultado se mantiene primero como un string formateado.
Referencia para @arcrider/arcwidgets-react@0.1.0-alpha.5. <a href="/docs/react/intro/setup-react">Instalación</a> · <a href="/docs/react/intro/react-components">Todos los componentes</a>.
Ejemplo completo
import { ArcWidgetNumpad } from '@arcrider/arcwidgets-react';
import { useState } from 'react';
const lang = document.documentElement.lang.startsWith('en') ? 'en' : document.documentElement.lang.startsWith('es') ? 'es' : 'de'; const t = (de: string, en: string, es: string) => lang === 'en' ? en : lang === 'es' ? es : de;
export default function Example() { const [value, setValue] = useState('0'); return ( <> <div style={{ width: 280, height: 360 }}> <ArcWidgetNumpad id="quantity" data={{ currentValue: value, actionTitle: t('Übernehmen', 'Apply', 'Aplicar'), maxDecimals: 2, suffix: t('Stk', 'pcs', 'uds'), keyboard: false, }} onSubmit={setValue} /> </div> <p aria-live="polite"> {t('Übernommen', 'Committed', 'Confirmado')}: {value} </p> </> ); }</code></pre>
Props del componente
id
ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.
data
Configuración de tipo ArcWidgetNumpadData. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.
onAction
Fallback opcional (type: string, ...args: unknown[]) => unknown. El callback concreto tiene prioridad. Detalles: <a href="/docs/react/patterns/react-state-events">Estado y eventos</a>.
onSubmit
String de entrada confirmado.
onSubmit?: (value: string) => void;
Configuración
Los siguientes campos pertenecen a data. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.
currentValue
Valor actual mostrado.
Tipo: string | number.
actionTitle
Etiqueta de la confirmación.
Tipo: string.
backgroundColor
Color de fondo.
Tipo: string.
fontColor
Color del texto.
Tipo: string.
display
Representación del display numérico.
Tipo: ArcWidgetNumpadDisplay.
suffix
Contenido tras la etiqueta o unidad.
Tipo: string.
clearOnFirstInput
Reemplaza el valor anterior en la primera entrada.
Tipo: boolean.
decimalSeparator
Separador decimal del string de entrada.
Tipo: string.
maxDecimals
Número máximo de decimales.
Tipo: number.
keyboard
Manejo mediante el teclado físico.
Tipo: boolean | ArcWidgetNumpadKeyboard.
Comportamiento y límites
onSubmit entrega un string, p. ej. "12,50". Normaliza el separador decimal configurado antes de un cálculo numérico y comprueba el resultado.
currentValue rellena el display. clearOnFirstInput es útil al sobrescribir un valor existente.
Los campos ArcWidgetSlot admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. <a href="/docs/react/patterns/nested-widget-descriptors">Combinar contenidos</a>.
Tipos de datos
Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como ArcWidgetSlot, ArcWidgetStyles y ArcReactWidgetProps. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.
export interface ArcWidgetNumpadDisplay {
fontColor?: string;
height?: string;
}
export interface ArcWidgetNumpadKeyboard { enabled?: boolean; submitOnEnter?: boolean; }
export interface ArcWidgetNumpadData extends Omit<ArcWidgetBaseData, 'actions'> { currentValue?: string | number; actionTitle?: string; backgroundColor?: string; fontColor?: string; display?: ArcWidgetNumpadDisplay; suffix?: string; clearOnFirstInput?: boolean; decimalSeparator?: string; maxDecimals?: number; keyboard?: boolean | ArcWidgetNumpadKeyboard; }
export interface ArcWidgetNumpadProps extends ArcReactWidgetProps<ArcWidgetNumpadData> { onSubmit?: (value: string) => void; }</code></pre>