Input prevent ignored keys been pasted

Kubit · Kubit · commit da9beffe6fcf · 2024-07-25T07:06:06.000+02:00
diff --git a/src/components/input/inputStandAlone.tsx b/src/components/input/inputStandAlone.tsx
@@ -124,11 +124,7 @@ const InputStandAloneComponent = (
         }}
         onFocus={props.onFocus}
         onKeyDown={props.onKeyDown}
-        onPaste={e => {
-          if (props.disabledCopyAndPaste) {
-            e.preventDefault();
-          }
-        }}
+        onPaste={props.onPaste}
       />
       <InputIconStandAlone
         ref={
diff --git a/src/components/input/inputUnControlled.tsx b/src/components/input/inputUnControlled.tsx
@@ -12,6 +12,7 @@ const InputUnControlledComponent = <V extends string | unknown>(
     internalErrorExecution = INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR,
     disabledArrowUpDownInputNumber = false,
     disabledWheelMouse = true,
+    disabledCopyAndPaste,
     errorExecution,
     keyValidation,
     min,
@@ -34,6 +35,7 @@ const InputUnControlledComponent = <V extends string | unknown>(
     onKeyDown,
     onError,
     onInternalErrors,
+    onPaste,
     ...props
   }: IInputUnControlled<V>,
   ref: React.ForwardedRef<HTMLInputElement | undefined>
@@ -48,6 +50,7 @@ const InputUnControlledComponent = <V extends string | unknown>(
     handleBlurInternal,
     handleFocusInternal,
     handleKeyDownInternal,
+    handlePasteInternal,
   } = useInput({
     ref,
     errorExecution,
@@ -71,12 +74,14 @@ const InputUnControlledComponent = <V extends string | unknown>(
     formatNumber,
     locale,
     disabledWheelMouse,
+    disabledCopyAndPaste,
     onBlur,
     onChange,
     onFocus,
     onKeyDown,
     onError,
     onInternalErrors,
+    onPaste,
   });
 
   return (
@@ -97,6 +102,7 @@ const InputUnControlledComponent = <V extends string | unknown>(
       onChange={handleChangeInternal}
       onFocus={handleFocusInternal}
       onKeyDown={handleKeyDownInternal}
+      onPaste={handlePasteInternal}
     />
   );
 };
diff --git a/src/components/input/types/input.ts b/src/components/input/types/input.ts
@@ -68,12 +68,14 @@ export enum MASK_TYPE {
 export enum ERROR_EXECUTION {
   ON_CHANGE = 'onChange',
   ON_BLUR = 'onBlur',
+  NONE = 'none',
 }
 
 export enum INTERNAL_ERROR_EXECUTION {
   ON_CHANGE = 'onChange',
   ON_BLUR = 'onBlur',
   ON_CHANGE_ON_BLUR = 'onChangeOnBlur',
+  NONE = 'none',
 }
 
 export enum AUTOCAPITALIZE_TYPE {
@@ -401,6 +403,7 @@ export type IInputStandAlone = IInputComponents & {
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
   onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
   onClick?: React.MouseEventHandler<HTMLInputElement>;
+  onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
 };
 
 type propsToOmit =
diff --git a/src/components/inputCounter/inputCounter.tsx b/src/components/inputCounter/inputCounter.tsx
@@ -13,6 +13,7 @@ const InputCounterComponent = React.forwardRef(
     {
       type = InputTypeType.TEXT,
       truncate = false,
+      disabledCopyAndPaste,
       internalErrorExecution = INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR,
       errorExecution,
       keyValidation,
@@ -34,6 +35,7 @@ const InputCounterComponent = React.forwardRef(
       onKeyDown,
       onError,
       onInternalErrors,
+      onPaste,
       ctv,
       ...props
     }: IInputCounter<V>,
@@ -55,6 +57,7 @@ const InputCounterComponent = React.forwardRef(
       handleBlurInternal,
       handleFocusInternal,
       handleKeyDownInternal,
+      handlePasteInternal,
     } = useInput({
       ref,
       errorExecution,
@@ -74,12 +77,14 @@ const InputCounterComponent = React.forwardRef(
       informationAssociated: informationAssociatedValue?.content,
       ignoreKeys,
       regex,
+      disabledCopyAndPaste,
       onBlur,
       onChange,
       onFocus,
       onKeyDown,
       onError,
       onInternalErrors,
+      onPaste,
     });
 
     return (
@@ -101,6 +106,7 @@ const InputCounterComponent = React.forwardRef(
         onChange={handleChangeInternal}
         onFocus={handleFocusInternal}
         onKeyDown={handleKeyDownInternal}
+        onPaste={handlePasteInternal}
       />
     );
   }
diff --git a/src/components/inputCurrency/inputCurrency.tsx b/src/components/inputCurrency/inputCurrency.tsx
@@ -21,6 +21,7 @@ const InputCurrencyComponent = React.forwardRef(
       disabledArrowUpDownInputNumber = false,
       ignoreKeys = ['+', '-', 'e'],
       disabledWheelMouse = true,
+      disabledCopyAndPaste,
       type = InputTypeType.NUMBER,
       max,
       errorExecution,
@@ -43,6 +44,7 @@ const InputCurrencyComponent = React.forwardRef(
       onKeyDown,
       onError,
       onInternalErrors,
+      onPaste,
       ctv,
       ...props
     }: IInputCurrency<V>,
@@ -62,6 +64,7 @@ const InputCurrencyComponent = React.forwardRef(
       handleBlurInternal,
       handleFocusInternal,
       handleKeyDownInternal,
+      handlePasteInternal,
     } = useInput({
       ref,
       errorExecution,
@@ -86,12 +89,14 @@ const InputCurrencyComponent = React.forwardRef(
       formatNumber,
       locale,
       disabledWheelMouse,
+      disabledCopyAndPaste,
       onBlur,
       onChange,
       onFocus,
       onKeyDown,
       onError,
       onInternalErrors,
+      onPaste,
     });
 
     return (
@@ -113,6 +118,7 @@ const InputCurrencyComponent = React.forwardRef(
         onChange={handleChangeInternal}
         onFocus={handleFocusInternal}
         onKeyDown={handleKeyDownInternal}
+        onPaste={handlePasteInternal}
       />
     );
   }
diff --git a/src/components/inputCurrency/stories/inputCurrency.stories.tsx b/src/components/inputCurrency/stories/inputCurrency.stories.tsx
@@ -44,6 +44,7 @@ const commonArgs: IInputCurrency = {
   currencyPosition: POSITIONS.RIGHT,
   disabledArrowUpDownInputNumber: false,
   secondaryLabel: labelSecondary(themeSelected),
+  ignoreKeys: ['+', '-', 'e', '.'],
   additionalInfo: additionalInfoAction(themeSelected),
 };
 
diff --git a/src/components/inputDate/hooks/useInputDate.ts b/src/components/inputDate/hooks/useInputDate.ts
@@ -69,13 +69,15 @@ export const useInputDate = ({
   type,
   truncate,
   informationAssociated,
+  disabledCopyAndPaste,
   onWrapperBlur,
   onBlur,
   onChange,
   onFocus,
   onKeyDown,
   onError,
   onInternalErrors,
+  onPaste,
   ...props
 }: ParamsType): ReturnType => {
   // Ghost prototype
@@ -431,6 +433,7 @@ export const useInputDate = ({
     handleFocusInternal,
     handleKeyDownInternal,
     handleSetValue,
+    handlePasteInternal,
   } = useInput({
     ref,
     keyValidation,
@@ -447,12 +450,14 @@ export const useInputDate = ({
     type,
     truncate,
     informationAssociated,
+    disabledCopyAndPaste,
     onBlur,
     onFocus,
     onKeyDown,
     onError,
     onInternalErrors,
     onChange: handleChangeInternalValidate,
+    onPaste,
   });
 
   // update initial dates when they have value
@@ -516,5 +521,6 @@ export const useInputDate = ({
     handleFocusInternal,
     handleKeyDownInternal,
     handleSetValue,
+    handlePasteInternal,
   };
 };
diff --git a/src/components/inputDropdown/hooks/useInputDropdown.ts b/src/components/inputDropdown/hooks/useInputDropdown.ts
@@ -1,6 +1,7 @@
 import {
   ChangeEvent,
   ChangeEventHandler,
+  ClipboardEventHandler,
   FocusEventHandler,
   ForwardedRef,
   KeyboardEventHandler,
@@ -58,6 +59,7 @@ type ParamsType = {
   hasInputInSearchList?: boolean;
   name?: string;
   internalErrorExecution?: INTERNAL_ERROR_EXECUTION;
+  disabledCopyAndPaste?: boolean;
   onClick?: (
     event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement, MouseEvent>
   ) => void;
@@ -69,6 +71,7 @@ type ParamsType = {
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onOpenCloseOptions?: (open: boolean) => void;
   onInternalErrors?: (errors: string[]) => void;
+  onPaste?: ClipboardEventHandler<HTMLInputElement>;
 };
 
 type ReturnHookType = {
@@ -91,6 +94,7 @@ type ReturnHookType = {
   state: InputState;
   handleFocusInternal: FocusEventHandler<HTMLInputElement>;
   handleInputPopoverChange: ChangeEventHandler<HTMLInputElement>;
+  handlePasteInternal?: ClipboardEventHandler<HTMLInputElement>;
 };
 
 export const useInputDropdown = (props: ParamsType): ReturnHookType => {
@@ -146,16 +150,18 @@ export const useInputDropdown = (props: ParamsType): ReturnHookType => {
   };
 
   // Input Basic hook
-  const { state, inputRef, handleFocusInternal } = useInput({
+  const { state, inputRef, handleFocusInternal, handlePasteInternal } = useInput({
     internalErrorExecution: props.internalErrorExecution,
     disabled: props.disabled,
     error: props.error || internalErrors.length > 0,
     // need for update the state
     currentValue: searchText,
     informationAssociated: props.informationAssociated,
+    disabledCopyAndPaste: props.disabledCopyAndPaste,
     onFocus: props.onFocus,
     onBlur: handleInputBlur,
     onInternalErrors: props.onInternalErrors,
+    onPaste: props.onPaste,
   });
 
   const useActionBottomSheet = useMemo(
@@ -388,5 +394,6 @@ export const useInputDropdown = (props: ParamsType): ReturnHookType => {
     listOptionsHeight,
     handleFocusInternal,
     handleInputPopoverChange,
+    handlePasteInternal,
   };
 };
diff --git a/src/components/inputPassword/inputPassword.tsx b/src/components/inputPassword/inputPassword.tsx
@@ -27,6 +27,7 @@ const InputPasswordComponent = React.forwardRef(
       error,
       value: currentValue,
       ignoreKeys,
+      disabledCopyAndPaste,
       onBlur,
       onChange,
       onFocus,
@@ -37,6 +38,7 @@ const InputPasswordComponent = React.forwardRef(
       disabledIcon,
       onInputTypeChange,
       onIconClick,
+      onPaste,
       ctv,
       ...props
     }: IInputPassword<V>,
@@ -73,6 +75,7 @@ const InputPasswordComponent = React.forwardRef(
       handleBlurInternal,
       handleFocusInternal,
       handleKeyDownInternal,
+      handlePasteInternal,
     } = useInput({
       ref,
       errorExecution,
@@ -86,12 +89,14 @@ const InputPasswordComponent = React.forwardRef(
       currentValue,
       type: inputPasswordType,
       ignoreKeys,
+      disabledCopyAndPaste,
       onBlur,
       onChange,
       onFocus,
       onKeyDown,
       onError,
       onInternalErrors,
+      onPaste,
     });
 
     const icon = inputPasswordType === InputTypeType.PASSWORD ? disabledIcon : activeIcon;
@@ -113,6 +118,7 @@ const InputPasswordComponent = React.forwardRef(
         onChange={handleChangeInternal}
         onFocus={handleFocusInternal}
         onKeyDown={handleKeyDownInternal}
+        onPaste={handlePasteInternal}
       />
     );
   }
diff --git a/src/components/inputPhone/inputPhone.tsx b/src/components/inputPhone/inputPhone.tsx
@@ -29,12 +29,14 @@ const InputPhoneComponent = React.forwardRef(
       value: currentValue,
       informationAssociatedValue,
       ignoreKeys,
+      disabledCopyAndPaste,
       onBlur,
       onChange,
       onFocus,
       onKeyDown,
       onError,
       onInternalErrors,
+      onPaste,
       ctv,
       ...props
     }: IInputPhone<V>,
@@ -50,6 +52,7 @@ const InputPhoneComponent = React.forwardRef(
       handleBlurInternal,
       handleFocusInternal,
       handleKeyDownInternal,
+      handlePasteInternal,
     } = useInput({
       ref,
       errorExecution,
@@ -68,12 +71,14 @@ const InputPhoneComponent = React.forwardRef(
       truncate,
       informationAssociated: informationAssociatedValue?.content,
       ignoreKeys,
+      disabledCopyAndPaste,
       onBlur,
       onChange,
       onFocus,
       onKeyDown,
       onError,
       onInternalErrors,
+      onPaste,
     });
 
     return (
@@ -94,6 +99,7 @@ const InputPhoneComponent = React.forwardRef(
         onChange={handleChangeInternal}
         onFocus={handleFocusInternal}
         onKeyDown={handleKeyDownInternal}
+        onPaste={handlePasteInternal}
       />
     );
   }
diff --git a/src/components/inputSearch/hooks/__tests__/useInputSearch.test.ts b/src/components/inputSearch/hooks/__tests__/useInputSearch.test.ts
@@ -71,6 +71,7 @@ const mockUseInputValues = {
   handleChangeInternal: jest.fn(),
   handleKeyDownInternal: jest.fn(),
   handleSetValue: jest.fn(),
+  handlePasteInternal: jest.fn(),
 };
 
 describe('useInputSearch hook', () => {
diff --git a/src/components/inputSearch/hooks/useInputSearch.ts b/src/components/inputSearch/hooks/useInputSearch.ts
diff --git a/src/hooks/useInput/__tests__/useInput.test.ts b/src/hooks/useInput/__tests__/useInput.test.ts
diff --git a/src/hooks/useInput/types/inputHook.ts b/src/hooks/useInput/types/inputHook.ts
diff --git a/src/hooks/useInput/useInput.ts b/src/hooks/useInput/useInput.ts
