feat: add min/max disabled state

riccardoperra · Jan 6, 2024 · 8dae5dc · 8dae5dc
1 parent 243062f
commit 8dae5dc
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 42 deletions.
diff --git a/packages/kit/src/components/NumberField/NumberField.tsx b/packages/kit/src/components/NumberField/NumberField.tsx
@@ -1,12 +1,12 @@
 import { createControllableSignal, TextField as KTextField } from "@kobalte/core";
-import { clamp, isNumber, mergeRefs } from "@kobalte/utils";
+import { clamp, mergeRefs } from "@kobalte/utils";
 import {
 	maskitoCaretGuard,
 	maskitoNumberOptionsGenerator,
 	maskitoParseNumber,
 } from "@maskito/kit";
 import {
-	createEffect,
+	batch,
 	createSignal,
 	JSX,
 	mergeProps,
@@ -72,15 +72,19 @@ export function NumberField(props: NumberFieldProps) {
 	);
 
 	const [focused, setFocused] = createSignal(false);
-	const [forcedChange, forceChange] = createSignal<true>(true, { equals: false });
 	const [value, setValue] = createControllableSignal<number | undefined | null>({
 		value: () => state.value,
 		defaultValue: () => state.defaultValue,
 		onChange: value => {
 			state.onChange?.(value);
 		},
 	});
-	const [unfinishedValue, setUnfinishedValue] = createSignal("" as string | null);
+
+	const initialValue = state.value ?? state.defaultValue ?? "";
+	const [unfinishedValue, setUnfinishedValue] = createSignal<string | null>(
+		String(initialValue),
+	);
+
 	let internalRef: HTMLInputElement;
 
 	const optionsWithDefault = mergeProps(defaultOptions, options);
@@ -145,7 +149,6 @@ export function NumberField(props: NumberFieldProps) {
 		} else {
 			increment();
 		}
-		setNativeValue(formattedValue());
 	};
 
 	const increment = () => {
@@ -160,31 +163,32 @@ export function NumberField(props: NumberFieldProps) {
 		const newValue = clampValue ? clamp(value || 0, computeMin(), computeMax()) : value;
 		setValue(newValue);
 		setNativeValue(formattedValue());
+		setUnfinishedValue(String(newValue));
 	};
 
 	const onValueChange = (nativeValue: string) => {
-		const parsedValue = maskitoParseNumber(
-			nativeValue,
-			defaultNumberFormat.decimalSeparator,
-		);
-
-		let value: number | undefined = undefined;
+		batch(() => {
+			const parsedValue = maskitoParseNumber(
+				nativeValue,
+				defaultNumberFormat.decimalSeparator,
+			);
 
-		setUnfinishedValue(null);
+			setUnfinishedValue(null);
 
-		if (Number.isNaN(parsedValue)) {
-			value = undefined;
-			setUnfinishedValue("");
-			return;
-		} else {
-			if (focused()) {
-				setUnfinishedValue(nativeValue);
-				updateValue(parsedValue, false);
+			if (Number.isNaN(parsedValue)) {
+				setUnfinishedValue("");
+				setValue(null);
+				return;
 			} else {
-				updateValue(parsedValue);
-				setUnfinishedValue(nativeValue);
+				if (focused()) {
+					setUnfinishedValue(nativeValue);
+					updateValue(parsedValue, false);
+				} else {
+					updateValue(parsedValue);
+					setUnfinishedValue(nativeValue);
+				}
 			}
-		}
+		});
 	};
 
 	const formattedValue = (): string => {
@@ -195,7 +199,6 @@ export function NumberField(props: NumberFieldProps) {
 		const hasFraction = Math.abs(currentValue) % 1 > 0;
 		let decimalLimit = hasFraction ? optionsWithDefault.precision : 0;
 
-		// add focused
 		return (
 			optionsWithDefault.prefix +
 			tuiFormatNumber(currentValue, {
@@ -209,25 +212,25 @@ export function NumberField(props: NumberFieldProps) {
 	const onFocused = (focused: boolean) => {
 		setFocused(focused);
 
-		const nativeNumber = unfinishedValue()
-			? maskitoParseNumber(unfinishedValue()!, defaultNumberFormat.decimalSeparator)
-			: nativeNumberValue();
-
-		if (Number.isNaN(nativeNumber)) {
-			setNativeValue(
-				focused ? optionsWithDefault.prefix + optionsWithDefault.postfix : "",
-			);
-			setUnfinishedValue(null);
-			setValue(null);
-			return;
-		}
-
-		if (!focused) {
-			updateValue(nativeNumber);
-			setUnfinishedValue(String(nativeNumber));
-		}
+		batch(() => {
+			const nativeNumber = unfinishedValue()
+				? maskitoParseNumber(unfinishedValue()!, defaultNumberFormat.decimalSeparator)
+				: nativeNumberValue();
+
+			if (Number.isNaN(nativeNumber)) {
+				setNativeValue(
+					focused ? optionsWithDefault.prefix + optionsWithDefault.postfix : "",
+				);
+				setUnfinishedValue(null);
+				setValue(null);
+				return;
+			}
 
-		setNativeValue(formattedValue());
+			if (!focused) {
+				updateValue(nativeNumber);
+				setUnfinishedValue(String(nativeNumber));
+			}
+		});
 	};
 
 	return (
@@ -257,6 +260,8 @@ export function NumberField(props: NumberFieldProps) {
 				/>
 
 				<NumberFieldControls
+					canIncrement={(value() ?? 0) + 1 <= computeMax()}
+					canDecrement={(value() ?? 0) - 1 >= computeMin()}
 					increment={increment}
 					decrement={decrement}
 					step={optionsWithDefault.step}

diff --git a/packages/kit/src/components/NumberField/NumberFieldControls.tsx b/packages/kit/src/components/NumberField/NumberFieldControls.tsx
@@ -3,6 +3,8 @@ import { Button } from "../Button/Button";
 import { ChevronDownIcon, ChevronUpIcon } from "../../icons";
 
 interface NumberFieldControlsProps {
+	canIncrement: boolean;
+	canDecrement: boolean;
 	increment: () => void;
 	decrement: () => void;
 	step: number;
@@ -12,6 +14,7 @@ export function NumberFieldControls(props: NumberFieldControlsProps) {
 	return (
 		<div class={styles.controlsContainer}>
 			<Button
+				disabled={!props.canIncrement}
 				type={"button"}
 				variant={"ghost"}
 				theme={"secondary"}
@@ -22,6 +25,7 @@ export function NumberFieldControls(props: NumberFieldControlsProps) {
 				<ChevronUpIcon class={styles.control} />
 			</Button>
 			<Button
+				disabled={!props.canDecrement}
 				type={"button"}
 				variant={"ghost"}
 				theme={"secondary"}