16.11.0 • Published 5 months ago

@commercetools-uikit/localized-money-input v16.11.0

Weekly downloads
4,781
License
MIT
Repository
github
Last release
5 months ago

LocalizedMoneyInput

Description

A controlled input component for localized money values with validation states.

Installation

yarn add @commercetools-uikit/localized-money-input
npm --save install @commercetools-uikit/localized-money-input

Additionally install the peer dependencies (if not present)

yarn add react react-dom react-intl
npm --save install react react-dom react-intl

Usage

import LocalizedMoneyInput from '@commercetools-uikit/localized-money-input';

const Example = () => (
  <LocalizedMoneyInput
    value={{
      USD: { currencyCode: 'USD', amount: '12.22' },
      EUR: { currencyCode: 'EUR', amount: '41.44' },
    }}
    onChange={
      (/** event */) => {
        // alert(event.target.name, event.target.value)
      }
    }
  />
);

export default Example;

Properties

PropsTypeRequiredDefaultDescription
idstringUsed as HTML id property.
namestringThe prefix used to create a HTML name property for the amount input field (${name}.amount).
valueRecordvalue of possible currency the input doesn't accept a "currencies" prop, instead all possible currencies have to exist (with empty or filled strings) on the value: { EUR: {amount: '12.00', currencyCode: 'EUR'}, USD: {amount: '', currencyCode: 'USD'}}
onChangeFunctionSee signature.Called with the event of the input.
selectedCurrencystringthe currently selected currency
onBlurFunctionSee signature.Called when input is blurred
onFocusFunctionSee signature.Called when input is focused
hideCurrencyExpansionControlsbooleanWill hide the currency expansion controls when set to true. All currencies will be shown when set to true.
defaultExpandCurrenciesbooleanControls whether one or all currencirs are visible by default
isDisabledbooleanIndicates that the input cannot be modified (e.g not authorized, or changes currently saving).
isReadOnlybooleanIndicates that the field is displaying read-only content
placeholderRecordPlaceholder text for the input
horizontalConstraintunionPossible values:, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto''scale'Horizontal size limit of the input fields.
hasErrorbooleanIndicates that input has errors
hasWarningbooleanControl to indicate on the input if there are values that are potentially invalid
errorsRecordA map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to renderError
warningsRecordA map of warnings.
hasHighPrecisionBadgebooleanShows high precision badge in case current value uses high precision.

Signatures

Signature onChange

(event: TCustomEvent) => void

Signature onBlur

(event: TCustomEvent) => void

Signature onFocus

(event: TCustomEvent) => void

Static methods

LocalizedMoneyInput.getEmptyCurrencies

Returns array of the empty currencies

LocalizedMoneyInput.getEmptyCurrencies({});
// -> []
LocalizedMoneyInput.getEmptyCurrencies({
  USD: { currencyCode: 'USD', amount: '' },
  EUR: { currencyCode: 'EUR', amount: '' },
});
// -> ['USD', 'EUR']
LocalizedMoneyInput.getEmptyCurrencies({
  USD: { currencyCode: 'USD', amount: '12.43' },
  EUR: { currencyCode: 'EUR', amount: '' },
});
// -> ['EUR']

LocalizedMoneyInput.getHighPrecisionCurrencies

Returns array of the currencies that have high precision amount

LocalizedMoneyInput.getHighPrecisionCurrencies({});
// -> []
LocalizedMoneyInput.getHighPrecisionCurrencies({
  USD: {
    currencyCode: 'USD',
    amount: '12.2221',
  },
  EUR: {
    currencyCode: 'EUR',
    amount: '9.9999',
  },
});
// -> ['USD', 'EUR']
LocalizedMoneyInput.getHighPrecisionCurrencies({
  USD: {
    currencyCode: 'USD',
    amount: '12.43',
  },
  EUR: {
    currencyCode: 'EUR',
    amount: '0.00001',
  },
});
// -> ['EUR']

LocalizedMoneyInput.convertToMoneyValues

The convertToMoneyValues function will turn a list of LocalizedMoneyInput values into a list of MoneyValue the API can handle. It automatically converts to centPrecision or highPrecision types when the number of supplied fraction digits exceeds the number of fraction digits used by the currency. If you want to forbid highPrecision, then the form's validation needs to add an error when it sees a highPrecision price. See example below.

Here are examples of centPrecision and highPrecision prices.

// 42.00 €
[
  {
    type: 'centPrecision',
    currencyCode: 'EUR',
    centAmount: 4200,
    fractionDigits: 2,
  },
];
// 0.0123456 €
[
  {
    type: 'highPrecision',
    currencyCode: 'EUR',
    centAmount: 1,
    preciseAmount: 123456,
    fractionDigits: 7,
  },
];

LocalizedMoneyInput.parseMoneyValues

The parseMoneyValues function will turn a list of MoneyValue into a record of values the LocalizedMoneyInput component can handle.

LocalizedMoneyInput.parseMoneyValues([{ currencyCode: 'EUR', centAmount: 10 }]);

// -> { EUR: { currencyCode: 'EUR', centAmount: 10 } }

LocalizedMoneyInput.getEmptyCurrencies

The getEmptyCurrencies function will return array of currencies that don't have amount .

LocalizedMoneyInput.getEmptyCurrencies({
  EUR: { currencyCode: 'EUR', amount: '' },
  USD: { currencyCode: 'USD', amount: '12.77' },
}); // -> ['EUR']
LocalizedMoneyInput.getEmptyCurrencies({
  EUR: { currencyCode: 'EUR', amount: '12.77' },
}); // -> []

Examples

Here's an example of how LocalizedMoneyInput would be used inside a form.

import { IntlProvider } from 'react-intl';
import { Formik } from 'formik';
import omitEmpty from 'omit-empty-es';
import { ErrorMessage } from '@commercetools-uikit/messages';
import LocalizedMoneyInput from '@commercetools-uikit/localized-money-input';
// the existing document, e.g. from the database
const doc = {
  prices: [
    {
      currencyCode: 'EUR',
      centAmount: 1200,
    },
    {
      currencyCode: 'AMD',
      centAmount: 3300,
    },
  ],
};
// A function to convert a document to form values.
const docToFormValues = (doc) => ({
  // The parseMoneyValue function will turn a MoneyValue into a
  // value the LocalizedMoneyInput component can handle ({currency: amount})
  prices: LocalizedMoneyInput.parseMoneyValues(doc.prices),
});
// a function to convert form values back to a document
const formValuesToDoc = (formValues) => ({
  // The convertToMoneyValue function will convert a LocalizedMoneyInput
  // value into a value the API can handle
  // It automatically converts to centPrecision or highPrecision
  // depending on the number of supplied fraction digits and the
  // used currency code.
  // If you want to forbid highPrecision, then the form's validation
  // needs to add an error when it sees a highPrecision price.
  // See example below
  prices: LocalizedMoneyInput.convertToMoneyValues(formValues.prices),
});
const validate = (formValues) => {
  const errors = { prices: {} };
  Object.keys(formValues.prices).forEach((currency) => {
    errors.prices[currency] = {};
  });
  const emptyCurrencies = LocalizedMoneyInput.getEmptyCurrencies(
    formValues.prices
  );
  // ['EUR', 'USD']
  // This form doesn't accept high precision prices
  const highPrecisionCurrencies =
    LocalizedMoneyInput.getHighPrecisionCurrencies(formValues.prices);
  // ['CAD', 'USD']
  emptyCurrencies.forEach((emptyCurrency) => {
    errors.prices[emptyCurrency].missing = true;
  });
  highPrecisionCurrencies.forEach((highPrecisionCurrency) => {
    errors.prices[highPrecisionCurrency].highPrecision = true;
  });
  return omitEmpty(errors);
};
const initialValues = docToFormValues(doc);
const renderErrors = (errors) => {
  Object.keys(errors.prices).reduce((currency) => {
    const error =
      (errors.prices[currency] && errors.prices[currency].missing && (
        <ErrorMessage>This field is required!</ErrorMessage>
      )) ||
      (errors.prices[currency] && errors.prices[currency].highPrecision && (
        <ErrorMessage>High precision prices not supported here!</ErrorMessage>
      ));
    return {
      [currency]: touched.prices[currency] && error,
    };
  });
};
return (
  <Formik
    initialValues={initialValues}
    validate={validate}
    onSubmit={(formValues) => {
      // doc will contain "prices" holding a MoneyValue,
      // ready to be consumed by the API
      const nextDoc = formValuesToDoc(formValues);
      console.log(nextDoc);
    }}
    render={({
      values,
      errors,
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
    }) => (
      <form onSubmit={handleSubmit}>
        <LocalizedMoneyInput
          value={values.prices}
          onChange={handleChange}
          onBlur={handleBlur}
          isDisabled={isSubmitting}
          errors={renderErrors(errors)}
          horizontalConstraint={10}
        />
        <button type="submit">Submit</button>
      </form>
    )}
  />
);
16.5.0

10 months ago

16.9.0

6 months ago

16.7.3

8 months ago

16.7.2

8 months ago

16.7.1

8 months ago

16.7.0

8 months ago

16.7.5

7 months ago

16.7.4

8 months ago

16.10.0

6 months ago

16.6.1

8 months ago

16.6.0

9 months ago

16.4.1

10 months ago

16.8.0

6 months ago

16.11.0

5 months ago

16.4.0

10 months ago

16.3.0

11 months ago

16.2.1

11 months ago

16.2.0

11 months ago

16.1.1

12 months ago

16.1.0

12 months ago

15.15.0

1 year ago

15.15.1

1 year ago

16.0.0

1 year ago

15.13.2

1 year ago

15.14.3

1 year ago

15.14.1

1 year ago

15.14.2

1 year ago

15.14.0

1 year ago

15.13.1

1 year ago

15.13.0

1 year ago

15.12.0

1 year ago

15.9.0

1 year ago

15.10.0

1 year ago

15.11.2

1 year ago

15.11.0

1 year ago

15.11.1

1 year ago

15.7.0

1 year ago

15.8.0

1 year ago

15.5.0

1 year ago

15.5.1

1 year ago

15.6.0

1 year ago

15.4.0

1 year ago

15.3.0

2 years ago

15.2.4

2 years ago

15.2.1

2 years ago

15.2.2

2 years ago

15.2.3

2 years ago

15.1.1

2 years ago

15.1.2

2 years ago

15.1.0

2 years ago

15.2.0

2 years ago

15.0.0

2 years ago

14.0.2

2 years ago

14.0.3

2 years ago

14.0.6

2 years ago

13.0.4

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

13.0.2

2 years ago

13.0.3

2 years ago

13.0.0

2 years ago

13.0.1

2 years ago

12.2.9

2 years ago

12.2.5

2 years ago

12.2.6

2 years ago

12.2.7

2 years ago

12.2.4

3 years ago

12.2.3

3 years ago

12.2.2

3 years ago

12.2.1

3 years ago

12.2.0

3 years ago

12.1.0

3 years ago

12.0.12

3 years ago

12.0.8

3 years ago

12.0.7

3 years ago

12.0.3

3 years ago

12.0.4

3 years ago

12.0.6

3 years ago

12.0.2

3 years ago

12.0.0

3 years ago

11.3.0

3 years ago

11.2.1

3 years ago

11.2.0

3 years ago

11.1.0

3 years ago

11.0.2

3 years ago

11.0.1

3 years ago

10.47.4

3 years ago

10.47.3

3 years ago

10.47.0

3 years ago

10.46.3

3 years ago

10.46.2

3 years ago

10.46.1

3 years ago

10.45.0

3 years ago

10.44.4

3 years ago

10.44.3

3 years ago

10.44.2

3 years ago

10.44.1

3 years ago

10.44.0

3 years ago

10.43.3

3 years ago

10.43.2

3 years ago

10.43.1

3 years ago

10.42.3

3 years ago

10.42.2

3 years ago

10.42.0

3 years ago

10.42.1

3 years ago

10.41.0

3 years ago

10.40.1

3 years ago

10.40.0

3 years ago

10.39.8

3 years ago

10.39.7

3 years ago

10.39.6

3 years ago

10.39.2

3 years ago

10.39.4

3 years ago

10.39.3

3 years ago

10.39.1

4 years ago

10.38.0

4 years ago

10.37.1

4 years ago

10.36.1

4 years ago

10.36.0

4 years ago

10.35.2

4 years ago

10.35.1

4 years ago

10.35.0

4 years ago

10.34.0

4 years ago

10.33.0

4 years ago

10.32.0

4 years ago

10.31.0

4 years ago

10.30.1

4 years ago

10.27.1

4 years ago

10.27.0

4 years ago

10.24.0

4 years ago

10.23.0

4 years ago

10.22.1

4 years ago

10.22.0

4 years ago

10.21.0

4 years ago

10.20.0

4 years ago

10.19.0

4 years ago

10.18.7-canary.5

4 years ago

10.18.7-canary.6

4 years ago

10.18.7-canary.7

4 years ago

10.18.7-canary.4

4 years ago

10.18.7-canary.3

4 years ago

10.18.7-canary.2

4 years ago

10.18.7-canary.1

4 years ago

10.18.6-canary.1

4 years ago

10.18.7-canary.0

4 years ago

10.18.5-canary.4

4 years ago

10.18.6-canary.0

4 years ago

10.18.5-canary.3

4 years ago

10.18.5-canary.2

4 years ago

10.18.5-canary.1

4 years ago

10.18.5-canary.0

4 years ago

10.18.4

4 years ago

10.18.4-canary.9

4 years ago

10.18.4-canary.8

4 years ago

10.18.4-canary.7

4 years ago

10.18.4-canary.6

4 years ago

10.18.4-canary.3

4 years ago

10.18.4-canary.4

4 years ago

10.18.4-canary.5

4 years ago

10.18.4-canary.1

4 years ago

10.18.4-canary.2

4 years ago

10.18.4-canary.0

4 years ago

10.18.3-canary.2

4 years ago

10.18.3-canary.3

4 years ago

10.18.3-canary.1

4 years ago

10.18.3-canary.0

4 years ago

10.18.2

4 years ago

10.18.2-canary.3

4 years ago

10.18.2-canary.2

4 years ago

10.18.2-canary.1

4 years ago

10.17.1-canary.3

4 years ago

10.17.1-canary.2

4 years ago

10.18.1-canary.0

4 years ago

10.18.2-canary.0

4 years ago

10.18.0

4 years ago

10.17.1-canary.1

4 years ago

10.18.0-alpha.0

4 years ago

10.17.0

4 years ago

10.17.1-canary.0

4 years ago

10.16.1-canary.8

4 years ago

10.16.1-canary.7

4 years ago

10.16.1-canary.5

4 years ago

10.16.1-canary.6

4 years ago

10.16.1-canary.4

4 years ago

10.16.1-canary.3

4 years ago

10.16.1-canary.2

4 years ago

10.16.1-canary.1

4 years ago

10.16.1-canary.0

4 years ago

10.16.0

4 years ago

10.15.2-canary.4

4 years ago

10.15.2-canary.3

4 years ago

10.15.2-canary.0

4 years ago

10.15.2-canary.2

4 years ago

10.15.1-canary.6

4 years ago

10.15.1

4 years ago

10.15.1-canary.4

4 years ago

10.15.0

4 years ago

10.14.3-canary.4

4 years ago

10.14.1

4 years ago

10.14.1-canary.7

4 years ago

10.13.1-canary.6

4 years ago

10.13.0

4 years ago

11.0.0-alpha.11

4 years ago

11.0.0-alpha.10

4 years ago

11.0.0-alpha.9

4 years ago

11.0.0-alpha.6

4 years ago

11.0.0-alpha.7

4 years ago

11.0.0-alpha.8

4 years ago

11.0.0-alpha.5

4 years ago

11.0.0-alpha.3

4 years ago

11.0.0-alpha.4

4 years ago

11.0.0-alpha.1

4 years ago

11.0.0-alpha.2

4 years ago

11.0.0-alpha.0

4 years ago