Open mSupply represents our most recent advancement in the Logistics Management Information System (LMIS), expanding on more than two decades of development inherited from the well-established legacy of the original mSupply.
Currently the CurrencyInput component uses a 3rd-party library ('react-currency-input-field') for the currency input fields. It's a bit unweidly as there is a lot of custom styling added onto it to make it fit in with the UI.
Suggestion is to remove this library and change the CurrencyInput to wrap around the new NumericInputComponent. And we'd make a small adjustment to allow it to format for currency values, including fixed dp display, etc. This can all be achieved using Intl.NumberFormat, and can be locale-aware. The core mechanism of NumericInputComponent already formats numbers for locales, so it would be a small extension to get it to format currency as well.
Why should we invest time in this?
There is already a "TO-DO" comment in the Currency component to do something like this:
Also:
slightly smaller bundle size
easier to maintain as it'll use an existing mechanism
Are there any risks associated with this change?
Should be easy to test and try edge cases for number/currency input, so no major risk.
Chris-Petty
commented
6 months ago
The suggestion
Currently the CurrencyInput component uses a 3rd-party library ('react-currency-input-field') for the currency input fields. It's a bit unweidly as there is a lot of custom styling added onto it to make it fit in with the UI.
Suggestion is to remove this library and change the CurrencyInput to wrap around the new NumericInputComponent. And we'd make a small adjustment to allow it to format for currency values, including fixed dp display, etc. This can all be achieved using
Intl.NumberFormat, and can be locale-aware. The core mechanism of NumericInputComponent already formats numbers for locales, so it would be a small extension to get it to format currency as well.Why should we invest time in this?
There is already a "TO-DO" comment in the Currency component to do something like this:
Also:
Are there any risks associated with this change?
Should be easy to test and try edge cases for number/currency input, so no major risk.
How much effort is required?
~1 day.
Agreed Solution