@stenajs-webui/input-mask 14.1.1 → 15.0.0-alpha.10

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.es.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { TextInput } from '@stenajs-webui/forms';
2
- import { useRef, useLayoutEffect, createElement } from 'react';
2
+ import * as React from 'react';
3
+ import { useRef, useLayoutEffect } from 'react';
3
4
  import { createTextMaskInputElement } from 'text-mask-core';
4
5
 
5
6
  /*! *****************************************************************************
@@ -89,7 +90,7 @@ var MaskedTextInput = function (_a) {
89
90
  var mask = _a.mask, pipe = _a.pipe, onChange = _a.onChange, onValueChange = _a.onValueChange, value = _a.value, guide = _a.guide, keepCharPositions = _a.keepCharPositions, placeholderChar = _a.placeholderChar, showMask = _a.showMask, textInputProps = __rest(_a, ["mask", "pipe", "onChange", "onValueChange", "value", "guide", "keepCharPositions", "placeholderChar", "showMask"]);
90
91
  var inputRef = useRef(null);
91
92
  var maskedOnChange = useMaskedInput(inputRef, onChange, onValueChange, mask, pipe, value, guide, keepCharPositions, placeholderChar, showMask).onChange;
92
- return (createElement(TextInput, __assign({}, textInputProps, { onChange: maskedOnChange, value: value, inputRef: inputRef })));
93
+ return (React.createElement(TextInput, __assign({}, textInputProps, { onChange: maskedOnChange, value: value, inputRef: inputRef })));
93
94
  };
94
95
 
95
96
  var InputMasks = {
@@ -115,7 +116,7 @@ var InputMasks = {
115
116
  /\d/,
116
117
  ],
117
118
  TIME: [/[012]/, /\d/, ":", /[012345]/, /\d/],
118
- ISO_DATE: [/\d/, /\d/, /\d/, /\d/, "-", /\d/, /\d/, "-", /\d/, /\d/],
119
+ ISO_DATE: [/\d/, /\d/, /\d/, /\d/, "-", /\d/, /\d/, "-", /\d/, /\d/], // 2019-12-29
119
120
  };
120
121
 
121
122
  export { InputMasks, MaskedTextInput, useMaskedInput };
@@ -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":["React.createElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAQa,cAAc,GAAG,UAC5B,QAAqC,EACrC,QAAmE,EACnE,aAAoD,EACpD,IAAmC,EACnC,IAAoB,EACpB,YAAyB,EACzB,KAAsB,EACtB,iBAAkC,EAClC,eAAkC,EAClC,QAAwB;IAJxB,6BAAA,EAAA,iBAAyB;IACzB,sBAAA,EAAA,aAAsB;IACtB,kCAAA,EAAA,yBAAkC;IAClC,gCAAA,EAAA,0BAAkC;IAClC,yBAAA,EAAA,eAAwB;IAExB,IAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE9B,eAAe,CAAC;QACd,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE9B,QAAQ,CAAC,OAAO,GAAG,0BAA0B,CAAC;YAC5C,KAAK,OAAA;YACL,YAAY,EAAE,QAAQ,CAAC,OAAO;YAC9B,iBAAiB,mBAAA;YACjB,IAAI,MAAA;YACJ,IAAI,MAAA;YACJ,eAAe,iBAAA;YACf,QAAQ,UAAA;SACT,CAAC,CAAC;QAEF,QAAQ,CAAC,OAAe,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;KAChD,EAAE;QACD,QAAQ;QACR,KAAK;QACL,iBAAiB;QACjB,IAAI;QACJ,IAAI;QACJ,eAAe;QACf,QAAQ;QACR,YAAY;KACb,CAAC,CAAC;IAEH,OAAO;QACL,QAAQ,EAAE,UAAC,KAAoC;YAC7C,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACnB,QAAQ,CAAC,OAAe,CAAC,MAAM,EAAE,CAAC;aACpC;YAED,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;gBAClC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;YACD,IAAI,OAAO,aAAa,KAAK,UAAU,EAAE;gBACvC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACnC;SACF;KACF,CAAC;AACJ;;IC1Ca,eAAe,GAAmC,UAAC,EAW/D;IAVC,IAAA,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,KAAK,WAAA,EACL,iBAAiB,uBAAA,EACjB,eAAe,qBAAA,EACf,QAAQ,cAAA,EACL,cAAc,cAV6C,mHAW/D,CADkB;IAEjB,IAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACtB,IAAU,cAAc,GAAK,cAAc,CACjD,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,eAAe,EACf,QAAQ,CACT,SAX+B,CAW9B;IAEF,QACEA,cAAC,SAAS,eACJ,cAAc,IAClB,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAClB,EACF;AACJ;;ICrDa,UAAU,GAAG;IACxB,WAAW,EAAE;QACX,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;KACL;IACD,IAAI,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,CAAC;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;;;;;"}
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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAQa,cAAc,GAAG,UAC5B,QAAqC,EACrC,QAAmE,EACnE,aAAoD,EACpD,IAAmC,EACnC,IAAoB,EACpB,YAAyB,EACzB,KAAsB,EACtB,iBAAkC,EAClC,eAAkC,EAClC,QAAwB;IAJxB,6BAAA,EAAA,iBAAyB;IACzB,sBAAA,EAAA,aAAsB;IACtB,kCAAA,EAAA,yBAAkC;IAClC,gCAAA,EAAA,0BAAkC;IAClC,yBAAA,EAAA,eAAwB;IAExB,IAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAE9B,eAAe,CAAC;QACd,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE9B,QAAQ,CAAC,OAAO,GAAG,0BAA0B,CAAC;YAC5C,KAAK,OAAA;YACL,YAAY,EAAE,QAAQ,CAAC,OAAO;YAC9B,iBAAiB,mBAAA;YACjB,IAAI,MAAA;YACJ,IAAI,MAAA;YACJ,eAAe,iBAAA;YACf,QAAQ,UAAA;SACT,CAAC,CAAC;QAEF,QAAQ,CAAC,OAAe,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;KAChD,EAAE;QACD,QAAQ;QACR,KAAK;QACL,iBAAiB;QACjB,IAAI;QACJ,IAAI;QACJ,eAAe;QACf,QAAQ;QACR,YAAY;KACb,CAAC,CAAC;IAEH,OAAO;QACL,QAAQ,EAAE,UAAC,KAAoC;YAC7C,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACnB,QAAQ,CAAC,OAAe,CAAC,MAAM,EAAE,CAAC;aACpC;YAED,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;gBAClC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;YACD,IAAI,OAAO,aAAa,KAAK,UAAU,EAAE;gBACvC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACnC;SACF;KACF,CAAC;AACJ;;IC1Ca,eAAe,GAAmC,UAAC,EAW/D;IAVC,IAAA,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,KAAK,WAAA,EACL,iBAAiB,uBAAA,EACjB,eAAe,qBAAA,EACf,QAAQ,cAAA,EACL,cAAc,cAV6C,mHAW/D,CADkB;IAEjB,IAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACtB,IAAU,cAAc,GAAK,cAAc,CACjD,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,eAAe,EACf,QAAQ,CACT,SAX+B,CAW9B;IAEF,QACE,oBAAC,SAAS,eACJ,cAAc,IAClB,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAClB,EACF;AACJ;;ICrDa,UAAU,GAAG;IACxB,WAAW,EAAE;QACX,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;KACL;IACD,IAAI,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,CAAC;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;;;;;"}
package/dist/index.js CHANGED
@@ -6,6 +6,26 @@ var forms = require('@stenajs-webui/forms');
6
6
  var React = require('react');
7
7
  var textMaskCore = require('text-mask-core');
8
8
 
9
+ function _interopNamespace(e) {
10
+ if (e && e.__esModule) return e;
11
+ var n = Object.create(null);
12
+ if (e) {
13
+ Object.keys(e).forEach(function (k) {
14
+ if (k !== 'default') {
15
+ var d = Object.getOwnPropertyDescriptor(e, k);
16
+ Object.defineProperty(n, k, d.get ? d : {
17
+ enumerable: true,
18
+ get: function () { return e[k]; }
19
+ });
20
+ }
21
+ });
22
+ }
23
+ n["default"] = e;
24
+ return Object.freeze(n);
25
+ }
26
+
27
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
28
+
9
29
  /*! *****************************************************************************
10
30
  Copyright (c) Microsoft Corporation.
11
31
 
@@ -93,7 +113,7 @@ var MaskedTextInput = function (_a) {
93
113
  var mask = _a.mask, pipe = _a.pipe, onChange = _a.onChange, onValueChange = _a.onValueChange, value = _a.value, guide = _a.guide, keepCharPositions = _a.keepCharPositions, placeholderChar = _a.placeholderChar, showMask = _a.showMask, textInputProps = __rest(_a, ["mask", "pipe", "onChange", "onValueChange", "value", "guide", "keepCharPositions", "placeholderChar", "showMask"]);
94
114
  var inputRef = React.useRef(null);
95
115
  var maskedOnChange = useMaskedInput(inputRef, onChange, onValueChange, mask, pipe, value, guide, keepCharPositions, placeholderChar, showMask).onChange;
96
- return (React.createElement(forms.TextInput, __assign({}, textInputProps, { onChange: maskedOnChange, value: value, inputRef: inputRef })));
116
+ return (React__namespace.createElement(forms.TextInput, __assign({}, textInputProps, { onChange: maskedOnChange, value: value, inputRef: inputRef })));
97
117
  };
98
118
 
99
119
  var InputMasks = {
@@ -119,7 +139,7 @@ var InputMasks = {
119
139
  /\d/,
120
140
  ],
121
141
  TIME: [/[012]/, /\d/, ":", /[012345]/, /\d/],
122
- ISO_DATE: [/\d/, /\d/, /\d/, /\d/, "-", /\d/, /\d/, "-", /\d/, /\d/],
142
+ ISO_DATE: [/\d/, /\d/, /\d/, /\d/, "-", /\d/, /\d/, "-", /\d/, /\d/], // 2019-12-29
123
143
  };
124
144
 
125
145
  exports.InputMasks = InputMasks;
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","React.createElement","TextInput"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAQa,cAAc,GAAG,UAC5B,QAAqC,EACrC,QAAmE,EACnE,aAAoD,EACpD,IAAmC,EACnC,IAAoB,EACpB,YAAyB,EACzB,KAAsB,EACtB,iBAAkC,EAClC,eAAkC,EAClC,QAAwB;IAJxB,6BAAA,EAAA,iBAAyB;IACzB,sBAAA,EAAA,aAAsB;IACtB,kCAAA,EAAA,yBAAkC;IAClC,gCAAA,EAAA,0BAAkC;IAClC,yBAAA,EAAA,eAAwB;IAExB,IAAM,QAAQ,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;IAE9BC,qBAAe,CAAC;QACd,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAE9B,QAAQ,CAAC,OAAO,GAAGC,uCAA0B,CAAC;YAC5C,KAAK,OAAA;YACL,YAAY,EAAE,QAAQ,CAAC,OAAO;YAC9B,iBAAiB,mBAAA;YACjB,IAAI,MAAA;YACJ,IAAI,MAAA;YACJ,eAAe,iBAAA;YACf,QAAQ,UAAA;SACT,CAAC,CAAC;QAEF,QAAQ,CAAC,OAAe,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;KAChD,EAAE;QACD,QAAQ;QACR,KAAK;QACL,iBAAiB;QACjB,IAAI;QACJ,IAAI;QACJ,eAAe;QACf,QAAQ;QACR,YAAY;KACb,CAAC,CAAC;IAEH,OAAO;QACL,QAAQ,EAAE,UAAC,KAAoC;YAC7C,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACnB,QAAQ,CAAC,OAAe,CAAC,MAAM,EAAE,CAAC;aACpC;YAED,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;gBAClC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACjB;YACD,IAAI,OAAO,aAAa,KAAK,UAAU,EAAE;gBACvC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;aACnC;SACF;KACF,CAAC;AACJ;;IC1Ca,eAAe,GAAmC,UAAC,EAW/D;IAVC,IAAA,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,KAAK,WAAA,EACL,iBAAiB,uBAAA,EACjB,eAAe,qBAAA,EACf,QAAQ,cAAA,EACL,cAAc,cAV6C,mHAW/D,CADkB;IAEjB,IAAM,QAAQ,GAAGF,YAAM,CAAC,IAAI,CAAC,CAAC;IACtB,IAAU,cAAc,GAAK,cAAc,CACjD,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,eAAe,EACf,QAAQ,CACT,SAX+B,CAW9B;IAEF,QACEG,oBAACC,eAAS,eACJ,cAAc,IAClB,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAClB,EACF;AACJ;;ICrDa,UAAU,GAAG;IACxB,WAAW,EAAE;QACX,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,GAAG;QACH,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;KACL;IACD,IAAI,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,CAAC;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC;;;;;;;"}
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","React","TextInput"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stenajs-webui/input-mask",
3
- "version": "14.1.1",
3
+ "version": "15.0.0-alpha.10",
4
4
  "description": "",
5
5
  "author": "mattias800",
6
6
  "license": "MIT",
@@ -19,7 +19,6 @@
19
19
  },
20
20
  "scripts": {
21
21
  "test": "jest",
22
- "test:watch": "react-scripts-ts test --env=jsdom",
23
22
  "build": "rollup -c",
24
23
  "start": "rollup -c -w",
25
24
  "clean": "rm -rf dist",
@@ -28,7 +27,7 @@
28
27
  "deploy": "gh-pages -d example/build"
29
28
  },
30
29
  "dependencies": {
31
- "@stenajs-webui/forms": "14.1.1",
30
+ "@stenajs-webui/forms": "15.0.0-alpha.10",
32
31
  "text-mask-core": "^5.1.2"
33
32
  },
34
33
  "peerDependencies": {
@@ -47,5 +46,5 @@
47
46
  "files": [
48
47
  "dist"
49
48
  ],
50
- "gitHead": "874166b4dd1b2520a14aad99a6c57fb783a9c363"
49
+ "gitHead": "8f037313b4dcab0e80a779a2122455b3235087d4"
51
50
  }