Mini Widgets
Input
Input en React
Captura texto, números, fecha o hora. El ejemplo filtra mediante el estado de React y muestra la respuesta al confirmar o restablecer.
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 { ArcWidgetInput } 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 [query, setQuery] = useState(''); const [last, setLast] = useState(''); return ( <> <ArcWidgetInput id="search" data={{ value: query, type: 'text', width: '280px', placeholderSettings: { value: t('Suchen …', 'Search …', 'Buscar …'), }, liveUpdate: { debounce: 300, }, reset: { visible: true, }, }} onChange={(value) => setQuery(String(value ?? ''))} onActions={(_value, source) => setLast(source)} /> <p aria-live="polite"> {t('Suche', 'Search', 'Búsqueda')}: {query || t('Alle', 'All', 'Todos')}{' '} · {t('Letztes Ereignis', 'Last event', 'Último evento')}: {last || '–'} </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 ArcWidgetInputData. 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>.
onChange
Adopta el nuevo valor de entrada en tu estado.
onChange?: (value: string | number | null) => void | Promise<void>;
onActions
Notifica la confirmación o el restablecimiento. El valor es un string; source distingue ambos procesos.
onActions?: (value: string, source: 'submit' | 'reset') => 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.
title
Etiqueta; como slot también es posible con JSX.
Tipo: ArcWidgetSlot.
placeholder
Aviso cuando el valor está vacío.
Tipo: string.
type
Tipo de entrada. En el ejemplo se usa texto.
Tipo: 'text' | 'number' | 'date' | 'time' | 'textarea' | string.
value
Valor a mostrar o actualmente en edición.
Tipo: unknown.
disabled
Desactiva la entrada.
Tipo: boolean.
tempStorage
Suprime el callback de cambio; solo para valores mantenidos deliberadamente en local.
Tipo: boolean.
suffix
Contenido después de la etiqueta o unidad.
Tipo: ArcWidgetSlot.
width
Ancho del widget como valor de tamaño.
Tipo: string.
height
Alto del widget, p. ej. "320px". Los valores en porcentaje necesitan un contenedor padre con altura fija.
Tipo: string.
alignX
Alineación horizontal.
Tipo: string.
paddingX
Espaciado interno a izquierda y derecha.
Tipo: string.
paddingY
Espaciado interno arriba y abajo.
Tipo: string.
fontColor
Color de la fuente.
Tipo: string.
fontSize
Tamaño de fuente como valor CSS.
Tipo: string.
fontWeight
Grosor de la fuente.
Tipo: string | number.
backgroundColor
Color de fondo.
Tipo: string.
borderWidth
Grosor del borde.
Tipo: string.
borderColor
Color del borde.
Tipo: string.
borderRadius
Redondeo de las esquinas.
Tipo: string.
autocomplete
Autocompletado de la entrada.
Tipo: boolean.
editable
Editabilidad del contenido.
Tipo: boolean.
focusAction
Ajustes al enfocar, por ejemplo autoFocus.
Tipo: { autoFocus?: boolean; [key: string]: unknown }.
placeholderSettings
Texto y presentación del campo vacío.
Tipo: ArcWidgetInputPlaceholderSettings.
labelSettings
Etiqueta y su alineación.
Tipo: ArcWidgetInputLabelSettings.
numberFormat
Decimales y separadores para números.
Tipo: ArcWidgetInputNumberFormat.
numpad
Teclado en pantalla para entradas numéricas.
Tipo: ArcWidgetInputNumpad.
reset
Configuración de la función de restablecimiento.
Tipo: ArcWidgetInputReset.
timeSettings
Rango horario y rejilla; las unidades son milisegundos.
Tipo: { format?: string; minuteStep?: number; showNow?: boolean; [key: string]: unknown }.
liveUpdate
Adopción continua al escribir texto, opcionalmente con retraso (debounce) y longitud mínima.
Tipo: boolean | { debounce?: number; minLength?: number; actions?: boolean; [key: string]: unknown }.
Comportamiento y límites
onChange entrega el nuevo valor; onActions(value, source) notifica confirmación o reset con source: "submit" | "reset".
- Para búsquedas es adecuado
liveUpdate: { debounce: 200, minLength: 0 }. Sin live-update se adopta al confirmar o salir del campo.
- Con
tempStorage: true el valor permanece local en el widget y onChange no se dispara; usa esto solo de forma deliberada.
- El numpad numérico confirma mediante Fertig, blur o Enter.
liveUpdate no actúa ahí como en texto. reset debe configurarse para un reset visible.
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 ArcWidgetInputReset {
title?: ArcWidgetSlot;
hide?: boolean;
visible?: boolean;
value?: unknown;
icon?: ArcWidgetSlot;
color?: string;
backgroundColor?: string;
borderRadius?: string;
[key: string]: unknown;
}
export interface ArcWidgetInputNumberFormat { digits?: number; decimalSeparator?: string; thousandSeparator?: string; }
export interface ArcWidgetInputNumpad { enabled?: boolean; size?: string; openOnFocus?: boolean; allowNegative?: boolean; maxDecimals?: number; suffix?: string; [key: string]: unknown; }
export interface ArcWidgetInputPlaceholderSettings { value?: string; fontColor?: string; backgroundColor?: string; [key: string]: unknown; }
export interface ArcWidgetInputLabelSettings { title?: ArcWidgetSlot; fontSize?: string; fontColor?: string; alignX?: string; gap?: string; [key: string]: unknown; }
export interface ArcWidgetInputData extends Omit<ArcWidgetBaseData, 'actions'> { title?: ArcWidgetSlot; placeholder?: string; type?: 'text' | 'number' | 'date' | 'time' | 'textarea' | string; value?: unknown; disabled?: boolean; tempStorage?: boolean; suffix?: ArcWidgetSlot; width?: string; height?: string; alignX?: string; paddingX?: string; paddingY?: string; fontColor?: string; fontSize?: string; fontWeight?: string | number; backgroundColor?: string; borderWidth?: string; borderColor?: string; borderRadius?: string; autocomplete?: boolean; editable?: boolean; focusAction?: { autoFocus?: boolean; [key: string]: unknown }; placeholderSettings?: ArcWidgetInputPlaceholderSettings; labelSettings?: ArcWidgetInputLabelSettings; numberFormat?: ArcWidgetInputNumberFormat; numpad?: ArcWidgetInputNumpad; reset?: ArcWidgetInputReset; timeSettings?: { format?: string; minuteStep?: number; showNow?: boolean; [key: string]: unknown }; liveUpdate?: boolean | { debounce?: number; minLength?: number; actions?: boolean; [key: string]: unknown }; }
export interface ArcWidgetInputProps extends ArcReactWidgetProps<ArcWidgetInputData> { onChange?: (value: string | number | null) => void | Promise<void>; onActions?: (value: string, source: 'submit' | 'reset') => void; }</code></pre>