Asignación de componentes de Jutro

Este documento aborda la lógica utilizada por las extensiones de interfaz de usuario del SDK de Digital a la hora de identificar qué componente de Jutro se asignará a un campo al generar un componente de campo de entidad asociado.

Tabla de referencia de asignación de componentes

En esta tabla se indica qué componente de Jutro se elegirá en cada situación. Los valores de la última columna contienen un enlace a la sección de este documento que detalla la asignación de propiedades para el componente especificado.

Tipo de propiedad simple	Caso especial	→	Componente elegido
Cualquiera	Tiene una matriz x-gw-choices	→	Select
N/C	Hace referencia a un MonetaryAmount	→	CurrencyInput
Booleano	Cualquiera	→	ToggleButtonGroup
Número	Cualquiera	→	NumberInput (caso 1)
String	El formato del esquema es gw-bigdecimal	→	NumberInput (caso 2)
String	El formato del esquema es date	→	DatePicker
String	El formato del esquema es date-time	→	DatePicker y TimePicker
String	El esquema del campo tiene una propiedad maxLength superior a 255 caracteres	→	TextArea
String	El esquema del campo tiene una propiedad maxLength inferior a 255 caracteres	→	TextInput

Asignación de propiedades predeterminadas

Estas asignaciones se utilizan en cualquier componente de Jutro, a menos que se indique lo contrario.

Accesos directos de propiedades HTML

Como se mencionó en la documentación sobre ganchos de entidad, para cada campo hay accesos directos que asignan valores de esquema a atributos estándares equivalentes para entradas HTML. Estos accesos directos se asignan a las siguientes propiedades de componentes de Jutro.

Acceso directo	Propiedad del componente de Jutro
rótulo	rótulo
deshabilitado	deshabilitado
readOnly	readOnly
obligatorio	obligatorio

Mensajes de error

Como se mencionó en la documentación sobre ganchos de entidad, la propiedad de campo errors mostrará errores relacionados con un campo específico. Se utilizará una matriz de todos los strings de mensajes devueltos por esta propiedad como valor para la propiedad stateMessages del componente de Jutro asociado.

Funciones onChange

La propiedad predeterminada onChange para los componentes de Jutro se definirá como (e, newValue) => setState(newValue). Esta función utiliza el acceso directo al campo setState para actualizar el valor de un campo específico del estado.

Componente selección

Si hay una matriz x-gw-choices para una propiedad, se renderizará con un componente selección independientemente de su tipo.

Usando las propiedades selectProps o overrideProps puede pasar cualquier propiedad Select. Consulte la documentación sobre propiedades del componente selección para obtener más detalles.

Consulte la sección sobre asignación de propiedades predeterminadas para comprender cómo se asignan los valores de las propiedades.

Aspectos adicionales que deben tenerse en cuenta:

• La propiedad placeholder se definirá como { defaultMessage: 'Select an option', id: 'jutro.select.placeholder'}.
• La opción showPlaceholderAsOption se establecerá en true.
• La propiedad onChange será una función que asigne la propiedad id del valor del componente a la propiedad code del estado (e, newValue) => setState(newValue ? { code: newValue.id } : undefined).
• Cada elemento de una matriz x-gw-choices es un valor de elección; estos elementos se utilizan para definir las propiedades de los componentes secundarios SelectOption mediante la siguiente asignación:

{choices.map(({ code, name, description }) => (
                <SelectOption key={`option_${code}`} value={{id: code, label: name ?? description ?? code}} />
            ))}

Note: Además, una propiedad también puede tener una matriz x-gw-forbidden que designe opciones prohibidas de la matriz x-gw-choices. No se creará ningún componente SelectOption para las opciones prohibidas.

Componente CurrencyInput

Si el esquema del campo hace referencia a un MonetaryAmount, se renderizará utilizando un CurrencyInput.

Usando las propiedades currencyInputProps o overrideProps puede pasar cualquier propiedad CurrencyInput. Consulte la documentación sobre propiedades del componente CurrencyInput para obtener más detalles.

Consulte la sección sobre asignación de propiedades predeterminadas para comprender cómo se asignan los valores de las propiedades.

Aspectos adicionales que deben tenerse en cuenta:

• La propiedad availableCurrencies del componente siempre será la matriz de un solo elemento ['USD'].
• Se requiere la conversión de tipo entre el tipo de esquema del SDK de Digital (string) y el tipo de componente de Jutro (number):
  • valor: { amount: state?.amount ? Number(state.amount) : undefined, currency: 'USD' }
  • onChange: (e, newValue) => setState(newValue?.amount ? { amount: String(newValue.amount), currency: 'USD' } : undefined)

Componente ToggleButtonGroup

Si el campo es un tipo boolean, se definirá con un ToggleButtonGroup. Tendrá dos componentes secundarios ToggleButton, donde el botón rotulado “Sí” corresponde al valor true en el estado y el botón rotulado “No” corresponde al valor false en el estado.

Usando las propiedades toggleButtonProps o overrideProps puede pasar cualquier propiedad ToggleButton. Consulte la documentación sobre propiedades del componente ToggleButton para obtener más detalles.

Aspectos adicionales que deben tenerse en cuenta:

• Se requiere la conversión de tipo entre el tipo de esquema del SDK de Digital (boolean) y el tipo de componente de Jutro (string):
  • valor: state === true ? "yes" : state === false ? "no" : undefined
  • onChange: (e, newValue) => setState(newValue === "yes" ? true : false)

NumberInput (caso 1)

Si el tipo del SDK generado del campo es un number, se renderizará mediante un NumberInput.

Usando las propiedades numberInputProps o overrideProps puede pasar cualquier propiedad NumberInput. Consulte la documentación sobre propiedades del componente NumberInput para obtener más detalles.

Consulte la sección sobre asignación de propiedades predeterminadas para comprender cómo se asignan los valores de las propiedades.

NumberInput (caso 2)

Si el tipo del SDK generado del campo es un string pero su formato es gw-bigdecimal, se renderizará mediante un NumberInput.

Usando las propiedades numberInputProps o overrideProps puede pasar cualquier propiedad NumberInput. Consulte la documentación sobre propiedades del componente NumberInput para obtener más detalles.

Consulte la sección sobre asignación de propiedades predeterminadas para comprender cómo se asignan los valores de las propiedades.

Aspectos adicionales que deben tenerse en cuenta:

• Se requiere la conversión de tipo entre el tipo de esquema del SDK de Digital (string) y el tipo de componente de Jutro (number):
  • valor: state ? Number(state) : undefined
  • onChange: (e, newValue) => setState(newValue?.toString())

DatePicker

Si el tipo del SDK generado del campo es un string pero su formato es date, se renderizará mediante un componente DatePicker.

Usando las propiedades datePickerProps o overrideProps puede pasar cualquier propiedad DatePicker. Consulte la documentación sobre propiedades del componente DatePicker para obtener más detalles.

Consulte la sección sobre asignación de propiedades predeterminadas para comprender cómo se asignan los valores de las propiedades.

Aspectos adicionales que deben tenerse en cuenta:

Se requiere la conversión de tipo entre el tipo de esquema del SDK de Digital (string) y el tipo de componente de Jutro (JutroDate). Se utiliza un gancho personalizado para convertir el string en el valor de estado de la entidad en un objeto JutroDate. La función onChange también utiliza una función personalizada para convertir un objeto JutroDate en un string de fecha antes de actualizar el estado.

DatePicker y TimePicker

Si el tipo del SDK generado del campo es un string pero su formato es date-time, se renderizará utilizando dos componentes: un DatePicker y un TimePicker.

Usando la propiedad datePickerProps puede pasar cualquier propiedad DatePicker. Consulte la documentación sobre propiedades del componente DatePicker para obtener más detalles. Usando la propiedad timePickerProps puede pasar cualquier propiedad TimePicker. Consulte la documentación sobre propiedades del componente TimePicker para obtener más detalles.

El uso de datePickerProps o timePickerProps solo cambiará las propiedades en los componentes DatePicker y TimePicker, respectivamente. overrideProps pueden ser propiedades pasadas que aparecen en cualquiera de los componentes DatePicker o TimePicker, pero actualizará la propiedad en ambos. Por ejemplo, overrideProps: {label: "Custom label"} dará el mismo texto de rótulo a ambos componentes.

Consulte la sección sobre asignación de propiedades predeterminadas para comprender cómo se asignan los valores de las propiedades.

Aspectos adicionales que deben tenerse en cuenta:

Se requiere la conversión de tipo entre el tipo de esquema del SDK de Digital (string) y el tipo de componente de Jutro (JutroDate y JutroTime). Un gancho personalizado divide el string en el estado en estados de fecha y hora separados, que se aplican al componente de fecha u hora apropiado. Este gancho personalizado también define una función personalizada onChange que se ejecuta cuando se cambia cualquiera de los componentes y genera un nuevo string de fecha y hora con el valor actual de los dos componentes.

Componente texto

Si el tipo del SDK generado del campo es un string y no tiene los formatos mencionados en las secciones anteriores, se renderizará en un componente TextInput o TextArea. La elección del componente depende de si la propiedad maxLength tiene más de 255 caracteres.

Usando la propiedad textInputProps puede pasar cualquier propiedad TextInput. Consulte la documentación sobre propiedades del componente TimeInput para obtener más detalles. Usando la propiedad textAreaProps puede pasar cualquier propiedad TextArea. Consulte la documentación sobre propiedades del componente TextArea para obtener más detalles.

El uso de textInputProps o textAreaProps solo cambiará las propiedades en los componentes TextInput y TextArea, respectivamente. El código para renderizar los componentes TextInput o TextArea estará presente independientemente del valor de maxLength, sin embargo, solo se renderizará uno de los dos componentes. Por eso, si se utiliza la propiedad <componenent-name>Prop incorrecta para invalidar las propiedades predeterminadas, es posible que los cambios no sean visibles. overrideProps pueden ser propiedades pasadas que aparecen en cualquiera de los componentes TextInput o TextArea, pero actualizará la propiedad en ambos. Por ejemplo, overrideProps: {label: "Custom label"} dará el mismo texto de rótulo a ambos componentes.