intelicoreact 1.3.11 → 1.3.13
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.
|
@@ -25,15 +25,19 @@ var _Input = _interopRequireDefault(require("../Input/Input"));
|
|
|
25
25
|
|
|
26
26
|
require("./FormattedRawSSN.scss");
|
|
27
27
|
|
|
28
|
-
var _excluded = ["value", "onChange", "maskChar", "testId", "isHiddenDefault"];
|
|
28
|
+
var _excluded = ["value", "postfix", "onChange", "maskChar", "testId", "isHiddenDefault", "maxLen"];
|
|
29
29
|
|
|
30
30
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
31
|
|
|
32
32
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
33
|
|
|
34
34
|
var FormattedRawSSN = function FormattedRawSSN(_ref) {
|
|
35
|
+
var _value$substring;
|
|
36
|
+
|
|
35
37
|
var _ref$value = _ref.value,
|
|
36
38
|
value = _ref$value === void 0 ? '' : _ref$value,
|
|
39
|
+
_ref$postfix = _ref.postfix,
|
|
40
|
+
postfix = _ref$postfix === void 0 ? '' : _ref$postfix,
|
|
37
41
|
_ref$onChange = _ref.onChange,
|
|
38
42
|
onChangeProp = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
39
43
|
_ref$maskChar = _ref.maskChar,
|
|
@@ -41,9 +45,11 @@ var FormattedRawSSN = function FormattedRawSSN(_ref) {
|
|
|
41
45
|
testId = _ref.testId,
|
|
42
46
|
_ref$isHiddenDefault = _ref.isHiddenDefault,
|
|
43
47
|
isHiddenDefault = _ref$isHiddenDefault === void 0 ? true : _ref$isHiddenDefault,
|
|
48
|
+
_ref$maxLen = _ref.maxLen,
|
|
49
|
+
maxLen = _ref$maxLen === void 0 ? 9 : _ref$maxLen,
|
|
44
50
|
args = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
45
51
|
|
|
46
|
-
var _useState = (0, _react.useState)(value !== null &&
|
|
52
|
+
var _useState = (0, _react.useState)((_value$substring = value === null || value === void 0 ? void 0 : value.substring(0, maxLen)) !== null && _value$substring !== void 0 ? _value$substring : ''),
|
|
47
53
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
48
54
|
SSN = _useState2[0],
|
|
49
55
|
setSSN = _useState2[1];
|
|
@@ -55,10 +61,14 @@ var FormattedRawSSN = function FormattedRawSSN(_ref) {
|
|
|
55
61
|
|
|
56
62
|
var wrapperRef = (0, _react.useRef)(null);
|
|
57
63
|
(0, _react.useEffect)(function () {
|
|
58
|
-
|
|
64
|
+
var _value$toString$subst, _value$toString;
|
|
65
|
+
|
|
66
|
+
setSSN((_value$toString$subst = value === null || value === void 0 ? void 0 : (_value$toString = value.toString()) === null || _value$toString === void 0 ? void 0 : _value$toString.substring(0, maxLen)) !== null && _value$toString$subst !== void 0 ? _value$toString$subst : '');
|
|
59
67
|
}, [value]);
|
|
60
68
|
|
|
61
69
|
var onChange = function onChange(value) {
|
|
70
|
+
if (!value && value !== '') return '';
|
|
71
|
+
|
|
62
72
|
if (value.replace(/-/g, '').length < SSN.length) {
|
|
63
73
|
var last = SSN.length - 1;
|
|
64
74
|
setSSN(SSN.slice(0, last));
|
|
@@ -78,7 +88,7 @@ var FormattedRawSSN = function FormattedRawSSN(_ref) {
|
|
|
78
88
|
newSSN = numValue;
|
|
79
89
|
}
|
|
80
90
|
|
|
81
|
-
if (newSSN.length >
|
|
91
|
+
if (newSSN.length > maxLen) {
|
|
82
92
|
return;
|
|
83
93
|
}
|
|
84
94
|
|
|
@@ -95,6 +105,7 @@ var FormattedRawSSN = function FormattedRawSSN(_ref) {
|
|
|
95
105
|
};
|
|
96
106
|
|
|
97
107
|
var getFormatedValue = function getFormatedValue(v) {
|
|
108
|
+
if (!v) return '';
|
|
98
109
|
v = v.slice(0, 11).replace(/-/g, '');
|
|
99
110
|
|
|
100
111
|
if (v.length <= 3) {
|
|
@@ -115,7 +126,7 @@ var FormattedRawSSN = function FormattedRawSSN(_ref) {
|
|
|
115
126
|
};
|
|
116
127
|
|
|
117
128
|
(0, _react.useEffect)(function () {
|
|
118
|
-
onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(SSN.replace(/-/g, ''));
|
|
129
|
+
if (!!SSN) onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(SSN.concat(SSN.length === maxLen ? postfix : '').replace(/-/g, ''));
|
|
119
130
|
}, [SSN]);
|
|
120
131
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
121
132
|
className: "formatted-raw-ssn",
|
|
@@ -124,7 +135,14 @@ var FormattedRawSSN = function FormattedRawSSN(_ref) {
|
|
|
124
135
|
value: getMaskedValue(getFormatedValue(SSN)),
|
|
125
136
|
onChange: onChange,
|
|
126
137
|
testId: "formattedRawSNN--input--key-".concat(testId)
|
|
127
|
-
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
138
|
+
})), postfix && /*#__PURE__*/_react.default.createElement("span", {
|
|
139
|
+
className: "formatted-raw-ssn-postfix",
|
|
140
|
+
onClick: function onClick() {
|
|
141
|
+
var _wrapperRef$current2, _wrapperRef$current2$;
|
|
142
|
+
|
|
143
|
+
return wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : (_wrapperRef$current2$ = _wrapperRef$current2.querySelector('input')) === null || _wrapperRef$current2$ === void 0 ? void 0 : _wrapperRef$current2$.focus();
|
|
144
|
+
}
|
|
145
|
+
}, postfix), /*#__PURE__*/_react.default.createElement("span", {
|
|
128
146
|
className: "formatted-raw-ssn-eye-holder",
|
|
129
147
|
onClick: switchView,
|
|
130
148
|
"data-testid": "formattedRawSNN--eye--key-".concat(testId, "--container")
|
|
@@ -4,6 +4,40 @@
|
|
|
4
4
|
.input-classic__wrap input,
|
|
5
5
|
.input__wrap input {
|
|
6
6
|
padding: 0 38px 0 10px;
|
|
7
|
+
|
|
8
|
+
color: var(--color-text-body, #171D33);
|
|
9
|
+
/* LG/Regular 16 (24 px, 0.2 px) */
|
|
10
|
+
font-family: Sarabun;
|
|
11
|
+
font-size: 16px;
|
|
12
|
+
font-style: normal;
|
|
13
|
+
font-weight: 400;
|
|
14
|
+
line-height: 24px; /* 150% */
|
|
15
|
+
letter-spacing: 0.2px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&-postfix {
|
|
19
|
+
position: absolute;
|
|
20
|
+
right: 1px;
|
|
21
|
+
top: 1px;
|
|
22
|
+
width: 80%;
|
|
23
|
+
padding: 7px;
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: center;
|
|
27
|
+
height: calc(100% - 2px);
|
|
28
|
+
border-radius: 0px 5px 5px 0px;
|
|
29
|
+
border-left: 1px solid var(--color-border-input, #E1E8F1);
|
|
30
|
+
background: var(--color-background-form, #F7F8FA);
|
|
31
|
+
cursor: text;
|
|
32
|
+
|
|
33
|
+
color: var(--color-text-body, #171D33);
|
|
34
|
+
/* LG/Regular 16 (24 px, 0.2 px) */
|
|
35
|
+
font-family: Sarabun;
|
|
36
|
+
font-size: 16px;
|
|
37
|
+
font-style: normal;
|
|
38
|
+
font-weight: 400;
|
|
39
|
+
line-height: 24px; /* 150% */
|
|
40
|
+
letter-spacing: 0.2px;
|
|
7
41
|
}
|
|
8
42
|
|
|
9
43
|
&-eye-holder {
|
|
@@ -36,7 +36,7 @@ var InputCurrency = function InputCurrency(_ref) {
|
|
|
36
36
|
max = _ref.max,
|
|
37
37
|
error = _ref.error;
|
|
38
38
|
|
|
39
|
-
var _useState = (0, _react.useState)(
|
|
39
|
+
var _useState = (0, _react.useState)(currencySymbol || '$'),
|
|
40
40
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
41
41
|
inputValue = _useState2[0],
|
|
42
42
|
setInputValue = _useState2[1];
|
|
@@ -68,10 +68,10 @@ var InputCurrency = function InputCurrency(_ref) {
|
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
|
|
71
|
-
var checkMinMax = function checkMinMax(event) {
|
|
71
|
+
var checkMinMax = function checkMinMax(event, value) {
|
|
72
72
|
var _event$target, _event$target$value;
|
|
73
73
|
|
|
74
|
-
var clearValue = event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$value = _event$target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.replace(/[^0-9]/g, '');
|
|
74
|
+
var clearValue = value !== null && value !== void 0 ? value : event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : (_event$target$value = _event$target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.replace(/[^0-9]/g, '');
|
|
75
75
|
if (!clearValue) return false;
|
|
76
76
|
|
|
77
77
|
if (clearValue < min) {
|
|
@@ -86,10 +86,12 @@ var InputCurrency = function InputCurrency(_ref) {
|
|
|
86
86
|
};
|
|
87
87
|
|
|
88
88
|
(0, _react.useEffect)(function () {
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
var _inputValue$toString;
|
|
90
|
+
|
|
91
|
+
if (value.toString() !== (inputValue === null || inputValue === void 0 ? void 0 : (_inputValue$toString = inputValue.toString()) === null || _inputValue$toString === void 0 ? void 0 : _inputValue$toString.replace(/[^0-9]/g, ''))) {
|
|
92
|
+
checkMinMax(null, value);
|
|
91
93
|
}
|
|
92
|
-
}, []);
|
|
94
|
+
}, [value]);
|
|
93
95
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
94
96
|
className: (0, _classnames.default)('input-currency-box', className, {
|
|
95
97
|
disabled: disabled,
|