feat(input): add pasteTransformer prop

guilhermerodz · Nov 1, 2024 · 64c6f80 · 64c6f80
1 parent 948354e
commit 64c6f80
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/packages/input-otp/src/input.tsx b/packages/input-otp/src/input.tsx
@@ -24,6 +24,7 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
       inputMode = 'numeric',
       onComplete,
       pushPasswordManagerStrategy = 'increase-width',
+      pasteTransformer,
       containerClassName,
       noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK,
 
@@ -311,11 +312,15 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
     const _pasteListener = React.useCallback(
       (e: React.ClipboardEvent<HTMLInputElement>) => {
         const input = inputRef.current
-        if (!initialLoadRef.current.isIOS || !e.clipboardData || !input) {
+        if (!pasteTransformer && (!initialLoadRef.current.isIOS || !e.clipboardData || !input)) {
           return
         }
-
-        const content = e.clipboardData.getData('text/plain')
+
+        const _content = e.clipboardData.getData('text/plain')
+        const content = pasteTransformer
+          ? pasteTransformer(_content)
+          : _content
+        console.log({_content,content})
         e.preventDefault()
 
         const start = inputRef.current?.selectionStart

diff --git a/packages/input-otp/src/types.ts b/packages/input-otp/src/types.ts
@@ -22,6 +22,7 @@ type OTPInputBaseProps = OverrideProps<
 
     onComplete?: (...args: any[]) => unknown
     pushPasswordManagerStrategy?: 'increase-width' | 'none'
+    pasteTransformer?: (pasted: string) => string
 
     containerClassName?: string