Created useDecimalField

.changeset/healthy-comics-refuse.md

@@ -0,0 +1,5 @@
+---
+'@reactive-forms/x': minor
+---
+
+Created useDecimalField hook

.gitignore

@@ -21,4 +21,7 @@ yarn-error.log*
 
 scripts/*.mjs
 coverage
-**/.turbo
+**/.turbo
+
+# vscode
+launch.json

.vscode/launch.json

@@ -5,8 +5,8 @@
 			"name": "Debug Core Tests",
 			"type": "node",
 			"request": "launch",
-			"runtimeArgs": ["--inspect-brk", "${workspaceFolder}/node_modules/aqu/dist/aqu.js", "test", "--runInBand"],
-			"cwd": "${workspaceFolder}/packages/core",
+			"runtimeArgs": ["--inspect-brk", ".\\node_modules\\jest\\bin\\jest.js", "--watch", "useDecimalField"],
+			"cwd": "${workspaceFolder}/packages/x",
 			"console": "integratedTerminal",
 			"internalConsoleOptions": "neverOpen",
 			"port": 9229

.vscode/launch.template.json

@@ -0,0 +1,15 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Debug Core Tests",
+			"type": "node",
+			"request": "launch",
+			"runtimeArgs": ["--inspect-brk", ".\\node_modules\\jest\\bin\\jest.js", "--watch"],
+			"cwd": "${workspaceFolder}/packages/core",
+			"console": "integratedTerminal",
+			"internalConsoleOptions": "neverOpen",
+			"port": 9229
+		}
+	]
+}

packages/x/src/DecimalFieldI18n.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, PropsWithChildren } from 'react';
+import merge from 'lodash/merge';
+
+import { formatDecimal } from './formatDecimal';
+
+export type DecimalFieldI18n = {
+	required: string;
+	invalidInput: string;
+	minValue: (value: number, precision: number) => string;
+	maxValue: (value: number, precision: number) => string;
+};
+
+export const defaultDecimalFieldI18n: DecimalFieldI18n = {
+	required: 'Field is required',
+	invalidInput: 'Must be decimal',
+	minValue: (min: number, precision: number) => `Value should not be less than ${formatDecimal(min, precision)}`,
+	maxValue: (max: number, precision: number) => `Value should not be greater than ${formatDecimal(max, precision)}`,
+};
+
+export const DecimalFieldI18nContext = createContext<DecimalFieldI18n>(defaultDecimalFieldI18n);
+
+export type DecimalFieldI18nContextProviderProps = PropsWithChildren<{ i18n?: Partial<DecimalFieldI18n> }>;
+
+export const DecimalFieldI18nContextProvider = ({ i18n, children }: DecimalFieldI18nContextProviderProps) => {
+	return (
+		<DecimalFieldI18nContext.Provider value={merge(defaultDecimalFieldI18n, i18n)}>
+			{children}
+		</DecimalFieldI18nContext.Provider>
+	);
+};

packages/x/src/formatDecimal.ts

@@ -0,0 +1,7 @@
+export const formatDecimal = (value: number | null | undefined, precision: number) => {
+	if (typeof value !== 'number' || !Number.isFinite(value)) {
+		return '';
+	}
+
+	return value.toFixed(precision).toString();
+};

packages/x/src/useConverterField.ts

@@ -8,10 +8,12 @@ export class ConversionError extends Error {
 	}
 }
 
-export type ConverterFieldConfig<T> = {
+export type ValueConverter<T> = {
 	parse: (value: string) => T;
 	format: (value: T) => string;
-} & FieldConfig<T>;
+};
+
+export type ConverterFieldConfig<T> = ValueConverter<T> & FieldConfig<T>;
 
 export type ConverterFieldBag<T> = {
 	text: string;

packages/x/src/useDecimalField.ts

@@ -0,0 +1,104 @@
+import { useCallback, useContext } from 'react';
+import { FieldConfig, useFieldValidator } from '@reactive-forms/core';
+
+import { DecimalFieldI18nContext } from './DecimalFieldI18n';
+import { formatDecimal } from './formatDecimal';
+import { ConversionError, ConverterFieldBag, useConverterField, ValueConverter } from './useConverterField';
+
+const DECIMAL_REGEX = /^\d*\.?\d*$/;
+export const defaultPrecision = 2;
+
+export type DecimalFieldConfig = FieldConfig<number | null | undefined> & {
+	required?: boolean;
+	min?: number;
+	max?: number;
+
+	precision?: number;
+} & Partial<ValueConverter<number | null | undefined>>;
+
+export type DecimalFieldBag = ConverterFieldBag<number | null | undefined>;
+
+export const useDecimalField = ({
+	name,
+	validator,
+	schema,
+	required,
+	min,
+	max,
+	format: customFormat,
+	parse: customParse,
+	precision = defaultPrecision,
+}: DecimalFieldConfig): DecimalFieldBag => {
+	const i18n = useContext(DecimalFieldI18nContext);
+
+	const parse = useCallback(
+		(text: string) => {
+			text = text.trim();
+
+			if (customParse) {
+				return customParse(text);
+			}
+
+			if (text.length === 0) {
+				return null;
+			}
+
+			if (!DECIMAL_REGEX.test(text)) {
+				throw new ConversionError(i18n.invalidInput);
+			}
+
+			const value = Number.parseFloat(text);
+
+			if (Number.isNaN(value)) {
+				throw new ConversionError(i18n.invalidInput);
+			}
+
+			return value;
+		},
+		[customParse, i18n.invalidInput],
+	);
+
+	const format = useCallback(
+		(value: number | null | undefined) => {
+			if (customFormat) {
+				return customFormat(value);
+			}
+
+			return formatDecimal(value, precision);
+		},
+		[customFormat, precision],
+	);
+
+	const decimalBag = useConverterField({
+		parse,
+		format,
+		name,
+		validator,
+		schema,
+	});
+
+	useFieldValidator({
+		name,
+		validator: (value) => {
+			if (required && typeof value !== 'number') {
+				return i18n.required;
+			}
+
+			if (typeof value !== 'number') {
+				return undefined;
+			}
+
+			if (typeof min === 'number' && value < min) {
+				return i18n.minValue(min, precision);
+			}
+
+			if (typeof max === 'number' && value > max) {
+				return i18n.maxValue(max, precision);
+			}
+
+			return undefined;
+		},
+	});
+
+	return decimalBag;
+};