fix: align methods with react-native-text-input-mask (#12)

* fix: align methods with react-native-text-input-mask * fix: onAdvancedTextChange to onChangeText
IvanIhnatsiuk · Oct 27, 2024 · 164f0ac · 164f0ac
1 parent 686a36e
commit 164f0ac
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -20,7 +20,7 @@ export default function App() {
     formatted: '',
   });
 
-  const onChangeText = React.useCallback((extracted, formatted) => {
+  const onChangeText = React.useCallback((formatted, extracted) => {
     console.log('extracted:', extracted, 'formatted:', formatted);
     setTextState({ extracted, formatted });
   }, []);
@@ -37,9 +37,9 @@ export default function App() {
         defaultValue=""
         value={textState.formatted}
         style={styles.maskedTextInput}
-        onAdvancedMaskTextChange={onChangeText}
+        onChangeText={onChangeText}
         onTailPlaceholderChange={console.log}
-        primaryMaskFormat="[00]-[$$]-[00]"
+        mask="[00]-[$$]-[00]"
         autocomplete={false}
         allowSuggestions={true}
         autocompleteOnFocus={false}

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,7 +4,7 @@ import React, { forwardRef, memo, useCallback } from 'react';
 import MaskedTextInputDecoratorView from './MaskedTextInputNative';
 import type { MaskedTextInputDecoratorViewNativeProps } from './types';
 
-type MaskedTextInputProps = TextInputProps &
+type MaskedTextInputProps = Omit<TextInputProps, 'onChangeText'> &
   MaskedTextInputDecoratorViewNativeProps;
 
 const styles = StyleSheet.create({
@@ -32,10 +32,10 @@ const MaskedTextInput = memo<MaskedTextInputProps>(
         customTransformation,
         defaultValue,
         isRTL,
-        primaryMaskFormat,
+        mask,
         autoCapitalize = 'words',
         value,
-        onAdvancedMaskTextChange,
+        onChangeText,
         onTailPlaceholderChange,
         ...rest
       },
@@ -45,10 +45,10 @@ const MaskedTextInput = memo<MaskedTextInputProps>(
 
       const onAdvancedMaskTextChangeCallback = useCallback(
         ({ nativeEvent: { extracted, formatted, tailPlaceholder } }) => {
-          onAdvancedMaskTextChange?.(extracted, formatted);
+          onChangeText?.(formatted, extracted);
           onTailPlaceholderChange?.(tailPlaceholder);
         },
-        [onAdvancedMaskTextChange, onTailPlaceholderChange]
+        [onChangeText, onTailPlaceholderChange]
       );
 
       return (
@@ -66,7 +66,7 @@ const MaskedTextInput = memo<MaskedTextInputProps>(
             defaultValue={defaultValue}
             isRTL={isRTL}
             onAdvancedMaskTextChange={onAdvancedMaskTextChangeCallback}
-            primaryMaskFormat={primaryMaskFormat}
+            primaryMaskFormat={mask}
             style={IS_FABRIC ? styles.farAway : styles.displayNone}
             value={value}
           />

diff --git a/src/types.ts b/src/types.ts
@@ -17,12 +17,9 @@ export type Notation = {
 };
 
 export type MaskedTextInputDecoratorViewNativeProps = ViewProps & {
-  primaryMaskFormat: string;
+  mask: string;
   customNotations?: Notation[];
-  onAdvancedMaskTextChange?: (
-    extractedValue: string,
-    formattedValue: string
-  ) => void;
+  onChangeText?: (formattedValue: string, extractedValue: string) => void;
   onTailPlaceholderChange?: (tailPlaceholder: string) => void;
   affinityFormat?: string[];
   autocomplete?: boolean;