@canutin/svelte-currency-input 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@canutin/svelte-currency-input",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"exports": {
 		".": "./index.js"
 	},

package/src/lib/CurrencyInput.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	export let value: number = 0;
-	export let locale: string = 'en-US';
-	export let currency: string = 'USD';
-	export let name: string = 'total';
+	const DEFAULT_LOCALE = 'en-US';
+	const DEFAULT_CURRENCY = 'USD';
+	const DEFAULT_NAME = 'total';
+	const DEFAULT_VALUE = 0;
+
+	export let value: number = DEFAULT_VALUE;
+	export let locale: string = DEFAULT_LOCALE;
+	export let currency: string = DEFAULT_CURRENCY;
+	export let name: string = DEFAULT_NAME;
 	export let required: boolean = false;
 	export let disabled: boolean = false;
 	export let isNegativeAllowed: boolean = true;
 
-	let formattedValue = '';
-	$: isZero = value === 0;
-	$: isNegative = value < 0;
-	$: value, applyFormatting();
-
 	// Formats value as: e.g. $1,523.00 | -$1,523.00
 	const formatCurrency = (
 		value: number,
@@ -26,18 +26,26 @@
 		}).format(value);
 	};
 
-	const placeholder = formatCurrency(0, 2, 2); // e.g. '$0.00'
-	const currencySymbol = formatCurrency(0, 0)
-		.replace('0', '') // e.g. '$0' > '$'
-		.replace(/\u00A0/, ''); // e.g '0 €' > '€'
-	const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
+	// Checks if the key pressed is allowed
+	const handleKeyDown = (event: KeyboardEvent) => {
+		const isDeletion = event.key === 'Backspace' || event.key === 'Delete';
+		const isModifier = event.metaKey || event.altKey || event.ctrlKey;
+		const isArrowKey = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+		const isInvalidCharacter = !/^\d|,|\.|-$/g.test(event.key); // Keys that are not a digit, comma, period or minus sign
+
+		if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter) event.preventDefault();
+	};
 
 	// Updates `value` by stripping away the currency formatting
-	const setValue = (event?: KeyboardEvent) => {
-		// Don't format if the user is typing a currencyDecimal point
-		if (event?.key === currencyDecimal) return;
+	const setUnformattedValue = (event: KeyboardEvent) => {
+		// Don't format if the user is typing a `currencyDecimal` point
+		const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
+		if (event.key === currencyDecimal) return;
 
 		// If `formattedValue` is ['$', '-$', "-"] we don't need to continue
+		const currencySymbol = formatCurrency(0, 0)
+			.replace('0', '') // e.g. '$0' > '$'
+			.replace(/\u00A0/, ''); // e.g '0 €' > '€'
 		const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
 		const strippedUnformattedValue = formattedValue.replace(' ', '');
 		if (ignoreSymbols.includes(strippedUnformattedValue)) return;
@@ -48,7 +56,7 @@
 			: formattedValue.replace(/[^0-9,.]/g, '');
 
 		// Reverse the value when minus is pressed
-		if (isNegativeAllowed && event?.key === '-') value = value * -1;
+		if (isNegativeAllowed && event.key === '-') value = value * -1;
 
 		// Finally set the value
 		if (Number.isNaN(parseFloat(unformattedValue))) {
@@ -62,9 +70,16 @@
 		}
 	};
 
-	const applyFormatting = () => {
+	const setFormattedValue = () => {
 		formattedValue = isZero ? '' : formatCurrency(value, 2, 0);
 	};
+
+	let formattedValue = '';
+	$: isZero = value === 0;
+	$: isNegative = value < 0;
+	$: value, setFormattedValue();
+
+	const placeholder = formatCurrency(DEFAULT_VALUE, 2, 2); // e.g. '$0.00'
 </script>
 
 <div class="currencyInput">
@@ -83,7 +98,8 @@
 		{placeholder}
 		{disabled}
 		bind:value={formattedValue}
-		on:keyup={setValue}
+		on:keydown={handleKeyDown}
+		on:keyup={setUnformattedValue}
 	/>
 </div>
 

package/tests/svelte-currency-input.test.ts

@@ -136,6 +136,54 @@ test.describe('CurrencyInput', () => {
 		await expect(rentUnformattedInput).toHaveValue('0');
 	});
 
+	test("Incorrect characters can't be entered", async ({ page }) => {
+		await page.goto('/');
+
+		const isMacOs = process.platform === 'darwin';
+		const rentUnformattedInput = page.locator('.currencyInput__unformatted[name=rent]');
+		const rentFormattedInput = page.locator('.currencyInput__formatted[name="formatted-rent"]');
+
+		// Check the there is no value in the input
+		await expect(rentUnformattedInput).toHaveValue('0');
+		await expect(rentFormattedInput).toHaveValue('');
+
+		// Check typing letters doesn't do anything
+		await rentFormattedInput.focus();
+		await page.keyboard.type('abc');
+		await expect(rentUnformattedInput).toHaveValue('0');
+		await expect(rentFormattedInput).toHaveValue('');
+
+		// Check keyboard combinations don't do anything
+		await page.keyboard.press('Shift+A');
+		await expect(rentFormattedInput).toHaveValue('');
+
+		// Check keyboard shortcuts are allowed
+		await page.keyboard.type('420.69');
+		await expect(rentFormattedInput).toHaveValue('$420.69');
+		await expect(rentUnformattedInput).toHaveValue('420.69');
+
+		// Select all
+		isMacOs ? await page.keyboard.press('Meta+A') : await page.keyboard.press('Control+A');
+
+		// Check "Backspace" works
+		await page.keyboard.press('Backspace');
+		await expect(rentUnformattedInput).toHaveValue('0');
+		await expect(rentFormattedInput).toHaveValue('');
+
+		// Add data to the field again
+		await page.keyboard.type('-420.69');
+		await expect(rentFormattedInput).toHaveValue('-$420.69');
+		await expect(rentUnformattedInput).toHaveValue('-420.69');
+
+		// Select all
+		isMacOs ? await page.keyboard.press('Meta+A') : await page.keyboard.press('Control+A');
+
+		// Check "Delete" also works
+		await page.keyboard.press('Delete');
+		await expect(rentUnformattedInput).toHaveValue('0');
+		await expect(rentFormattedInput).toHaveValue('');
+	});
+
 	test.skip('Updating chained inputs have the correct behavior', async () => {
 		// TODO
 	});