use-mask-input 3.7.1 → 3.7.3
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/CHANGELOG.md +13 -0
- package/README.md +4 -1
- package/dist/antd.cjs +31 -40
- package/dist/antd.cjs.map +1 -1
- package/dist/antd.d.cts +3 -4
- package/dist/antd.d.ts +3 -4
- package/dist/antd.js +30 -39
- package/dist/antd.js.map +1 -1
- package/dist/{chunk-JGOZSJMW.js → chunk-QCWLMMDI.js} +64 -47
- package/dist/chunk-QCWLMMDI.js.map +1 -0
- package/dist/{chunk-4Y2DTPBL.cjs → chunk-VK6LQ75W.cjs} +66 -53
- package/dist/chunk-VK6LQ75W.cjs.map +1 -0
- package/dist/index.cjs +63 -64
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +60 -63
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/antd/useHookFormMaskAntd.spec.ts +86 -49
- package/src/antd/useHookFormMaskAntd.ts +34 -25
- package/src/antd/useMaskInputAntd.ts +13 -34
- package/src/api/useHookFormMask.spec.ts +125 -59
- package/src/api/useHookFormMask.ts +38 -32
- package/src/api/useMaskInput.ts +9 -27
- package/src/api/withHookFormMask.spec.ts +55 -0
- package/src/api/withHookFormMask.ts +33 -19
- package/src/api/withMask.spec.ts +28 -0
- package/src/api/withMask.ts +20 -2
- package/src/core/maskConfig.spec.ts +1 -0
- package/src/core/maskConfig.ts +1 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/maskHelpers.ts +22 -0
- package/dist/chunk-4Y2DTPBL.cjs.map +0 -1
- package/dist/chunk-JGOZSJMW.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
## [3.6.0](https://github.com/eduardoborges/use-mask-input/compare/3.5.2...3.6.0) (2026-01-13)
|
|
2
2
|
|
|
3
|
+
## 3.7.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- e606d69: removing unnecessary memoization and improving input handling
|
|
8
|
+
|
|
9
|
+
## 3.7.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- e1618a5: optimize masking logic in useHookFormMask and related components with memoization
|
|
14
|
+
- ea0f089: enhance withMask function to support caching of callbacks based on masks and options
|
|
15
|
+
|
|
3
16
|
## 3.7.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
<h1>🥸 use-mask-input</h1>
|
|
3
3
|
<h4>A React Hook for building elegant and simple input masks.</h4>
|
|
4
4
|
|
|
5
|
-

|
|
5
|
+
[](https://www.npmjs.com/package/use-mask-input)
|
|
6
|
+
[](https://www.npmjs.com/package/use-mask-input)
|
|
7
|
+
[](https://bundlejs.com/?q=use-mask-input)
|
|
8
|
+
[](https://codecov.io/gh/eduardoborges/use-mask-input)
|
|
6
9
|
</div>
|
|
7
10
|
|
|
8
11
|
## [Full Documentation](http://use-mask-input.eduardoborges.dev) | [Sponsor this project](https://github.com/eduardoborges?tab=sponsors)
|
package/dist/antd.cjs
CHANGED
|
@@ -1,60 +1,51 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkVK6LQ75W_cjs = require('./chunk-VK6LQ75W.cjs');
|
|
4
4
|
var react = require('react');
|
|
5
5
|
|
|
6
|
-
// src/antd/useHookFormMaskAntd.ts
|
|
7
6
|
function useHookFormMaskAntd(registerFn) {
|
|
8
|
-
return (
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
if (
|
|
7
|
+
return react.useMemo(() => {
|
|
8
|
+
const refCache = /* @__PURE__ */ new Map();
|
|
9
|
+
return (fieldName, mask, options) => {
|
|
10
|
+
if (!registerFn) throw new Error("registerFn is required");
|
|
11
|
+
const registerReturn = registerFn(fieldName, options);
|
|
12
|
+
const { ref } = registerReturn;
|
|
13
|
+
const cacheKey = chunkVK6LQ75W_cjs.makeMaskCacheKey(fieldName, mask);
|
|
14
|
+
if (!refCache.has(cacheKey)) {
|
|
15
|
+
const refWithMask = (inputRef) => {
|
|
16
|
+
const element = inputRef ? chunkVK6LQ75W_cjs.resolveInputRef(inputRef.input) : null;
|
|
17
|
+
if (element) chunkVK6LQ75W_cjs.applyMaskToElement(element, mask, options);
|
|
18
|
+
if (ref) ref(element);
|
|
19
|
+
};
|
|
20
|
+
refCache.set(cacheKey, refWithMask);
|
|
21
|
+
}
|
|
22
|
+
const result = {
|
|
23
|
+
...registerReturn,
|
|
24
|
+
ref: refCache.get(cacheKey)
|
|
25
|
+
};
|
|
26
|
+
chunkVK6LQ75W_cjs.setPrevRef(result, ref);
|
|
27
|
+
return result;
|
|
16
28
|
};
|
|
17
|
-
|
|
18
|
-
...registerReturn,
|
|
19
|
-
ref: refWithMask
|
|
20
|
-
};
|
|
21
|
-
Object.defineProperty(result, "prevRef", {
|
|
22
|
-
value: ref,
|
|
23
|
-
enumerable: false,
|
|
24
|
-
writable: true,
|
|
25
|
-
configurable: true
|
|
26
|
-
});
|
|
27
|
-
return result;
|
|
28
|
-
};
|
|
29
|
+
}, [registerFn]);
|
|
29
30
|
}
|
|
30
31
|
function useMaskInputAntd(props) {
|
|
31
32
|
const { mask, register, options } = props;
|
|
32
33
|
const ref = react.useRef(null);
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
[mask, options]
|
|
36
|
-
);
|
|
34
|
+
const maskRef = react.useRef(mask);
|
|
35
|
+
const optionsRef = react.useRef(options);
|
|
37
36
|
const refCallback = react.useCallback((input) => {
|
|
38
37
|
if (!input) {
|
|
39
38
|
ref.current = null;
|
|
40
39
|
return;
|
|
41
40
|
}
|
|
42
|
-
ref.current =
|
|
41
|
+
ref.current = chunkVK6LQ75W_cjs.resolveInputRef(input.input);
|
|
42
|
+
chunkVK6LQ75W_cjs.withMask(maskRef.current, optionsRef.current)(ref.current);
|
|
43
43
|
}, []);
|
|
44
44
|
react.useEffect(() => {
|
|
45
|
-
if (
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const inputElement = chunk4Y2DTPBL_cjs.findInputElement(ref.current);
|
|
50
|
-
if (maskInput && inputElement && chunk4Y2DTPBL_cjs.isHTMLElement(inputElement)) {
|
|
51
|
-
maskInput.mask(inputElement);
|
|
52
|
-
}
|
|
53
|
-
if (register && chunk4Y2DTPBL_cjs.isHTMLElement(ref.current)) {
|
|
54
|
-
register(ref.current);
|
|
55
|
-
}
|
|
56
|
-
}, [mask, register, options, maskInput]);
|
|
57
|
-
if (chunk4Y2DTPBL_cjs.isServer_default) {
|
|
45
|
+
if (chunkVK6LQ75W_cjs.isServer_default || !ref.current || !register) return;
|
|
46
|
+
register(ref.current);
|
|
47
|
+
}, [register]);
|
|
48
|
+
if (chunkVK6LQ75W_cjs.isServer_default) {
|
|
58
49
|
return () => {
|
|
59
50
|
};
|
|
60
51
|
}
|
package/dist/antd.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"names":["useMemo","makeMaskCacheKey","resolveInputRef","applyMaskToElement","setPrevRef","useRef","useCallback","withMask","useEffect","isServer_default"],"mappings":";;;;;AA6Be,SAAR,oBAEL,UAAA,EAC6D;AAE7D,EAAA,OAAOA,cAAQ,MAAM;AACnB,IAAA,MAAM,QAAA,uBAAe,GAAA,EAA0C;AAE/D,IAAA,OAAO,CAAC,SAAA,EAAoB,IAAA,EAAY,OAAA,KACuB;AAC7D,MAAA,IAAI,CAAC,UAAA,EAAY,MAAM,IAAI,MAAM,wBAAwB,CAAA;AAEzD,MAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,SAAA,EAAW,OAAkB,CAAA;AAC/D,MAAA,MAAM,EAAE,KAAI,GAAI,cAAA;AAEhB,MAAA,MAAM,QAAA,GAAWC,kCAAA,CAAiB,SAAA,EAAW,IAAI,CAAA;AAEjD,MAAA,IAAI,CAAC,QAAA,CAAS,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC3B,QAAA,MAAM,WAAA,GAA4C,CAAC,QAAA,KAAa;AAC9D,UAAA,MAAM,OAAA,GAAU,QAAA,GAAWC,iCAAA,CAAgB,QAAA,CAAS,KAAK,CAAA,GAAI,IAAA;AAC7D,UAAA,IAAI,OAAA,EAASC,oCAAA,CAAmB,OAAA,EAAS,IAAA,EAAM,OAAkB,CAAA;AACjE,UAAA,IAAI,GAAA,MAAS,OAAO,CAAA;AAAA,QACtB,CAAA;AACA,QAAA,QAAA,CAAS,GAAA,CAAI,UAAU,WAAW,CAAA;AAAA,MACpC;AAEA,MAAA,MAAM,MAAA,GAAS;AAAA,QACb,GAAG,cAAA;AAAA,QACH,GAAA,EAAK,QAAA,CAAS,GAAA,CAAI,QAAQ;AAAA,OAC5B;AAEA,MAAAC,4BAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;ACxCe,SAAR,iBAAkC,KAAA,EAE/B;AACR,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAQ,GAAI,KAAA;AACpC,EAAA,MAAM,GAAA,GAAMC,aAAgC,IAAI,CAAA;AAChD,EAAA,MAAM,OAAA,GAAUA,aAAO,IAAI,CAAA;AAC3B,EAAA,MAAM,UAAA,GAAaA,aAAO,OAAO,CAAA;AAEjC,EAAA,MAAM,WAAA,GAAcC,iBAAA,CAAY,CAAC,KAAA,KAA2B;AAC1D,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,GAAA,CAAI,OAAA,GAAUJ,iCAAA,CAAgB,KAAA,CAAM,KAAK,CAAA;AACzC,IAAAK,0BAAA,CAAS,QAAQ,OAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAE,IAAI,OAAO,CAAA;AAAA,EAC3D,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAIC,kCAAA,IAAY,CAAC,GAAA,CAAI,OAAA,IAAW,CAAC,QAAA,EAAU;AAC3C,IAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAIA,kCAAA,EAAU;AACZ,IAAA,OAAO,MAAY;AAAA,IAEnB,CAAA;AAAA,EACF;AAEA,EAAA,OAAO,WAAA;AACT","file":"antd.cjs","sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { InputRef } from 'antd';\nimport type { RefCallback } from 'react';\nimport type {\n FieldValues, Path,\n RegisterOptions,\n UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\nexport type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<\n UseHookFormMaskReturn<T>,\n 'ref'\n> & { ref: RefCallback<InputRef | null> };\n\n/**\n * Ant Design version of useHookFormMask.\n * Creates a masked register that works with Ant Design Input (ref receives InputRef).\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support for Ant Design Input\n */\nexport default function useHookFormMaskAntd<\n T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n //\n return useMemo(() => {\n const refCache = new Map<string, RefCallback<InputRef | null>>();\n\n return (fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D): UseHookFormMaskAntdReturn<T> => {\n if (!registerFn) throw new Error('registerFn is required');\n\n const registerReturn = registerFn(fieldName, options as Options);\n const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n if (!refCache.has(cacheKey)) {\n const refWithMask: RefCallback<InputRef | null> = (inputRef) => {\n const element = inputRef ? resolveInputRef(inputRef.input) : null;\n if (element) applyMaskToElement(element, mask, options as Options);\n if (ref) ref(element);\n };\n refCache.set(cacheKey, refWithMask);\n }\n\n const result = {\n ...registerReturn,\n ref: refCache.get(cacheKey),\n } as UseHookFormMaskAntdReturn<T>;\n\n setPrevRef(result, ref);\n\n return result;\n };\n }, [registerFn]);\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport withMask from '../api/withMask';\nimport { resolveInputRef } from '../core';\nimport isServer from '../utils/isServer';\n\nimport type { InputRef } from 'antd';\n\nimport type { Mask, Options } from '../types';\n\ninterface UseMaskInputOptions {\n mask: Mask;\n register?: (element: HTMLElement) => void;\n options?: Options;\n}\n\n/**\n * React hook for applying input masks to Ant Design form elements.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the Ant Design Input element\n */\nexport default function useMaskInputAntd(props: UseMaskInputOptions): (\n input: InputRef | null\n) => void {\n const { mask, register, options } = props;\n const ref = useRef<HTMLInputElement | null>(null);\n const maskRef = useRef(mask);\n const optionsRef = useRef(options);\n\n const refCallback = useCallback((input: InputRef | null) => {\n if (!input) {\n ref.current = null;\n return;\n }\n\n ref.current = resolveInputRef(input.input);\n withMask(maskRef.current, optionsRef.current)(ref.current);\n }, []);\n\n useEffect(() => {\n if (isServer || !ref.current || !register) return;\n register(ref.current);\n }, [register]);\n\n if (isServer) {\n return (): void => {\n // server doesn't have dom, so just do nothing\n };\n }\n\n return refCallback;\n}\n"]}
|
package/dist/antd.d.cts
CHANGED
|
@@ -15,7 +15,7 @@ type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskRetu
|
|
|
15
15
|
* @param registerFn - The register function from useForm hook
|
|
16
16
|
* @returns A function that registers a field with mask support for Ant Design Input
|
|
17
17
|
*/
|
|
18
|
-
declare function useHookFormMaskAntd<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): (fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskAntdReturn<T
|
|
18
|
+
declare function useHookFormMaskAntd<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>);
|
|
19
19
|
|
|
20
20
|
interface UseMaskInputOptions {
|
|
21
21
|
mask: Mask;
|
|
@@ -23,14 +23,13 @@ interface UseMaskInputOptions {
|
|
|
23
23
|
options?: Options;
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
|
-
* React hook for applying input masks to form elements.
|
|
27
|
-
* Works with Ant Design and other wrapped components too.
|
|
26
|
+
* React hook for applying input masks to Ant Design form elements.
|
|
28
27
|
*
|
|
29
28
|
* @param props - Configuration object
|
|
30
29
|
* @param props.mask - The mask pattern to apply
|
|
31
30
|
* @param props.register - Optional callback that receives the element
|
|
32
31
|
* @param props.options - Optional mask configuration options
|
|
33
|
-
* @returns A ref callback function to attach to the
|
|
32
|
+
* @returns A ref callback function to attach to the Ant Design Input element
|
|
34
33
|
*/
|
|
35
34
|
declare function useMaskInputAntd(props: UseMaskInputOptions): (input: InputRef | null) => void;
|
|
36
35
|
|
package/dist/antd.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<UseHookFormMaskRetu
|
|
|
15
15
|
* @param registerFn - The register function from useForm hook
|
|
16
16
|
* @returns A function that registers a field with mask support for Ant Design Input
|
|
17
17
|
*/
|
|
18
|
-
declare function useHookFormMaskAntd<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): (fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskAntdReturn<T
|
|
18
|
+
declare function useHookFormMaskAntd<T extends FieldValues, D extends RegisterOptions>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>);
|
|
19
19
|
|
|
20
20
|
interface UseMaskInputOptions {
|
|
21
21
|
mask: Mask;
|
|
@@ -23,14 +23,13 @@ interface UseMaskInputOptions {
|
|
|
23
23
|
options?: Options;
|
|
24
24
|
}
|
|
25
25
|
/**
|
|
26
|
-
* React hook for applying input masks to form elements.
|
|
27
|
-
* Works with Ant Design and other wrapped components too.
|
|
26
|
+
* React hook for applying input masks to Ant Design form elements.
|
|
28
27
|
*
|
|
29
28
|
* @param props - Configuration object
|
|
30
29
|
* @param props.mask - The mask pattern to apply
|
|
31
30
|
* @param props.register - Optional callback that receives the element
|
|
32
31
|
* @param props.options - Optional mask configuration options
|
|
33
|
-
* @returns A ref callback function to attach to the
|
|
32
|
+
* @returns A ref callback function to attach to the Ant Design Input element
|
|
34
33
|
*/
|
|
35
34
|
declare function useMaskInputAntd(props: UseMaskInputOptions): (input: InputRef | null) => void;
|
|
36
35
|
|
package/dist/antd.js
CHANGED
|
@@ -1,57 +1,48 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { makeMaskCacheKey, setPrevRef, resolveInputRef, withMask, isServer_default, applyMaskToElement } from './chunk-QCWLMMDI.js';
|
|
2
|
+
import { useMemo, useRef, useCallback, useEffect } from 'react';
|
|
3
3
|
|
|
4
|
-
// src/antd/useHookFormMaskAntd.ts
|
|
5
4
|
function useHookFormMaskAntd(registerFn) {
|
|
6
|
-
return (
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
if (
|
|
5
|
+
return useMemo(() => {
|
|
6
|
+
const refCache = /* @__PURE__ */ new Map();
|
|
7
|
+
return (fieldName, mask, options) => {
|
|
8
|
+
if (!registerFn) throw new Error("registerFn is required");
|
|
9
|
+
const registerReturn = registerFn(fieldName, options);
|
|
10
|
+
const { ref } = registerReturn;
|
|
11
|
+
const cacheKey = makeMaskCacheKey(fieldName, mask);
|
|
12
|
+
if (!refCache.has(cacheKey)) {
|
|
13
|
+
const refWithMask = (inputRef) => {
|
|
14
|
+
const element = inputRef ? resolveInputRef(inputRef.input) : null;
|
|
15
|
+
if (element) applyMaskToElement(element, mask, options);
|
|
16
|
+
if (ref) ref(element);
|
|
17
|
+
};
|
|
18
|
+
refCache.set(cacheKey, refWithMask);
|
|
19
|
+
}
|
|
20
|
+
const result = {
|
|
21
|
+
...registerReturn,
|
|
22
|
+
ref: refCache.get(cacheKey)
|
|
23
|
+
};
|
|
24
|
+
setPrevRef(result, ref);
|
|
25
|
+
return result;
|
|
14
26
|
};
|
|
15
|
-
|
|
16
|
-
...registerReturn,
|
|
17
|
-
ref: refWithMask
|
|
18
|
-
};
|
|
19
|
-
Object.defineProperty(result, "prevRef", {
|
|
20
|
-
value: ref,
|
|
21
|
-
enumerable: false,
|
|
22
|
-
writable: true,
|
|
23
|
-
configurable: true
|
|
24
|
-
});
|
|
25
|
-
return result;
|
|
26
|
-
};
|
|
27
|
+
}, [registerFn]);
|
|
27
28
|
}
|
|
28
29
|
function useMaskInputAntd(props) {
|
|
29
30
|
const { mask, register, options } = props;
|
|
30
31
|
const ref = useRef(null);
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
[mask, options]
|
|
34
|
-
);
|
|
32
|
+
const maskRef = useRef(mask);
|
|
33
|
+
const optionsRef = useRef(options);
|
|
35
34
|
const refCallback = useCallback((input) => {
|
|
36
35
|
if (!input) {
|
|
37
36
|
ref.current = null;
|
|
38
37
|
return;
|
|
39
38
|
}
|
|
40
39
|
ref.current = resolveInputRef(input.input);
|
|
40
|
+
withMask(maskRef.current, optionsRef.current)(ref.current);
|
|
41
41
|
}, []);
|
|
42
42
|
useEffect(() => {
|
|
43
|
-
if (isServer_default || !ref.current) return;
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
const inputElement = findInputElement(ref.current);
|
|
48
|
-
if (maskInput && inputElement && isHTMLElement(inputElement)) {
|
|
49
|
-
maskInput.mask(inputElement);
|
|
50
|
-
}
|
|
51
|
-
if (register && isHTMLElement(ref.current)) {
|
|
52
|
-
register(ref.current);
|
|
53
|
-
}
|
|
54
|
-
}, [mask, register, options, maskInput]);
|
|
43
|
+
if (isServer_default || !ref.current || !register) return;
|
|
44
|
+
register(ref.current);
|
|
45
|
+
}, [register]);
|
|
55
46
|
if (isServer_default) {
|
|
56
47
|
return () => {
|
|
57
48
|
};
|
package/dist/antd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/antd/useHookFormMaskAntd.ts","../src/antd/useMaskInputAntd.ts"],"names":[],"mappings":";;;AA6Be,SAAR,oBAEL,UAAA,EAC6D;AAE7D,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,MAAM,QAAA,uBAAe,GAAA,EAA0C;AAE/D,IAAA,OAAO,CAAC,SAAA,EAAoB,IAAA,EAAY,OAAA,KACuB;AAC7D,MAAA,IAAI,CAAC,UAAA,EAAY,MAAM,IAAI,MAAM,wBAAwB,CAAA;AAEzD,MAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,SAAA,EAAW,OAAkB,CAAA;AAC/D,MAAA,MAAM,EAAE,KAAI,GAAI,cAAA;AAEhB,MAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,SAAA,EAAW,IAAI,CAAA;AAEjD,MAAA,IAAI,CAAC,QAAA,CAAS,GAAA,CAAI,QAAQ,CAAA,EAAG;AAC3B,QAAA,MAAM,WAAA,GAA4C,CAAC,QAAA,KAAa;AAC9D,UAAA,MAAM,OAAA,GAAU,QAAA,GAAW,eAAA,CAAgB,QAAA,CAAS,KAAK,CAAA,GAAI,IAAA;AAC7D,UAAA,IAAI,OAAA,EAAS,kBAAA,CAAmB,OAAA,EAAS,IAAA,EAAM,OAAkB,CAAA;AACjE,UAAA,IAAI,GAAA,MAAS,OAAO,CAAA;AAAA,QACtB,CAAA;AACA,QAAA,QAAA,CAAS,GAAA,CAAI,UAAU,WAAW,CAAA;AAAA,MACpC;AAEA,MAAA,MAAM,MAAA,GAAS;AAAA,QACb,GAAG,cAAA;AAAA,QACH,GAAA,EAAK,QAAA,CAAS,GAAA,CAAI,QAAQ;AAAA,OAC5B;AAEA,MAAA,UAAA,CAAW,QAAQ,GAAG,CAAA;AAEtB,MAAA,OAAO,MAAA;AAAA,IACT,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AACjB;ACxCe,SAAR,iBAAkC,KAAA,EAE/B;AACR,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,OAAA,EAAQ,GAAI,KAAA;AACpC,EAAA,MAAM,GAAA,GAAM,OAAgC,IAAI,CAAA;AAChD,EAAA,MAAM,OAAA,GAAU,OAAO,IAAI,CAAA;AAC3B,EAAA,MAAM,UAAA,GAAa,OAAO,OAAO,CAAA;AAEjC,EAAA,MAAM,WAAA,GAAc,WAAA,CAAY,CAAC,KAAA,KAA2B;AAC1D,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AACd,MAAA;AAAA,IACF;AAEA,IAAA,GAAA,CAAI,OAAA,GAAU,eAAA,CAAgB,KAAA,CAAM,KAAK,CAAA;AACzC,IAAA,QAAA,CAAS,QAAQ,OAAA,EAAS,UAAA,CAAW,OAAO,CAAA,CAAE,IAAI,OAAO,CAAA;AAAA,EAC3D,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAA,IAAY,CAAC,GAAA,CAAI,OAAA,IAAW,CAAC,QAAA,EAAU;AAC3C,IAAA,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,EACtB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,gBAAA,EAAU;AACZ,IAAA,OAAO,MAAY;AAAA,IAEnB,CAAA;AAAA,EACF;AAEA,EAAA,OAAO,WAAA;AACT","file":"antd.js","sourcesContent":["import { useMemo } from 'react';\n\nimport { applyMaskToElement, resolveInputRef } from '../core';\nimport { makeMaskCacheKey, setPrevRef } from '../utils';\n\nimport type { InputRef } from 'antd';\nimport type { RefCallback } from 'react';\nimport type {\n FieldValues, Path,\n RegisterOptions,\n UseFormRegister,\n} from 'react-hook-form';\n\nimport type { Mask, Options, UseHookFormMaskReturn } from '../types';\n\nexport type UseHookFormMaskAntdReturn<T extends FieldValues> = Omit<\n UseHookFormMaskReturn<T>,\n 'ref'\n> & { ref: RefCallback<InputRef | null> };\n\n/**\n * Ant Design version of useHookFormMask.\n * Creates a masked register that works with Ant Design Input (ref receives InputRef).\n *\n * @template T - The form data type\n * @template D - The register options type\n * @param registerFn - The register function from useForm hook\n * @returns A function that registers a field with mask support for Ant Design Input\n */\nexport default function useHookFormMaskAntd<\n T extends FieldValues, D extends RegisterOptions,\n>(registerFn: UseFormRegister<T>): ((fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D) => UseHookFormMaskAntdReturn<T>) {\n //\n return useMemo(() => {\n const refCache = new Map<string, RefCallback<InputRef | null>>();\n\n return (fieldName: Path<T>, mask: Mask, options?: (\n D & Options) | Options | D): UseHookFormMaskAntdReturn<T> => {\n if (!registerFn) throw new Error('registerFn is required');\n\n const registerReturn = registerFn(fieldName, options as Options);\n const { ref } = registerReturn as UseHookFormMaskReturn<T>;\n\n const cacheKey = makeMaskCacheKey(fieldName, mask);\n\n if (!refCache.has(cacheKey)) {\n const refWithMask: RefCallback<InputRef | null> = (inputRef) => {\n const element = inputRef ? resolveInputRef(inputRef.input) : null;\n if (element) applyMaskToElement(element, mask, options as Options);\n if (ref) ref(element);\n };\n refCache.set(cacheKey, refWithMask);\n }\n\n const result = {\n ...registerReturn,\n ref: refCache.get(cacheKey),\n } as UseHookFormMaskAntdReturn<T>;\n\n setPrevRef(result, ref);\n\n return result;\n };\n }, [registerFn]);\n}\n","import { useCallback, useEffect, useRef } from 'react';\n\nimport withMask from '../api/withMask';\nimport { resolveInputRef } from '../core';\nimport isServer from '../utils/isServer';\n\nimport type { InputRef } from 'antd';\n\nimport type { Mask, Options } from '../types';\n\ninterface UseMaskInputOptions {\n mask: Mask;\n register?: (element: HTMLElement) => void;\n options?: Options;\n}\n\n/**\n * React hook for applying input masks to Ant Design form elements.\n *\n * @param props - Configuration object\n * @param props.mask - The mask pattern to apply\n * @param props.register - Optional callback that receives the element\n * @param props.options - Optional mask configuration options\n * @returns A ref callback function to attach to the Ant Design Input element\n */\nexport default function useMaskInputAntd(props: UseMaskInputOptions): (\n input: InputRef | null\n) => void {\n const { mask, register, options } = props;\n const ref = useRef<HTMLInputElement | null>(null);\n const maskRef = useRef(mask);\n const optionsRef = useRef(options);\n\n const refCallback = useCallback((input: InputRef | null) => {\n if (!input) {\n ref.current = null;\n return;\n }\n\n ref.current = resolveInputRef(input.input);\n withMask(maskRef.current, optionsRef.current)(ref.current);\n }, []);\n\n useEffect(() => {\n if (isServer || !ref.current || !register) return;\n register(ref.current);\n }, [register]);\n\n if (isServer) {\n return (): void => {\n // server doesn't have dom, so just do nothing\n };\n }\n\n return refCallback;\n}\n"]}
|
|
@@ -20,7 +20,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
20
20
|
// file that has been converted to a CommonJS file using a Babel-
|
|
21
21
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
22
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
-
|
|
23
|
+
__defProp(target, "default", { value: mod, enumerable: true }) ,
|
|
24
24
|
mod
|
|
25
25
|
));
|
|
26
26
|
|
|
@@ -3675,47 +3675,8 @@ var require_inputmask = __commonJS({
|
|
|
3675
3675
|
}
|
|
3676
3676
|
});
|
|
3677
3677
|
|
|
3678
|
-
// src/
|
|
3679
|
-
|
|
3680
|
-
return element !== null && typeof element === "object" && "nodeType" in element && "querySelector" in element && typeof element.querySelector === "function";
|
|
3681
|
-
}
|
|
3682
|
-
function findInputElement(element) {
|
|
3683
|
-
if (!element) return null;
|
|
3684
|
-
if (!isHTMLElement(element)) {
|
|
3685
|
-
return null;
|
|
3686
|
-
}
|
|
3687
|
-
if (element.nodeName === "INPUT" || element.nodeName === "TEXTAREA") {
|
|
3688
|
-
return element;
|
|
3689
|
-
}
|
|
3690
|
-
if (!("querySelector" in element) || typeof element.querySelector !== "function") {
|
|
3691
|
-
return null;
|
|
3692
|
-
}
|
|
3693
|
-
try {
|
|
3694
|
-
const inputElement = element.querySelector("input, textarea");
|
|
3695
|
-
if (inputElement && isHTMLElement(inputElement)) {
|
|
3696
|
-
return inputElement;
|
|
3697
|
-
}
|
|
3698
|
-
} catch {
|
|
3699
|
-
return null;
|
|
3700
|
-
}
|
|
3701
|
-
return null;
|
|
3702
|
-
}
|
|
3703
|
-
function resolveInputRef(input) {
|
|
3704
|
-
if (!input) {
|
|
3705
|
-
return null;
|
|
3706
|
-
}
|
|
3707
|
-
if (typeof input === "object" && "current" in input) {
|
|
3708
|
-
const refValue = input.current;
|
|
3709
|
-
if (isHTMLElement(refValue)) {
|
|
3710
|
-
return refValue;
|
|
3711
|
-
}
|
|
3712
|
-
return null;
|
|
3713
|
-
}
|
|
3714
|
-
if (isHTMLElement(input)) {
|
|
3715
|
-
return input;
|
|
3716
|
-
}
|
|
3717
|
-
return null;
|
|
3718
|
-
}
|
|
3678
|
+
// src/api/withMask.ts
|
|
3679
|
+
var import_inputmask = __toESM(require_inputmask());
|
|
3719
3680
|
|
|
3720
3681
|
// src/core/maskConfig.ts
|
|
3721
3682
|
var ALIAS_MASKS = {
|
|
@@ -3736,6 +3697,7 @@ var ALIAS_MASKS = {
|
|
|
3736
3697
|
placeholder: "0,00",
|
|
3737
3698
|
displayFormat: "currency",
|
|
3738
3699
|
radixPoint: ",",
|
|
3700
|
+
groupSeparator: ".",
|
|
3739
3701
|
autoUnmask: true
|
|
3740
3702
|
},
|
|
3741
3703
|
cpf: { mask: "999.999.999-99", placeholder: "___.___.___-__" },
|
|
@@ -3795,10 +3757,65 @@ function interopDefaultSync(module) {
|
|
|
3795
3757
|
return module;
|
|
3796
3758
|
}
|
|
3797
3759
|
|
|
3760
|
+
// src/utils/maskHelpers.ts
|
|
3761
|
+
function makeMaskCacheKey(fieldName, mask) {
|
|
3762
|
+
return `${fieldName}:${Array.isArray(mask) ? mask.join(",") : String(mask)}`;
|
|
3763
|
+
}
|
|
3764
|
+
function setPrevRef(result, ref) {
|
|
3765
|
+
Object.defineProperty(result, "prevRef", {
|
|
3766
|
+
value: ref,
|
|
3767
|
+
enumerable: false,
|
|
3768
|
+
writable: true,
|
|
3769
|
+
configurable: true
|
|
3770
|
+
});
|
|
3771
|
+
}
|
|
3772
|
+
|
|
3773
|
+
// src/api/withMask.ts
|
|
3774
|
+
var callbackCache = /* @__PURE__ */ new Map();
|
|
3775
|
+
function withMask(mask, options) {
|
|
3776
|
+
if (!options) {
|
|
3777
|
+
const cacheKey = makeMaskCacheKey("", mask);
|
|
3778
|
+
if (callbackCache.has(cacheKey)) {
|
|
3779
|
+
return callbackCache.get(cacheKey);
|
|
3780
|
+
}
|
|
3781
|
+
}
|
|
3782
|
+
const callback = (input) => {
|
|
3783
|
+
if (isServer_default || mask === null || !input) return;
|
|
3784
|
+
const maskInput = interopDefaultSync(import_inputmask.default)(getMaskOptions(mask, options));
|
|
3785
|
+
maskInput.mask(input);
|
|
3786
|
+
};
|
|
3787
|
+
if (!options) {
|
|
3788
|
+
const cacheKey = makeMaskCacheKey("", mask);
|
|
3789
|
+
callbackCache.set(cacheKey, callback);
|
|
3790
|
+
}
|
|
3791
|
+
return callback;
|
|
3792
|
+
}
|
|
3793
|
+
|
|
3794
|
+
// src/core/elementResolver.ts
|
|
3795
|
+
function isHTMLElement(element) {
|
|
3796
|
+
return element !== null && typeof element === "object" && "nodeType" in element && "querySelector" in element && typeof element.querySelector === "function";
|
|
3797
|
+
}
|
|
3798
|
+
function resolveInputRef(input) {
|
|
3799
|
+
if (!input) {
|
|
3800
|
+
return null;
|
|
3801
|
+
}
|
|
3802
|
+
if (typeof input === "object" && "current" in input) {
|
|
3803
|
+
const refValue = input.current;
|
|
3804
|
+
if (isHTMLElement(refValue)) {
|
|
3805
|
+
return refValue;
|
|
3806
|
+
}
|
|
3807
|
+
return null;
|
|
3808
|
+
}
|
|
3809
|
+
if (isHTMLElement(input)) {
|
|
3810
|
+
return input;
|
|
3811
|
+
}
|
|
3812
|
+
return null;
|
|
3813
|
+
}
|
|
3814
|
+
|
|
3798
3815
|
// src/core/maskEngine.ts
|
|
3799
|
-
var
|
|
3816
|
+
var import_inputmask2 = __toESM(require_inputmask());
|
|
3800
3817
|
function createMaskInstance(mask, options) {
|
|
3801
|
-
const inputmaskInstance = interopDefaultSync(
|
|
3818
|
+
const inputmaskInstance = interopDefaultSync(import_inputmask2.default);
|
|
3802
3819
|
return inputmaskInstance(getMaskOptions(mask, options));
|
|
3803
3820
|
}
|
|
3804
3821
|
function applyMaskToElement(element, mask, options) {
|
|
@@ -3824,6 +3841,6 @@ inputmask/dist/inputmask.js:
|
|
|
3824
3841
|
(*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE *)
|
|
3825
3842
|
*/
|
|
3826
3843
|
|
|
3827
|
-
export {
|
|
3828
|
-
//# sourceMappingURL=chunk-
|
|
3829
|
-
//# sourceMappingURL=chunk-
|
|
3844
|
+
export { applyMaskToElement, flow, isServer_default, makeMaskCacheKey, resolveInputRef, setPrevRef, withMask };
|
|
3845
|
+
//# sourceMappingURL=chunk-QCWLMMDI.js.map
|
|
3846
|
+
//# sourceMappingURL=chunk-QCWLMMDI.js.map
|