Entrada de divisa

Entrada de divisa en Storybook

Note: Hay versiones obsoletas de este componente. Consulte una versión de los documentos anterior a la 10.0.x.

Uso

Descripción general

Un campo divisa es un campo de entrada mejorado que permite a los usuarios ingresar una cantidad de dinero en una moneda específica.

Cuándo se debe utilizar

Cuando necesita que los usuarios ingresen dinero en una moneda específica, como euros y dólares.

Cuándo no se debe utilizar

Cuando deba ingresar un valor numérico y aumentarlo o disminuirlo gradualmente, utilice la entrada de número.

Formato

Anatomía

1. Rótulo: Describe el propósito de un campo de entrada.
2. Texto de ayuda (opcional): Proporciona contexto adicional, sugerencias o información útil para ayudar al usuario. A menudo se utiliza para explicar requisitos específicos, a fin de que se complete correctamente un campo.
3. Código de divisa o símbolo: Especifica y muestra el tipo de moneda, lo que ayuda a los usuarios a ingresar y comprender con precisión los valores monetarios.
4. Campo de entrada de divisa: Contenedor, que consta de un relleno y un contorno, en el que el usuario ingresa datos.

Posición del rótulo

El rótulo del campo de entrada de divisa puede aparecer en la parte superior (predeterminada y recomendada) o a la izquierda de la entrada misma.

Códigos y símbolos de divisa

Los códigos de divisa siguen la norma ISO 4217. Al configurar el componente, puede cambiar de código de divisa a símbolo (por ejemplo, USD a $).

En el caso de monedas múltiples, los códigos o símbolos de divisas aparecen en una lista cerrada y se ordenan alfabéticamente.

Contenido

Pautas generales de redacción

• En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
• Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
• Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
• Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
• Las palabras y las oraciones deben ser breves.

Inclusión de un rótulo

Coloque un rótulo claro y visible fuera del campo de entrada de divisa. Un campo de entrada sin rótulo es ambiguo e inaccesible.

Coloque un rótulo permanente fuera del campo.

No dé por sentado que el campo se entiende por sí solo sin un rótulo.

Uso del texto de ayuda

Use el texto de ayuda para proporcionar orientación sobre qué ingresar y cómo hacerlo. Estos son algunos ejemplos de lo que podría incluir en el texto de ayuda:

• Contexto para ayudar al usuario, por ejemplo, cómo se utilizará la información.
• Sugerencias sobre qué tipo de información va dentro del campo de entrada.
• Ejemplos o requisitos de formato.

Utilice el texto de ayuda solo para la información pertinente. No use texto de ayuda que simplemente repita la misma información que aparece en el rótulo.

En el texto de ayuda, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto. Al mostrar ejemplos de formato, no es necesario que termine con un punto.

Utilice texto de ayuda para proporcionar asistencia adicional o contexto al usuario.

No use texto de ayuda que simplemente repita la misma información que aparece en el rótulo.

No utilice texto de marcador de posición

No coloque texto de marcador de posición en el campo de entrada de divisa. El texto de marcador de posición sobrecarga la memoria a corto plazo de los usuarios porque desaparece una vez que se ingresa un valor. También supone una carga adicional para los usuarios con discapacidades visuales y cognitivas.

En lugar de eso, coloque sugerencias e instrucciones, incluidos ejemplos y requisitos de formato, fuera del campo.

Fuente: Nielsen Norman Group

Coloque sugerencias e instrucciones, incluidos ejemplos y requisitos de formato, fuera del campo.

No agregue marcadores de posición al campo de entrada de divisa.

Uso del texto de error para guiar a los usuarios

El texto del mensaje de error indica a un usuario cómo corregir el error. En el caso de los campos de entrada de divisa, los errores suelen estar relacionados con problemas de validación que deben corregirse. Por ejemplo, en un proceso de presentación de siniestros en el que el usuario no completa un campo obligatorio para el costo estimado de reparación, podría usar texto de error, por ejemplo: “Ingrese el costo estimado de las reparaciones”.

En el texto de error, use mayúsculas como se usan en las oraciones. Escriba 1 o 2 oraciones cortas y completas que terminen con un punto.

Use el texto de error para guiar al usuario y mostrarle una solución.

No escriba mensajes de error ambiguos ni deje a los usuarios pensando cómo resolver un problema.

Marcado de los campos obligatorios

Utilice un asterisco (*) para indicar los campos obligatorios. El asterisco precede al rótulo del campo. Esto ayuda a los usuarios a identificar fácilmente qué campos son obligatorios escaneando solo el carácter más a la izquierda del rótulo.

Además de marcar los campos obligatorios con un asterisco, se recomienda incluir instrucciones claras en la parte superior del formulario, como “Todos los campos marcados con un asterisco son obligatorios”, para garantizar que los usuarios comprendan el significado del asterisco.

Utilice un asterisco para indicar que un campo es obligatorio.

No use un asterisco para indicar algo que sea opcional.

Uso de mayúsculas al igual que en las oraciones

Los rótulos de campo aparecen con mayúsculas como se usan en las oraciones.

Consulte la guía de estilo de texto de la interfaz de usuario para obtener más información sobre cómo implementar el uso de mayúsculas y minúsculas.

Use mayúsculas como se usan en las oraciones.

No use mayúsculas en todas las palabras. Esto dificulta la legibilidad.

Comportamientos

Estados

El campo de entrada de divisa aparece sin valor (predeterminado), texto de marcador de posición o una entrada rellena.

Ilustración	Estado	Descripción
	Sin valor (predeterminado)	Indica al usuario que no se ha ingresado ningún valor y que no hay un marcador de posición.
	Marcador de posición	Indica al usuario que no se ha ingresado ningún valor. El marcador de posición aparece atenuado.
	Entrada rellena	Indica al usuario que la entrada está completa con datos.

Los campos de entrada de divisa también tienen estados interactivos para habilitado, en foco, deshabilitado, error, solo lectura y solo visualización.

Estado	Descripción
Habilitado	Indica al usuario que el elemento está habilitado para la interacción.
En foco	Indica al usuario qué elemento de la interfaz de usuario del sistema está el foco.
Deshabilitado	Indica al usuario que el valor de entrada no se puede cambiar debido a factores locales. Por ejemplo, una casilla de verificación sobre el campo de entrada debe estar marcada para acceder a este campo de entrada. El usuario puede habilitarla interactuando con la página.
Error	Indica que el usuario cometió un error de validación. El texto del error proporciona información a los usuarios para solucionarlo.
Solo lectura	Indica al usuario que el valor de entrada no se puede cambiar debido a factores externos. Por ejemplo, la falta de acceso de escritura. El usuario puede hacer algo para habilitarlo, por ejemplo, ponerse en contacto con un administrador.
Solo visualización	El estado de solo visualización se utiliza en dos casos: Un elemento de interfaz de usuario se utiliza en el modo de visualización. Un elemento de la interfaz de usuario se muestra en el modo de edición, pero nunca se puede editar. Este estado se llamaba “solo lectura” antes.

Interacciones

Ratón

Para activar una entrada de divisa, los usuarios deben hacer clic en el área dentro del borde.

Teclado

El elemento de entrada es accesible a través del teclado. Los usuarios pueden entrar y salir del componente mediante la tecla TAB.

Lector de pantalla

El campo de entrada está asociado a su rótulo a través de una relación “for/id”. Al verificar la perilla 'required' en Storybook, el valor aria-required cambia de 'true' to 'false'.

Separador de miles

El separador de miles no se muestra mientras el usuario ingresa los datos. Aparece después de que se completa la entrada y el usuario hace clic o se aleja del campo con el tabulador.

Accesibilidad

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

• La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
• El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
• El elemento se puede operar con teclado, así como con mouse.
• Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Cuando utilice este componente en su aplicación, asegúrese de comprobar lo siguiente:

• Que los rótulos y las instrucciones sean significativas y concisas. Proporcione instrucciones complementarias si fuera necesario.
• Que el componente muestre la divisa correcta (el valor predeterminado es USD).
• Si el campo de entrada es obligatorio, marque la casilla de verificación aria-required en Storybook.

Note: Hay versiones obsoletas de este componente. Consulte una versión de los documentos anterior a la 10.0.x.

Código

<CurrencyInput
  availableCurrencies={['USD', 'EUR']}
  label="Currency input component"
/>;

Instrucción de importación

import { CurrencyInput } from '@jutro/components';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

availableCurrenciesobligatorio

Tipo

ISOCurrencyCodes

Descripción

List of ISO 4217 currency codes. At least one currency needs to be defined in an array The first currency will be used as a default one.

labelobligatorio

Tipo

IntlMessageShape

Descripción

Label associated with input field, also passed as a default value to aria-label.

className

Tipo

string

Descripción

CSS class name for this component.

currencyDisplay

Tipo

'code' | 'symbol'

Descripción

Whether the currency will be displayed as a symbol or as text.

Valor predeterminado

'symbol'

decimalPlaces

Tipo

number

Descripción

The number of decimal places to display in the value. If it is set, the user is prevented from entering too many digits after the decimal point. If the value or initialValue props have too many digits after the decimal point, the displayed figure is rounded to the closest valid value.

Valor predeterminado

2

disabled

Tipo

boolean

Descripción

If set to true, component is rendered in disabled state.

displayOnly

Tipo

boolean

Descripción

If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.

hideGrouping

Tipo

boolean

Descripción

If set to true, it will hide intl currency value formatting on currency input.

hideLabel

Tipo

boolean

Descripción

If set to true, the label is not visible.

initialValue

Tipo

{ amount: number, currency: ISOCurrencyCode }

amount

Tipo

number

Descripción

The number to display.

currency

Tipo

ISOCurrencyCode

Descripción

The ISO Currency Code for this value's currency. Must be an element of the ISO Currency code array.

Descripción

Initial value of input. If value prop is specified along with this prop, this prop's value is discarded. If the decimalPlaces prop is specified along with this prop, the displayed value is rounded to the closest valid value.

labelPosition

Tipo

'top' | 'left'

Descripción

Allows to select label position.

Valor predeterminado

'top'

onChange

Tipo

function (React.ChangeEvent<HTMLInputElement>, {amount: number, currency: ISOCurrencyCode})

amount

Tipo

number

Descripción

The number to display.

currency

Tipo

ISOCurrencyCode

Descripción

The ISO Currency Code for this value's currency. Must be an element of the ISO Currency code array.

Descripción

Callback invoked when component value is changed.

placeholder

Tipo

IntlMessageShape

Descripción

Placeholder to display on an empty component.

readOnly

Tipo

boolean

Descripción

If set to true, component is rendered in a read-only state. For values in plain text, consider using displayOnly.

required

Tipo

boolean

Descripción

If set to true, component is rendered as required and label has asterisk.

secondaryLabel

Tipo

IntlMessageShape

Descripción

Secondary label text to display.

stateMessages

Tipo

{ error: string[] }

Descripción

An object with a list of error messages for the current state.

tooltip

Tipo

{ text: intlMessageShape, trigger: string } | intlMessageShape

text

Tipo

IntlMessageShape

Descripción

Text to show tooltip content.

trigger

Tipo

string

Descripción

The trigger to show the tooltip.

Descripción

Text to be displayed in the tooltip or tooltip object that includes: text - to show tooltip content, trigger - to set tooltip trigger.

value

Tipo

{ amount: number, currency: ISOCurrencyCode }

amount

Tipo

number

Descripción

The number to display.

currency

Tipo

ISOCurrencyCode

Descripción

The ISO Currency Code for this value's currency. Must be an element of the ISO Currency code array.

Descripción

Value of the input. Takes precedence over initialValue. If this prop is passed, the component works in controlled mode and its value only changes if this prop changes. If the decimalPlaces prop is specified along with this prop, the displayed value is rounded to the closest valid value.

Tipos ISOCurrencyCodes y ISOCurrencyCode

El tipo ISOCurrencyCodes es una matriz de string de códigos de divisa ISO 4217.

El tipo ISOCurrencyCode es un string con un valor de cualquier elemento de la matriz ISOCurrencyCodes.

  [
'AED',
'AFN',
'ALL',
'AMD',
'ANG',
'AOA',
'ARS',
'AUD',
'AWG',
'AZN',
'BAM',
'BBD',
'BDT',
'BGN',
'BHD',
'BIF',
'BMD',
'BND',
'BOB',
'BOV',
'BRL',
'BSD',
'BTN',
'BWP',
'BYN',
'BZD',
'CAD',
'CDF',
'CHE',
'CHF',
'CHW',
'CLF',
'CLP',
'CNY',
'COP',
'COU',
'CRC',
'CUC',
'CUP',
'CVE',
'CZK',
'DJF',
'DKK',
'DOP',
'DZD',
'EGP',
'ERN',
'ETB',
'EUR',
'FJD',
'FKP',
'GBP',
'GEL',
'GHS',
'GIP',
'GMD',
'GNF',
'GTQ',
'GYD',
'HKD',
'HNL',
'HTG',
'HUF',
'IDR',
'ILS',
'INR',
'IQD',
'IRR',
'ISK',
'JMD',
'JOD',
'JPY',
'KES',
'KGS',
'KHR',
'KMF',
'KPW',
'KRW',
'KWD',
'KYD',
'KZT',
'LAK',
'LBP',
'LKR',
'LRD',
'LSL',
'LYD',
'MAD',
'MDL',
'MGA',
'MKD',
'MMK',
'MNT',
'MOP',
'MRU',
'MUR',
'MVR',
'MWK',
'MXN',
'MXV',
'MYR',
'MZN',
'NAD',
'NGN',
'NIO',
'NOK',
'NPR',
'NZD',
'OMR',
'PAB',
'PEN',
'PGK',
'PHP',
'PKR',
'PLN',
'PYG',
'QAR',
'RON',
'RSD',
'RUB',
'RWF',
'SAR',
'SBD',
'SCR',
'SDG',
'SEK',
'SGD',
'SHP',
'SLE',
'SLL',
'SOS',
'SRD',
'SSP',
'STN',
'SVC',
'SYP',
'SZL',
'THB',
'TJS',
'TMT',
'TND',
'TOP',
'TRY',
'TTD',
'TWD',
'TZS',
'UAH',
'UGX',
'USD',
'USN',
'UYI',
'UYU',
'UYW',
'UZS',
'VED',
'VES',
'VND',
'VUV',
'WST',
'XAF',
'XAG',
'XAU',
'XBA',
'XBB',
'XBC',
'XBD',
'XCD',
'XDR',
'XOF',
'XPD',
'XPF',
'XPT',
'XSU',
'XTS',
'XUA',
'XXX',
'YER',
'ZAR',
'ZMW',
'ZWL',
]

Ganchos

No hay ganchos para CurrencyInput.

Claves de traducción

Solo hay 2 claves de traducción asociadas al componente CurrencyInput, ambas relacionadas con el texto predeterminado aria-label:

Clave	Se usa para
jutro-components.fields.CurrencyDisplay.ariaLabel	Valor de aria-label para menú desplegable Divisas
jutro-components.fields.CurrencyInput.ariaLabel	Valor de aria-label para el campo Descripción

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Están disponibles las siguientes opciones:

• Tokens de diseño
• Propiedad className
• Paso de atributos HTML nativos
• Referencia con controladores imperativos
• Propiedad de evento nativa

Paso de propiedades HTML al componente

Puede utilizar atributos de entrada HTML, excepto aquellos que estén invalidados por Jutro. Estos atributos se asignarán al elemento de monto input.

<CurrencyInput
  availableCurrencies={['USD', 'EUR']}
  initialValue={{
    amount: 5,
    currency: 'USD',
  }}
  label="Currency input component"
  id="amountID1"
  max={10}
/>

El resultado de pasar las propiedades id y max es que formará parte del input HTML que se crea en el DOM HTML. En el caso de max, evitará que el usuario escriba cualquier valor por encima de 10 (solo se puede hacer pegando directamente el valor).

Referencia con controladores imperativos

Las entradas de Jutro han implementado controladores imperativos como mecanismo para proporcionar acceso a algunas características nativas comunes que podrían ser útiles para usted. Puede utilizar las siguientes características:

• Establecer el foco para que usted establezca el foco del usuario en un componente específico.

• Desenfocar para eliminar el foco del componente.

• Desplazarse hasta el componente para poder llevar al usuario a un área específica de la página.

Estas características se proporcionan a través de la propiedad ref, que las expone de la siguiente manera:

    const componentRef = useRef(null);

    const setFocus = () => {
        componentRef?.current.focus();
    }

    const removeFocus = () => {
        componentRef?.current.blur();
    }

    const scrollToComponent = () => {
        componentRef?.current.scrollIntoView();
    }

    <Component ref={componentRef}>

Es posible que se incluyan más opciones en el futuro.

Comportamientos personalizados de CurrencyInput

CurrencyInput tiene algunos comportamientos personalizados implementados como parte del componente:

Divisas únicas frente a divisas múltiples

La propiedad availableCurrencies controla esto. Si proporciona más de un código de divisa, el componente muestra un menú desplegable para permitir la selección. Esto no se aplica cuando las propiedades displayOnly o readOnly se establecen en true.

Manejo de valores no válidos

Si las propiedades initialValue o value se asignan con un código de divisa que no está incluido en la propiedad availableCurrencies, se produce un error en la renderización del componente.

Código de divisa no válido en 'initialValue.currency', 'availableCurrencies' no contiene: GBP

Asignación de divisa predeterminada

Si las propiedades initialValue o value no especifican la divisa que se seleccionará de forma predeterminada, el componente utilizará la primera divisa que se pase en la propiedad availableCurrencies como predeterminada.

Limitaciones de la entrada de moneda controlada

Puede utilizar los estados de React para controlar el valor de una CurrencyInput, pero existen algunas limitaciones a la hora de hacerlo.

1. El evento onChange solo se activa si la entrada tiene el foco. Si el valor se actualiza como un componente controlado, la devolución de llamada de onChange no se ejecuta.
2. Si CurrencyInput tiene una propiedad decimalPlaces y recibe un valor de una actualización de estado de React, el valor mostrado se redondea al valor válido más cercano.

Por ejemplo, en el siguiente código puede usar la primera entrada para cambiar el valor de la segunda entrada. Al hacerlo, observará los siguientes dos comportamientos:

1. Si se ingresa un valor mayor que 100 o menor que 0 en la primera entrada, los mensajes de validación no se muestran en la segunda entrada porque su devolución de llamada no se ejecuta.
2. Si se ingresa algún valor decimal, el valor que se muestra en la segunda entrada se redondea al entero más cercano.

export function CurrencyInputDecimalPlacesControlledExample() {
  const [firstInputValue, setFirstInputValue] = useState({
    amount: 200,
    currency: 'USD',
  });
  const [validationMessages, setValidationMessages] = useState({});
  const max = 100;
  const min = 0;

  const handleFirstInputChange = useCallback((event, newValue) => {
    console.log(newValue);
    if (newValue && newValue.amount !== undefined && newValue.currency) {
      setFirstInputValue(newValue);
    }
  }, []);

  const handleSecondInputChange = useCallback(
    (event, newValue) => {
      setValidationMessages({});

      if (
        newValue &&
        newValue.amount !== undefined &&
        (newValue.amount > max || newValue.amount < min)
      ) {
        setValidationMessages({
          error: ['Value must be between 0 and 100'],
        });
      }
    },
    [max, min]
  );

  return (
    <CurrencyInput
      label="First currency input"
      secondaryLabel="Change this value to see the second input update"
      onChange={handleFirstInputChange}
      availableCurrencies={['USD']}
    />
    <CurrencyInput
      label="Second currency input"
      secondaryLabel="Value controlled by the first input"
      value={firstInputValue}
      decimalPlaces={0}
      onChange={handleSecondInputChange}
      availableCurrencies={['USD']}
      stateMessages={validationMessages}
      min={min}
      max={max}
    />
  );
}

Precedencia de disabled, displayOnly y readOnly

Si dos o más de las propiedades disabled, displayOnly, y readOnly se establecen en true al mismo tiempo, la prioridad es la siguiente:

displayOnly > readOnly > disabled

Validación de entradas del usuario

Aunque algunos componentes de Jutro pueden proporcionar características complementarias o una función de ayuda para facilitar el proceso de validación, es su responsabilidad, como desarrollador, manejar la validación de cualquier entrada del usuario (con o sin ayudantes complementarios) y decidir qué mensajes de error se mostrarán.

Los componentes de Jutro se comportan en función de la implementación del desarrollador.

¿Cuándo se muestran los mensajes de error?

Los mensajes de error solo se muestran cuando los pasa al componente a través de la propiedad stateMessages. Esta propiedad recibe un objeto con el siguiente contenido:

{
  error: ['error message 1', 'error message 2', 'error message N'];
}

El componente muestra cada mensaje de error proporcionado en el mismo orden que en la matriz.

¿Cuándo se produce la validación?

Esta decisión es suya, en calidad de desarrollador. Dado que los componentes no determinan cuándo se realiza la validación ni cuándo se debe mostrar el error, debe implementar la lógica para manejarla de acuerdo con los requisitos del proyecto, por ejemplo, mientras el usuario edita el contenido, cuando el componente pierde el foco y en el envío de formularios.

Información heredada

¿Está utilizando el componente heredado CurrencyField?

• Para ver los documentos de los componentes antiguos, consulte una versión de la documentación anterior a la 10.0.
• Estos componentes heredados también están disponibles en Storybook: CurrencyField

Note: Hay versiones obsoletas de este componente. Consulte una versión de los documentos anterior a la 10.0.x.

Ejemplos

Consulte la sección Uso para obtener más información sobre cómo y cuándo utilizar el componente CurrencyInput.

Ejemplo de entrada de divisa básica

El componente CurrencyInput es parte del paquete @jutro/components. Se utiliza para renderizar una entrada para los valores de la divisa. Es obligatorio proporcionar una matriz de códigos de divisa ISO 4217 a la propiedad availableCurrencies para enumerar las divisas que un usuario puede seleccionar.

<CurrencyInput
  availableCurrencies={['USD', 'EUR']}
  label="Currency input component"
/>;

Entrada de divisa con una sola divisa disponible

Si solo se proporciona una opción de divisa, la selección no se puede editar y muestra esa opción.

<CurrencyInput
  availableCurrencies={['USD']}
  label="Currency input component"
/>;

Entrada de divisa con un valor inicial

Para agregar un valor inicial a una CurrencyInput, debe proporcionar tanto un monto como una divisa.

<CurrencyInput
  availableCurrencies={['USD']}
  label="Currency input component"
  initialValue={{
    amount: 15467,
    currency: 'USD',
  }}
/>;

Opciones de visualización del código de divisa

Puede configurar una CurrencyInput para que muestre un símbolo de divisa o el código ISO 4217.

<CurrencyInput
  availableCurrencies={['USD']}
  label="Currency input component"
  initialValue={{
    amount: 15467,
    currency: 'USD',
  }}
  currencyDisplay='code'
/>
<CurrencyInput
  availableCurrencies={['USD']}
  label="Currency input component"
  initialValue={{
    amount: 15467,
    currency: 'USD',
  }}
  currencyDisplay='symbol'
/>

Lugares decimales

La propiedad decimalPlaces especifica la cantidad de decimales que se mostrarán. Limita a los usuarios el ingreso de demasiados dígitos después de la coma decimal, pero si se establecen las propiedades initialValue o value, el número se redondea al valor válido más cercano.

Por ejemplo, si decimalPlaces se establece en 0, el usuario no puede ingresar ningún dígito. Sin embargo, las propiedades initialValue o value pueden tener dígitos decimales.

<CurrencyInput
  label="Currency input component limited decimals"
  placeholder="Enter a value"
  secondaryLabel="Try to add an additional decimal"
  decimalPlaces={0}
  availableCurrencies={['USD']}
/>
<CurrencyInput
  label="Currency input with initial value"
  secondaryLabel="Rounded up from 5.66"
  initialValue={{currency: 'USD', amount: 5.66}}
  decimalPlaces={0}
  availableCurrencies={['USD']}
/>
<CurrencyInput
  label="Currency input with value"
  secondaryLabel="Rounded up from 5.66"
  value={{currency: 'USD', amount: 5.66}}
  decimalPlaces={0}
  availableCurrencies={['USD']}
/>

Validación de entradas del usuario tras un cambio

El evento onChange toma el nuevo valor que ingrese como su segundo parámetro y lo utiliza para la validación. Si desea mostrar un error, use la propiedad stateMessages:

import { useCallback, useState } from 'react';
import { CurrencyInput } from '@jutro/components';

export function CurrencyInputValidation() {
  const [validationMessages, setValidationMessages] = useState({});

  const onChange = useCallback((e, newValue) => {
    const componentValue = newValue.amount;

    if (!componentValue || componentValue != 10) {
      setValidationMessages({
        error: ["The value must be 10. If it's not, we won't not accept it."],
      });
    } else {
      setValidationMessages({});
    }
  }, []);

  return (
    <CurrencyInput
      availableCurrencies={['USD']}
      label="Accept only 10"
      secondaryLabel="Will raise an error except when value is 10"
      stateMessages={validationMessages}
      onChange={onChange}
    />
  );
}

Componente controlado

Puede utilizar la propiedad value para el caso del componente controlado:

import { useState } from 'react';
import { CurrencyInput, NumberInput } from '@jutro/components';

export function CurrencyInputControlled() {
  const [updatedValue, setAmount] = useState({
    amount: 200,
    currency: 'USD',
  });

  const onChange = (e, newValue) => {
    setAmount({ amount: newValue, currency: 'USD' });
  };

  return (
    <div>
      <NumberInput
        label="Enter the amount to be assigned to the next field"
        onChange={onChange}
      />
      <CurrencyInput
        availableCurrencies={['USD']}
        label="Changes with the above"
        secondaryLabel="This value is automatically updated when the value in the first field changes"
        value={updatedValue}
      />
    </div>
  );
}

Acceso a la propiedad ref para establecer el foco (controlador imperativo)

La entrada de divisa y otras entradas permiten el uso de una propiedad ref para acceder a algunos comportamientos nativos. Sin embargo, solo se exponen ciertas características. En este ejemplo, al hacer clic en el botón, el foco se establecerá automáticamente en la entrada de divisa que aparezca a continuación.

import { useRef } from 'react';
import { CurrencyInput, Button } from '@jutro/components';

export function CurrencyInputRef() {
  const currencyRef = useRef(null);

  const setFocus = (e) => {
    currencyRef?.current?.focus();
  };

  return (
    <div>
      <Button
        label="Set focus on currency input"
        onClick={setFocus}></Button>
      <CurrencyInput
        availableCurrencies={['USD']}
        label="Get the focus from the button"
        ref={currencyRef}
      />
    </div>
  );
}

Registro de cambios

10.13.0

Se agregó una nueva propiedad decimalPlaces al componente CurrencyInput. Se establece en 2 de forma predeterminada e impide que el usuario ingrese dígitos adicionales después del límite decimalPlaces.

Las propiedades initialValue o value pueden tener dígitos adicionales después de la coma decimal, pero el valor mostrado se redondea al valor válido más cercano.

10.0.0

Se introdujo un nuevo componente @jutro/components/CurrencyInput que sustituye a CurrencyField.

El componente anterior CurrencyField quedó obsoleto y se trasladó al paquete @jutro/legacy. Para ver su documentación, consulte la versión de la documentación anterior a la 10.0.

Ubicación del componente original:

• CurrencyField: @jutro/components/CurrencyField

Ubicación del componente actualizado:

• CurrencyField: @jutro/legacy/components/CurrencyField

Los codemods están disponibles para cambiar automáticamente el nombre de las importaciones existentes.