keypad page

app/features/keypad/hooks/atoms.ts

@@ -0,0 +1,33 @@
+import { atom, useAtom } from "jotai";
+
+const phoneNumberAtom = atom("");
+const pressDigitAtom = atom(null, (get, set, digit: string) => {
+	if (get(phoneNumberAtom).length > 17) {
+		return;
+	}
+
+	if ("0123456789+#*".indexOf(digit) === -1) {
+		return;
+	}
+
+	set(phoneNumberAtom, (prevState) => prevState + digit);
+});
+const longPressDigitAtom = atom(null, (get, set, replaceWith: string) => {
+	if (get(phoneNumberAtom).length > 17) {
+		return;
+	}
+
+	set(phoneNumberAtom, (prevState) => prevState.slice(0, -1) + replaceWith);
+});
+const pressBackspaceAtom = atom(null, (get, set) => {
+	if (get(phoneNumberAtom).length === 0) {
+		return;
+	}
+
+	set(phoneNumberAtom, (prevState) => prevState.slice(0, -1));
+});
+
+export const usePhoneNumber = () => useAtom(phoneNumberAtom);
+export const useRemoveDigit = () => useAtom(pressBackspaceAtom)[1];
+export const usePressDigit = () => useAtom(pressDigitAtom)[1];
+export const useLongPressDigit = () => useAtom(longPressDigitAtom)[1];

app/features/keypad/hooks/use-on-backspace-press.ts

@@ -0,0 +1,34 @@
+import { useRef } from "react";
+import { usePress } from "@react-aria/interactions";
+
+import { useRemoveDigit } from "./atoms";
+
+export default function useOnBackspacePress() {
+	const removeDigit = useRemoveDigit();
+	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+	const { pressProps: onBackspacePressProps } = usePress({
+		onPressStart() {
+			timeoutRef.current = setTimeout(() => {
+				removeDigit();
+				intervalRef.current = setInterval(removeDigit, 75);
+			}, 325);
+		},
+		onPressEnd() {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+				timeoutRef.current = null;
+			}
+
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+				intervalRef.current = null;
+				return;
+			}
+
+			removeDigit();
+		},
+	});
+
+	return onBackspacePressProps;
+}