From ed4d231b272467dda1cf665448ab08b3ec4a7752 Mon Sep 17 00:00:00 2001 From: keyurparalkar Date: Tue, 3 Oct 2023 11:24:54 +0530 Subject: [PATCH] fix: remove depricated usage of which keyboard property and replaced with key property --- package/lib/hook/usePasscode.ts | 2 +- package/lib/utils/index.ts | 70 +++++++++++++++------------------ 2 files changed, 33 insertions(+), 39 deletions(-) diff --git a/package/lib/hook/usePasscode.ts b/package/lib/hook/usePasscode.ts index 47c4e26..90d0be4 100644 --- a/package/lib/hook/usePasscode.ts +++ b/package/lib/hook/usePasscode.ts @@ -93,7 +93,7 @@ const usePasscode = (props: PasscodeProps) => { // Preventing typing of any other keys except for 1 to 9 And backspace const onKeyDown = (e: KeyboardEvent) => { - if (shouldPreventDefault(e.which, isAlphaNumeric, e.metaKey)) { + if (shouldPreventDefault(e.key, isAlphaNumeric, e.metaKey)) { e.preventDefault(); } }; diff --git a/package/lib/utils/index.ts b/package/lib/utils/index.ts index cf1cc93..17c5698 100644 --- a/package/lib/utils/index.ts +++ b/package/lib/utils/index.ts @@ -1,43 +1,37 @@ export const ALPHANUMERIC_REGEX = /^[a-z0-9]$/i; export const shouldPreventDefault = ( - keyCode: number, - isAlphaNumeric: boolean = false, - isMeta: boolean = false + key: string, + isAlphaNumeric: boolean = false, + isMeta: boolean = false ) => { - const isAlphabet = keyCode >= 64 && keyCode <= 90; + const parsed = Number(key); - // Below flag also checks if the typeed key is from numpad - const isNumeric = - (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105); + // By default we only allow numbers to be pressed = DONE + if (parsed) return false; - //Crtl + v: - if (isMeta && keyCode === 86) { - return false; - } + // Crtl + V + if (isMeta && key === "v") return false; - // By default we only allow numbers to be pressed - if (isNumeric) return false; + // Allow Backspace + if (key === "Backspace") return false; - // We only allow alphabets to be pressed when the isAplhaNumeric flag is true - if (isAlphabet && isAlphaNumeric) return false; - - // Backspace - if (keyCode === 8) { - return false; - } + // We only allow alphabets to be pressed when the isAplhaNumeric flag is true = DONE + if (isAlphaNumeric && isNaN(parsed)) { + return false; + } - return true; + return true; }; export const getClipboardReadPermission = () => { - return navigator.permissions.query({ - name: "clipboard-read" as PermissionName, - }); + return navigator.permissions.query({ + name: "clipboard-read" as PermissionName, + }); }; export const getClipboardContent = () => { - return navigator.clipboard.readText(); + return navigator.clipboard.readText(); }; /** @@ -48,19 +42,19 @@ export const getClipboardContent = () => { * The array before the focused index will be filled with existing values. */ export const getFilledArray = ( - arr: (number | string)[], - pastingArr: (number | string)[], - currentFocusedIndex: number + arr: (number | string)[], + pastingArr: (number | string)[], + currentFocusedIndex: number ) => { - const lastIndex = arr.length - 1; - - if (currentFocusedIndex > 0) { - for (let i = currentFocusedIndex; i <= lastIndex; i++) { - arr[i] = pastingArr[i - currentFocusedIndex] ?? ""; + const lastIndex = arr.length - 1; + + if (currentFocusedIndex > 0) { + for (let i = currentFocusedIndex; i <= lastIndex; i++) { + arr[i] = pastingArr[i - currentFocusedIndex] ?? ""; + } + return arr; + } else { + // Starts pasting the values in the array from 0th index + return [...pastingArr, ...arr.slice(pastingArr.length - 1, lastIndex)]; } - return arr; - } else { - // Starts pasting the values in the array from 0th index - return [...pastingArr, ...arr.slice(pastingArr.length - 1, lastIndex)]; - } };