keypad QoL changes
This commit is contained in:
parent
83851cd127
commit
74f903cc9f
@ -1,7 +1,9 @@
|
|||||||
|
import { Fragment, useRef } from "react";
|
||||||
import type { BlitzPage } from "blitz";
|
import type { BlitzPage } from "blitz";
|
||||||
import { Link, Routes, useRouter } from "blitz";
|
import { Link, Routes, useRouter } from "blitz";
|
||||||
import { useRef } from "react";
|
|
||||||
import { atom, useAtom } from "jotai";
|
import { atom, useAtom } from "jotai";
|
||||||
|
import { usePress } from "@react-aria/interactions";
|
||||||
|
import { Transition } from "@headlessui/react";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faBackspace, faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons";
|
import { faBackspace, faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons";
|
||||||
|
|
||||||
@ -13,12 +15,14 @@ const KeypadPage: BlitzPage = () => {
|
|||||||
useRequireOnboarding();
|
useRequireOnboarding();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
|
const [phoneNumber, setPhoneNumber] = useAtom(phoneNumberAtom);
|
||||||
const pressBackspace = useAtom(pressBackspaceAtom)[1];
|
const removeDigit = useAtom(pressBackspaceAtom)[1];
|
||||||
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||||
const pressDigit = useAtom(pressDigitAtom)[1];
|
const pressDigit = useAtom(pressDigitAtom)[1];
|
||||||
const longPressDigit = useAtom(longPressDigitAtom)[1];
|
const longPressDigit = useAtom(longPressDigitAtom)[1];
|
||||||
const onZeroPressProps = {
|
const onZeroPressProps = {
|
||||||
onPressStart() {
|
onPressStart() {
|
||||||
|
console.log("0");
|
||||||
pressDigit("0");
|
pressDigit("0");
|
||||||
timeoutRef.current = setTimeout(() => {
|
timeoutRef.current = setTimeout(() => {
|
||||||
longPressDigit("+");
|
longPressDigit("+");
|
||||||
@ -27,6 +31,7 @@ const KeypadPage: BlitzPage = () => {
|
|||||||
onPressEnd() {
|
onPressEnd() {
|
||||||
if (timeoutRef.current) {
|
if (timeoutRef.current) {
|
||||||
clearTimeout(timeoutRef.current);
|
clearTimeout(timeoutRef.current);
|
||||||
|
timeoutRef.current = null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -36,6 +41,28 @@ const KeypadPage: BlitzPage = () => {
|
|||||||
pressDigit(digit);
|
pressDigit(digit);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const { pressProps: onBackspacePress } = 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 (
|
return (
|
||||||
<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
|
<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
|
||||||
@ -59,9 +86,21 @@ const KeypadPage: BlitzPage = () => {
|
|||||||
<FontAwesomeIcon className="w-6 h-6" icon={faPhone} color="white" size="lg" />
|
<FontAwesomeIcon className="w-6 h-6" icon={faPhone} color="white" size="lg" />
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</Link>
|
||||||
<div className="cursor-pointer select-none m-auto" onClick={pressBackspace}>
|
|
||||||
|
<Transition
|
||||||
|
as={Fragment}
|
||||||
|
show={phoneNumber.length > 0}
|
||||||
|
enter="transition duration-300 ease-in-out"
|
||||||
|
enterFrom="transform scale-95 opacity-0"
|
||||||
|
enterTo="transform scale-100 opacity-100"
|
||||||
|
leave="transition duration-100 ease-out"
|
||||||
|
leaveFrom="transform scale-100 opacity-100"
|
||||||
|
leaveTo="transform scale-95 opacity-0"
|
||||||
|
>
|
||||||
|
<div {...onBackspacePress} className="cursor-pointer select-none m-auto">
|
||||||
<FontAwesomeIcon className="w-6 h-6" icon={faBackspace} size="lg" />
|
<FontAwesomeIcon className="w-6 h-6" icon={faBackspace} size="lg" />
|
||||||
</div>
|
</div>
|
||||||
|
</Transition>
|
||||||
</Keypad>
|
</Keypad>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user