@react-native-ohos/react-native-text-input-mask 3.1.6-rc.1

package/index.tsx

@@ -0,0 +1,258 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import React, {
+  DependencyList,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from 'react'
+
+import { findNodeHandle, Platform, TextInput, TextInputProps } from 'react-native'
+import exportMasker from './src/index'
+import HarmonyTextInputMask from './src/index.harmony'
+const isIosAndroid = Platform.OS === 'ios' || Platform.OS === 'android';
+export const mask = exportMasker.mask
+export const unmask = exportMasker.unmask
+export const setMask = exportMasker.setMask
+export const unmaskWithRightToLeft = HarmonyTextInputMask.unmaskWithRightToLeft
+const TextInputMask = forwardRef<Handles, TextInputMaskProps>(({
+    mask: primaryFormat,
+    defaultValue,
+    value ,
+    multiline,
+    onChangeText,
+    affineFormats,
+    customNotations,
+    affinityCalculationStrategy,
+    autocomplete= true,
+    autoskip = true,
+    rightToLeft,
+    ...rest
+}, ref) => {
+  const input = useRef<TextInput>(null)
+  const [ maskedValue, setMaskedValue ] = useState<string>()
+  const didLayout = useRef(false);
+  const handleLayout = () => {
+    didLayout.current = true;
+    const nodeId = findNodeHandle(input.current);
+    if (primaryFormat && nodeId) {
+      setMask(nodeId, primaryFormat, { affineFormats, affinityCalculationStrategy, customNotations, autocomplete, autoskip, rightToLeft });
+    }
+  };
+
+  useEffectAsync(async () => {
+    const initialValue = value ?? defaultValue
+    if (!initialValue) return
+    if (primaryFormat) {
+      const masked = await mask(primaryFormat, initialValue, false)
+      setMaskedValue(masked)
+    } else {
+      setMaskedValue(initialValue)
+    }
+  }, [])
+
+  useEffectAsync(async () => {
+    if (value === maskedValue) return
+    if (primaryFormat && value) {
+      const masked = await mask(primaryFormat, value, false)
+      setMaskedValue(masked)
+    } else {
+      setMaskedValue(value)
+    }
+  }, [value])
+
+  useEffect(() => {
+    if (didLayout.current) {
+      const nodeId = findNodeHandle(input.current)
+      if (primaryFormat && nodeId) {
+        setMask(nodeId, primaryFormat, { affineFormats, affinityCalculationStrategy, customNotations, autocomplete, autoskip, rightToLeft })
+      }
+    }
+  }, [primaryFormat])
+
+  useImperativeHandle(ref, () => ({
+    focus: () => {
+      input.current?.focus()
+    },
+    blur: () => {
+      input.current?.blur()
+    }
+  }))
+
+  return (
+      <TextInput
+          {...rest}
+          ref={input}
+          value={maskedValue}
+          multiline={primaryFormat && Platform.OS === 'ios' ? false : multiline}
+          onLayout={handleLayout}
+          onChangeText={async (masked) => {
+            setMaskedValue(masked)
+            if (primaryFormat) {
+              if (isIosAndroid) {
+                const unmasked = await unmask(primaryFormat, masked, true)
+                onChangeText?.(masked, unmasked)
+              } else {
+                const unmasked = await unmaskWithRightToLeft(primaryFormat, masked, true, rightToLeft === undefined ? false : rightToLeft)
+                onChangeText?.(masked, unmasked)
+              }
+            } else {
+              onChangeText?.(masked)
+            }
+          }}
+      />
+  )
+})
+
+export const useEffectAsync = (
+    operation: () => Promise<void>,
+    deps?: DependencyList
+) => {
+  useEffect(() => {
+    operation().then()
+  }, deps)
+}
+
+interface MaskOptions {
+  affineFormats?: string[]
+  customNotations?: Notation[]
+  affinityCalculationStrategy?: AffinityCalculationStrategy
+  /**
+   * autocomplete pattern while editing text
+   */
+  autocomplete?: boolean
+  /**
+   * automatically remove mask characters on backspace
+   */
+  autoskip?: boolean
+  rightToLeft?: boolean
+}
+
+type AffinityCalculationStrategy =
+/**
+ * Default strategy.
+ *
+ * Uses ```Mask``` built-in mechanism to calculate total affinity between the text and the mask format.
+ *
+ * For example:
+ * ```
+ * format: [00].[00]
+ *
+ * input1: 1234
+ * input2: 12.34
+ * input3: 1.234
+ *
+ * affinity1 = 4 (symbols) - 1 (missed dot)                       = 3
+ * affinity2 = 5 (symbols)                                        = 5
+ * affinity3 = 5 (symbols) - 1 (superfluous dot) - 1 (missed dot) = 3
+ * ```
+ */
+    'WHOLE_STRING' |
+
+/**
+ * Finds the longest common prefix between the original text and the same text after applying the mask.
+ *
+ * For example:
+ * ```
+ * format1: +7 [000] [000]
+ * format2: 8 [000] [000]
+ *
+ * input: +7 12 345
+ * affinity1 = 5
+ * affinity2 = 0
+ *
+ * input: 8 12 345
+ * affinity1 = 0
+ * affinity2 = 4
+ * ```
+ */
+'PREFIX' |
+
+    /**
+     * Affinity is tolerance between the length of the input and the total amount of text current mask can accommodate.
+     *
+     * If current mask can't accommodate all the text, the affinity equals `Int.min`.
+     *
+     * For example:
+     * ```
+     * format1: [00]-[0]
+     * format2: [00]-[000]
+     * format3: [00]-[00000]
+     *
+     * input          affinity1          affinity2    affinity3
+     * 1              -3                 -5           -7
+     * 12             -2                 -4           -6
+     * 123            -1                 -3           -5
+     * 12-3           0                  -2           -4
+     * 1234           0                  -2           -4
+     * 12345          Int.MIN_VALUE      -1           -3
+     * 123456         Int.MIN_VALUE      0            -2
+     * ```
+     *
+     * This affinity calculation strategy comes in handy when the mask format radically changes depending on the input
+     * length.
+     *
+     * N.B.: Make sure the widest mask format is the primary mask format.
+     */
+    'CAPACITY' |
+
+    /**
+     * Affinity is tolerance between the length of the extracted value and the total extracted value length current mask can accommodate.
+     *
+     * If current mask can't accommodate all the text, the affinity equals `Int.min`.
+     *
+     * For example:
+     * ```
+     * format1: [00]-[0]
+     * format2: [00]-[000]
+     * format3: [00]-[00000]
+     *
+     * input          affinity1          affinity2          affinity3
+     * 1              -2                 -4                 -6
+     * 12             -1                 -3                 -5
+     * 123            0                  -2                 -4
+     * 12-3           0                  -2                 -4
+     * 1234           Int.MIN_VALUE      -1                 -3
+     * 12345          Int.MIN_VALUE      0                  -2
+     * 123456         Int.MIN_VALUE      Int.MIN_VALUE      -1
+     * ```
+     *
+     * This affinity calculation strategy comes in handy when the mask format radically changes depending on the value
+     * length.
+     *
+     * N.B.: Make sure the widest mask format is the primary mask format.
+     */
+    'EXTRACTED_VALUE_CAPACITY'
+
+interface Notation {
+  /**
+   * A symbol in format string.
+   */
+  character: string,
+  /**
+   * An associated character set of acceptable input characters.
+   */
+  characterSet: string,
+  /**
+   * Is it an optional symbol or mandatory?
+   */
+  isOptional: boolean
+}
+
+export interface TextInputMaskProps extends TextInputProps, MaskOptions{
+  mask?: string
+  onChangeText?: (formatted: string, extracted?: string) => void
+}
+
+interface Handles {
+  focus: () => void
+  blur: () => void
+}
+
+export default TextInputMask

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@react-native-ohos/react-native-text-input-mask",
+  "version": "3.1.6-rc.1",
+  "description": "Text input mask for React Native.",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-native-community/react-native-text-input-mask"
+  },
+  "keywords": [
+    "react",
+    "native",
+    "mask",
+    "text input",
+    "android",
+    "ios",
+    "harmony"
+  ],
+  "harmony": {
+    "alias":"react-native-text-input-mask"
+  },
+  "scripts": {
+    "prepublish": "npx tsc"
+  },
+  "dependencies": {
+    "react-native-text-input-mask": "^3.2.0"
+  },
+  "devDependencies": {
+    "@react-native-community/eslint-config": "3.2.0",
+    "@types/react": "^18.2.12",
+    "react-native": "^0.71.10",
+    "tslib": "^2.5.3",
+    "typescript": "^5.1.3"
+  },
+  "files": [
+    "src",
+    "harmony",
+    "dist",
+    "index.tsx"
+  ],
+  "peerDependencies": {
+    "react-native": ">=0.69.0"
+  },
+  "author": "Martin Treurnicht",
+  "bugs": {
+    "url": "https://github.com/react-native-community/react-native-text-input-mask/issues"
+  },
+  "homepage": "https://github.com/react-native-community/react-native-text-input-mask"
+}

package/src/RNNativeTextInputMask.ts

@@ -0,0 +1,143 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import type { TurboModule } from "react-native/Libraries/TurboModule/RCTExport";
+import { TurboModuleRegistry} from "react-native";
+
+export interface MaskOptions {
+    affineFormats?: string[]
+    customNotations?: Notation[]
+    affinityCalculationStrategy?: AffinityCalculationStrategy
+    /**
+     * autocomplete pattern while editing text
+     */
+    autocomplete?: boolean
+    /**
+     * automatically remove mask characters on backspace
+     */
+    autoskip?: boolean
+    rightToLeft?: boolean
+  }
+
+  export type AffinityCalculationStrategy =
+/**
+ * Default strategy.
+ *
+ * Uses ```Mask``` built-in mechanism to calculate total affinity between the text and the mask format.
+ *
+ * For example:
+ * ```
+ * format: [00].[00]
+ *
+ * input1: 1234
+ * input2: 12.34
+ * input3: 1.234
+ *
+ * affinity1 = 4 (symbols) - 1 (missed dot)                       = 3
+ * affinity2 = 5 (symbols)                                        = 5
+ * affinity3 = 5 (symbols) - 1 (superfluous dot) - 1 (missed dot) = 3
+ * ```
+ */
+    'WHOLE_STRING' |
+
+/**
+ * Finds the longest common prefix between the original text and the same text after applying the mask.
+ *
+ * For example:
+ * ```
+ * format1: +7 [000] [000]
+ * format2: 8 [000] [000]
+ *
+ * input: +7 12 345
+ * affinity1 = 5
+ * affinity2 = 0
+ *
+ * input: 8 12 345
+ * affinity1 = 0
+ * affinity2 = 4
+ * ```
+ */
+'PREFIX' |
+
+    /**
+     * Affinity is tolerance between the length of the input and the total amount of text current mask can accommodate.
+     *
+     * If current mask can't accommodate all the text, the affinity equals `Int.min`.
+     *
+     * For example:
+     * ```
+     * format1: [00]-[0]
+     * format2: [00]-[000]
+     * format3: [00]-[00000]
+     *
+     * input          affinity1          affinity2    affinity3
+     * 1              -3                 -5           -7
+     * 12             -2                 -4           -6
+     * 123            -1                 -3           -5
+     * 12-3           0                  -2           -4
+     * 1234           0                  -2           -4
+     * 12345          Int.MIN_VALUE      -1           -3
+     * 123456         Int.MIN_VALUE      0            -2
+     * ```
+     *
+     * This affinity calculation strategy comes in handy when the mask format radically changes depending on the input
+     * length.
+     *
+     * N.B.: Make sure the widest mask format is the primary mask format.
+     */
+    'CAPACITY' |
+
+    /**
+     * Affinity is tolerance between the length of the extracted value and the total extracted value length current mask can accommodate.
+     *
+     * If current mask can't accommodate all the text, the affinity equals `Int.min`.
+     *
+     * For example:
+     * ```
+     * format1: [00]-[0]
+     * format2: [00]-[000]
+     * format3: [00]-[00000]
+     *
+     * input          affinity1          affinity2          affinity3
+     * 1              -2                 -4                 -6
+     * 12             -1                 -3                 -5
+     * 123            0                  -2                 -4
+     * 12-3           0                  -2                 -4
+     * 1234           Int.MIN_VALUE      -1                 -3
+     * 12345          Int.MIN_VALUE      0                  -2
+     * 123456         Int.MIN_VALUE      Int.MIN_VALUE      -1
+     * ```
+     *
+     * This affinity calculation strategy comes in handy when the mask format radically changes depending on the value
+     * length.
+     *
+     * N.B.: Make sure the widest mask format is the primary mask format.
+     */
+    'EXTRACTED_VALUE_CAPACITY'
+
+interface Notation {
+  /**
+   * A symbol in format string.
+   */
+  character: string,
+  /**
+   * An associated character set of acceptable input characters.
+   */
+  characterSet: string,
+  /**
+   * Is it an optional symbol or mandatory?
+   */
+  isOptional: boolean
+}
+
+export interface Spec extends TurboModule {
+    mask (mask: string, value: string, autocomplete: boolean) :Promise<string>, 
+    unmask (mask: string, value: string, autocomplete: boolean): Promise<string>, 
+    setMask (reactNode: number, primaryFormat: string, options?: MaskOptions): void;
+    unmaskWithRightToLeft (mask: string, value: string, autocomplete: boolean, rightToLeft: boolean): Promise<string>;
+}
+
+export default TurboModuleRegistry.get<Spec>('RNTextInputMask') as Spec ;

package/src/index.harmony.ts

@@ -0,0 +1,147 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import RNNativeTextInputMask from './RNNativeTextInputMask';
+export interface MaskOptions {
+    affineFormats?: string[];
+    customNotations?: Notation[];
+    affinityCalculationStrategy?: AffinityCalculationStrategy;
+    /**
+     * autocomplete pattern while editing text
+     */
+    autocomplete?: boolean;
+    /**
+     * automatically remove mask characters on backspace
+     */
+    autoskip?: boolean;
+    rightToLeft?: boolean;
+}
+
+type AffinityCalculationStrategy = 
+/**
+ * Default strategy.
+ *
+ * Uses ```Mask``` built-in mechanism to calculate total affinity between the text and the mask format.
+ *
+ * For example:
+ * ```
+ * format: [00].[00]
+ *
+ * input1: 1234
+ * input2: 12.34
+ * input3: 1.234
+ *
+ * affinity1 = 4 (symbols) - 1 (missed dot)                       = 3
+ * affinity2 = 5 (symbols)                                        = 5
+ * affinity3 = 5 (symbols) - 1 (superfluous dot) - 1 (missed dot) = 3
+ * ```
+ */
+'WHOLE_STRING' | 
+/**
+ * Finds the longest common prefix between the original text and the same text after applying the mask.
+ *
+ * For example:
+ * ```
+ * format1: +7 [000] [000]
+ * format2: 8 [000] [000]
+ *
+ * input: +7 12 345
+ * affinity1 = 5
+ * affinity2 = 0
+ *
+ * input: 8 12 345
+ * affinity1 = 0
+ * affinity2 = 4
+ * ```
+ */
+'PREFIX' | 
+/**
+ * Affinity is tolerance between the length of the input and the total amount of text current mask can accommodate.
+ *
+ * If current mask can't accommodate all the text, the affinity equals `Int.min`.
+ *
+ * For example:
+ * ```
+ * format1: [00]-[0]
+ * format2: [00]-[000]
+ * format3: [00]-[00000]
+ *
+ * input          affinity1          affinity2    affinity3
+ * 1              -3                 -5           -7
+ * 12             -2                 -4           -6
+ * 123            -1                 -3           -5
+ * 12-3           0                  -2           -4
+ * 1234           0                  -2           -4
+ * 12345          Int.MIN_VALUE      -1           -3
+ * 123456         Int.MIN_VALUE      0            -2
+ * ```
+ *
+ * This affinity calculation strategy comes in handy when the mask format radically changes depending on the input
+ * length.
+ *
+ * N.B.: Make sure the widest mask format is the primary mask format.
+ */
+'CAPACITY' | 
+/**
+ * Affinity is tolerance between the length of the extracted value and the total extracted value length current mask can accommodate.
+ *
+ * If current mask can't accommodate all the text, the affinity equals `Int.min`.
+ *
+ * For example:
+ * ```
+ * format1: [00]-[0]
+ * format2: [00]-[000]
+ * format3: [00]-[00000]
+ *
+ * input          affinity1          affinity2          affinity3
+ * 1              -2                 -4                 -6
+ * 12             -1                 -3                 -5
+ * 123            0                  -2                 -4
+ * 12-3           0                  -2                 -4
+ * 1234           Int.MIN_VALUE      -1                 -3
+ * 12345          Int.MIN_VALUE      0                  -2
+ * 123456         Int.MIN_VALUE      Int.MIN_VALUE      -1
+ * ```
+ *
+ * This affinity calculation strategy comes in handy when the mask format radically changes depending on the value
+ * length.
+ *
+ * N.B.: Make sure the widest mask format is the primary mask format.
+ */
+'EXTRACTED_VALUE_CAPACITY';
+interface Notation {
+    /**
+     * A symbol in format string.
+     */
+    character: string;
+    /**
+     * An associated character set of acceptable input characters.
+     */
+    characterSet: string;
+    /**
+     * Is it an optional symbol or mandatory?
+     */
+    isOptional: boolean;
+}
+
+
+class HarmonyTextInputMask {
+   static mask(mask: string, value: string, autocomplete: boolean): Promise<string> {
+        return RNNativeTextInputMask.mask(mask, value, autocomplete);
+    }
+
+    static unmask(mask: string, value: string, autocomplete: boolean): Promise<string> {
+        return RNNativeTextInputMask.unmask(mask, value, autocomplete);
+    }
+    static  setMask(reactNode: number, primaryFormat: string, options?: MaskOptions): void {
+        RNNativeTextInputMask.setMask(reactNode, primaryFormat, options)
+    }
+    static unmaskWithRightToLeft(mask: string, value: string, autocomplete: boolean, rightToLeft: boolean): Promise<string> {
+        return RNNativeTextInputMask.unmaskWithRightToLeft(mask, value, autocomplete, rightToLeft);
+    }
+}
+console.log("======HarmonyTextInputMask=",HarmonyTextInputMask)
+export default HarmonyTextInputMask;

package/src/index.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import HarmonyTextInputMask ,{MaskOptions}from './index.harmony'
+import {mask as maskA, unmask as unmaskA, setMask as setMaskA }  from 'react-native-text-input-mask';
+import { Platform } from 'react-native';
+
+interface MaskOperations {
+    mask(mask: string, value: string, autocomplete: boolean): Promise<string> ;
+    unmask(mask: string, value: string, autocomplete: boolean): Promise<string> 
+    setMask(reactNode: number, primaryFormat: string, options?: MaskOptions): void
+}
+const isIosAndroid = Platform.OS === 'ios' || Platform.OS === 'android';
+
+
+class RNTextInputMask {
+constructor(){}
+    static mask(mask: string, value: string, autocomplete: boolean): Promise<string> {
+            return maskA(mask, value, autocomplete);
+        }
+    
+        static unmask(mask: string, value: string, autocomplete: boolean): Promise<string> {
+            return unmaskA(mask, value, autocomplete);
+        }
+        static  setMask(reactNode: number, primaryFormat: string, options?: MaskOptions): void {
+        setMaskA(reactNode, primaryFormat, options)
+        }
+}
+console.log("======isIosAndroid=",isIosAndroid)
+console.log("======RNTextInputMask=",RNTextInputMask)
+export const exportMasker:MaskOperations= isIosAndroid ? RNTextInputMask : HarmonyTextInputMask
+console.log("======exportMasker=",exportMasker)
+export default exportMasker;