@salve-software/react-native-nitro-input-mask 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -17
- package/android/src/main/java/com/nitroinputmask/NitroInputMaskServiceModule.kt +4 -3
- package/ios/NitroInputMaskServiceModule.swift +3 -3
- package/lib/commonjs/classes/NitroInputMaskService/NitroInputMaskService.class.js +18 -9
- package/lib/commonjs/classes/NitroInputMaskService/NitroInputMaskService.class.js.map +1 -1
- package/lib/commonjs/components/NitroInputMask/index.js +20 -4
- package/lib/commonjs/components/NitroInputMask/index.js.map +1 -1
- package/lib/commonjs/types/MaskResult.js +2 -0
- package/lib/commonjs/types/MaskResult.js.map +1 -0
- package/lib/module/classes/NitroInputMaskService/NitroInputMaskService.class.js +18 -9
- package/lib/module/classes/NitroInputMaskService/NitroInputMaskService.class.js.map +1 -1
- package/lib/module/components/NitroInputMask/index.js +22 -6
- package/lib/module/components/NitroInputMask/index.js.map +1 -1
- package/lib/module/types/MaskResult.js +2 -0
- package/lib/module/types/MaskResult.js.map +1 -0
- package/lib/typescript/src/classes/NitroInputMaskService/NitroInputMaskService.class.d.ts +13 -9
- package/lib/typescript/src/classes/NitroInputMaskService/NitroInputMaskService.class.d.ts.map +1 -1
- package/lib/typescript/src/components/NitroInputMask/index.d.ts.map +1 -1
- package/lib/typescript/src/components/NitroInputMask/types/NitroInputMaskProps.d.ts +19 -2
- package/lib/typescript/src/components/NitroInputMask/types/NitroInputMaskProps.d.ts.map +1 -1
- package/lib/typescript/src/specs/nitro-input-mask-service.nitro.d.ts +5 -1
- package/lib/typescript/src/specs/nitro-input-mask-service.nitro.d.ts.map +1 -1
- package/lib/typescript/src/types/MaskResult.d.ts +13 -0
- package/lib/typescript/src/types/MaskResult.d.ts.map +1 -0
- package/lib/typescript/src/types/index.d.ts +1 -0
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/nitrogen/generated/android/c++/JHybridNitroInputMaskServiceSpec.cpp +7 -3
- package/nitrogen/generated/android/c++/JHybridNitroInputMaskServiceSpec.hpp +1 -1
- package/nitrogen/generated/android/c++/JMaskResult.hpp +61 -0
- package/nitrogen/generated/android/kotlin/com/margelo/nitro/nitroinputmask/HybridNitroInputMaskServiceSpec.kt +1 -1
- package/nitrogen/generated/android/kotlin/com/margelo/nitro/nitroinputmask/MaskResult.kt +56 -0
- package/nitrogen/generated/ios/NitroInputMask-Swift-Cxx-Bridge.hpp +9 -6
- package/nitrogen/generated/ios/NitroInputMask-Swift-Cxx-Umbrella.hpp +3 -0
- package/nitrogen/generated/ios/c++/HybridNitroInputMaskServiceSpecSwift.hpp +4 -1
- package/nitrogen/generated/ios/swift/HybridNitroInputMaskServiceSpec.swift +1 -1
- package/nitrogen/generated/ios/swift/HybridNitroInputMaskServiceSpec_cxx.swift +4 -4
- package/nitrogen/generated/ios/swift/MaskResult.swift +34 -0
- package/nitrogen/generated/shared/c++/HybridNitroInputMaskServiceSpec.hpp +4 -1
- package/nitrogen/generated/shared/c++/MaskResult.hpp +87 -0
- package/package.json +3 -2
- package/src/classes/NitroInputMaskService/NitroInputMaskService.class.ts +18 -10
- package/src/components/NitroInputMask/index.tsx +29 -11
- package/src/components/NitroInputMask/types/NitroInputMaskProps.ts +19 -2
- package/src/specs/nitro-input-mask-service.nitro.ts +9 -1
- package/src/types/MaskResult.ts +12 -0
- package/src/types/index.ts +1 -0
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Native input masks for React Native — zero JS flicker, built on [Nitro Modules](https://github.com/mrousavy/nitro).
|
|
4
4
|
|
|
5
|
-
[](https://www.npmjs.com/package/react-native-nitro-input-mask)
|
|
6
|
-
[](https://www.npmjs.com/package/react-native-nitro-input-mask)
|
|
7
|
-
[](./LICENSE)
|
|
5
|
+
[](https://www.npmjs.com/package/@salve-software/react-native-nitro-input-mask)
|
|
6
|
+
[](https://www.npmjs.com/package/@salve-software/react-native-nitro-input-mask)
|
|
7
|
+
[](./LICENSE)
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
10
|
<img src="./assets/demo.gif" width="320" />
|
|
@@ -64,17 +64,25 @@ Drop-in replacement for `<TextInput />`. Accepts all standard `TextInputProps` p
|
|
|
64
64
|
|
|
65
65
|
```tsx
|
|
66
66
|
import React, { useState } from 'react'
|
|
67
|
-
import {
|
|
67
|
+
import type { MaskResult } from '@salve-software/react-native-nitro-input-mask'
|
|
68
|
+
import { NitroInputMask } from '@salve-software/react-native-nitro-input-mask'
|
|
68
69
|
|
|
69
70
|
function PhoneInput() {
|
|
70
|
-
const [
|
|
71
|
+
const [display, setDisplay] = useState('')
|
|
72
|
+
const [digits, setDigits] = useState('')
|
|
73
|
+
|
|
74
|
+
function handleChange({ masked, raw }: MaskResult) {
|
|
75
|
+
setDisplay(masked) // '(555) 123-4567'
|
|
76
|
+
setDigits(raw) // '5551234567'
|
|
77
|
+
}
|
|
71
78
|
|
|
72
79
|
return (
|
|
73
80
|
<NitroInputMask
|
|
74
81
|
maskOptions={{ mask: '(999) 999-9999' }}
|
|
75
82
|
placeholder="(555) 000-0000"
|
|
76
83
|
keyboardType="numeric"
|
|
77
|
-
|
|
84
|
+
value={display}
|
|
85
|
+
onChangeText={handleChange}
|
|
78
86
|
/>
|
|
79
87
|
)
|
|
80
88
|
}
|
|
@@ -86,7 +94,7 @@ function PhoneInput() {
|
|
|
86
94
|
maskType="money"
|
|
87
95
|
maskOptions={{ unit: '$ ', precision: 2 }}
|
|
88
96
|
keyboardType="numeric"
|
|
89
|
-
onChangeText={
|
|
97
|
+
onChangeText={({ masked, raw }) => { /* ... */ }}
|
|
90
98
|
/>
|
|
91
99
|
|
|
92
100
|
// Date
|
|
@@ -94,7 +102,7 @@ function PhoneInput() {
|
|
|
94
102
|
maskType="datetime"
|
|
95
103
|
maskOptions={{ format: 'MM/DD/YYYY' }}
|
|
96
104
|
keyboardType="numeric"
|
|
97
|
-
onChangeText={
|
|
105
|
+
onChangeText={({ masked, raw }) => { /* ... */ }}
|
|
98
106
|
/>
|
|
99
107
|
|
|
100
108
|
// Credit card
|
|
@@ -102,7 +110,7 @@ function PhoneInput() {
|
|
|
102
110
|
maskType="credit-card"
|
|
103
111
|
maskOptions={{ issuer: 'visa-or-mastercard' }}
|
|
104
112
|
keyboardType="numeric"
|
|
105
|
-
onChangeText={
|
|
113
|
+
onChangeText={({ masked, raw }) => { /* ... */ }}
|
|
106
114
|
/>
|
|
107
115
|
```
|
|
108
116
|
|
|
@@ -111,27 +119,28 @@ function PhoneInput() {
|
|
|
111
119
|
Apply a mask to any string — useful for formatting values in lists, previews, etc.
|
|
112
120
|
|
|
113
121
|
```tsx
|
|
114
|
-
import { NitroInputMaskService } from 'react-native-nitro-input-mask'
|
|
122
|
+
import { NitroInputMaskService } from '@salve-software/react-native-nitro-input-mask'
|
|
115
123
|
|
|
116
|
-
NitroInputMaskService.applyMask({
|
|
124
|
+
const { masked, raw } = NitroInputMaskService.applyMask({
|
|
117
125
|
value: '5551234567',
|
|
118
126
|
maskOptions: { mask: '(999) 999-9999' },
|
|
119
127
|
})
|
|
120
|
-
// '(555) 123-4567'
|
|
128
|
+
// masked: '(555) 123-4567'
|
|
129
|
+
// raw: '5551234567'
|
|
121
130
|
|
|
122
|
-
NitroInputMaskService.applyMask({
|
|
131
|
+
const { masked: maskedMoney } = NitroInputMaskService.applyMask({
|
|
123
132
|
value: '123456',
|
|
124
133
|
maskType: 'money',
|
|
125
134
|
maskOptions: { unit: '$ ', precision: 2 },
|
|
126
135
|
})
|
|
127
|
-
// '$ 1,234.56'
|
|
136
|
+
// maskedMoney: '$ 1,234.56'
|
|
128
137
|
|
|
129
|
-
NitroInputMaskService.applyMask({
|
|
138
|
+
const { masked: maskedDate } = NitroInputMaskService.applyMask({
|
|
130
139
|
value: '06252025',
|
|
131
140
|
maskType: 'datetime',
|
|
132
141
|
maskOptions: { format: 'MM/DD/YYYY' },
|
|
133
142
|
})
|
|
134
|
-
// '06/25/2025'
|
|
143
|
+
// maskedDate: '06/25/2025'
|
|
135
144
|
```
|
|
136
145
|
|
|
137
146
|
## Mask Syntax
|
|
@@ -150,6 +159,12 @@ NitroInputMaskService.applyMask({
|
|
|
150
159
|
|
|
151
160
|
Extends React Native's [`TextInputProps`](https://reactnative.dev/docs/textinput#props).
|
|
152
161
|
|
|
162
|
+
| Prop | Type | Description |
|
|
163
|
+
|---|---|---|
|
|
164
|
+
| `maskType` | `'custom' \| 'money' \| 'datetime' \| 'credit-card'` | Mask type (default `'custom'`) |
|
|
165
|
+
| `maskOptions` | See table below | Options for the chosen mask type |
|
|
166
|
+
| `onChangeText` | `(result: MaskResult) => void` | Fires on every edit with `{ masked, raw }`. Overrides React Native's default `(text: string) => void`. |
|
|
167
|
+
|
|
153
168
|
| maskType | maskOptions | Docs |
|
|
154
169
|
|---|---|---|
|
|
155
170
|
| `'custom'` (default) | `{ mask: string }` | [docs/custom.md](./docs/custom.md) |
|
|
@@ -165,7 +180,12 @@ Extends React Native's [`TextInputProps`](https://reactnative.dev/docs/textinput
|
|
|
165
180
|
| `maskType` | `'custom' \| 'money' \| 'datetime' \| 'credit-card'` | Mask type (default `'custom'`) |
|
|
166
181
|
| `maskOptions` | See table above | Options for the chosen mask type |
|
|
167
182
|
|
|
168
|
-
Returns
|
|
183
|
+
Returns `MaskResult`:
|
|
184
|
+
|
|
185
|
+
| Field | Type | Description |
|
|
186
|
+
|---|---|---|
|
|
187
|
+
| `masked` | `string` | Formatted string as displayed to the user |
|
|
188
|
+
| `raw` | `string` | Unformatted input. For money masks, this is digit-only. |
|
|
169
189
|
|
|
170
190
|
## Contributing
|
|
171
191
|
|
|
@@ -3,15 +3,16 @@ package com.nitroinputmask
|
|
|
3
3
|
import androidx.annotation.Keep
|
|
4
4
|
import com.facebook.proguard.annotations.DoNotStrip
|
|
5
5
|
import com.margelo.nitro.nitroinputmask.HybridNitroInputMaskServiceSpec
|
|
6
|
+
import com.margelo.nitro.nitroinputmask.MaskResult
|
|
6
7
|
import com.margelo.nitro.nitroinputmask.NitroMaskOptions
|
|
7
8
|
import com.nitroinputmask.engine.MaskEngineFactory
|
|
8
9
|
|
|
9
10
|
@Keep
|
|
10
11
|
@DoNotStrip
|
|
11
12
|
class HybridNitroInputMaskServiceModule : HybridNitroInputMaskServiceSpec() {
|
|
12
|
-
override fun applyMask(value: String, maskType: String, options: NitroMaskOptions):
|
|
13
|
+
override fun applyMask(value: String, maskType: String, options: NitroMaskOptions): MaskResult {
|
|
13
14
|
val engine = MaskEngineFactory.build(maskType, options)
|
|
14
|
-
val (masked,
|
|
15
|
-
return masked
|
|
15
|
+
val (masked, raw) = engine.apply(value)
|
|
16
|
+
return MaskResult(masked = masked, raw = raw)
|
|
16
17
|
}
|
|
17
18
|
}
|
|
@@ -3,9 +3,9 @@ import NitroModules
|
|
|
3
3
|
class HybridNitroInputMaskServiceModule: HybridNitroInputMaskServiceSpec_base,
|
|
4
4
|
HybridNitroInputMaskServiceSpec_protocol
|
|
5
5
|
{
|
|
6
|
-
func applyMask(value: String, maskType: String, options: NitroMaskOptions) throws ->
|
|
6
|
+
func applyMask(value: String, maskType: String, options: NitroMaskOptions) throws -> MaskResult {
|
|
7
7
|
let engine = MaskEngineFactory.build(maskType: maskType, options: options)
|
|
8
|
-
let (masked,
|
|
9
|
-
return masked
|
|
8
|
+
let (masked, raw) = engine.apply(input: value)
|
|
9
|
+
return MaskResult(masked: masked, raw: raw)
|
|
10
10
|
}
|
|
11
11
|
}
|
|
@@ -12,23 +12,25 @@ var _nitroModule = require("../../nitro-module");
|
|
|
12
12
|
* plain function call — no component or ref required.
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
|
-
* const masked = NitroInputMaskService.applyMask({
|
|
15
|
+
* const { masked, raw } = NitroInputMaskService.applyMask({
|
|
16
16
|
* value: '12345678901',
|
|
17
17
|
* maskOptions: { mask: '999.999.999-99' },
|
|
18
18
|
* })
|
|
19
|
-
* // '123.456.789-01'
|
|
19
|
+
* // masked: '123.456.789-01'
|
|
20
|
+
* // raw: '12345678901'
|
|
20
21
|
*
|
|
21
22
|
* @example
|
|
22
|
-
* const masked = NitroInputMaskService.applyMask({
|
|
23
|
+
* const { masked, raw } = NitroInputMaskService.applyMask({
|
|
23
24
|
* value: '123456',
|
|
24
25
|
* maskType: 'money',
|
|
25
26
|
* maskOptions: { unit: 'R$ ', precision: 2 },
|
|
26
27
|
* })
|
|
27
|
-
* // 'R$ 1.234,56'
|
|
28
|
+
* // masked: 'R$ 1.234,56'
|
|
29
|
+
* // raw: '123456' (digit-only string for money masks)
|
|
28
30
|
*/
|
|
29
31
|
class NitroInputMaskService {
|
|
30
32
|
/**
|
|
31
|
-
* Applies a mask to a string and returns the masked
|
|
33
|
+
* Applies a mask to a string and returns both the masked and raw values.
|
|
32
34
|
*
|
|
33
35
|
* For `custom` masks, tokens are:
|
|
34
36
|
* - `9` — digit (0–9)
|
|
@@ -40,16 +42,17 @@ class NitroInputMaskService {
|
|
|
40
42
|
* @param props.value - The raw string to mask.
|
|
41
43
|
* @param props.maskType - The mask type: `'custom'` (default), `'money'`, `'datetime'`, `'credit-card'`.
|
|
42
44
|
* @param props.maskOptions - Options specific to the chosen mask type.
|
|
43
|
-
* @returns
|
|
45
|
+
* @returns `{ masked, raw }` — the formatted string and the unformatted input.
|
|
46
|
+
* For money masks, `raw` is a digit-only string.
|
|
44
47
|
*
|
|
45
48
|
* @throws If `value` exceeds 1000 characters or `custom` mask exceeds 200 characters.
|
|
46
49
|
*
|
|
47
50
|
* @example
|
|
48
|
-
* NitroInputMaskService.applyMask({
|
|
51
|
+
* const { masked } = NitroInputMaskService.applyMask({
|
|
49
52
|
* value: '11987654321',
|
|
50
53
|
* maskOptions: { mask: '(99) 99999-9999' },
|
|
51
54
|
* })
|
|
52
|
-
* // '(11) 98765-4321'
|
|
55
|
+
* // masked: '(11) 98765-4321'
|
|
53
56
|
*/
|
|
54
57
|
static applyMask = props => {
|
|
55
58
|
const {
|
|
@@ -60,9 +63,15 @@ class NitroInputMaskService {
|
|
|
60
63
|
const resolvedValue = String(value ?? '');
|
|
61
64
|
const resolvedMaskType = maskType ?? 'custom';
|
|
62
65
|
const resolvedOptions = maskOptions ?? {};
|
|
66
|
+
if (resolvedValue.length > 1000) {
|
|
67
|
+
throw new Error('NitroInputMaskService: value exceeds maximum allowed length');
|
|
68
|
+
}
|
|
63
69
|
if (resolvedMaskType === 'custom') {
|
|
64
70
|
const mask = String(resolvedOptions.mask ?? '');
|
|
65
|
-
if (!mask) return
|
|
71
|
+
if (!mask) return {
|
|
72
|
+
masked: resolvedValue,
|
|
73
|
+
raw: resolvedValue
|
|
74
|
+
};
|
|
66
75
|
if (resolvedValue.length > 1000 || mask.length > 200) {
|
|
67
76
|
throw new Error('NitroInputMaskService: value or mask exceeds maximum allowed length');
|
|
68
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_nitroModule","require","NitroInputMaskService","applyMask","props","value","maskType","maskOptions","resolvedValue","String","resolvedMaskType","resolvedOptions","mask","
|
|
1
|
+
{"version":3,"names":["_nitroModule","require","NitroInputMaskService","applyMask","props","value","maskType","maskOptions","resolvedValue","String","resolvedMaskType","resolvedOptions","length","Error","mask","masked","raw","getNitroServiceModule","exports"],"sourceRoot":"../../../../src","sources":["classes/NitroInputMaskService/NitroInputMaskService.class.ts"],"mappings":";;;;;;AAEA,IAAAA,YAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,qBAAqB,CAAC;EACjC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE,OAAOC,SAAS,GAAIC,KAAsB,IAAiB;IACzD,MAAM;MAAEC,KAAK;MAAEC,QAAQ;MAAEC;IAAY,CAAC,GAAGH,KAGxC;IAED,MAAMI,aAAa,GAAGC,MAAM,CAACJ,KAAK,IAAI,EAAE,CAAC;IACzC,MAAMK,gBAAgB,GAAGJ,QAAQ,IAAI,QAAQ;IAC7C,MAAMK,eAAe,GAAGJ,WAAW,IAAI,CAAC,CAAC;IAEzC,IAAIC,aAAa,CAACI,MAAM,GAAG,IAAI,EAAE;MAC/B,MAAM,IAAIC,KAAK,CAAC,6DAA6D,CAAC;IAChF;IAEA,IAAIH,gBAAgB,KAAK,QAAQ,EAAE;MACjC,MAAMI,IAAI,GAAGL,MAAM,CAAEE,eAAe,CAAuBG,IAAI,IAAI,EAAE,CAAC;MACtE,IAAI,CAACA,IAAI,EAAE,OAAO;QAAEC,MAAM,EAAEP,aAAa;QAAEQ,GAAG,EAAER;MAAc,CAAC;MAC/D,IAAIA,aAAa,CAACI,MAAM,GAAG,IAAI,IAAIE,IAAI,CAACF,MAAM,GAAG,GAAG,EAAE;QACpD,MAAM,IAAIC,KAAK,CAAC,qEAAqE,CAAC;MACxF;IACF;IAEA,OAAO,IAAAI,kCAAqB,EAAC,CAAC,CAACd,SAAS,CAACK,aAAa,EAAEE,gBAAgB,EAAEC,eAAe,CAAC;EAC5F,CAAC;AACH;AAACO,OAAA,CAAAhB,qBAAA,GAAAA,qBAAA","ignoreList":[]}
|
|
@@ -13,27 +13,43 @@ const NitroInputMask = props => {
|
|
|
13
13
|
const {
|
|
14
14
|
maskType,
|
|
15
15
|
maskOptions,
|
|
16
|
+
onChangeText,
|
|
16
17
|
value,
|
|
17
18
|
...rest
|
|
18
19
|
} = props;
|
|
19
|
-
const resolvedMaskType = maskType ?? 'custom';
|
|
20
20
|
const reactId = (0, _react.useId)();
|
|
21
|
+
const resolvedMaskType = maskType ?? 'custom';
|
|
22
|
+
const resolvedOptions = maskOptions ?? {};
|
|
21
23
|
const id = `nitro-input-mask-${reactId}`;
|
|
22
|
-
const maskOptionsJson = JSON.stringify(
|
|
24
|
+
const maskOptionsJson = JSON.stringify(resolvedOptions);
|
|
25
|
+
const stableOptions = (0, _react.useMemo)(() => JSON.parse(maskOptionsJson), [maskOptionsJson]);
|
|
26
|
+
const valueFromUserInput = (0, _react.useRef)(false);
|
|
23
27
|
(0, _react.useEffect)(() => {
|
|
24
|
-
_nitroModule.nitroModule.attach(id, resolvedMaskType,
|
|
28
|
+
_nitroModule.nitroModule.attach(id, resolvedMaskType, stableOptions);
|
|
25
29
|
if (value != null) _nitroModule.nitroModule.setValue(id, String(value));
|
|
26
30
|
return () => _nitroModule.nitroModule.detach(id);
|
|
27
31
|
}, []);
|
|
28
32
|
(0, _react.useEffect)(() => {
|
|
29
|
-
_nitroModule.nitroModule.updateMask(id, resolvedMaskType,
|
|
33
|
+
_nitroModule.nitroModule.updateMask(id, resolvedMaskType, stableOptions);
|
|
30
34
|
}, [resolvedMaskType, maskOptionsJson]);
|
|
31
35
|
(0, _react.useEffect)(() => {
|
|
32
36
|
if (value == null) return;
|
|
37
|
+
if (valueFromUserInput.current) {
|
|
38
|
+
valueFromUserInput.current = false;
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
33
41
|
_nitroModule.nitroModule.setValue(id, String(value));
|
|
34
42
|
}, [value]);
|
|
43
|
+
const handleChangeText = (0, _react.useCallback)(text => {
|
|
44
|
+
valueFromUserInput.current = true;
|
|
45
|
+
if (onChangeText) {
|
|
46
|
+
const result = (0, _nitroModule.getNitroServiceModule)().applyMask(text, resolvedMaskType, stableOptions);
|
|
47
|
+
onChangeText(result);
|
|
48
|
+
}
|
|
49
|
+
}, [onChangeText, resolvedMaskType, stableOptions]);
|
|
35
50
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
|
|
36
51
|
...rest,
|
|
52
|
+
onChangeText: handleChangeText,
|
|
37
53
|
nativeID: id
|
|
38
54
|
});
|
|
39
55
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_nitroModule","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NitroInputMask","props","maskType","maskOptions","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_nitroModule","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NitroInputMask","props","maskType","maskOptions","onChangeText","value","rest","reactId","useId","resolvedMaskType","resolvedOptions","id","maskOptionsJson","JSON","stringify","stableOptions","useMemo","parse","valueFromUserInput","useRef","useEffect","nitroModule","attach","setValue","String","detach","updateMask","current","handleChangeText","useCallback","text","result","getNitroServiceModule","applyMask","jsx","TextInput","nativeID","exports"],"sourceRoot":"../../../../src","sources":["components/NitroInputMask/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/MaskResult.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -9,23 +9,25 @@ import { getNitroServiceModule } from '../../nitro-module';
|
|
|
9
9
|
* plain function call — no component or ref required.
|
|
10
10
|
*
|
|
11
11
|
* @example
|
|
12
|
-
* const masked = NitroInputMaskService.applyMask({
|
|
12
|
+
* const { masked, raw } = NitroInputMaskService.applyMask({
|
|
13
13
|
* value: '12345678901',
|
|
14
14
|
* maskOptions: { mask: '999.999.999-99' },
|
|
15
15
|
* })
|
|
16
|
-
* // '123.456.789-01'
|
|
16
|
+
* // masked: '123.456.789-01'
|
|
17
|
+
* // raw: '12345678901'
|
|
17
18
|
*
|
|
18
19
|
* @example
|
|
19
|
-
* const masked = NitroInputMaskService.applyMask({
|
|
20
|
+
* const { masked, raw } = NitroInputMaskService.applyMask({
|
|
20
21
|
* value: '123456',
|
|
21
22
|
* maskType: 'money',
|
|
22
23
|
* maskOptions: { unit: 'R$ ', precision: 2 },
|
|
23
24
|
* })
|
|
24
|
-
* // 'R$ 1.234,56'
|
|
25
|
+
* // masked: 'R$ 1.234,56'
|
|
26
|
+
* // raw: '123456' (digit-only string for money masks)
|
|
25
27
|
*/
|
|
26
28
|
export class NitroInputMaskService {
|
|
27
29
|
/**
|
|
28
|
-
* Applies a mask to a string and returns the masked
|
|
30
|
+
* Applies a mask to a string and returns both the masked and raw values.
|
|
29
31
|
*
|
|
30
32
|
* For `custom` masks, tokens are:
|
|
31
33
|
* - `9` — digit (0–9)
|
|
@@ -37,16 +39,17 @@ export class NitroInputMaskService {
|
|
|
37
39
|
* @param props.value - The raw string to mask.
|
|
38
40
|
* @param props.maskType - The mask type: `'custom'` (default), `'money'`, `'datetime'`, `'credit-card'`.
|
|
39
41
|
* @param props.maskOptions - Options specific to the chosen mask type.
|
|
40
|
-
* @returns
|
|
42
|
+
* @returns `{ masked, raw }` — the formatted string and the unformatted input.
|
|
43
|
+
* For money masks, `raw` is a digit-only string.
|
|
41
44
|
*
|
|
42
45
|
* @throws If `value` exceeds 1000 characters or `custom` mask exceeds 200 characters.
|
|
43
46
|
*
|
|
44
47
|
* @example
|
|
45
|
-
* NitroInputMaskService.applyMask({
|
|
48
|
+
* const { masked } = NitroInputMaskService.applyMask({
|
|
46
49
|
* value: '11987654321',
|
|
47
50
|
* maskOptions: { mask: '(99) 99999-9999' },
|
|
48
51
|
* })
|
|
49
|
-
* // '(11) 98765-4321'
|
|
52
|
+
* // masked: '(11) 98765-4321'
|
|
50
53
|
*/
|
|
51
54
|
static applyMask = props => {
|
|
52
55
|
const {
|
|
@@ -57,9 +60,15 @@ export class NitroInputMaskService {
|
|
|
57
60
|
const resolvedValue = String(value ?? '');
|
|
58
61
|
const resolvedMaskType = maskType ?? 'custom';
|
|
59
62
|
const resolvedOptions = maskOptions ?? {};
|
|
63
|
+
if (resolvedValue.length > 1000) {
|
|
64
|
+
throw new Error('NitroInputMaskService: value exceeds maximum allowed length');
|
|
65
|
+
}
|
|
60
66
|
if (resolvedMaskType === 'custom') {
|
|
61
67
|
const mask = String(resolvedOptions.mask ?? '');
|
|
62
|
-
if (!mask) return
|
|
68
|
+
if (!mask) return {
|
|
69
|
+
masked: resolvedValue,
|
|
70
|
+
raw: resolvedValue
|
|
71
|
+
};
|
|
63
72
|
if (resolvedValue.length > 1000 || mask.length > 200) {
|
|
64
73
|
throw new Error('NitroInputMaskService: value or mask exceeds maximum allowed length');
|
|
65
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["getNitroServiceModule","NitroInputMaskService","applyMask","props","value","maskType","maskOptions","resolvedValue","String","resolvedMaskType","resolvedOptions","mask","
|
|
1
|
+
{"version":3,"names":["getNitroServiceModule","NitroInputMaskService","applyMask","props","value","maskType","maskOptions","resolvedValue","String","resolvedMaskType","resolvedOptions","length","Error","mask","masked","raw"],"sourceRoot":"../../../../src","sources":["classes/NitroInputMaskService/NitroInputMaskService.class.ts"],"mappings":";;AAEA,SAASA,qBAAqB,QAAQ,oBAAoB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,qBAAqB,CAAC;EACjC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE,OAAOC,SAAS,GAAIC,KAAsB,IAAiB;IACzD,MAAM;MAAEC,KAAK;MAAEC,QAAQ;MAAEC;IAAY,CAAC,GAAGH,KAGxC;IAED,MAAMI,aAAa,GAAGC,MAAM,CAACJ,KAAK,IAAI,EAAE,CAAC;IACzC,MAAMK,gBAAgB,GAAGJ,QAAQ,IAAI,QAAQ;IAC7C,MAAMK,eAAe,GAAGJ,WAAW,IAAI,CAAC,CAAC;IAEzC,IAAIC,aAAa,CAACI,MAAM,GAAG,IAAI,EAAE;MAC/B,MAAM,IAAIC,KAAK,CAAC,6DAA6D,CAAC;IAChF;IAEA,IAAIH,gBAAgB,KAAK,QAAQ,EAAE;MACjC,MAAMI,IAAI,GAAGL,MAAM,CAAEE,eAAe,CAAuBG,IAAI,IAAI,EAAE,CAAC;MACtE,IAAI,CAACA,IAAI,EAAE,OAAO;QAAEC,MAAM,EAAEP,aAAa;QAAEQ,GAAG,EAAER;MAAc,CAAC;MAC/D,IAAIA,aAAa,CAACI,MAAM,GAAG,IAAI,IAAIE,IAAI,CAACF,MAAM,GAAG,GAAG,EAAE;QACpD,MAAM,IAAIC,KAAK,CAAC,qEAAqE,CAAC;MACxF;IACF;IAEA,OAAOZ,qBAAqB,CAAC,CAAC,CAACE,SAAS,CAACK,aAAa,EAAEE,gBAAgB,EAAEC,eAAe,CAAC;EAC5F,CAAC;AACH","ignoreList":[]}
|
|
@@ -1,34 +1,50 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, { useEffect, useId } from 'react';
|
|
3
|
+
import React, { useCallback, useEffect, useId, useMemo, useRef } from 'react';
|
|
4
4
|
import { TextInput } from 'react-native';
|
|
5
|
-
import { nitroModule } from '../../nitro-module';
|
|
5
|
+
import { nitroModule, getNitroServiceModule } from '../../nitro-module';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
export const NitroInputMask = props => {
|
|
8
8
|
const {
|
|
9
9
|
maskType,
|
|
10
10
|
maskOptions,
|
|
11
|
+
onChangeText,
|
|
11
12
|
value,
|
|
12
13
|
...rest
|
|
13
14
|
} = props;
|
|
14
|
-
const resolvedMaskType = maskType ?? 'custom';
|
|
15
15
|
const reactId = useId();
|
|
16
|
+
const resolvedMaskType = maskType ?? 'custom';
|
|
17
|
+
const resolvedOptions = maskOptions ?? {};
|
|
16
18
|
const id = `nitro-input-mask-${reactId}`;
|
|
17
|
-
const maskOptionsJson = JSON.stringify(
|
|
19
|
+
const maskOptionsJson = JSON.stringify(resolvedOptions);
|
|
20
|
+
const stableOptions = useMemo(() => JSON.parse(maskOptionsJson), [maskOptionsJson]);
|
|
21
|
+
const valueFromUserInput = useRef(false);
|
|
18
22
|
useEffect(() => {
|
|
19
|
-
nitroModule.attach(id, resolvedMaskType,
|
|
23
|
+
nitroModule.attach(id, resolvedMaskType, stableOptions);
|
|
20
24
|
if (value != null) nitroModule.setValue(id, String(value));
|
|
21
25
|
return () => nitroModule.detach(id);
|
|
22
26
|
}, []);
|
|
23
27
|
useEffect(() => {
|
|
24
|
-
nitroModule.updateMask(id, resolvedMaskType,
|
|
28
|
+
nitroModule.updateMask(id, resolvedMaskType, stableOptions);
|
|
25
29
|
}, [resolvedMaskType, maskOptionsJson]);
|
|
26
30
|
useEffect(() => {
|
|
27
31
|
if (value == null) return;
|
|
32
|
+
if (valueFromUserInput.current) {
|
|
33
|
+
valueFromUserInput.current = false;
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
28
36
|
nitroModule.setValue(id, String(value));
|
|
29
37
|
}, [value]);
|
|
38
|
+
const handleChangeText = useCallback(text => {
|
|
39
|
+
valueFromUserInput.current = true;
|
|
40
|
+
if (onChangeText) {
|
|
41
|
+
const result = getNitroServiceModule().applyMask(text, resolvedMaskType, stableOptions);
|
|
42
|
+
onChangeText(result);
|
|
43
|
+
}
|
|
44
|
+
}, [onChangeText, resolvedMaskType, stableOptions]);
|
|
30
45
|
return /*#__PURE__*/_jsx(TextInput, {
|
|
31
46
|
...rest,
|
|
47
|
+
onChangeText: handleChangeText,
|
|
32
48
|
nativeID: id
|
|
33
49
|
});
|
|
34
50
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useId","TextInput","nitroModule","jsx","_jsx","NitroInputMask","props","maskType","maskOptions","value","rest","resolvedMaskType","
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","useId","useMemo","useRef","TextInput","nitroModule","getNitroServiceModule","jsx","_jsx","NitroInputMask","props","maskType","maskOptions","onChangeText","value","rest","reactId","resolvedMaskType","resolvedOptions","id","maskOptionsJson","JSON","stringify","stableOptions","parse","valueFromUserInput","attach","setValue","String","detach","updateMask","current","handleChangeText","text","result","applyMask","nativeID"],"sourceRoot":"../../../../src","sources":["components/NitroInputMask/index.tsx"],"mappings":";;AAEA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,KAAK,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAC7E,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExE,OAAO,MAAMC,cAAc,GAAIC,KAA0B,IAAK;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,WAAW;IAAEC,YAAY;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAErE,MAAMM,OAAO,GAAGf,KAAK,CAAC,CAAC;EAEvB,MAAMgB,gBAAgB,GAAGN,QAAQ,IAAI,QAAQ;EAC7C,MAAMO,eAAe,GAAIN,WAAW,IAAI,CAAC,CAA6B;EACtE,MAAMO,EAAE,GAAG,oBAAoBH,OAAO,EAAE;EACxC,MAAMI,eAAe,GAAGC,IAAI,CAACC,SAAS,CAACJ,eAAe,CAAC;EAEvD,MAAMK,aAA+B,GAAGrB,OAAO,CAAC,MAAMmB,IAAI,CAACG,KAAK,CAACJ,eAAe,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EACrG,MAAMK,kBAAkB,GAAGtB,MAAM,CAAC,KAAK,CAAC;EAExCH,SAAS,CAAC,MAAM;IACdK,WAAW,CAACqB,MAAM,CAACP,EAAE,EAAEF,gBAAgB,EAAEM,aAAa,CAAC;IACvD,IAAIT,KAAK,IAAI,IAAI,EAAET,WAAW,CAACsB,QAAQ,CAACR,EAAE,EAAES,MAAM,CAACd,KAAK,CAAC,CAAC;IAC1D,OAAO,MAAMT,WAAW,CAACwB,MAAM,CAACV,EAAE,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAENnB,SAAS,CAAC,MAAM;IACdK,WAAW,CAACyB,UAAU,CAACX,EAAE,EAAEF,gBAAgB,EAAEM,aAAa,CAAC;EAC7D,CAAC,EAAE,CAACN,gBAAgB,EAAEG,eAAe,CAAC,CAAC;EAEvCpB,SAAS,CAAC,MAAM;IACd,IAAIc,KAAK,IAAI,IAAI,EAAE;IAEnB,IAAIW,kBAAkB,CAACM,OAAO,EAAE;MAC9BN,kBAAkB,CAACM,OAAO,GAAG,KAAK;MAClC;IACF;IAEA1B,WAAW,CAACsB,QAAQ,CAACR,EAAE,EAAES,MAAM,CAACd,KAAK,CAAC,CAAC;EACzC,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAMkB,gBAAgB,GAAGjC,WAAW,CAAEkC,IAAY,IAAK;IACrDR,kBAAkB,CAACM,OAAO,GAAG,IAAI;IAEjC,IAAIlB,YAAY,EAAE;MAChB,MAAMqB,MAAM,GAAG5B,qBAAqB,CAAC,CAAC,CAAC6B,SAAS,CAACF,IAAI,EAAEhB,gBAAgB,EAAEM,aAAa,CAAC;MACvFV,YAAY,CAACqB,MAAM,CAAC;IACtB;EACF,CAAC,EAAE,CAACrB,YAAY,EAAEI,gBAAgB,EAAEM,aAAa,CAAC,CAAC;EAEnD,oBACEf,IAAA,CAACJ,SAAS;IAAA,GACJW,IAAI;IACRF,YAAY,EAAEmB,gBAAiB;IAC/BI,QAAQ,EAAEjB;EAAG,CACd,CAAC;AAEN,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/MaskResult.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { IApplyMaskProps } from './types';
|
|
2
|
+
import type { MaskResult } from '../../types';
|
|
2
3
|
/**
|
|
3
4
|
* Standalone service for applying input masks natively.
|
|
4
5
|
*
|
|
@@ -6,23 +7,25 @@ import type { IApplyMaskProps } from './types';
|
|
|
6
7
|
* plain function call — no component or ref required.
|
|
7
8
|
*
|
|
8
9
|
* @example
|
|
9
|
-
* const masked = NitroInputMaskService.applyMask({
|
|
10
|
+
* const { masked, raw } = NitroInputMaskService.applyMask({
|
|
10
11
|
* value: '12345678901',
|
|
11
12
|
* maskOptions: { mask: '999.999.999-99' },
|
|
12
13
|
* })
|
|
13
|
-
* // '123.456.789-01'
|
|
14
|
+
* // masked: '123.456.789-01'
|
|
15
|
+
* // raw: '12345678901'
|
|
14
16
|
*
|
|
15
17
|
* @example
|
|
16
|
-
* const masked = NitroInputMaskService.applyMask({
|
|
18
|
+
* const { masked, raw } = NitroInputMaskService.applyMask({
|
|
17
19
|
* value: '123456',
|
|
18
20
|
* maskType: 'money',
|
|
19
21
|
* maskOptions: { unit: 'R$ ', precision: 2 },
|
|
20
22
|
* })
|
|
21
|
-
* // 'R$ 1.234,56'
|
|
23
|
+
* // masked: 'R$ 1.234,56'
|
|
24
|
+
* // raw: '123456' (digit-only string for money masks)
|
|
22
25
|
*/
|
|
23
26
|
export declare class NitroInputMaskService {
|
|
24
27
|
/**
|
|
25
|
-
* Applies a mask to a string and returns the masked
|
|
28
|
+
* Applies a mask to a string and returns both the masked and raw values.
|
|
26
29
|
*
|
|
27
30
|
* For `custom` masks, tokens are:
|
|
28
31
|
* - `9` — digit (0–9)
|
|
@@ -34,17 +37,18 @@ export declare class NitroInputMaskService {
|
|
|
34
37
|
* @param props.value - The raw string to mask.
|
|
35
38
|
* @param props.maskType - The mask type: `'custom'` (default), `'money'`, `'datetime'`, `'credit-card'`.
|
|
36
39
|
* @param props.maskOptions - Options specific to the chosen mask type.
|
|
37
|
-
* @returns
|
|
40
|
+
* @returns `{ masked, raw }` — the formatted string and the unformatted input.
|
|
41
|
+
* For money masks, `raw` is a digit-only string.
|
|
38
42
|
*
|
|
39
43
|
* @throws If `value` exceeds 1000 characters or `custom` mask exceeds 200 characters.
|
|
40
44
|
*
|
|
41
45
|
* @example
|
|
42
|
-
* NitroInputMaskService.applyMask({
|
|
46
|
+
* const { masked } = NitroInputMaskService.applyMask({
|
|
43
47
|
* value: '11987654321',
|
|
44
48
|
* maskOptions: { mask: '(99) 99999-9999' },
|
|
45
49
|
* })
|
|
46
|
-
* // '(11) 98765-4321'
|
|
50
|
+
* // masked: '(11) 98765-4321'
|
|
47
51
|
*/
|
|
48
|
-
static applyMask: (props: IApplyMaskProps) =>
|
|
52
|
+
static applyMask: (props: IApplyMaskProps) => MaskResult;
|
|
49
53
|
}
|
|
50
54
|
//# sourceMappingURL=NitroInputMaskService.class.d.ts.map
|
package/lib/typescript/src/classes/NitroInputMaskService/NitroInputMaskService.class.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NitroInputMaskService.class.d.ts","sourceRoot":"","sources":["../../../../../src/classes/NitroInputMaskService/NitroInputMaskService.class.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"NitroInputMaskService.class.d.ts","sourceRoot":"","sources":["../../../../../src/classes/NitroInputMaskService/NitroInputMaskService.class.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,qBAAqB;IAChC;;;;;;;;;;;;;;;;;;;;;;;;OAwBG;IACH,MAAM,CAAC,SAAS,GAAI,OAAO,eAAe,KAAG,UAAU,CAuBtD;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/NitroInputMask/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/NitroInputMask/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAkDxD,CAAA;AAED,mBAAmB,SAAS,CAAC"}
|
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
import type { TextInputProps } from 'react-native';
|
|
2
|
-
import type { MaskConfig } from '../../../types';
|
|
3
|
-
export type NitroInputMaskProps = TextInputProps & MaskConfig
|
|
2
|
+
import type { MaskConfig, MaskResult } from '../../../types';
|
|
3
|
+
export type NitroInputMaskProps = Omit<TextInputProps, 'onChangeText'> & MaskConfig & {
|
|
4
|
+
/**
|
|
5
|
+
* Called on every edit with both the masked display value and the raw
|
|
6
|
+
* unformatted value, giving consumers a single callback for both.
|
|
7
|
+
*
|
|
8
|
+
* For money masks, `raw` is a digit-only string.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* <NitroInputMask
|
|
12
|
+
* maskOptions={{ mask: '(999) 999-9999' }}
|
|
13
|
+
* onChangeText={({ masked, raw }) => {
|
|
14
|
+
* setDisplay(masked)
|
|
15
|
+
* setDigits(raw)
|
|
16
|
+
* }}
|
|
17
|
+
* />
|
|
18
|
+
*/
|
|
19
|
+
onChangeText?: (result: MaskResult) => void;
|
|
20
|
+
};
|
|
4
21
|
//# sourceMappingURL=NitroInputMaskProps.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NitroInputMaskProps.d.ts","sourceRoot":"","sources":["../../../../../../src/components/NitroInputMask/types/NitroInputMaskProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"NitroInputMaskProps.d.ts","sourceRoot":"","sources":["../../../../../../src/components/NitroInputMask/types/NitroInputMaskProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE7D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,GAAG,UAAU,GAAG;IACpF;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;CAC5C,CAAA"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import type { HybridObject } from 'react-native-nitro-modules';
|
|
2
2
|
import type { NitroMaskOptions } from './nitro-input-mask.nitro';
|
|
3
|
+
export interface MaskResult {
|
|
4
|
+
masked: string;
|
|
5
|
+
raw: string;
|
|
6
|
+
}
|
|
3
7
|
export interface NitroInputMaskService extends HybridObject<{
|
|
4
8
|
ios: 'swift';
|
|
5
9
|
android: 'kotlin';
|
|
6
10
|
}> {
|
|
7
|
-
applyMask(value: string, maskType: string, options: NitroMaskOptions):
|
|
11
|
+
applyMask(value: string, maskType: string, options: NitroMaskOptions): MaskResult;
|
|
8
12
|
}
|
|
9
13
|
//# sourceMappingURL=nitro-input-mask-service.nitro.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nitro-input-mask-service.nitro.d.ts","sourceRoot":"","sources":["../../../../src/specs/nitro-input-mask-service.nitro.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"nitro-input-mask-service.nitro.d.ts","sourceRoot":"","sources":["../../../../src/specs/nitro-input-mask-service.nitro.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAKhE,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAE,CAAC;IAC9F,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,UAAU,CAAA;CAClF"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The result returned by `NitroInputMaskService.applyMask()` and
|
|
3
|
+
* delivered to `<NitroInputMask onChangeText />`.
|
|
4
|
+
*
|
|
5
|
+
* - `masked` — the formatted string as displayed to the user (e.g. `"(555) 123-4567"`)
|
|
6
|
+
* - `raw` — the unformatted input stripped of mask literals.
|
|
7
|
+
* For money masks this is a digit-only string (e.g. `"123456"`).
|
|
8
|
+
*/
|
|
9
|
+
export type MaskResult = {
|
|
10
|
+
masked: string;
|
|
11
|
+
raw: string;
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=MaskResult.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MaskResult.d.ts","sourceRoot":"","sources":["../../../../src/types/MaskResult.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA"}
|