diff --git a/example/src/App.tsx b/example/src/App.tsx index 0caef89..7b674dd 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, StyleSheet, Text, View } from 'react-native'; -import MaskedTextInput from 'react-native-advanced-input-mask'; +import { MaskedTextInput } from 'react-native-advanced-input-mask'; const alphaNumericChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; diff --git a/jest/index.js b/jest/index.js index 96a67a3..a1cd77c 100644 --- a/jest/index.js +++ b/jest/index.js @@ -8,7 +8,7 @@ export const AFFINITY_CALCULATION_STRATEGY = { }; const mock = { - default: TextInput, + MaskedTextInput: TextInput, AFFINITY_CALCULATION_STRATEGY, }; diff --git a/src/index.tsx b/src/index.tsx index 8c67d1f..6a86f23 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,79 +1,10 @@ -import type { TextInputProps } from 'react-native'; -import { StyleSheet, TextInput } from 'react-native'; -import React, { forwardRef, memo, useCallback } from 'react'; -import MaskedTextInputDecoratorView from './MaskedTextInputNative'; -import type { MaskedTextInputDecoratorViewNativeProps } from './types'; +import MaskedTextInput from './views/MaskedTextInput'; -type MaskedTextInputProps = Omit & - MaskedTextInputDecoratorViewNativeProps; +import type { MaskedTextInputProps } from './types'; +import { AFFINITY_CALCULATION_STRATEGY } from './enums'; -const styles = StyleSheet.create({ - displayNone: { - display: 'none', - }, - farAway: { - position: 'absolute', - top: 1e8, - left: 1e8, - }, -}); +export type { MaskedTextInputProps }; -const MaskedTextInput = memo( - forwardRef( - ( - { - affinityCalculationStrategy, - affinityFormat, - allowSuggestions, - autocomplete, - autocompleteOnFocus, - autoSkip, - customNotations, - customTransformation, - defaultValue, - isRTL, - mask, - autoCapitalize = 'words', - value, - onChangeText, - onTailPlaceholderChange, - ...rest - }, - ref - ) => { - const IS_FABRIC = 'nativeFabricUIManager' in global; +export { AFFINITY_CALCULATION_STRATEGY }; - const onAdvancedMaskTextChangeCallback = useCallback( - ({ nativeEvent: { extracted, formatted, tailPlaceholder } }) => { - onChangeText?.(formatted, extracted); - onTailPlaceholderChange?.(tailPlaceholder); - }, - [onChangeText, onTailPlaceholderChange] - ); - - return ( - <> - - - - ); - } - ) -); - -export default MaskedTextInput; +export { MaskedTextInput }; diff --git a/src/types.ts b/src/types.ts index 5aa63ab..e6bdd3b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,4 @@ -import type { ViewProps } from 'react-native'; +import type { TextInputProps } from 'react-native'; import type { AFFINITY_CALCULATION_STRATEGY } from './enums'; export type Notation = { @@ -21,7 +21,7 @@ type CustomTransformation = { transformationString: string; }; -export type MaskedTextInputDecoratorViewNativeProps = ViewProps & { +export type MaskedTextInputProps = Omit & { /** * The mask format to be applied to the text input. * @example "[0000] [0000] [0000] [0000]" diff --git a/src/views/MaskedTextInput/index.tsx b/src/views/MaskedTextInput/index.tsx new file mode 100644 index 0000000..c056390 --- /dev/null +++ b/src/views/MaskedTextInput/index.tsx @@ -0,0 +1,75 @@ +import { StyleSheet, TextInput } from 'react-native'; +import React, { forwardRef, memo, useCallback } from 'react'; +import MaskedTextInputDecoratorView from '../../MaskedTextInputNative'; +import type { MaskedTextInputProps } from '../../types'; + +const styles = StyleSheet.create({ + displayNone: { + display: 'none', + }, + farAway: { + position: 'absolute', + top: 1e8, + left: 1e8, + }, +}); + +const MaskedTextInput = memo( + forwardRef( + ( + { + affinityCalculationStrategy, + affinityFormat, + allowSuggestions, + autocomplete, + autocompleteOnFocus, + autoSkip, + customNotations, + customTransformation, + defaultValue, + isRTL, + mask, + autoCapitalize = 'words', + value, + onChangeText, + onTailPlaceholderChange, + ...rest + }, + ref + ) => { + const IS_FABRIC = 'nativeFabricUIManager' in global; + + const onAdvancedMaskTextChangeCallback = useCallback( + ({ nativeEvent: { extracted, formatted, tailPlaceholder } }) => { + onChangeText?.(formatted, extracted); + onTailPlaceholderChange?.(tailPlaceholder); + }, + [onChangeText, onTailPlaceholderChange] + ); + + return ( + <> + + + + ); + } + ) +); + +export default MaskedTextInput;