@elliemae/ds-form-helpers-mask-hooks 3.18.0-next.4 → 3.18.0-next.5
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.
|
@@ -45,8 +45,6 @@ const ssnSpecialChars = [
|
|
|
45
45
|
];
|
|
46
46
|
const conformValue = (rawValue, cursorPos, lastKeyCode) => {
|
|
47
47
|
let maskedValue = String(rawValue).split("").filter((char) => char >= "0" && char <= "9");
|
|
48
|
-
while (maskedValue.length && maskedValue[0] === "0")
|
|
49
|
-
maskedValue.splice(0, 1);
|
|
50
48
|
maskedValue = maskedValue.slice(0, 9);
|
|
51
49
|
const maskedPos = (0, import_utils.getPartialMaskedPos)(rawValue, maskedValue, cursorPos);
|
|
52
50
|
return (0, import_utils.addSpecialCharacters)(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useSSNMask.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils/index.js';\nimport type { DSMaskT } from '../react-desc-prop-types.js';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types.js';\n\nconst ssnSpecialChars: [string, number][] = [\n ['-', 3],\n ['-', 6],\n];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n // Work with digits only\n let maskedValue = String(rawValue)\n .split('')\n .filter((char) => char >= '0' && char <= '9');\n\n // We
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8C;AAC9C,8BAAuF;AACvF,0BAAuC;AACvC,mBAA6E;AAE7E,mCAA6D;AAE7D,MAAM,kBAAsC;AAAA,EAC1C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,KAAK,CAAC;AACT;AAEA,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAC9B,MAAM,EAAE,EACR,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAG9C,
|
|
4
|
+
"sourcesContent": ["import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils/index.js';\nimport type { DSMaskT } from '../react-desc-prop-types.js';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types.js';\n\nconst ssnSpecialChars: [string, number][] = [\n ['-', 3],\n ['-', 6],\n];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n // Work with digits only\n let maskedValue = String(rawValue)\n .split('')\n .filter((char) => char >= '0' && char <= '9');\n\n // We only consider first 9 digits\n maskedValue = maskedValue.slice(0, 9);\n\n const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useSSNMask: DSMaskT.Hook = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useSSNMask');\n\n const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n const lastKeyCode = useRef('Unidentified');\n\n const scheduleAfterRender = useCallbackAfterRender(true);\n\n // Some times, the value of the mask is not gonna change (user types invalid char for example)\n // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n // But since the input is controlled, the input does not re-render\n // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n const [, setKey] = useState(0);\n\n const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n lastKeyCode.current = e.code;\n if (userOnKeyDown) userOnKeyDown(e);\n },\n [userOnKeyDown],\n );\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n valueSetter((prevMask) => {\n // Here we need to update the key\n if (mask === prevMask) setKey((key) => key + 1);\n\n return mask;\n });\n if (userOnChange) userOnChange(e, mask);\n scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n },\n [valueSetter, scheduleAfterRender, userOnChange],\n );\n\n return {\n onKeyDown,\n onChange,\n };\n};\n\nexport const getSSNMaskedValue = (value: string) => {\n const [maskedValue] = conformValue(value, value.length - 1, '');\n return maskedValue;\n};\n\nuseSSNMask.displayName = 'useSSNMask';\nexport const UseSSNMaskWithSchema = describe(useSSNMask);\nUseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8C;AAC9C,8BAAuF;AACvF,0BAAuC;AACvC,mBAA6E;AAE7E,mCAA6D;AAE7D,MAAM,kBAAsC;AAAA,EAC1C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,KAAK,CAAC;AACT;AAEA,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAC9B,MAAM,EAAE,EACR,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAG9C,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,gBAAY,kCAAoB,UAAU,aAAa,SAAS;AAEtE,aAAO,mCAAqB,aAAa,iBAAiB,WAAW,WAAW;AAClF;AAEO,MAAM,aAA2B,CAAC,UAAU;AACjD,QAAM,uBAAmB,sDAA6B,OAAO,mDAAsB;AACnF,8DAA+B,kBAAkB,mDAAsB,YAAY;AAEnF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,kBAAc,qBAAO,cAAc;AAEzC,QAAM,0BAAsB,4CAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,QAAI,uBAAS,CAAC;AAE7B,QAAM,gBAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,eAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,UAAM,gCAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB,CAAC,UAAkB;AAClD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,WAAW,cAAc;AAClB,MAAM,2BAAuB,kCAAS,UAAU;AACvD,qBAAqB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,8 +10,6 @@ const ssnSpecialChars = [
|
|
|
10
10
|
];
|
|
11
11
|
const conformValue = (rawValue, cursorPos, lastKeyCode) => {
|
|
12
12
|
let maskedValue = String(rawValue).split("").filter((char) => char >= "0" && char <= "9");
|
|
13
|
-
while (maskedValue.length && maskedValue[0] === "0")
|
|
14
|
-
maskedValue.splice(0, 1);
|
|
15
13
|
maskedValue = maskedValue.slice(0, 9);
|
|
16
14
|
const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);
|
|
17
15
|
return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useSSNMask.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils/index.js';\nimport type { DSMaskT } from '../react-desc-prop-types.js';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types.js';\n\nconst ssnSpecialChars: [string, number][] = [\n ['-', 3],\n ['-', 6],\n];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n // Work with digits only\n let maskedValue = String(rawValue)\n .split('')\n .filter((char) => char >= '0' && char <= '9');\n\n // We
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,qBAAqB,yBAAyB;AAE7E,SAAS,wBAAwB,4BAA4B;AAE7D,MAAM,kBAAsC;AAAA,EAC1C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,KAAK,CAAC;AACT;AAEA,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAC9B,MAAM,EAAE,EACR,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAG9C,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { addSpecialCharacters, getPartialMaskedPos, setCursorPosition } from '../utils/index.js';\nimport type { DSMaskT } from '../react-desc-prop-types.js';\nimport { DSMaskHookDefaultProps, DSMaskHookPropsTypes } from '../react-desc-prop-types.js';\n\nconst ssnSpecialChars: [string, number][] = [\n ['-', 3],\n ['-', 6],\n];\n\nconst conformValue = (rawValue: string, cursorPos: number, lastKeyCode: string) => {\n // Work with digits only\n let maskedValue = String(rawValue)\n .split('')\n .filter((char) => char >= '0' && char <= '9');\n\n // We only consider first 9 digits\n maskedValue = maskedValue.slice(0, 9);\n\n const maskedPos = getPartialMaskedPos(rawValue, maskedValue, cursorPos);\n\n return addSpecialCharacters(maskedValue, ssnSpecialChars, maskedPos, lastKeyCode);\n};\n\nexport const useSSNMask: DSMaskT.Hook = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, DSMaskHookDefaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, DSMaskHookPropsTypes, 'useSSNMask');\n\n const { valueSetter, onChange: userOnChange, onKeyDown: userOnKeyDown } = propsWithDefault;\n\n const lastKeyCode = useRef('Unidentified');\n\n const scheduleAfterRender = useCallbackAfterRender(true);\n\n // Some times, the value of the mask is not gonna change (user types invalid char for example)\n // This makes the input to go from \"correct\" -> \"incorrect\" -> \"correct\"\n // But since the input is controlled, the input does not re-render\n // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async\n // Solution for this is to trigger a re-render, we do this with a set state call in the on change event\n const [, setKey] = useState(0);\n\n const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n lastKeyCode.current = e.code;\n if (userOnKeyDown) userOnKeyDown(e);\n },\n [userOnKeyDown],\n );\n\n const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n const [mask, cursorPos] = conformValue(e.target.value, e.target.selectionEnd ?? 0, lastKeyCode.current);\n valueSetter((prevMask) => {\n // Here we need to update the key\n if (mask === prevMask) setKey((key) => key + 1);\n\n return mask;\n });\n if (userOnChange) userOnChange(e, mask);\n scheduleAfterRender(() => setCursorPosition(e.target, cursorPos));\n },\n [valueSetter, scheduleAfterRender, userOnChange],\n );\n\n return {\n onKeyDown,\n onChange,\n };\n};\n\nexport const getSSNMaskedValue = (value: string) => {\n const [maskedValue] = conformValue(value, value.length - 1, '');\n return maskedValue;\n};\n\nuseSSNMask.displayName = 'useSSNMask';\nexport const UseSSNMaskWithSchema = describe(useSSNMask);\nUseSSNMaskWithSchema.propTypes = DSMaskHookPropsTypes;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,QAAQ,gBAAgB;AAC9C,SAAS,UAAU,8BAA8B,sCAAsC;AACvF,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,qBAAqB,yBAAyB;AAE7E,SAAS,wBAAwB,4BAA4B;AAE7D,MAAM,kBAAsC;AAAA,EAC1C,CAAC,KAAK,CAAC;AAAA,EACP,CAAC,KAAK,CAAC;AACT;AAEA,MAAM,eAAe,CAAC,UAAkB,WAAmB,gBAAwB;AAEjF,MAAI,cAAc,OAAO,QAAQ,EAC9B,MAAM,EAAE,EACR,OAAO,CAAC,SAAS,QAAQ,OAAO,QAAQ,GAAG;AAG9C,gBAAc,YAAY,MAAM,GAAG,CAAC;AAEpC,QAAM,YAAY,oBAAoB,UAAU,aAAa,SAAS;AAEtE,SAAO,qBAAqB,aAAa,iBAAiB,WAAW,WAAW;AAClF;AAEO,MAAM,aAA2B,CAAC,UAAU;AACjD,QAAM,mBAAmB,6BAA6B,OAAO,sBAAsB;AACnF,iCAA+B,kBAAkB,sBAAsB,YAAY;AAEnF,QAAM,EAAE,aAAa,UAAU,cAAc,WAAW,cAAc,IAAI;AAE1E,QAAM,cAAc,OAAO,cAAc;AAEzC,QAAM,sBAAsB,uBAAuB,IAAI;AAOvD,QAAM,CAAC,EAAE,MAAM,IAAI,SAAS,CAAC;AAE7B,QAAM,YAA0D;AAAA,IAC9D,CAAC,MAAM;AACL,kBAAY,UAAU,EAAE;AACxB,UAAI;AAAe,sBAAc,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,WAAuD;AAAA,IAC3D,CAAC,MAAM;AACL,YAAM,CAAC,MAAM,SAAS,IAAI,aAAa,EAAE,OAAO,OAAO,EAAE,OAAO,gBAAgB,GAAG,YAAY,OAAO;AACtG,kBAAY,CAAC,aAAa;AAExB,YAAI,SAAS;AAAU,iBAAO,CAAC,QAAQ,MAAM,CAAC;AAE9C,eAAO;AAAA,MACT,CAAC;AACD,UAAI;AAAc,qBAAa,GAAG,IAAI;AACtC,0BAAoB,MAAM,kBAAkB,EAAE,QAAQ,SAAS,CAAC;AAAA,IAClE;AAAA,IACA,CAAC,aAAa,qBAAqB,YAAY;AAAA,EACjD;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AAEO,MAAM,oBAAoB,CAAC,UAAkB;AAClD,QAAM,CAAC,WAAW,IAAI,aAAa,OAAO,MAAM,SAAS,GAAG,EAAE;AAC9D,SAAO;AACT;AAEA,WAAW,cAAc;AAClB,MAAM,uBAAuB,SAAS,UAAU;AACvD,qBAAqB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-helpers-mask-hooks",
|
|
3
|
-
"version": "3.18.0-next.
|
|
3
|
+
"version": "3.18.0-next.5",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Helpers - Text Masks Hooks",
|
|
6
6
|
"files": [
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-props-helpers": "3.18.0-next.
|
|
39
|
-
"@elliemae/ds-system": "3.18.0-next.
|
|
40
|
-
"@elliemae/ds-utilities": "3.18.0-next.
|
|
38
|
+
"@elliemae/ds-props-helpers": "3.18.0-next.5",
|
|
39
|
+
"@elliemae/ds-system": "3.18.0-next.5",
|
|
40
|
+
"@elliemae/ds-utilities": "3.18.0-next.5"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@elliemae/pui-theme": "~2.7.0",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@testing-library/user-event": "~13.5.0",
|
|
47
47
|
"styled-components": "~5.3.9",
|
|
48
48
|
"styled-system": "~5.1.5",
|
|
49
|
-
"@elliemae/ds-form-input-text": "3.18.0-next.
|
|
49
|
+
"@elliemae/ds-form-input-text": "3.18.0-next.5"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"@elliemae/pui-theme": "~2.7.0",
|