Mini Widgets
Select (Dropdown)
Select en React
Elige una opción de una lista. El valor, la etiqueta visible y las entradas activas se derivan del estado de React.
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 { ArcWidgetSelect } from '@arcrider/arcwidgets-react';
import { useState } from 'react';
const lang = document.documentElement.lang.startsWith('en') ? 'en' : document.documentElement.lang.startsWith('es') ? 'es' : 'de'; const requested = new URLSearchParams(location.search).get('data'); const pack = requested === 'empty' || requested === 'busy' ? requested : 'demo'; const t = (de: string, en: string, es: string) => lang === 'en' ? en : lang === 'es' ? es : de;
const demoOptions = [ { value: 'open', title: t('Offen', 'Open', 'Abierto') }, { value: 'work', title: t('In Arbeit', 'In progress', 'En curso') }, { value: 'done', title: t('Erledigt', 'Done', 'Hecho') }, ];
const busyOptions = [ ...demoOptions, { value: 'wait', title: t('Wartet', 'Waiting', 'En espera') }, { value: 'hold', title: t('Pausiert', 'On hold', 'En pausa') }, ];
const options = pack === 'empty' ? [] : pack === 'busy' ? busyOptions : demoOptions;
export default function Example() { const [status, setStatus] = useState<string | number | null>(null); const all = t('Alle', 'All', 'Todos'); return ( <> <ArcWidgetSelect id="status" data={{ width: '240px', currentValue: options.find((option) => option.value === status)?.title ?? all, items: options.map((option) => ({ ...option, active: option.value === status, })), reset: { title: all }, }} onChange={setStatus} /> <p aria-live="polite"> {t('Status', 'Status', 'Estado')}: {status ?? all} </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 ArcWidgetSelectData. 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;
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.
items
Entradas de la selección o de la representación; ver el tipo de dato correspondiente.
Tipo: ArcWidgetSelectItem[].
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.
itemsWidth
Ancho de la lista de selección.
Tipo: string.
itemsHeight
Alto de la lista de selección.
Tipo: string.
alignX
Alineación horizontal.
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.
borderColor
Color del borde.
Tipo: string.
borderWidth
Grosor del borde.
Tipo: string.
borderRadius
Redondeo de las esquinas.
Tipo: string.
disabled
Desactiva la entrada.
Tipo: boolean.
multiselect
Mantiene la lista abierta para selección múltiple; el callback entrega un valor individual.
Tipo: boolean.
emptyValue
Etiqueta para selección vacía.
Tipo: string.
clickPosition
Posicionamiento al abrir.
Tipo: string.
currentValue
Valor de visualización actual.
Tipo: ArcWidgetSlot.
icon
Símbolo opcional o slot de contenido admitido.
Tipo: ArcWidgetSlot.
placeholder
Aviso cuando el valor está vacío.
Tipo: string.
focusAction
Ajustes al enfocar, por ejemplo autoFocus.
Tipo: { autoFocus?: boolean; [key: string]: unknown }.
reset
Configuración de la función de restablecimiento.
Tipo: ArcWidgetSelectReset.
Comportamiento y límites
items[].value es el valor del callback. currentValue es la etiqueta visible; items[].active marca la selección. Mantén los tres actualizados desde el mismo estado.
multiselect: true mantiene la lista abierta. El callback sigue entregando el valor individual pulsado; añadir o quitar de un conjunto de selección lo implementas tú mismo.
- El reset entrega
null. Gestiona este caso de forma explícita.
En Select, en 0.1.0-alpha.5, usa texto para las etiquetas de las opciones. Los elementos JSX directos provocan un error en la comparación interna de datos; los descriptores de widget aún no se renderizan en el dropdown externalizado. El ejemplo en vivo muestra un badge separado a partir del mismo estado de selección. 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 ArcWidgetSelectItem {
title?: ArcWidgetSlot;
active?: boolean;
value?: string | number;
[key: string]: unknown;
}
export interface ArcWidgetSelectReset { title?: ArcWidgetSlot; value?: string | number; hide?: boolean; [key: string]: unknown; }
export interface ArcWidgetSelectData extends Omit<ArcWidgetBaseData, 'actions'> { items?: ArcWidgetSelectItem[]; width?: string; height?: string; itemsWidth?: string; itemsHeight?: string; alignX?: string; fontColor?: string; fontSize?: string; fontWeight?: string | number; backgroundColor?: string; borderColor?: string; borderWidth?: string; borderRadius?: string; disabled?: boolean; multiselect?: boolean; emptyValue?: string; clickPosition?: string; currentValue?: ArcWidgetSlot; icon?: ArcWidgetSlot; placeholder?: string; focusAction?: { autoFocus?: boolean; [key: string]: unknown }; reset?: ArcWidgetSelectReset; }
export interface ArcWidgetSelectProps extends ArcReactWidgetProps<ArcWidgetSelectData> { onChange?: (value: string | number | null) => void; }</code></pre>