@stenajs-webui/input-mask 19.0.0-next.9 → 19.0.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.
Files changed (5) hide show
  1. package/dist/index.es.js +27 -15
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +3 -3
package/dist/index.es.js CHANGED
@@ -1,12 +1,12 @@
1
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";
2
+ import { jsx as a } from "react/jsx-runtime";
3
+ import { TextInput as x } from "@stenajs-webui/forms";
4
+ import { useRef as I, useLayoutEffect as E } from "react";
5
+ import { createTextMaskInputElement as T } from "text-mask-core";
6
6
  const M = (d, e, r, u, n, o = "", f = !1, c = !1, s = "\u2000", m = !0) => {
7
7
  const t = I(null);
8
- return x(() => {
9
- !d.current || (t.current = E({
8
+ return E(() => {
9
+ !d.current || (t.current = T({
10
10
  guide: f,
11
11
  inputElement: d.current,
12
12
  keepCharPositions: c,
@@ -41,15 +41,27 @@ const M = (d, e, r, u, n, o = "", f = !1, c = !1, s = "\u2000", m = !0) => {
41
41
  showMask: s,
42
42
  ...m
43
43
  }) => {
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
52
- });
44
+ const t = I(null), { onChange: p } = M(
45
+ t,
46
+ r,
47
+ u,
48
+ d,
49
+ e,
50
+ n,
51
+ o,
52
+ f,
53
+ c,
54
+ s
55
+ );
56
+ return /* @__PURE__ */ a(
57
+ x,
58
+ {
59
+ ...m,
60
+ onChange: p,
61
+ value: n,
62
+ inputRef: t
63
+ }
64
+ );
53
65
  }, g = {
54
66
  CREDIT_CARD: [
55
67
  /\d/,
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":["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;"}
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","jsx","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,EAC9D,MAAAZ;AAAA,EACA,MAAAC;AAAA,EACA,UAAAH;AAAA,EACA,eAAAC;AAAA,EACA,OAAAc;AAAA,EACA,OAAAV;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,KACGQ;AACL,MAAM;AACE,QAAAjB,IAAWW,EAAO,IAAI,GACtB,EAAE,UAAUO,EAAA,IAAmBnB;AAAA,IACnCC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAY;AAAA,IACAV;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA;AAIA,SAAA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,UAAUC;AAAA,MACV,OAAAF;AAAA,MACA,UAAAhB;AAAA,IAAA;AAAA,EAAA;AAGN,GCrDaqB,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,3 +1,3 @@
1
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
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("react/jsx-runtime"),p=require("@stenajs-webui/forms"),M=require("react"),k=require("text-mask-core"),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=k.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 x.jsx(p.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;
3
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":["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"}
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","jsx","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,CAC9D,KAAAZ,EACA,KAAAC,EACA,SAAAH,EACA,cAAAC,EACA,MAAAc,EACA,MAAAV,EACA,kBAAAC,EACA,gBAAAC,EACA,SAAAC,KACGQ,CACL,IAAM,CACE,MAAAjB,EAAWW,SAAO,IAAI,EACtB,CAAE,SAAUO,CAAA,EAAmBnB,EACnCC,EACAC,EACAC,EACAC,EACAC,EACAY,EACAV,EACAC,EACAC,EACAC,CAAA,EAIA,OAAAU,EAAA,IAACC,EAAA,UAAA,CACE,GAAGH,EACJ,SAAUC,EACV,MAAAF,EACA,SAAAhB,CAAA,CAAA,CAGN,ECrDaqB,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": "19.0.0-next.9",
3
+ "version": "19.0.0",
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": "19.0.0-next.9",
29
+ "@stenajs-webui/forms": "19.0.0",
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": "48ff3d49018b5083a092bc2505c1b749424e1ef2"
48
+ "gitHead": "86f7c988b9279914e4835a891c6e3f3e3010b9c6"
49
49
  }