From 7d7c4cb495cd6a47443e2128aadd96db0d700ad5 Mon Sep 17 00:00:00 2001 From: m5r Date: Sun, 1 Aug 2021 12:29:41 +0800 Subject: [PATCH] transform 0 to + when long pressing --- app/keypad/pages/keypad.tsx | 30 ++++++++++++++++++++++++++---- package.json | 1 + 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/app/keypad/pages/keypad.tsx b/app/keypad/pages/keypad.tsx index 6746bf7..0174224 100644 --- a/app/keypad/pages/keypad.tsx +++ b/app/keypad/pages/keypad.tsx @@ -1,9 +1,11 @@ import type { BlitzPage } from "blitz"; import { Routes } from "blitz"; import type { FunctionComponent } from "react"; +import { useRef } from "react"; import { atom, useAtom } from "jotai"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBackspace, faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons"; +import { usePress } from "@react-aria/interactions"; import Layout from "../../core/layouts/layout"; import useRequireOnboarding from "../../core/hooks/use-require-onboarding"; @@ -70,12 +72,25 @@ const Keypad: BlitzPage = () => { }; const ZeroDigit: FunctionComponent = () => { - // TODO: long press, convert + to 0 + const timeoutRef = useRef | null>(null); const pressDigit = useAtom(pressDigitAtom)[1]; - const onClick = () => pressDigit("0"); + const longPressDigit = useAtom(longPressDigitAtom)[1]; + const { pressProps } = usePress({ + onPressStart() { + pressDigit("0"); + timeoutRef.current = setTimeout(() => { + longPressDigit("+"); + }, 750); + }, + onPressEnd() { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + }, + }); return ( -
+
0 +
); @@ -102,13 +117,20 @@ const DigitLetters: FunctionComponent = ({ children }) => ( ); const phoneNumberAtom = atom(""); -const pressDigitAtom = atom(null, (get, set, digit) => { +const pressDigitAtom = atom(null, (get, set, digit: string) => { if (get(phoneNumberAtom).length > 17) { 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; diff --git a/package.json b/package.json index d570b78..86b0ca8 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@heroicons/react": "1.0.3", "@hookform/resolvers": "2.6.1", "@prisma/client": "2.27.0", + "@react-aria/interactions": "3.5.0", "@tailwindcss/forms": "0.3.3", "@tailwindcss/typography": "0.4.1", "autoprefixer": "10.3.1",