Merge pull request #116 from cchanxzy/chore/merge-v3-beta-branch

cchanxzy · Jan 5, 2021 · ac683fb · ac683fb
2 parents 1655954 + 02dbde2
commit ac683fb
Show file tree

Hide file tree

Showing 45 changed files with 2,092 additions and 1,291 deletions.
diff --git a/.enzymerc.js b/.enzymerc.js
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Run linting
         run: yarn lint
       - name: Run tests
-        run: yarn test
+        run: yarn test-ci
       - name: Code coverage
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -25,7 +25,7 @@ jobs:
       - name: Build package
         run: yarn build
       - name: Run tests
-        run: yarn test
+        run: yarn test-ci
       - name: Code coverage
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,93 @@
+# [3.0.0-beta.11](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2021-01-04)
+
+# [3.0.0-beta.10](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.9...v3.0.0-beta.10) (2021-01-02)
+
+
+### Features
+
+* allow customInput prop ([f372201](https://github.com/cchanxzy/react-currency-input-field/commit/f3722015650c24efd522f93dfb8a482bc4ba87a4))
+
+# [3.0.0-beta.9](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.8...v3.0.0-beta.9) (2021-01-02)
+
+
+### Bug Fixes
+
+* fixed a few inconsistencies and added intl config to examples ([796e623](https://github.com/cchanxzy/react-currency-input-field/commit/796e623ef679ca047140d6ee421961877bdaa181))
+
+# [3.0.0-beta.8](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2021-01-02)
+
+
+### Features
+
+* handle backspace with suffix ([fc84301](https://github.com/cchanxzy/react-currency-input-field/commit/fc8430162d2c51cc374b0b7f4ed221a1329972b5))
+
+# [3.0.0-beta.7](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2020-12-10)
+
+# [3.0.0-beta.6](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2020-12-10)
+
+# [3.0.0-beta.5](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2020-12-09)
+
+
+### Features
+
+* depreciate onBlurValue prop ([8651e76](https://github.com/cchanxzy/react-currency-input-field/commit/8651e76c201b029787490efcf37d307a1b5d8d97))
+
+
+### BREAKING CHANGES
+
+* "onBlurValue" no longer supported
+
+# [3.0.0-beta.4](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2020-12-09)
+
+
+### Features
+
+* renamed onChange prop to onValueChange ([83d3806](https://github.com/cchanxzy/react-currency-input-field/commit/83d380660597797bfc38e609599c103f8176fd28))
+
+
+### BREAKING CHANGES
+
+* Renamed "onChange" to "onValueChange"
+
+# [3.0.0-beta.3](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2020-12-06)
+
+
+### Features
+
+* renamed precision to decimalScale ([c545b78](https://github.com/cchanxzy/react-currency-input-field/commit/c545b780815bff7c98c66e527f3f3f4a1cc8ee67))
+* renamed turnOffAbbreviations to disableAbbreviations ([7751a43](https://github.com/cchanxzy/react-currency-input-field/commit/7751a4386baee5554aa030839d1cdc0f3750f360))
+* renamed turnOffSeparators to disableGroupSeparators ([b16f577](https://github.com/cchanxzy/react-currency-input-field/commit/b16f577e29646e2fba9db370fb4eda2c73ae632e))
+
+
+### BREAKING CHANGES
+
+* Renamed "turnOffAbbreviations" to "disableAbbreviations"
+* Renamed "turnOffSeparators" to "disableGroupSeparators"
+* renamed precision to decimalScale
+
+# [3.0.0-beta.2](https://github.com/cchanxzy/react-currency-input-field/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2020-12-03)
+
+
+### Features
+
+* add intl locale config option ([e119352](https://github.com/cchanxzy/react-currency-input-field/commit/e119352212b1aaa8bafdb02dfd312de7a7302cfc))
+
+
+### BREAKING CHANGES
+
+* Using Intl.NumberFormat to format value
+
+# [3.0.0-beta.1](https://github.com/cchanxzy/react-currency-input-field/compare/v2.7.0...v3.0.0-beta.1) (2020-11-19)
+
+
+### Features
+
+* wrap component in forwardRef ([3a1f5bc](https://github.com/cchanxzy/react-currency-input-field/commit/3a1f5bcd6422c49ea85ad9980109cd183ceec2f1))
+
+
+### BREAKING CHANGES
+
+* can pass in component ref
 ## [2.7.1](https://github.com/cchanxzy/react-currency-input-field/compare/v2.7.0...v2.7.1) (2020-12-10)
 
 # [2.7.0](https://github.com/cchanxzy/react-currency-input-field/compare/v2.6.0...v2.7.0) (2020-11-18)

diff --git a/README.md b/README.md
@@ -2,20 +2,41 @@
 
 [![npm](https://img.shields.io/npm/v/react-currency-input-field)](https://www.npmjs.com/package/react-currency-input-field) [![NPM](https://img.shields.io/npm/l/react-currency-input-field)](https://www.npmjs.com/package/react-currency-input-field) [![Codecov Coverage](https://img.shields.io/codecov/c/github/cchanxzy/react-currency-input-field)](https://codecov.io/gh/cchanxzy/react-currency-input-field/) [![Release build](https://github.com/cchanxzy/react-currency-input-field/workflows/Release/badge.svg)](https://github.com/cchanxzy/react-currency-input-field/actions?query=workflow%3ARelease)
 
-## V3 Pre-release
-
-There will be a couple of breaking changes in v3.0.0, so I recommend taking a look at the [v3.0.0 beta](https://www.npmjs.com/package/react-currency-input-field/v/3.0.0-beta.7) which is available now for testing.
-
-Any early feedback will be very much welcomed.
+- [React Currency Input Field Component](#react-currency-input-field-component)
+  - [Migrating to v3.0.0](#migrating-to-v300)
+  - [Features](#features)
+  - [Examples](#examples)
+  - [Install](#install)
+  - [Usage](#usage)
+  - [Props](#props)
+    - [Abbreviations](#abbreviations)
+    - [Separators](#separators)
+    - [Intl Locale Config](#intl-locale-config)
+    - [Fixed Decimal Length](#fixed-decimal-length)
+  - [Decimal Scale and Decimals Limit](#decimal-scale-and-decimals-limit)
+  - [Format values for display](#format-values-for-display)
+  - [v3.0.0 Release Notes](#v300-release-notes)
+    - [Breaking Changes](#breaking-changes)
+    - [Improvements in v3](#improvements-in-v3)
+    - [Reasoning](#reasoning)
+  - [Issues](#issues)
+
+## Migrating to v3.0.0
+
+There are a number of breaking changes in v3.0.0, please read the [release notes](#v300-release-notes) if migrating from v2 to v3.
+
+:warning: Most important change is: `onChange` has been renamed to `onValueChange`
 
 ## Features
 
-- Allows abbreviations eg. 1k = 1,000 2.5m = 2,500,000
+- Allows [abbreviations](#abbreviations) eg. 1k = 1,000 2.5m = 2,500,000
 - Prefix option eg. £ or \$
+- Automatically inserts [group separator](#separators)
+- Accepts [Intl locale config](#intl-locale-config)
+- Can use arrow down/up to step
 - Can allow/disallow decimals
-- Automatically inserts comma separator
-- Only allows valid numbers
-- Lightweight and simple
+- Written in TypeScript and has type support
+- Does not use any third party packages
 
 ## Examples
 
@@ -39,17 +60,39 @@ import CurrencyInput from 'react-currency-input-field';
 <CurrencyInput
   id="input-example"
   name="input-name"
-  placeholder="£1,000"
+  placeholder="Please enter a number"
   defaultValue={1000}
-  allowDecimals={true}
   decimalsLimit={2}
-  onChange={(value, name) => console.log(value, name)}
+  onValueChange={(value, name) => console.log(value, name)}
 />;
 ```
 
 Have a look in [`src/examples`](https://github.com/cchanxzy/react-currency-input-field/tree/master/src/examples) for more examples on implementing and validation.
 
-## Abbreviations
+## Props
+
+| Name                   | Type       | Default        | Description                                                                                    |
+| ---------------------- | ---------- | -------------- | ---------------------------------------------------------------------------------------------- |
+| allowDecimals          | `boolean`  | `true`         | Allow decimals                                                                                 |
+| allowNegativeValue     | `boolean`  | `true`         | Allow user to enter negative value                                                             |
+| defaultValue           | `number`   |                | Default value                                                                                  |
+| value                  | `number`   |                | Programmatically set the value                                                                 |
+| onValueChange          | `function` |                | Handle change in value                                                                         |
+| placeholder            | `string`   |                | Placeholder if no value                                                                        |
+| decimalsLimit          | `number`   | `2`            | Limit length of decimals allowed                                                               |
+| decimalScale           | `number`   |                | Specify decimal scale for padding/trimming eg. 1.5 -> 1.50 or 1.234 -> 1.23 if decimal scale 2 |
+| fixedDecimalLength     | `number`   |                | Value will always have the specified length of decimals                                        |
+| prefix                 | `string`   |                | Include a prefix eg. £ or \$                                                                   |
+| decimalSeparator       | `string`   | locale default | Separator between integer part and fractional part of value                                    |
+| groupSeparator         | `string`   | locale default | Separator between thousand, million and billion                                                |
+| intlConfig             | `object`   |                | International locale config                                                                    |
+| disabled               | `boolean`  | `false`        | Disabled                                                                                       |
+| disableAbbreviations   | `boolean`  | `false`        | Disable abbreviations eg. 1k -> 1,000, 2m -> 2,000,000                                         |
+| disableGroupSeparators | `boolean`  | `false`        | Disable auto adding the group separator between values, eg. 1000 -> 1,000                      |
+| maxLength              | `number`   |                | Maximum characters the user can enter                                                          |
+| step                   | `number`   |                | Incremental value change on arrow down and arrow up key press                                  |
+
+### Abbreviations
 
 It can parse values with abbreviations `k`, `m` and `b`
 
@@ -59,7 +102,9 @@ Examples:
 - 2.5m = 2,500,000
 - 3.456B = 3,456,000,000
 
-## Separators
+This can be turned off by passing in `disableAbbreviations`.
+
+### Separators
 
 You can change the decimal and group separators by passing in `decimalSeparator` and `groupSeparator`.
 
@@ -68,21 +113,40 @@ Example:
 ```js
 import CurrencyInput from 'react-currency-input-field';
 
-<CurrencyInput
-  id="input-example"
-  defaultValue="123.456,89"
-  decimalSeparator=","
-  groupSeparator="."
-/>;
+<CurrencyInput decimalSeparator="," groupSeparator="." />;
 ```
 
 Note: the separators cannot be a number, and `decimalSeparator` must be different to `groupSeparator`.
 
-To turn off auto adding the group separator, add `turnOffSeparators={true}`.
+To turn off auto adding the group separator, add `disableGroupSeparators={true}`.
+
+### Intl Locale Config
+
+This component can also accept international locale config to format the currency to locale setting.
+
+Examples:
+
+```javascript
+import CurrencyInput from 'react-currency-input-field';
+
+<CurrencyInput intlConfig={{ locale: 'en-US', currency: 'GBP' }} />;
+
+<CurrencyInput intlConfig={{ locale: 'ja-JP', currency: 'JPY' }} />;
+
+<CurrencyInput intlConfig={{ locale: 'en-IN', currency: 'INR' }} />;
+```
+
+`locale` should be a [BCP 47 language tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation), such as "en-US" or "en-IN".
 
-## Fixed Decimal Length
+`currency` should be a [ISO 4217 currency code](https://en.wikipedia.org/wiki/ISO_4217), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
 
-Use `fixedDecimalLength` so that the value will always have the specified length of decimals. This formatting happens onBlur.
+Any prefix, group separator and decimal separator options passed in will override the default locale settings.
+
+### Fixed Decimal Length
+
+Use `fixedDecimalLength` so that the value will always have the specified length of decimals.
+
+This formatting happens onBlur.
 
 Example if `fixedDecimalLength` was 2:
 
@@ -93,30 +157,11 @@ Example if `fixedDecimalLength` was 2:
 - 12.34 -> 12.34
 ```
 
-## Props
+## Decimal Scale and Decimals Limit
+
+`decimalsLimit` and `decimalScale` are similar, the difference is `decimalsLimit` prevents the user from typing more than the limit, and `decimalScale` will format the decimals `onBlur` to the specified length, padding or trimming as necessary.
 
-| Name                 | Type       | Default | Description                                                              |
-| -------------------- | ---------- | ------- | ------------------------------------------------------------------------ |
-| allowDecimals        | `boolean`  | `true`  | Allow decimals                                                           |
-| allowNegativeValue   | `boolean`  | `true`  | Allow user to enter negative value                                       |
-| className            | `string`   |         | Class names                                                              |
-| decimalsLimit        | `number`   | `2`     | Limit length of decimals allowed                                         |
-| defaultValue         | `number`   |         | Default value                                                            |
-| value                | `number`   |         | Programmatically set the value                                           |
-| disabled             | `boolean`  | `false` | Disabled                                                                 |
-| fixedDecimalLength   | `number`   |         | Value will always have the specified length of decimals                  |
-| id                   | `string`   |         | Component id                                                             |
-| maxLength            | `number`   |         | Maximum characters the user can enter                                    |
-| onChange             | `function` |         | Handle change in value                                                   |
-| onBlurValue          | `function` |         | Handle value onBlur                                                      |
-| placeholder          | `string`   |         | Placeholder if no value                                                  |
-| precision            | `number`   |         | Specify decimal precision for padding/trimming                           |
-| prefix               | `string`   |         | Include a prefix eg. £ or \$                                             |
-| step                 | `number`   |         | Incremental value change on arrow down and arrow up key press            |
-| decimalSeparator     | `string`   | `.`     | Separator between integer part and fractional part of value              |
-| groupSeparator       | `string`   | `,`     | Separator between thousand, million and billion                          |
-| turnOffAbbreviations | `boolean`  | `false` | Disable abbreviations eg. 1k > 1,000, 2m > 2,000,000                     |
-| turnOffSeparators    | `boolean`  | `false` | Disable auto adding the group separator between values, eg. 1000 > 1,000 |
+Example: If decimal scale 2, 1.5 -> 1.50 and 1.234 -> 1.23
 
 ## Format values for display
 
@@ -125,15 +170,54 @@ Use the `formatValue` function to format the values to a more user friendly stri
 ```javascript
 import { formatValue } from 'react-currency-input-field';
 
-const formattedValue = formatValue({
-  value = 123456,
-  groupSeparator = ',',
-  decimalSeparator = '.',
-  turnOffSeparators = false,
-  prefix = '$',
+// Format using prefix, groupSeparator and decimalSeparator
+const formattedValue1 = formatValue({
+  value: 123456,
+  groupSeparator: ',',
+  decimalSeparator: '.',
+  prefix: '$',
 });
+
+console.log(formattedValue1);
+// $123,456
+
+// Format using intl locale config
+const formattedValue2 = formatValue({
+  value: 500000,
+  intlConfig: { locale: 'en-IN', currency: 'INR' },
+});
+
+console.log(formattedValue2);
+// ₹5,00,000
 ```
 
+## v3.0.0 Release Notes
+
+### Breaking Changes
+
+- :warning: `onChange` renamed to `onValueChange` :warning:
+- `onBlurValue` has been removed.
+- `turnOffAbbreviations` renamed to `disableAbbreviations`.
+- `turnOffSeparators` renamed to `disableGroupSeparators`.
+- `precision` renamed to `decimalScale`
+
+### Improvements in v3
+
+- [Intl locale config](#intl-locale-config) can be passed in. _Please note: formatting where the currency symbol is placed after the value like a suffix eg. (1 234,56 €) might cause problems, this is still in development._
+- Group separator will default to browser locale if not specified.
+- Can pass `ref` to the component.
+- `onChange` and `onBlur` functions can be passed in and will be called with original event.
+
+### Reasoning
+
+As this component grew in usage, I started getting more bug reports and feature requests. That wasn't a problem though, because I was always happy to fix any bugs and implement any features if I could.
+
+However, this meant sometimes I was a bit trigger happy, and didn't always think about how the different options interacted with each other. I found that it was getting a bit convoluted for my liking, and choices I had made earlier in development, now seemed like it could be improved.
+
+Therefore, I took the opportunity of v3 to do a bit of tidying up for the component, in order to make it more future proof and intuitive to use.
+
+I apologize if any of the changes cause new bugs or issues. Please let me know and I will fix asap.
+
 ## Issues
 
 Feel free to raise an issue on Github if you find a bug or have a feature request
diff --git a/demo/.DS_Store b/demo/.DS_Store
diff --git a/demo/demo.gif b/demo/demo.gif