@stenajs-webui/input-mask 17.13.2 → 17.13.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.
Files changed (5) hide show
  1. package/dist/index.es.js +53 -63
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +2 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -3
package/dist/index.es.js CHANGED
@@ -1,70 +1,56 @@
1
- (function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { TextInput } from "@stenajs-webui/forms";
2
- import { useRef, useLayoutEffect } from "react";
3
- import { createTextMaskInputElement } from "text-mask-core";
4
- import { jsx } from "react/jsx-runtime";
5
- const useMaskedInput = (inputRef, onChange, onValueChange, mask, pipe, initialValue = "", guide = false, keepCharPositions = false, placeholderChar = "\u2000", showMask = true) => {
6
- const textMask = useRef(null);
7
- useLayoutEffect(() => {
8
- if (!inputRef.current)
9
- return;
10
- textMask.current = createTextMaskInputElement({
11
- guide,
12
- inputElement: inputRef.current,
13
- keepCharPositions,
14
- mask,
15
- pipe,
16
- placeholderChar,
17
- showMask
18
- });
19
- textMask.current.update(initialValue);
1
+ (function(){"use strict";try{var e=document.createElement("style");e.appendChild(document.createTextNode("")),document.head.appendChild(e)}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
2
+ import { TextInput as a } from "@stenajs-webui/forms";
3
+ import { useRef as I, useLayoutEffect as x } from "react";
4
+ import { createTextMaskInputElement as E } from "text-mask-core";
5
+ import { jsx as T } from "react/jsx-runtime";
6
+ const M = (d, e, r, u, n, o = "", f = !1, c = !1, s = "\u2000", m = !0) => {
7
+ const t = I(null);
8
+ return x(() => {
9
+ !d.current || (t.current = E({
10
+ guide: f,
11
+ inputElement: d.current,
12
+ keepCharPositions: c,
13
+ mask: u,
14
+ pipe: n,
15
+ placeholderChar: s,
16
+ showMask: m
17
+ }), t.current.update(o));
20
18
  }, [
21
- inputRef,
22
- guide,
23
- keepCharPositions,
24
- mask,
25
- pipe,
26
- placeholderChar,
27
- showMask,
28
- initialValue
29
- ]);
30
- return {
31
- onChange: (event) => {
32
- if (textMask.current) {
33
- textMask.current.update();
34
- }
35
- if (typeof onChange === "function") {
36
- onChange(event);
37
- }
38
- if (typeof onValueChange === "function") {
39
- onValueChange(event.target.value);
40
- }
19
+ d,
20
+ f,
21
+ c,
22
+ u,
23
+ n,
24
+ s,
25
+ m,
26
+ o
27
+ ]), {
28
+ onChange: (p) => {
29
+ t.current && t.current.update(), typeof e == "function" && e(p), typeof r == "function" && r(p.target.value);
41
30
  }
42
31
  };
43
- };
44
- const MaskedTextInput = ({
45
- mask,
46
- pipe,
47
- onChange,
48
- onValueChange,
49
- value,
50
- guide,
51
- keepCharPositions,
52
- placeholderChar,
53
- showMask,
54
- ...textInputProps
32
+ }, D = ({
33
+ mask: d,
34
+ pipe: e,
35
+ onChange: r,
36
+ onValueChange: u,
37
+ value: n,
38
+ guide: o,
39
+ keepCharPositions: f,
40
+ placeholderChar: c,
41
+ showMask: s,
42
+ ...m
55
43
  }) => {
56
- const inputRef = useRef(null);
57
- const {
58
- onChange: maskedOnChange
59
- } = useMaskedInput(inputRef, onChange, onValueChange, mask, pipe, value, guide, keepCharPositions, placeholderChar, showMask);
60
- return /* @__PURE__ */ jsx(TextInput, {
61
- ...textInputProps,
62
- onChange: maskedOnChange,
63
- value,
64
- inputRef
44
+ const t = I(null), {
45
+ onChange: p
46
+ } = M(t, r, u, d, e, n, o, f, c, s);
47
+ return /* @__PURE__ */ T(a, {
48
+ ...m,
49
+ onChange: p,
50
+ value: n,
51
+ inputRef: t
65
52
  });
66
- };
67
- const InputMasks = {
53
+ }, g = {
68
54
  CREDIT_CARD: [
69
55
  /\d/,
70
56
  /\d/,
@@ -89,5 +75,9 @@ const InputMasks = {
89
75
  TIME: [/[012]/, /\d/, ":", /[012345]/, /\d/],
90
76
  ISO_DATE: [/\d/, /\d/, /\d/, /\d/, "-", /\d/, /\d/, "-", /\d/, /\d/]
91
77
  };
92
- export { InputMasks, MaskedTextInput, useMaskedInput };
78
+ export {
79
+ g as InputMasks,
80
+ D as MaskedTextInput,
81
+ M as useMaskedInput
82
+ };
93
83
  //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/hooks/UseInputMask.ts","../src/components/MaskedTextInput.tsx","../src/masks/InputMasks.ts"],"sourcesContent":["import { ChangeEvent, RefObject, useLayoutEffect, useRef } from \"react\";\nimport { createTextMaskInputElement } from \"text-mask-core\";\nimport {\n InputMask,\n InputMaskPipe,\n InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport const useMaskedInput = (\n inputRef: RefObject<HTMLInputElement>,\n onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined,\n onValueChange: ((value: string) => void) | undefined,\n mask: InputMask | InputMaskProvider,\n pipe?: InputMaskPipe,\n initialValue: string = \"\",\n guide: boolean = false,\n keepCharPositions: boolean = false,\n placeholderChar: string = \"\\u2000\",\n showMask: boolean = true\n) => {\n const textMask = useRef(null);\n\n useLayoutEffect(() => {\n if (!inputRef.current) return;\n\n textMask.current = createTextMaskInputElement({\n guide,\n inputElement: inputRef.current,\n keepCharPositions,\n mask,\n pipe,\n placeholderChar,\n showMask,\n });\n\n (textMask.current as any).update(initialValue);\n }, [\n inputRef,\n guide,\n keepCharPositions,\n mask,\n pipe,\n placeholderChar,\n showMask,\n initialValue,\n ]);\n\n return {\n onChange: (event: ChangeEvent<HTMLInputElement>) => {\n if (textMask.current) {\n (textMask.current as any).update();\n }\n\n if (typeof onChange === \"function\") {\n onChange(event);\n }\n if (typeof onValueChange === \"function\") {\n onValueChange(event.target.value);\n }\n },\n };\n};\n","import { TextInput, TextInputProps } from \"@stenajs-webui/forms\";\nimport * as React from \"react\";\nimport { useRef } from \"react\";\nimport { useMaskedInput } from \"../hooks/UseInputMask\";\nimport {\n InputMask,\n InputMaskPipe,\n InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport interface MaskedTextInputProps extends TextInputProps {\n mask: InputMask | InputMaskProvider;\n pipe?: InputMaskPipe;\n guide?: boolean;\n keepCharPositions?: boolean;\n placeholderChar?: string;\n showMask?: boolean;\n}\n\nexport const MaskedTextInput: React.FC<MaskedTextInputProps> = ({\n mask,\n pipe,\n onChange,\n onValueChange,\n value,\n guide,\n keepCharPositions,\n placeholderChar,\n showMask,\n ...textInputProps\n}) => {\n const inputRef = useRef(null);\n const { onChange: maskedOnChange } = useMaskedInput(\n inputRef,\n onChange,\n onValueChange,\n mask,\n pipe,\n value,\n guide,\n keepCharPositions,\n placeholderChar,\n showMask\n );\n\n return (\n <TextInput\n {...textInputProps}\n onChange={maskedOnChange}\n value={value}\n inputRef={inputRef}\n />\n );\n};\n","export const InputMasks = {\n CREDIT_CARD: [\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n ],\n TIME: [/[012]/, /\\d/, \":\", /[012345]/, /\\d/],\n ISO_DATE: [/\\d/, /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, \"-\", /\\d/, /\\d/], // 2019-12-29\n};\n"],"names":["MaskedTextInput","mask","pipe","onChange","onValueChange","value","guide","keepCharPositions","placeholderChar","showMask","textInputProps","inputRef","useRef","maskedOnChange","useMaskedInput"],"mappings":";;;;AAQO,MAAM,iBAAiB,CAC5B,UACA,UACA,eACA,MACA,MACA,eAAuB,IACvB,QAAiB,OACjB,oBAA6B,OAC7B,kBAA0B,UAC1B,WAAoB,SACjB;AACG,QAAA,WAAW,OAAO,IAAI;AAE5B,kBAAgB,MAAM;AACpB,QAAI,CAAC,SAAS;AAAS;AAEvB,aAAS,UAAU,2BAA2B;AAAA,MAC5C;AAAA,MACA,cAAc,SAAS;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEA,aAAS,QAAgB,OAAO,YAAY;AAAA,EAAA,GAC5C;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AAAA,IACL,UAAU,CAAC,UAAyC;AAClD,UAAI,SAAS,SAAS;AACnB,iBAAS,QAAgB;MAC5B;AAEI,UAAA,OAAO,aAAa,YAAY;AAClC,iBAAS,KAAK;AAAA,MAChB;AACI,UAAA,OAAO,kBAAkB,YAAY;AACzB,sBAAA,MAAM,OAAO,KAAK;AAAA,MAClC;AAAA,IACF;AAAA,EAAA;AAEJ;AC1CO,MAAMA,kBAAkD,CAAC;AAAA,EAC9DC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,KACGC;AAAAA,MACC;AACEC,QAAAA,WAAWC,OAAO,IAAD;AACjB,QAAA;AAAA,IAAET,UAAUU;AAAAA,MAAmBC,eACnCH,UACAR,UACAC,eACAH,MACAC,MACAG,OACAC,OACAC,mBACAC,iBACAC,QAViD;AAanD,6BACG,WAAD;AAAA,IAAA,GACMC;AAAAA,IACJ,UAAUG;AAAAA,IACV;AAAA,IACA;AAAA,EAAA,CALJ;AAQD;ACrDM,MAAM,aAAa;AAAA,EACxB,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,MAAM,CAAC,SAAS,MAAM,KAAK,YAAY,IAAI;AAAA,EAC3C,UAAU,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,IAAI;AACrE;;"}
1
+ {"version":3,"file":"index.es.js","sources":["../src/hooks/UseInputMask.ts","../src/components/MaskedTextInput.tsx","../src/masks/InputMasks.ts"],"sourcesContent":["import { ChangeEvent, RefObject, useLayoutEffect, useRef } from \"react\";\nimport { createTextMaskInputElement } from \"text-mask-core\";\nimport {\n InputMask,\n InputMaskPipe,\n InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport const useMaskedInput = (\n inputRef: RefObject<HTMLInputElement>,\n onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined,\n onValueChange: ((value: string) => void) | undefined,\n mask: InputMask | InputMaskProvider,\n pipe?: InputMaskPipe,\n initialValue: string = \"\",\n guide: boolean = false,\n keepCharPositions: boolean = false,\n placeholderChar: string = \"\\u2000\",\n showMask: boolean = true\n) => {\n const textMask = useRef(null);\n\n useLayoutEffect(() => {\n if (!inputRef.current) return;\n\n textMask.current = createTextMaskInputElement({\n guide,\n inputElement: inputRef.current,\n keepCharPositions,\n mask,\n pipe,\n placeholderChar,\n showMask,\n });\n\n (textMask.current as any).update(initialValue);\n }, [\n inputRef,\n guide,\n keepCharPositions,\n mask,\n pipe,\n placeholderChar,\n showMask,\n initialValue,\n ]);\n\n return {\n onChange: (event: ChangeEvent<HTMLInputElement>) => {\n if (textMask.current) {\n (textMask.current as any).update();\n }\n\n if (typeof onChange === \"function\") {\n onChange(event);\n }\n if (typeof onValueChange === \"function\") {\n onValueChange(event.target.value);\n }\n },\n };\n};\n","import { TextInput, TextInputProps } from \"@stenajs-webui/forms\";\nimport * as React from \"react\";\nimport { useRef } from \"react\";\nimport { useMaskedInput } from \"../hooks/UseInputMask\";\nimport {\n InputMask,\n InputMaskPipe,\n InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport interface MaskedTextInputProps extends TextInputProps {\n mask: InputMask | InputMaskProvider;\n pipe?: InputMaskPipe;\n guide?: boolean;\n keepCharPositions?: boolean;\n placeholderChar?: string;\n showMask?: boolean;\n}\n\nexport const MaskedTextInput: React.FC<MaskedTextInputProps> = ({\n mask,\n pipe,\n onChange,\n onValueChange,\n value,\n guide,\n keepCharPositions,\n placeholderChar,\n showMask,\n ...textInputProps\n}) => {\n const inputRef = useRef(null);\n const { onChange: maskedOnChange } = useMaskedInput(\n inputRef,\n onChange,\n onValueChange,\n mask,\n pipe,\n value,\n guide,\n keepCharPositions,\n placeholderChar,\n showMask\n );\n\n return (\n <TextInput\n {...textInputProps}\n onChange={maskedOnChange}\n value={value}\n inputRef={inputRef}\n />\n );\n};\n","export const InputMasks = {\n CREDIT_CARD: [\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n ],\n TIME: [/[012]/, /\\d/, \":\", /[012345]/, /\\d/],\n ISO_DATE: [/\\d/, /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, \"-\", /\\d/, /\\d/], // 2019-12-29\n};\n"],"names":["useMaskedInput","inputRef","onChange","onValueChange","mask","pipe","initialValue","guide","keepCharPositions","placeholderChar","showMask","textMask","useRef","useLayoutEffect","createTextMaskInputElement","event","MaskedTextInput","value","textInputProps","maskedOnChange","TextInput","InputMasks"],"mappings":";;;;AAQO,MAAMA,IAAiB,CAC5BC,GACAC,GACAC,GACAC,GACAC,GACAC,IAAuB,IACvBC,IAAiB,IACjBC,IAA6B,IAC7BC,IAA0B,UAC1BC,IAAoB,OACjB;AACG,QAAAC,IAAWC,EAAO,IAAI;AAE5B,SAAAC,EAAgB,MAAM;AACpB,IAAI,CAACZ,EAAS,YAEdU,EAAS,UAAUG,EAA2B;AAAA,MAC5C,OAAAP;AAAA,MACA,cAAcN,EAAS;AAAA,MACvB,mBAAAO;AAAA,MACA,MAAAJ;AAAA,MACA,MAAAC;AAAA,MACA,iBAAAI;AAAA,MACA,UAAAC;AAAA,IAAA,CACD,GAEAC,EAAS,QAAgB,OAAOL,CAAY;AAAA,EAAA,GAC5C;AAAA,IACDL;AAAA,IACAM;AAAA,IACAC;AAAA,IACAJ;AAAA,IACAC;AAAA,IACAI;AAAA,IACAC;AAAA,IACAJ;AAAA,EAAA,CACD,GAEM;AAAA,IACL,UAAU,CAACS,MAAyC;AAClD,MAAIJ,EAAS,WACVA,EAAS,QAAgB,UAGxB,OAAOT,KAAa,cACtBA,EAASa,CAAK,GAEZ,OAAOZ,KAAkB,cACbA,EAAAY,EAAM,OAAO,KAAK;AAAA,IAEpC;AAAA,EAAA;AAEJ,GC1CaC,IAAkD,CAAC;AAAA,EAC9DZ,MAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAH,UAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAc,OAAAA;AAAAA,EACAV,OAAAA;AAAAA,EACAC,mBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,UAAAA;AAAAA,KACGQ;AAV2D,MAW1D;AACEjB,QAAAA,IAAWW,EAAO,IAAD,GACjB;AAAA,IAAEV,UAAUiB;AAAAA,EAAZ,IAA+BnB,EACnCC,GACAC,GACAC,GACAC,GACAC,GACAY,GACAV,GACAC,GACAC,GACAC,CAViD;AAanD,2BACGU,GAAD;AAAA,IAAA,GACMF;AAAAA,IACJ,UAAUC;AAAAA,IACV,OAAAF;AAAA,IACA,UAAAhB;AAAA,EAAA,CALJ;AAQD,GCrDYoB,IAAa;AAAA,EACxB,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,MAAM,CAAC,SAAS,MAAM,KAAK,YAAY,IAAI;AAAA,EAC3C,UAAU,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,IAAI;AACrE;"}
package/dist/index.js CHANGED
@@ -1,2 +1,3 @@
1
- (function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var x=require("@stenajs-webui/forms"),M=require("react"),p=require("text-mask-core"),k=require("react/jsx-runtime");const i=(t,u,n,d,r,s="",a=!1,c=!1,o="\u2000",f=!0)=>{const e=M.useRef(null);return M.useLayoutEffect(()=>{!t.current||(e.current=p.createTextMaskInputElement({guide:a,inputElement:t.current,keepCharPositions:c,mask:d,pipe:r,placeholderChar:o,showMask:f}),e.current.update(s))},[t,a,c,d,r,o,f,s]),{onChange:I=>{e.current&&e.current.update(),typeof u=="function"&&u(I),typeof n=="function"&&n(I.target.value)}}},l=({mask:t,pipe:u,onChange:n,onValueChange:d,value:r,guide:s,keepCharPositions:a,placeholderChar:c,showMask:o,...f})=>{const e=M.useRef(null),{onChange:I}=i(e,n,d,t,u,r,s,a,c,o);return k.jsx(x.TextInput,{...f,onChange:I,value:r,inputRef:e})},m={CREDIT_CARD:[/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/],TIME:[/[012]/,/\d/,":",/[012345]/,/\d/],ISO_DATE:[/\d/,/\d/,/\d/,/\d/,"-",/\d/,/\d/,"-",/\d/,/\d/]};exports.InputMasks=m;exports.MaskedTextInput=l;exports.useMaskedInput=i;
1
+ (function(){"use strict";try{var e=document.createElement("style");e.appendChild(document.createTextNode("")),document.head.appendChild(e)}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
2
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("@stenajs-webui/forms"),M=require("react"),p=require("text-mask-core"),k=require("react/jsx-runtime"),i=(t,u,r,s,n,d="",c=!1,o=!1,a="\u2000",f=!0)=>{const e=M.useRef(null);return M.useLayoutEffect(()=>{!t.current||(e.current=p.createTextMaskInputElement({guide:c,inputElement:t.current,keepCharPositions:o,mask:s,pipe:n,placeholderChar:a,showMask:f}),e.current.update(d))},[t,c,o,s,n,a,f,d]),{onChange:I=>{e.current&&e.current.update(),typeof u=="function"&&u(I),typeof r=="function"&&r(I.target.value)}}},l=({mask:t,pipe:u,onChange:r,onValueChange:s,value:n,guide:d,keepCharPositions:c,placeholderChar:o,showMask:a,...f})=>{const e=M.useRef(null),{onChange:I}=i(e,r,s,t,u,n,d,c,o,a);return k.jsx(x.TextInput,{...f,onChange:I,value:n,inputRef:e})},m={CREDIT_CARD:[/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/," ",/\d/,/\d/,/\d/,/\d/],TIME:[/[012]/,/\d/,":",/[012345]/,/\d/],ISO_DATE:[/\d/,/\d/,/\d/,/\d/,"-",/\d/,/\d/,"-",/\d/,/\d/]};exports.InputMasks=m;exports.MaskedTextInput=l;exports.useMaskedInput=i;
2
3
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/hooks/UseInputMask.ts","../src/components/MaskedTextInput.tsx","../src/masks/InputMasks.ts"],"sourcesContent":["import { ChangeEvent, RefObject, useLayoutEffect, useRef } from \"react\";\nimport { createTextMaskInputElement } from \"text-mask-core\";\nimport {\n InputMask,\n InputMaskPipe,\n InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport const useMaskedInput = (\n inputRef: RefObject<HTMLInputElement>,\n onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined,\n onValueChange: ((value: string) => void) | undefined,\n mask: InputMask | InputMaskProvider,\n pipe?: InputMaskPipe,\n initialValue: string = \"\",\n guide: boolean = false,\n keepCharPositions: boolean = false,\n placeholderChar: string = \"\\u2000\",\n showMask: boolean = true\n) => {\n const textMask = useRef(null);\n\n useLayoutEffect(() => {\n if (!inputRef.current) return;\n\n textMask.current = createTextMaskInputElement({\n guide,\n inputElement: inputRef.current,\n keepCharPositions,\n mask,\n pipe,\n placeholderChar,\n showMask,\n });\n\n (textMask.current as any).update(initialValue);\n }, [\n inputRef,\n guide,\n keepCharPositions,\n mask,\n pipe,\n placeholderChar,\n showMask,\n initialValue,\n ]);\n\n return {\n onChange: (event: ChangeEvent<HTMLInputElement>) => {\n if (textMask.current) {\n (textMask.current as any).update();\n }\n\n if (typeof onChange === \"function\") {\n onChange(event);\n }\n if (typeof onValueChange === \"function\") {\n onValueChange(event.target.value);\n }\n },\n };\n};\n","import { TextInput, TextInputProps } from \"@stenajs-webui/forms\";\nimport * as React from \"react\";\nimport { useRef } from \"react\";\nimport { useMaskedInput } from \"../hooks/UseInputMask\";\nimport {\n InputMask,\n InputMaskPipe,\n InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport interface MaskedTextInputProps extends TextInputProps {\n mask: InputMask | InputMaskProvider;\n pipe?: InputMaskPipe;\n guide?: boolean;\n keepCharPositions?: boolean;\n placeholderChar?: string;\n showMask?: boolean;\n}\n\nexport const MaskedTextInput: React.FC<MaskedTextInputProps> = ({\n mask,\n pipe,\n onChange,\n onValueChange,\n value,\n guide,\n keepCharPositions,\n placeholderChar,\n showMask,\n ...textInputProps\n}) => {\n const inputRef = useRef(null);\n const { onChange: maskedOnChange } = useMaskedInput(\n inputRef,\n onChange,\n onValueChange,\n mask,\n pipe,\n value,\n guide,\n keepCharPositions,\n placeholderChar,\n showMask\n );\n\n return (\n <TextInput\n {...textInputProps}\n onChange={maskedOnChange}\n value={value}\n inputRef={inputRef}\n />\n );\n};\n","export const InputMasks = {\n CREDIT_CARD: [\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n ],\n TIME: [/[012]/, /\\d/, \":\", /[012345]/, /\\d/],\n ISO_DATE: [/\\d/, /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, \"-\", /\\d/, /\\d/], // 2019-12-29\n};\n"],"names":["useRef","useLayoutEffect","createTextMaskInputElement","MaskedTextInput","mask","pipe","onChange","onValueChange","value","guide","keepCharPositions","placeholderChar","showMask","textInputProps","inputRef","maskedOnChange","useMaskedInput","TextInput"],"mappings":"gOAQO,KAAM,GAAiB,CAC5B,EACA,EACA,EACA,EACA,EACA,EAAuB,GACvB,EAAiB,GACjB,EAA6B,GAC7B,EAA0B,SAC1B,EAAoB,KACjB,CACG,KAAA,GAAWA,SAAO,IAAI,EAE5BC,SAAAA,gBAAgB,IAAM,CACpB,AAAI,CAAC,EAAS,SAEd,GAAS,QAAUC,6BAA2B,CAC5C,QACA,aAAc,EAAS,QACvB,oBACA,OACA,OACA,kBACA,UAAA,CACD,EAEA,EAAS,QAAgB,OAAO,CAAY,EAAA,EAC5C,CACD,EACA,EACA,EACA,EACA,EACA,EACA,EACA,CAAA,CACD,EAEM,CACL,SAAU,AAAC,GAAyC,CAClD,AAAI,EAAS,SACV,EAAS,QAAgB,SAGxB,MAAO,IAAa,YACtB,EAAS,CAAK,EAEZ,MAAO,IAAkB,YACb,EAAA,EAAM,OAAO,KAAK,CAEpC,CAAA,CAEJ,EC1CaC,EAAkD,CAAC,CAC9DC,OACAC,OACAC,WACAC,gBACAC,QACAC,QACAC,oBACAC,kBACAC,cACGC,KACC,CACEC,KAAAA,GAAWd,SAAO,IAAD,EACjB,CAAEM,SAAUS,GAAmBC,EACnCF,EACAR,EACAC,EACAH,EACAC,EACAG,EACAC,EACAC,EACAC,EACAC,CAViD,EAanD,aACGK,EAAAA,UAAD,CAAA,GACMJ,EACJ,SAAUE,EACV,QACA,UAAA,CALJ,CAQD,ECrDY,EAAa,CACxB,YAAa,CACX,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,IACF,EACA,KAAM,CAAC,QAAS,KAAM,IAAK,WAAY,IAAI,EAC3C,SAAU,CAAC,KAAM,KAAM,KAAM,KAAM,IAAK,KAAM,KAAM,IAAK,KAAM,IAAI,CACrE"}
1
+ {"version":3,"file":"index.js","sources":["../src/hooks/UseInputMask.ts","../src/components/MaskedTextInput.tsx","../src/masks/InputMasks.ts"],"sourcesContent":["import { ChangeEvent, RefObject, useLayoutEffect, useRef } from \"react\";\nimport { createTextMaskInputElement } from \"text-mask-core\";\nimport {\n InputMask,\n InputMaskPipe,\n InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport const useMaskedInput = (\n inputRef: RefObject<HTMLInputElement>,\n onChange: ((ev: ChangeEvent<HTMLInputElement>) => void) | undefined,\n onValueChange: ((value: string) => void) | undefined,\n mask: InputMask | InputMaskProvider,\n pipe?: InputMaskPipe,\n initialValue: string = \"\",\n guide: boolean = false,\n keepCharPositions: boolean = false,\n placeholderChar: string = \"\\u2000\",\n showMask: boolean = true\n) => {\n const textMask = useRef(null);\n\n useLayoutEffect(() => {\n if (!inputRef.current) return;\n\n textMask.current = createTextMaskInputElement({\n guide,\n inputElement: inputRef.current,\n keepCharPositions,\n mask,\n pipe,\n placeholderChar,\n showMask,\n });\n\n (textMask.current as any).update(initialValue);\n }, [\n inputRef,\n guide,\n keepCharPositions,\n mask,\n pipe,\n placeholderChar,\n showMask,\n initialValue,\n ]);\n\n return {\n onChange: (event: ChangeEvent<HTMLInputElement>) => {\n if (textMask.current) {\n (textMask.current as any).update();\n }\n\n if (typeof onChange === \"function\") {\n onChange(event);\n }\n if (typeof onValueChange === \"function\") {\n onValueChange(event.target.value);\n }\n },\n };\n};\n","import { TextInput, TextInputProps } from \"@stenajs-webui/forms\";\nimport * as React from \"react\";\nimport { useRef } from \"react\";\nimport { useMaskedInput } from \"../hooks/UseInputMask\";\nimport {\n InputMask,\n InputMaskPipe,\n InputMaskProvider,\n} from \"../masks/InputMask\";\n\nexport interface MaskedTextInputProps extends TextInputProps {\n mask: InputMask | InputMaskProvider;\n pipe?: InputMaskPipe;\n guide?: boolean;\n keepCharPositions?: boolean;\n placeholderChar?: string;\n showMask?: boolean;\n}\n\nexport const MaskedTextInput: React.FC<MaskedTextInputProps> = ({\n mask,\n pipe,\n onChange,\n onValueChange,\n value,\n guide,\n keepCharPositions,\n placeholderChar,\n showMask,\n ...textInputProps\n}) => {\n const inputRef = useRef(null);\n const { onChange: maskedOnChange } = useMaskedInput(\n inputRef,\n onChange,\n onValueChange,\n mask,\n pipe,\n value,\n guide,\n keepCharPositions,\n placeholderChar,\n showMask\n );\n\n return (\n <TextInput\n {...textInputProps}\n onChange={maskedOnChange}\n value={value}\n inputRef={inputRef}\n />\n );\n};\n","export const InputMasks = {\n CREDIT_CARD: [\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n \" \",\n /\\d/,\n /\\d/,\n /\\d/,\n /\\d/,\n ],\n TIME: [/[012]/, /\\d/, \":\", /[012345]/, /\\d/],\n ISO_DATE: [/\\d/, /\\d/, /\\d/, /\\d/, \"-\", /\\d/, /\\d/, \"-\", /\\d/, /\\d/], // 2019-12-29\n};\n"],"names":["useMaskedInput","inputRef","onChange","onValueChange","mask","pipe","initialValue","guide","keepCharPositions","placeholderChar","showMask","textMask","useRef","useLayoutEffect","createTextMaskInputElement","event","MaskedTextInput","value","textInputProps","maskedOnChange","TextInput","InputMasks"],"mappings":"kOAQaA,EAAiB,CAC5BC,EACAC,EACAC,EACAC,EACAC,EACAC,EAAuB,GACvBC,EAAiB,GACjBC,EAA6B,GAC7BC,EAA0B,SAC1BC,EAAoB,KACjB,CACG,MAAAC,EAAWC,SAAO,IAAI,EAE5BC,OAAAA,EAAAA,gBAAgB,IAAM,CAChB,CAACZ,EAAS,UAEdU,EAAS,QAAUG,6BAA2B,CAC5C,MAAAP,EACA,aAAcN,EAAS,QACvB,kBAAAO,EACA,KAAAJ,EACA,KAAAC,EACA,gBAAAI,EACA,SAAAC,CAAA,CACD,EAEAC,EAAS,QAAgB,OAAOL,CAAY,EAAA,EAC5C,CACDL,EACAM,EACAC,EACAJ,EACAC,EACAI,EACAC,EACAJ,CAAA,CACD,EAEM,CACL,SAAWS,GAAyC,CAC9CJ,EAAS,SACVA,EAAS,QAAgB,SAGxB,OAAOT,GAAa,YACtBA,EAASa,CAAK,EAEZ,OAAOZ,GAAkB,YACbA,EAAAY,EAAM,OAAO,KAAK,CAEpC,CAAA,CAEJ,EC1CaC,EAAkD,CAAC,CAC9DZ,KAAAA,EACAC,KAAAA,EACAH,SAAAA,EACAC,cAAAA,EACAc,MAAAA,EACAV,MAAAA,EACAC,kBAAAA,EACAC,gBAAAA,EACAC,SAAAA,KACGQ,CAV2D,IAW1D,CACEjB,MAAAA,EAAWW,SAAO,IAAD,EACjB,CAAEV,SAAUiB,CAAZ,EAA+BnB,EACnCC,EACAC,EACAC,EACAC,EACAC,EACAY,EACAV,EACAC,EACAC,EACAC,CAViD,EAanD,aACGU,EAAAA,UAAD,CAAA,GACMF,EACJ,SAAUC,EACV,MAAAF,EACA,SAAAhB,CAAA,CALJ,CAQD,ECrDYoB,EAAa,CACxB,YAAa,CACX,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,KACA,IACA,KACA,KACA,KACA,IACF,EACA,KAAM,CAAC,QAAS,KAAM,IAAK,WAAY,IAAI,EAC3C,SAAU,CAAC,KAAM,KAAM,KAAM,KAAM,IAAK,KAAM,KAAM,IAAK,KAAM,IAAI,CACrE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stenajs-webui/input-mask",
3
- "version": "17.13.2",
3
+ "version": "17.13.3",
4
4
  "description": "",
5
5
  "author": "mattias800",
6
6
  "license": "MIT",
@@ -26,7 +26,7 @@
26
26
  "deploy": "gh-pages -d example/build"
27
27
  },
28
28
  "dependencies": {
29
- "@stenajs-webui/forms": "17.13.2",
29
+ "@stenajs-webui/forms": "17.13.3",
30
30
  "text-mask-core": "^5.1.2"
31
31
  },
32
32
  "peerDependencies": {
@@ -45,5 +45,5 @@
45
45
  "files": [
46
46
  "dist"
47
47
  ],
48
- "gitHead": "2c5c9f761a9b02e0c571ac260a61989e51ab0138"
48
+ "gitHead": "7192ec09f63ac6813294b4b2825a778fd53120c9"
49
49
  }