use-mask-input 3.0.1 → 3.0.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/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.mjs +1 -1
- package/dist/index.modern.mjs.map +1 -1
- package/dist/index.module.js +1 -1
- package/dist/index.module.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/withHookFormMask.d.ts +1 -1
- package/package.json +8 -10
- package/src/example/App.example.tsx +22 -8
- package/src/useMaskInput.ts +1 -3
- package/src/withHookFormMask.ts +2 -2
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var r=require("react"),t=require("inputmask"),e=require("lodash.flowright");function n(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var u=/*#__PURE__*/n(t),a=/*#__PURE__*/n(e);function i(){return i=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},i.apply(this,arguments)}exports.default=function(t){var e=t.mask,n=t.register,a=t.options,f=r.useRef(null);return r.useEffect(function(){f.current&&(u.default(i({mask:e},a)).mask(f.current),n&&f.current&&n(f.current))},[e,n,a]),f},exports.withHookFormMask=function(r,t,e){var n;if(r){var f=r.ref,o=u.default(i({mask:t,jitMasking:!0},e));n=a.default(f,function(r){return o.mask(r),r})}return i({},r,{ref:n})},exports.withMask=function(r,t){return function(e){var n=u.default(i({mask:r},t));return e&&n.mask(e),e}};
|
|
1
|
+
var r=require("react"),t=require("inputmask"),e=require("lodash.flowright");function n(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var u=/*#__PURE__*/n(t),a=/*#__PURE__*/n(e);function i(){return i=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},i.apply(this,arguments)}exports.default=function(t){var e=t.mask,n=t.register,a=t.options,f=r.useRef(null);return r.useEffect(function(){f.current&&(u.default(i({mask:e},a)).mask(f.current),n&&f.current&&n(f.current))},[e,n,a]),f},exports.withHookFormMask=function(r,t,e){var n;if(r){var f=r.ref,o=u.default(i({mask:t,jitMasking:!0},e));n=a.default(f,function(r){return r&&o.mask(r),r})}return i({},r,{ref:n})},exports.withMask=function(r,t){return function(e){var n=u.default(i({mask:r},t));return e&&n.mask(e),e}};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current)
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n maskInput.mask(ref.current);\n\n if (register && ref.current) {\n register(ref.current);\n }\n }, [mask, register, options]);\n\n return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport type { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n registerReturn: UseFormRegisterReturn,\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => {\n //\n let newRef;\n\n if (registerReturn){\n const { ref } = registerReturn;\n\n const maskInput = Inputmask({\n mask,\n jitMasking: true,\n ...options,\n });\n\n newRef = flowright(ref, (_ref) => {\n if (_ref) maskInput.mask(_ref);\n return _ref;\n });\n }\n\n return {\n ...registerReturn,\n ref: newRef,\n };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n //\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n if (input) {\n maskInput.mask(input);\n }\n\n return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["props","mask","register","options","useRef","useEffect","ref","current","Inputmask","registerReturn","newRef","jitMasking","flowright","_ref","maskInput","input","_extends"],"mappings":"obASqB,SAACA,GACpB,IAAQC,EAA4BD,EAA5BC,KAAMC,EAAsBF,EAAtBE,SAAUC,EAAYH,EAAZG,UAEZC,EAAMA,OAAmB,MAiBrC,OAfAC,EAAAA,UAAU,WACHC,EAAIC,UAESC,aAChBP,KAAAA,GACGE,IAGKF,KAAKK,EAAIC,SAEfL,GAAYI,EAAIC,SAClBL,EAASI,EAAIC,SAEjB,EAAG,CAACN,EAAMC,EAAUC,IAGtBG,CAAA,2BCxByB,SACvBG,EACAR,EACAE,GAGA,IAAUO,EAEV,GAAID,EAAe,CACjB,IAAQH,EAAQG,EAARH,MAEUE,EAAS,WACzBP,KAAAA,EACAU,YAAY,GACTR,IAGLO,EAASE,EAAAA,QAAUN,EAAK,SAACO,GAEvB,OADIA,GAAMC,EAAUb,KAAKY,GAClBA,CACT,EACD,CAED,YACKJ,EAAc,CACjBH,IAAKI,GAET,mBC/B0B,SACxBT,EACAE,UACIY,SAAAA,GAEJ,IAAeD,EAAGN,EAAAA,QAASQ,EAAA,CACzBf,KAAAA,GACGE,IAOL,OAJIY,GACFD,EAAUb,KAAKc,GAInBA,CAAA,CAAC"}
|
package/dist/index.modern.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useRef as r,useEffect as t}from"react";import n from"inputmask";import s from"lodash.flowright";function a(){return a=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(r[s]=n[s])}return r},a.apply(this,arguments)}const e=s=>{const{mask:e,register:o,options:i}=s,c=r(null);return t(()=>{c.current&&(n(a({mask:e},i)).mask(c.current),o&&c.current&&o(c.current))},[e,o,i]),c},o=(r,t,e)=>{let o;if(r){const{ref:i}=r,c=n(a({mask:t,jitMasking:!0},e));o=s(i,r=>(c.mask(r),r))}return a({},r,{ref:o})},i=(r,t)=>s=>{const e=n(a({mask:r},t));return s&&e.mask(s),s};export{e as default,o as withHookFormMask,i as withMask};
|
|
1
|
+
import{useRef as r,useEffect as t}from"react";import n from"inputmask";import s from"lodash.flowright";function a(){return a=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(r[s]=n[s])}return r},a.apply(this,arguments)}const e=s=>{const{mask:e,register:o,options:i}=s,c=r(null);return t(()=>{c.current&&(n(a({mask:e},i)).mask(c.current),o&&c.current&&o(c.current))},[e,o,i]),c},o=(r,t,e)=>{let o;if(r){const{ref:i}=r,c=n(a({mask:t,jitMasking:!0},e));o=s(i,r=>(r&&c.mask(r),r))}return a({},r,{ref:o})},i=(r,t)=>s=>{const e=n(a({mask:r},t));return s&&e.mask(s),s};export{e as default,o as withHookFormMask,i as withMask};
|
|
2
2
|
//# sourceMappingURL=index.modern.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.modern.mjs","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current)
|
|
1
|
+
{"version":3,"file":"index.modern.mjs","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n maskInput.mask(ref.current);\n\n if (register && ref.current) {\n register(ref.current);\n }\n }, [mask, register, options]);\n\n return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport type { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n registerReturn: UseFormRegisterReturn,\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => {\n //\n let newRef;\n\n if (registerReturn){\n const { ref } = registerReturn;\n\n const maskInput = Inputmask({\n mask,\n jitMasking: true,\n ...options,\n });\n\n newRef = flowright(ref, (_ref) => {\n if (_ref) maskInput.mask(_ref);\n return _ref;\n });\n }\n\n return {\n ...registerReturn,\n ref: newRef,\n };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n //\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n if (input) {\n maskInput.mask(input);\n }\n\n return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["useInputMask","props","mask","register","options","useRef","useEffect","ref","current","Inputmask","registerReturn","jitMasking","newRef","flowright","_ref","maskInput","_extends","withFinalFormMask","input"],"mappings":"2UASMA,MAAAA,EAAgBC,IACpB,MAAMC,KAAEA,EAAIC,SAAEA,EAAQC,QAAEA,GAAYH,IAExBI,EAAyB,MAiBrC,OAfAC,EAAU,KACHC,EAAIC,UAESC,KAChBP,QACGE,IAGKF,KAAKK,EAAIC,SAEfL,GAAYI,EAAIC,SAClBL,EAASI,EAAIC,SACd,EACA,CAACN,EAAMC,EAAUC,IAGtBG,KCxByB,CACvBG,EACAR,EACAE,KAGA,MAEA,GAAIM,EAAe,CACjB,MAAMH,IAAEA,GAAQG,IAEED,KAChBP,OACAS,YAAY,GACTP,IAGLQ,EAASC,EAAUN,EAAMO,IACnBA,GAAMC,EAAUb,KAAKY,GAE3BA,GACD,CAED,OAAAE,EAAA,CAAA,EACKN,EAAc,CACjBH,IAAKK,KC7BHK,EAAoB,CACxBf,EACAE,IACIc,IAEJ,MAAMH,EAAYN,EAASO,EAAA,CACzBd,QACGE,IAOL,OAJIc,GACFH,EAAUb,KAAKgB"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useRef as r,useEffect as t}from"react";import n from"inputmask";import a from"lodash.flowright";function e(){return e=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(r[a]=n[a])}return r},e.apply(this,arguments)}var i=function(a){var i=a.mask,o=a.register,u=a.options,s=r(null);return t(function(){s.current&&(n(e({mask:i},u)).mask(s.current),o&&s.current&&o(s.current))},[i,o,u]),s},o=function(r,t,i){var o;if(r){var u=r.ref,s=n(e({mask:t,jitMasking:!0},i));o=a(u,function(r){return s.mask(r),r})}return e({},r,{ref:o})},u=function(r,t){return function(a){var i=n(e({mask:r},t));return a&&i.mask(a),a}};export{i as default,o as withHookFormMask,u as withMask};
|
|
1
|
+
import{useRef as r,useEffect as t}from"react";import n from"inputmask";import a from"lodash.flowright";function e(){return e=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(r[a]=n[a])}return r},e.apply(this,arguments)}var i=function(a){var i=a.mask,o=a.register,u=a.options,s=r(null);return t(function(){s.current&&(n(e({mask:i},u)).mask(s.current),o&&s.current&&o(s.current))},[i,o,u]),s},o=function(r,t,i){var o;if(r){var u=r.ref,s=n(e({mask:t,jitMasking:!0},i));o=a(u,function(r){return r&&s.mask(r),r})}return e({},r,{ref:o})},u=function(r,t){return function(a){var i=n(e({mask:r},t));return a&&i.mask(a),a}};export{i as default,o as withHookFormMask,u as withMask};
|
|
2
2
|
//# sourceMappingURL=index.module.js.map
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current)
|
|
1
|
+
{"version":3,"file":"index.module.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n maskInput.mask(ref.current);\n\n if (register && ref.current) {\n register(ref.current);\n }\n }, [mask, register, options]);\n\n return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport type { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n registerReturn: UseFormRegisterReturn,\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => {\n //\n let newRef;\n\n if (registerReturn){\n const { ref } = registerReturn;\n\n const maskInput = Inputmask({\n mask,\n jitMasking: true,\n ...options,\n });\n\n newRef = flowright(ref, (_ref) => {\n if (_ref) maskInput.mask(_ref);\n return _ref;\n });\n }\n\n return {\n ...registerReturn,\n ref: newRef,\n };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n //\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n if (input) {\n maskInput.mask(input);\n }\n\n return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["useInputMask","props","mask","register","options","useRef","useEffect","ref","current","Inputmask","withHookFormMask","registerReturn","newRef","jitMasking","flowright","_ref","maskInput","withFinalFormMask","input","_extends"],"mappings":"2UASMA,MAAe,SAACC,GACpB,IAAQC,EAA4BD,EAA5BC,KAAMC,EAAsBF,EAAtBE,SAAUC,EAAYH,EAAZG,UAEZC,EAAyB,MAiBrC,OAfAC,EAAU,WACHC,EAAIC,UAESC,KAChBP,KAAAA,GACGE,IAGKF,KAAKK,EAAIC,SAEfL,GAAYI,EAAIC,SAClBL,EAASI,EAAIC,SAEjB,EAAG,CAACN,EAAMC,EAAUC,IAGtBG,CAAA,ECxBMG,EAAmB,SACvBC,EACAT,EACAE,GAGA,IAAUQ,EAEV,GAAID,EAAe,CACjB,IAAQJ,EAAQI,EAARJ,MAEUE,KAChBP,KAAAA,EACAW,YAAY,GACTT,IAGLQ,EAASE,EAAUP,EAAK,SAACQ,GAEvB,OADIA,GAAMC,EAAUd,KAAKa,GAClBA,CACT,EACD,CAED,YACKJ,EAAc,CACjBJ,IAAKK,GAET,EC/BuBK,EAAG,SACxBf,EACAE,UACIc,SAAAA,GAEJ,IAAeF,EAAGP,EAASU,EAAA,CACzBjB,KAAAA,GACGE,IAOL,OAJIc,GACFF,EAAUd,KAAKgB,GAInBA,CAAA,CAAC"}
|
package/dist/index.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("inputmask"),require("lodash.flowright")):"function"==typeof define&&define.amd?define(["exports","react","inputmask","lodash.flowright"],e):e((t||self).useMaskInput={},t.react,t.inputmask,t.flowright)}(this,function(t,e,n,r){function u(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=/*#__PURE__*/u(n),i=/*#__PURE__*/u(r);function f(){return f=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f.apply(this,arguments)}t.default=function(t){var n=t.mask,r=t.register,u=t.options,i=e.useRef(null);return e.useEffect(function(){i.current&&(a.default(f({mask:n},u)).mask(i.current),r&&i.current&&r(i.current))},[n,r,u]),i},t.withHookFormMask=function(t,e,n){var r;if(t){var u=t.ref,o=a.default(f({mask:e,jitMasking:!0},n));r=i.default(u,function(t){return o.mask(t),t})}return f({},t,{ref:r})},t.withMask=function(t,e){return function(n){var r=a.default(f({mask:t},e));return n&&r.mask(n),n}}});
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("inputmask"),require("lodash.flowright")):"function"==typeof define&&define.amd?define(["exports","react","inputmask","lodash.flowright"],e):e((t||self).useMaskInput={},t.react,t.inputmask,t.flowright)}(this,function(t,e,n,r){function u(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=/*#__PURE__*/u(n),i=/*#__PURE__*/u(r);function f(){return f=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},f.apply(this,arguments)}t.default=function(t){var n=t.mask,r=t.register,u=t.options,i=e.useRef(null);return e.useEffect(function(){i.current&&(a.default(f({mask:n},u)).mask(i.current),r&&i.current&&r(i.current))},[n,r,u]),i},t.withHookFormMask=function(t,e,n){var r;if(t){var u=t.ref,o=a.default(f({mask:e,jitMasking:!0},n));r=i.default(u,function(t){return t&&o.mask(t),t})}return f({},t,{ref:r})},t.withMask=function(t,e){return function(n){var r=a.default(f({mask:t},e));return n&&r.mask(n),n}}});
|
|
2
2
|
//# sourceMappingURL=index.umd.js.map
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current)
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../src/useMaskInput.ts","../src/withHookFormMask.ts","../src/withMask.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport Inputmask from 'inputmask';\n\ninterface UseInputMaskOptions {\n mask: Inputmask.Options['mask']\n register?(element: HTMLElement): void\n options?: Inputmask.Options\n}\n\nconst useInputMask = (props: UseInputMaskOptions) => {\n const { mask, register, options } = props;\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n maskInput.mask(ref.current);\n\n if (register && ref.current) {\n register(ref.current);\n }\n }, [mask, register, options]);\n\n return ref;\n};\n\nexport default useInputMask;\n","/* eslint-disable @typescript-eslint/space-before-blocks */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport Inputmask from 'inputmask';\nimport type { UseFormRegisterReturn } from 'react-hook-form';\nimport flowright from 'lodash.flowright';\n\nconst withHookFormMask = (\n registerReturn: UseFormRegisterReturn,\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => {\n //\n let newRef;\n\n if (registerReturn){\n const { ref } = registerReturn;\n\n const maskInput = Inputmask({\n mask,\n jitMasking: true,\n ...options,\n });\n\n newRef = flowright(ref, (_ref) => {\n if (_ref) maskInput.mask(_ref);\n return _ref;\n });\n }\n\n return {\n ...registerReturn,\n ref: newRef,\n };\n};\n\nexport default withHookFormMask;\n","import Inputmask from 'inputmask';\n\nconst withFinalFormMask = (\n mask: Inputmask.Options['mask'],\n options?: Inputmask.Options,\n) => (input: HTMLElement | HTMLInputElement | null) => {\n //\n const maskInput = Inputmask({\n mask,\n ...options,\n });\n\n if (input) {\n maskInput.mask(input);\n }\n\n return input;\n};\n\nexport default withFinalFormMask;\n"],"names":["props","mask","register","options","useRef","useEffect","ref","current","Inputmask","registerReturn","newRef","jitMasking","flowright","_ref","maskInput","input","_extends"],"mappings":"utBASqB,SAACA,GACpB,IAAQC,EAA4BD,EAA5BC,KAAMC,EAAsBF,EAAtBE,SAAUC,EAAYH,EAAZG,UAEZC,EAAMA,OAAmB,MAiBrC,OAfAC,EAAAA,UAAU,WACHC,EAAIC,UAESC,aAChBP,KAAAA,GACGE,IAGKF,KAAKK,EAAIC,SAEfL,GAAYI,EAAIC,SAClBL,EAASI,EAAIC,SAEjB,EAAG,CAACN,EAAMC,EAAUC,IAGtBG,CAAA,qBCxByB,SACvBG,EACAR,EACAE,GAGA,IAAUO,EAEV,GAAID,EAAe,CACjB,IAAQH,EAAQG,EAARH,MAEUE,EAAS,WACzBP,KAAAA,EACAU,YAAY,GACTR,IAGLO,EAASE,EAAAA,QAAUN,EAAK,SAACO,GAEvB,OADIA,GAAMC,EAAUb,KAAKY,GAClBA,CACT,EACD,CAED,YACKJ,EAAc,CACjBH,IAAKI,GAET,aC/B0B,SACxBT,EACAE,UACIY,SAAAA,GAEJ,IAAeD,EAAGN,EAAAA,QAASQ,EAAA,CACzBf,KAAAA,GACGE,IAOL,OAJIY,GACFD,EAAUb,KAAKc,GAInBA,CAAA,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Inputmask from 'inputmask';
|
|
2
|
-
import { UseFormRegisterReturn } from 'react-hook-form';
|
|
2
|
+
import type { UseFormRegisterReturn } from 'react-hook-form';
|
|
3
3
|
declare const withHookFormMask: (registerReturn: UseFormRegisterReturn, mask: Inputmask.Options['mask'], options?: Inputmask.Options) => {
|
|
4
4
|
ref: ((_ref: any) => void) | undefined;
|
|
5
5
|
onChange: import("react-hook-form").ChangeHandler;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "use-mask-input",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3",
|
|
4
4
|
"description": "A react Hook for build elegant input masks. Compatible with React Hook Form",
|
|
5
5
|
"author": "eduardoborges",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,28 +39,27 @@
|
|
|
39
39
|
"@semantic-release/npm": "9.0.2",
|
|
40
40
|
"@semantic-release/release-notes-generator": "10.0.3",
|
|
41
41
|
"@types/inputmask": "^5.0.3",
|
|
42
|
-
"@types/jest": "29.
|
|
42
|
+
"@types/jest": "29.4.0",
|
|
43
43
|
"@types/lodash.flowright": "^3.5.7",
|
|
44
44
|
"@types/node": "18",
|
|
45
45
|
"@types/react": ">=17",
|
|
46
46
|
"@types/react-dom": ">=17",
|
|
47
|
-
"@typescript-eslint/eslint-plugin": "5.
|
|
48
|
-
"@typescript-eslint/parser": "5.
|
|
47
|
+
"@typescript-eslint/eslint-plugin": "5.50.0",
|
|
48
|
+
"@typescript-eslint/parser": "5.50.0",
|
|
49
49
|
"@vitejs/plugin-react": "3.0.1",
|
|
50
50
|
"concurrently": "7.6.0",
|
|
51
51
|
"cross-env": "7.0.3",
|
|
52
|
-
"eslint": "8.
|
|
52
|
+
"eslint": "8.33.0",
|
|
53
53
|
"eslint-config-airbnb": "19.0.4",
|
|
54
54
|
"eslint-config-airbnb-typescript": "^17.0.0",
|
|
55
55
|
"eslint-plugin-import": "2.27.5",
|
|
56
56
|
"eslint-plugin-jsx-a11y": "6.7.1",
|
|
57
57
|
"eslint-plugin-react": "7.32.1",
|
|
58
58
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
59
|
-
"gh-pages": "5.0.0",
|
|
60
59
|
"microbundle": "0.15.1",
|
|
61
|
-
"semantic-release": "20.0
|
|
62
|
-
"typescript": "4.9.
|
|
63
|
-
"vite": "4.
|
|
60
|
+
"semantic-release": "20.1.0",
|
|
61
|
+
"typescript": "4.9.5",
|
|
62
|
+
"vite": "4.1.1",
|
|
64
63
|
"react-final-form": "6.5.9",
|
|
65
64
|
"react-hook-form": "^7.42.1",
|
|
66
65
|
"final-form": "4.20.9"
|
|
@@ -71,7 +70,6 @@
|
|
|
71
70
|
],
|
|
72
71
|
"dependencies": {
|
|
73
72
|
"inputmask": "5.0.7",
|
|
74
|
-
"lodash.compose": "2.4.1",
|
|
75
73
|
"lodash.flowright": "3.5.0"
|
|
76
74
|
},
|
|
77
75
|
"bundleDependencies": [
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable import/no-extraneous-dependencies */
|
|
1
2
|
/* eslint-disable no-console */
|
|
2
3
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
3
4
|
/* eslint-disable react/jsx-props-no-spreading */
|
|
@@ -7,6 +8,7 @@ import { Form, Field } from 'react-final-form';
|
|
|
7
8
|
import { withHookFormMask, withMask } from '../index';
|
|
8
9
|
|
|
9
10
|
function App() {
|
|
11
|
+
const [lib, setLib] = React.useState<'hook-form' | 'final-form'>('hook-form');
|
|
10
12
|
const { register, handleSubmit } = useForm();
|
|
11
13
|
|
|
12
14
|
const onSubmit = (data: any) => {
|
|
@@ -18,16 +20,27 @@ function App() {
|
|
|
18
20
|
<h3>Using simple ref</h3>
|
|
19
21
|
<input type="text" ref={withMask(['(99) 9999 9999', '(99) 9 9999 9999'])} />
|
|
20
22
|
<hr />
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
{...withHookFormMask(register('phone'), ['(99) 9999 9999', '(99) 9 9999 9999'])}
|
|
26
|
-
/>
|
|
27
|
-
<button type="submit">Submit</button>
|
|
28
|
-
</form>
|
|
23
|
+
<select onChange={(e) => setLib(e.target.value as any)}>
|
|
24
|
+
<option value="hook-form">Hook Form</option>
|
|
25
|
+
<option value="final-form">Final Form</option>
|
|
26
|
+
</select>
|
|
29
27
|
<hr />
|
|
30
28
|
|
|
29
|
+
{lib === 'hook-form' && (
|
|
30
|
+
<>
|
|
31
|
+
<h3>Using react-hook-form</h3>
|
|
32
|
+
<form onSubmit={handleSubmit(onSubmit)}>
|
|
33
|
+
<input
|
|
34
|
+
type="text"
|
|
35
|
+
{...withHookFormMask(register('phone'), ['(99) 9999 9999', '(99) 9 9999 9999'])}
|
|
36
|
+
/>
|
|
37
|
+
<button type="submit">Submit</button>
|
|
38
|
+
</form>
|
|
39
|
+
</>
|
|
40
|
+
)}
|
|
41
|
+
|
|
42
|
+
<hr />
|
|
43
|
+
{lib === 'final-form' && (
|
|
31
44
|
<Form
|
|
32
45
|
onSubmit={onSubmit}
|
|
33
46
|
render={({ handleSubmit: _handleSubmit }) => (
|
|
@@ -47,6 +60,7 @@ function App() {
|
|
|
47
60
|
</form>
|
|
48
61
|
)}
|
|
49
62
|
/>
|
|
63
|
+
)}
|
|
50
64
|
</>
|
|
51
65
|
);
|
|
52
66
|
}
|
package/src/useMaskInput.ts
CHANGED
package/src/withHookFormMask.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/space-before-blocks */
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
3
3
|
import Inputmask from 'inputmask';
|
|
4
|
-
import { UseFormRegisterReturn } from 'react-hook-form';
|
|
4
|
+
import type { UseFormRegisterReturn } from 'react-hook-form';
|
|
5
5
|
import flowright from 'lodash.flowright';
|
|
6
6
|
|
|
7
7
|
const withHookFormMask = (
|
|
@@ -22,7 +22,7 @@ const withHookFormMask = (
|
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
newRef = flowright(ref, (_ref) => {
|
|
25
|
-
maskInput.mask(_ref);
|
|
25
|
+
if (_ref) maskInput.mask(_ref);
|
|
26
26
|
return _ref;
|
|
27
27
|
});
|
|
28
28
|
}
|