@canutin/svelte-currency-input 0.5.3 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CurrencyInput.svelte +20 -1
- package/README.md +1 -1
- package/package.json +1 -1
package/CurrencyInput.svelte
CHANGED
|
@@ -30,8 +30,9 @@ const handleKeyDown = (event) => {
|
|
|
30
30
|
if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter)
|
|
31
31
|
event.preventDefault();
|
|
32
32
|
};
|
|
33
|
+
let inputTarget;
|
|
33
34
|
const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
|
|
34
|
-
const isDecimalComma = currencyDecimal === ',';
|
|
35
|
+
const isDecimalComma = currencyDecimal === ',';
|
|
35
36
|
const currencySymbol = formatCurrency(0, 0)
|
|
36
37
|
.replace('0', '') // e.g. '$0' > '$'
|
|
37
38
|
.replace(/\u00A0/, ''); // e.g '0 €' > '€'
|
|
@@ -40,11 +41,18 @@ const setUnformattedValue = (event) => {
|
|
|
40
41
|
// Don't format if the user is typing a `currencyDecimal` point
|
|
41
42
|
if (event.key === currencyDecimal)
|
|
42
43
|
return;
|
|
44
|
+
// Always convert _the opposite_ decimal key press to the `currencyDecimal` point
|
|
45
|
+
if (isDecimalComma && event.key === '.')
|
|
46
|
+
formattedValue = formattedValue.replace('.', currencyDecimal);
|
|
47
|
+
if (!isDecimalComma && event.key === ',')
|
|
48
|
+
formattedValue = formattedValue.replace(',', currencyDecimal);
|
|
43
49
|
// Don't format if `formattedValue` is ['$', '-$', "-"]
|
|
44
50
|
const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
|
|
45
51
|
const strippedUnformattedValue = formattedValue.replace(' ', '');
|
|
46
52
|
if (ignoreSymbols.includes(strippedUnformattedValue))
|
|
47
53
|
return;
|
|
54
|
+
// Set the starting caret positions
|
|
55
|
+
inputTarget = event.target;
|
|
48
56
|
// Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
|
|
49
57
|
let unformattedValue = isNegativeAllowed
|
|
50
58
|
? formattedValue.replace(/[^0-9,.-]/g, '')
|
|
@@ -65,7 +73,18 @@ const setUnformattedValue = (event) => {
|
|
|
65
73
|
}
|
|
66
74
|
};
|
|
67
75
|
const setFormattedValue = () => {
|
|
76
|
+
// Previous caret position
|
|
77
|
+
const startCaretPosition = inputTarget?.selectionStart || 0;
|
|
78
|
+
const previousFormattedValueLength = formattedValue.length;
|
|
79
|
+
// Apply formatting to input
|
|
68
80
|
formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, 0);
|
|
81
|
+
// New caret position
|
|
82
|
+
const endCaretPosition = startCaretPosition + formattedValue.length - previousFormattedValueLength;
|
|
83
|
+
// HACK:
|
|
84
|
+
// Delay setting the new caret position until the input has been formatted
|
|
85
|
+
setTimeout(() => {
|
|
86
|
+
inputTarget?.setSelectionRange(endCaretPosition, endCaretPosition);
|
|
87
|
+
}, 0.1);
|
|
69
88
|
};
|
|
70
89
|
let formattedValue = '';
|
|
71
90
|
let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
|
package/README.md
CHANGED
|
@@ -105,7 +105,7 @@ The [default styles](https://github.com/canutin/svelte-currency-input/blob/main/
|
|
|
105
105
|
Here's ways in which you can contribute:
|
|
106
106
|
|
|
107
107
|
- Found a bug? Open a [new issue](https://github.com/canutin/svelte-currency-input/issues/new)
|
|
108
|
-
-
|
|
108
|
+
- Comment or upvote [existing issues](https://github.com/canutin/svelte-currency-input/issues)
|
|
109
109
|
- Submit a [pull request](https://github.com/canutin/svelte-currency-input/pulls)
|
|
110
110
|
|
|
111
111
|
## Developing
|