intelicoreact 0.1.33 → 0.1.36
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/Atomic/FormElements/DateTime/DateTime.js +35 -10
- package/dist/Atomic/FormElements/DateTime/DateTime.scss +11 -5
- package/dist/Atomic/FormElements/DateTime/DateTime.stories.js +19 -2
- package/dist/Atomic/FormElements/DateTime/partial/AnyOuterClass.scss +9 -0
- package/dist/Atomic/FormElements/DoubleString/DoubleString.js +5 -3
- package/dist/Atomic/FormElements/DoubleString/DoubleString.scss +11 -6
- package/dist/Atomic/FormElements/DoubleString/DoubleString.stories.js +13 -1
- package/dist/Atomic/FormElements/DoubleString/partial/AnyOuterClass.scss +16 -0
- package/dist/Atomic/FormElements/Input/Input.js +10 -29
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +1 -3
- package/dist/Atomic/FormElements/InputMask/InputCarretPosition.js +58 -0
- package/dist/Atomic/FormElements/InputMask/InputMask.js +615 -0
- package/dist/Atomic/FormElements/InputMask/InputMask.scss +111 -0
- package/dist/Atomic/FormElements/InputMask/InputMask.stories.js +199 -0
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +53 -23
- package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js +25 -5
- package/dist/Atomic/FormElements/RangeList/RangeList.js +18 -17
- package/dist/Atomic/FormElements/RangeList/RangeList.stories.js +18 -12
- package/dist/Functions/fieldValueFormatters.js +18 -12
- package/dist/Molecular/SwitcherRangeList/SwitcherRangeList.js +2 -2
- package/dist/Molecular/SwitcherRangeList/SwitcherRangeList.stories.js +4 -4
- package/package.json +1 -1
- package/dist/Atomic/FormElements/RangeList/partial/temp.js +0 -150
|
@@ -0,0 +1,615 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = InputMask;
|
|
11
|
+
|
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
+
|
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
16
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _reactFeather = require("react-feather");
|
|
21
|
+
|
|
22
|
+
var _index = require("../../../Constants/index.constants");
|
|
23
|
+
|
|
24
|
+
var _usePrevious = _interopRequireDefault(require("../../../Functions/useFormTools/functions/usePrevious"));
|
|
25
|
+
|
|
26
|
+
var _InputCarretPosition = require("./InputCarretPosition");
|
|
27
|
+
|
|
28
|
+
require("./InputMask.scss");
|
|
29
|
+
|
|
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
|
+
|
|
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
|
+
|
|
34
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
35
|
+
|
|
36
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
37
|
+
|
|
38
|
+
var UPPERCASE_LETTER_MASK_CHAR = 'L';
|
|
39
|
+
var LOWERCASE_LETTER_MASK_CHAR = 'l';
|
|
40
|
+
var DIGIT_MASK_CHAR = 'D';
|
|
41
|
+
var EXCLUDED_KEYS = ["Tab"];
|
|
42
|
+
var DEFAULT_ERRORS = {
|
|
43
|
+
onlyLetter: 'Type letter',
|
|
44
|
+
onlyDigit: 'Type digit',
|
|
45
|
+
onlyUpperCase: 'Type letter in UpperCase',
|
|
46
|
+
onlyLowerCase: 'Type letter in LowerCase',
|
|
47
|
+
default: null
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
function InputMask(_ref) {
|
|
51
|
+
var maskPattern = _ref.maskPattern,
|
|
52
|
+
maskPatternPlaceholder = _ref.maskPatternPlaceholder,
|
|
53
|
+
maskPlaceholder = _ref.maskPlaceholder,
|
|
54
|
+
maskDigitPlaceholder = _ref.maskDigitPlaceholder,
|
|
55
|
+
maskLetterPlaceholder = _ref.maskLetterPlaceholder,
|
|
56
|
+
usePatternPlaceholder = _ref.usePatternPlaceholder,
|
|
57
|
+
_ref$isFocusedDefault = _ref.isFocusedDefault,
|
|
58
|
+
isFocusedDefault = _ref$isFocusedDefault === void 0 ? false : _ref$isFocusedDefault,
|
|
59
|
+
isClearable = _ref.isClearable,
|
|
60
|
+
isCaseSensitive = _ref.isCaseSensitive,
|
|
61
|
+
adaptTextCase = _ref.adaptTextCase,
|
|
62
|
+
icon = _ref.icon,
|
|
63
|
+
showIcon = _ref.showIcon,
|
|
64
|
+
isIconLeft = _ref.isIconLeft,
|
|
65
|
+
isIconRight = _ref.isIconRight,
|
|
66
|
+
value = _ref.value,
|
|
67
|
+
_ref$onChange = _ref.onChange,
|
|
68
|
+
onChangeProp = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
69
|
+
_ref$blinkErrors = _ref.blinkErrors,
|
|
70
|
+
blinkErrors = _ref$blinkErrors === void 0 ? true : _ref$blinkErrors,
|
|
71
|
+
_ref$blinkDuration = _ref.blinkDuration,
|
|
72
|
+
blinkDuration = _ref$blinkDuration === void 0 ? 100 : _ref$blinkDuration,
|
|
73
|
+
_ref$showNativeErrors = _ref.showNativeErrors,
|
|
74
|
+
showNativeErrors = _ref$showNativeErrors === void 0 ? true : _ref$showNativeErrors,
|
|
75
|
+
_ref$className = _ref.className,
|
|
76
|
+
className = _ref$className === void 0 ? '' : _ref$className,
|
|
77
|
+
_ref$errors = _ref.errors,
|
|
78
|
+
customErrors = _ref$errors === void 0 ? DEFAULT_ERRORS : _ref$errors,
|
|
79
|
+
ref = _ref.ref,
|
|
80
|
+
_ref$onFocus = _ref.onFocus,
|
|
81
|
+
onFocusProp = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
|
|
82
|
+
_ref$onBlur = _ref.onBlur,
|
|
83
|
+
onBlurProp = _ref$onBlur === void 0 ? function () {} : _ref$onBlur;
|
|
84
|
+
|
|
85
|
+
var errors = _objectSpread(_objectSpread({}, DEFAULT_ERRORS), customErrors);
|
|
86
|
+
|
|
87
|
+
var _useState = (0, _react.useState)(false),
|
|
88
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
89
|
+
isMaskRendered = _useState2[0],
|
|
90
|
+
setMaskRendered = _useState2[1];
|
|
91
|
+
|
|
92
|
+
var inputRef = (0, _react.useRef)(null);
|
|
93
|
+
var inputRefWrapper = (0, _react.useRef)(null);
|
|
94
|
+
var wrapperRef = (0, _react.useRef)(null);
|
|
95
|
+
|
|
96
|
+
var _useState3 = (0, _react.useState)(false),
|
|
97
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
98
|
+
isFocused = _useState4[0],
|
|
99
|
+
setFocused = _useState4[1];
|
|
100
|
+
|
|
101
|
+
var _useState5 = (0, _react.useState)(false),
|
|
102
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
103
|
+
isError = _useState6[0],
|
|
104
|
+
setError = _useState6[1];
|
|
105
|
+
|
|
106
|
+
var _useState7 = (0, _react.useState)(false),
|
|
107
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
108
|
+
blinkError = _useState8[0],
|
|
109
|
+
setBlinkError = _useState8[1];
|
|
110
|
+
|
|
111
|
+
var _useState9 = (0, _react.useState)(errors.default),
|
|
112
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
113
|
+
errorMessage = _useState10[0],
|
|
114
|
+
setErrorMessage = _useState10[1];
|
|
115
|
+
|
|
116
|
+
var clearErrorMessage = function clearErrorMessage() {
|
|
117
|
+
return setErrorMessage(errors.default);
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
var _useState11 = (0, _react.useState)(null),
|
|
121
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
122
|
+
focusedItemRef = _useState12[0],
|
|
123
|
+
setFocusedItemRef = _useState12[1];
|
|
124
|
+
|
|
125
|
+
var _useState13 = (0, _react.useState)([]),
|
|
126
|
+
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
127
|
+
innerValue = _useState14[0],
|
|
128
|
+
setInnerValue = _useState14[1];
|
|
129
|
+
|
|
130
|
+
var addInnerValueChar = function addInnerValueChar(_ref2) {
|
|
131
|
+
var char = _ref2.char,
|
|
132
|
+
_ref2$i = _ref2.i,
|
|
133
|
+
i = _ref2$i === void 0 ? null : _ref2$i,
|
|
134
|
+
_ref2$data = _ref2.data,
|
|
135
|
+
data = _ref2$data === void 0 ? {} : _ref2$data;
|
|
136
|
+
setInnerValue(function (state) {
|
|
137
|
+
var stateCopy = (0, _toConsumableArray2.default)(state);
|
|
138
|
+
var charObj = getCharObj(char, data);
|
|
139
|
+
|
|
140
|
+
if (i !== null) {
|
|
141
|
+
stateCopy[i] = charObj;
|
|
142
|
+
} else {
|
|
143
|
+
stateCopy.push(charObj);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
return stateCopy;
|
|
147
|
+
});
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
var updateInnerValueChar = function updateInnerValueChar(char, i) {
|
|
151
|
+
setInnerValue(function (state) {
|
|
152
|
+
var stateCopy = (0, _toConsumableArray2.default)(state);
|
|
153
|
+
if (!stateCopy[i].isSpecialSymbol) stateCopy[i].char = char;
|
|
154
|
+
return stateCopy;
|
|
155
|
+
});
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
var getPlaceholderCharByIndex = function getPlaceholderCharByIndex(i) {
|
|
159
|
+
var _getCharByIndex = getCharByIndex(i),
|
|
160
|
+
maskChar = _getCharByIndex.maskChar;
|
|
161
|
+
|
|
162
|
+
if (usePatternPlaceholder) {
|
|
163
|
+
return maskPatternPlaceholder[i] || maskPlaceholder;
|
|
164
|
+
} else {
|
|
165
|
+
if (isDigitMaskChar(maskChar) && maskDigitPlaceholder) return maskDigitPlaceholder;
|
|
166
|
+
if (isLetterMaskChar(maskChar) && maskLetterPlaceholder) return maskLetterPlaceholder;
|
|
167
|
+
return maskPlaceholder;
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
var getInnerValueAsString = function getInnerValueAsString() {
|
|
172
|
+
return innerValue.map(function (_ref3, i) {
|
|
173
|
+
var char = _ref3.char,
|
|
174
|
+
maskChar = _ref3.maskChar;
|
|
175
|
+
return char === '' ? getPlaceholderCharByIndex(i) || maskChar : char;
|
|
176
|
+
}).join('');
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
var getClearInnerValueAsString = function getClearInnerValueAsString() {
|
|
180
|
+
return innerValue.reduce(function (result, _ref4) {
|
|
181
|
+
var char = _ref4.char,
|
|
182
|
+
maskChar = _ref4.maskChar,
|
|
183
|
+
isSpecialSymbol = _ref4.isSpecialSymbol;
|
|
184
|
+
if (char !== maskChar && char !== '' || isSpecialSymbol) result += char;
|
|
185
|
+
return result;
|
|
186
|
+
}, '');
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
var isLetter = function isLetter(char) {
|
|
190
|
+
return char.length === 1 && char.match(/[a-z]/i);
|
|
191
|
+
};
|
|
192
|
+
|
|
193
|
+
var isUpperCaseLetter = function isUpperCaseLetter(char) {
|
|
194
|
+
return isLetter(char) ? char === char.slice().toUpperCase() : false;
|
|
195
|
+
};
|
|
196
|
+
|
|
197
|
+
var isLowerCaseLetter = function isLowerCaseLetter(char) {
|
|
198
|
+
return isLetter(char) ? char === char.slice().toLowerCase() : false;
|
|
199
|
+
};
|
|
200
|
+
|
|
201
|
+
var isDigit = function isDigit(char) {
|
|
202
|
+
return Number.isInteger(parseInt(char));
|
|
203
|
+
};
|
|
204
|
+
|
|
205
|
+
var isDigitMaskChar = function isDigitMaskChar(char) {
|
|
206
|
+
return char === DIGIT_MASK_CHAR;
|
|
207
|
+
};
|
|
208
|
+
|
|
209
|
+
var isLetterMaskChar = function isLetterMaskChar(char) {
|
|
210
|
+
return char === UPPERCASE_LETTER_MASK_CHAR || char === LOWERCASE_LETTER_MASK_CHAR;
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
var getCharObj = function getCharObj(char) {
|
|
214
|
+
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
215
|
+
var isSpecialSymbol = !(isDigitMaskChar(char) || isLetterMaskChar(char));
|
|
216
|
+
if (char === ' ') char = "\xA0";
|
|
217
|
+
return _objectSpread({
|
|
218
|
+
char: isSpecialSymbol ? char : '',
|
|
219
|
+
maskChar: char,
|
|
220
|
+
isSpecialSymbol: isSpecialSymbol,
|
|
221
|
+
ref: /*#__PURE__*/(0, _react.createRef)()
|
|
222
|
+
}, data);
|
|
223
|
+
};
|
|
224
|
+
|
|
225
|
+
var getFirstChar = function getFirstChar() {
|
|
226
|
+
return innerValue[0] ? _objectSpread({}, innerValue[0]) : undefined;
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
var getLastChar = function getLastChar() {
|
|
230
|
+
return innerValue.length ? (0, _toConsumableArray2.default)(innerValue).pop() : undefined;
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
var getCharByIndex = function getCharByIndex(i) {
|
|
234
|
+
return innerValue[i] ? _objectSpread({}, innerValue[i]) : undefined;
|
|
235
|
+
};
|
|
236
|
+
|
|
237
|
+
var getMaskCharByIndex = function getMaskCharByIndex(i) {
|
|
238
|
+
return maskPattern[i] || undefined;
|
|
239
|
+
};
|
|
240
|
+
|
|
241
|
+
var setFocusOnChar = function setFocusOnChar(i, prevIndex) {
|
|
242
|
+
var charObj = getCharByIndex(i);
|
|
243
|
+
if (!charObj) return false;
|
|
244
|
+
var char = charObj.char,
|
|
245
|
+
maskChar = charObj.maskChar,
|
|
246
|
+
ref = charObj.ref,
|
|
247
|
+
isSpecialSymbol = charObj.isSpecialSymbol;
|
|
248
|
+
if (!ref) return false;
|
|
249
|
+
|
|
250
|
+
if (isSpecialSymbol && i < innerValue.length - 1) {
|
|
251
|
+
return prevIndex > i ? onArrowLeftDown(null, i) : onArrowRightDown(null, i);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
ref.current.focus();
|
|
255
|
+
setTimeout(function () {
|
|
256
|
+
return (0, _InputCarretPosition.setCaretPosition)(ref.current, 0);
|
|
257
|
+
}, 10);
|
|
258
|
+
setFocusedItemRef(ref);
|
|
259
|
+
|
|
260
|
+
_onFocus(null, i);
|
|
261
|
+
|
|
262
|
+
return true;
|
|
263
|
+
};
|
|
264
|
+
|
|
265
|
+
var clearValue = function clearValue(e) {
|
|
266
|
+
e.stopPropagation();
|
|
267
|
+
e.preventDefault();
|
|
268
|
+
innerValue.map(function (charObj, i) {
|
|
269
|
+
updateInnerValueChar('', i);
|
|
270
|
+
});
|
|
271
|
+
onHomeDown(null, 0);
|
|
272
|
+
}; ///--- Event Handlers ---///
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
var onArrowLeftDown = function onArrowLeftDown(e, i) {
|
|
276
|
+
return setFocusOnChar(i - 1, i);
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
var onArrowRightDown = function onArrowRightDown(e, i) {
|
|
280
|
+
return setFocusOnChar(i + 1, i);
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
var onBackspaceDown = function onBackspaceDown(e, i) {
|
|
284
|
+
var prevIndex = i - 1;
|
|
285
|
+
var charObj = getCharByIndex(prevIndex);
|
|
286
|
+
if (!charObj) return false;
|
|
287
|
+
var char = charObj.char,
|
|
288
|
+
isSpecialSymbol = charObj.isSpecialSymbol;
|
|
289
|
+
if (isSpecialSymbol) return onBackspaceDown(e, prevIndex);
|
|
290
|
+
setFocusOnChar(prevIndex, i);
|
|
291
|
+
updateInnerValueChar('', prevIndex);
|
|
292
|
+
return true;
|
|
293
|
+
};
|
|
294
|
+
|
|
295
|
+
var onDeleteDown = function onDeleteDown(e, i) {
|
|
296
|
+
var nextIndex = i + 1;
|
|
297
|
+
var charObj = getCharByIndex(i);
|
|
298
|
+
if (!charObj) return false;
|
|
299
|
+
var char = charObj.char,
|
|
300
|
+
isSpecialSymbol = charObj.isSpecialSymbol;
|
|
301
|
+
if (isSpecialSymbol) return onDeleteDown(e, i + 1);
|
|
302
|
+
setFocusOnChar(nextIndex, i);
|
|
303
|
+
updateInnerValueChar('', i);
|
|
304
|
+
return true;
|
|
305
|
+
};
|
|
306
|
+
|
|
307
|
+
var onHomeDown = function onHomeDown(e, i) {
|
|
308
|
+
return setFocusOnChar(0, -1);
|
|
309
|
+
};
|
|
310
|
+
|
|
311
|
+
var onEndDown = function onEndDown(e, i) {
|
|
312
|
+
return setFocusOnChar(innerValue.length - 1, 0);
|
|
313
|
+
};
|
|
314
|
+
|
|
315
|
+
var handleServiceKeyDown = function handleServiceKeyDown(e, i) {
|
|
316
|
+
var key = e.key;
|
|
317
|
+
|
|
318
|
+
switch (key) {
|
|
319
|
+
case 'ArrowLeft':
|
|
320
|
+
return onArrowLeftDown(e, i);
|
|
321
|
+
break;
|
|
322
|
+
|
|
323
|
+
case 'ArrowRight':
|
|
324
|
+
return onArrowRightDown(e, i);
|
|
325
|
+
break;
|
|
326
|
+
|
|
327
|
+
case 'Backspace':
|
|
328
|
+
return onBackspaceDown(e, i);
|
|
329
|
+
break;
|
|
330
|
+
|
|
331
|
+
case 'Delete':
|
|
332
|
+
return onDeleteDown(e, i);
|
|
333
|
+
break;
|
|
334
|
+
|
|
335
|
+
case 'Home':
|
|
336
|
+
return onHomeDown(e, i);
|
|
337
|
+
break;
|
|
338
|
+
|
|
339
|
+
case 'End':
|
|
340
|
+
return onEndDown(e, i);
|
|
341
|
+
break;
|
|
342
|
+
|
|
343
|
+
case 'Tab':
|
|
344
|
+
return onTabDown(e, i);
|
|
345
|
+
break;
|
|
346
|
+
|
|
347
|
+
default:
|
|
348
|
+
return true;
|
|
349
|
+
break;
|
|
350
|
+
}
|
|
351
|
+
};
|
|
352
|
+
|
|
353
|
+
var handleKeyDown = function handleKeyDown(e, i) {
|
|
354
|
+
e.stopPropagation();
|
|
355
|
+
e.preventDefault();
|
|
356
|
+
var key = e.key;
|
|
357
|
+
var charObj = getCharByIndex(i);
|
|
358
|
+
if (!charObj) return false;
|
|
359
|
+
var isSpecialSymbol = charObj.isSpecialSymbol,
|
|
360
|
+
maskChar = charObj.maskChar; //IF DEFAULT CHAR IS SPACE, SWITCH TO NEXT INPUT
|
|
361
|
+
|
|
362
|
+
if (maskChar === ' ') return handleKeyDown(e, i + 1);
|
|
363
|
+
if (isSpecialSymbol && maskChar !== key) return false;
|
|
364
|
+
|
|
365
|
+
switch (maskChar) {
|
|
366
|
+
case DIGIT_MASK_CHAR:
|
|
367
|
+
if (!isDigit(key)) {
|
|
368
|
+
setErrorMessage(errors.onlyDigit);
|
|
369
|
+
return false;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
break;
|
|
373
|
+
|
|
374
|
+
case UPPERCASE_LETTER_MASK_CHAR:
|
|
375
|
+
if (adaptTextCase) key = key.toUpperCase();
|
|
376
|
+
|
|
377
|
+
if (!isLetter(key) && !isCaseSensitive) {
|
|
378
|
+
setErrorMessage(errors.onlyLetter);
|
|
379
|
+
return false;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
if (isCaseSensitive && !isUpperCaseLetter(key)) {
|
|
383
|
+
setErrorMessage(errors.onlyUpperCase);
|
|
384
|
+
return false;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
break;
|
|
388
|
+
|
|
389
|
+
case LOWERCASE_LETTER_MASK_CHAR:
|
|
390
|
+
if (adaptTextCase) key = key.toLowerCase();
|
|
391
|
+
|
|
392
|
+
if (!isLetter(key) && !isCaseSensitive) {
|
|
393
|
+
setErrorMessage(errors.onlyLetter);
|
|
394
|
+
return false;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
if (isCaseSensitive && !isLowerCaseLetter(key)) {
|
|
398
|
+
setErrorMessage(errors.onlyLowerCase);
|
|
399
|
+
return false;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
break;
|
|
403
|
+
|
|
404
|
+
default:
|
|
405
|
+
return false;
|
|
406
|
+
break;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
updateInnerValueChar(key, i);
|
|
410
|
+
onArrowRightDown(e, i);
|
|
411
|
+
return true;
|
|
412
|
+
};
|
|
413
|
+
|
|
414
|
+
var _onKeyDown = function onKeyDown(e, i) {
|
|
415
|
+
var key = e.key;
|
|
416
|
+
var handleResult = _index.KEYBOARD_SERVICE_KEYS.includes(key) ? handleServiceKeyDown(e, i) : handleKeyDown(e, i);
|
|
417
|
+
|
|
418
|
+
if (blinkErrors && !handleResult) {
|
|
419
|
+
setBlinkError(true);
|
|
420
|
+
}
|
|
421
|
+
};
|
|
422
|
+
|
|
423
|
+
var _onClick = function onClick(e, cb) {
|
|
424
|
+
e.stopPropagation();
|
|
425
|
+
setFocused(true);
|
|
426
|
+
if (typeof cb === 'function') cb(e);
|
|
427
|
+
};
|
|
428
|
+
|
|
429
|
+
var onBlur = function onBlur(e) {
|
|
430
|
+
if (isFocused) onBlurProp();
|
|
431
|
+
setFocused(false);
|
|
432
|
+
};
|
|
433
|
+
|
|
434
|
+
var _onFocus = function onFocus(e, i) {
|
|
435
|
+
var charObj = getCharByIndex(i);
|
|
436
|
+
if (!charObj) return false;
|
|
437
|
+
var isSpecialSymbol = charObj.isSpecialSymbol,
|
|
438
|
+
ref = charObj.ref;
|
|
439
|
+
(0, _InputCarretPosition.setCaretPosition)(ref.current, 0);
|
|
440
|
+
|
|
441
|
+
if (isSpecialSymbol && i < innerValue.length - 1) {
|
|
442
|
+
_onFocus(e, i + 1);
|
|
443
|
+
|
|
444
|
+
return false;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
if (!isFocused) onFocusProp(e);
|
|
448
|
+
setFocused(true);
|
|
449
|
+
};
|
|
450
|
+
|
|
451
|
+
var cancelDefaultAction = function cancelDefaultAction(e, cb) {
|
|
452
|
+
var key = e.key;
|
|
453
|
+
|
|
454
|
+
if (!EXCLUDED_KEYS.includes(key) && _index.KEYBOARD_SERVICE_KEYS.includes(key)) {
|
|
455
|
+
e.preventDefault();
|
|
456
|
+
e.stopPropagation();
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
if (typeof cb === 'function') cb(e);
|
|
460
|
+
return false;
|
|
461
|
+
}; ///--- OBSERVERS ---///
|
|
462
|
+
//Init InnerValue
|
|
463
|
+
|
|
464
|
+
|
|
465
|
+
(0, _react.useEffect)(function () {
|
|
466
|
+
if (!maskPattern) maskPattern = '';
|
|
467
|
+
var maskLength = maskPattern.length;
|
|
468
|
+
maskPattern.concat(' ').split('').map(function (char) {
|
|
469
|
+
return addInnerValueChar({
|
|
470
|
+
char: char
|
|
471
|
+
});
|
|
472
|
+
});
|
|
473
|
+
|
|
474
|
+
if (value !== '' && value.length === maskLength) {
|
|
475
|
+
value.split('').map(function (char, i) {
|
|
476
|
+
return updateInnerValueChar(char, i);
|
|
477
|
+
});
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
setMaskRendered(true);
|
|
481
|
+
}, []); // Focus Observer
|
|
482
|
+
|
|
483
|
+
(0, _react.useEffect)(function () {
|
|
484
|
+
if (!isFocused) setFocusedItemRef(null);
|
|
485
|
+
}, [isFocused]); // Default Focused
|
|
486
|
+
|
|
487
|
+
(0, _react.useEffect)(function () {
|
|
488
|
+
if (isFocusedDefault && isMaskRendered) {
|
|
489
|
+
setFocusOnChar(0, -1);
|
|
490
|
+
}
|
|
491
|
+
}, [isFocusedDefault, isMaskRendered]); // OnChange Observer
|
|
492
|
+
|
|
493
|
+
(0, _react.useEffect)(function () {
|
|
494
|
+
if (!isMaskRendered) return false;
|
|
495
|
+
clearErrorMessage();
|
|
496
|
+
onChangeProp(getInnerValueAsString(), getClearInnerValueAsString());
|
|
497
|
+
}, [innerValue, isMaskRendered]); // Blink Error
|
|
498
|
+
|
|
499
|
+
(0, _react.useEffect)(function () {
|
|
500
|
+
if (!blinkError) return false;
|
|
501
|
+
setTimeout(function () {
|
|
502
|
+
setBlinkError(false);
|
|
503
|
+
}, blinkDuration);
|
|
504
|
+
}, [blinkError]); ///--- RENDER ---///
|
|
505
|
+
|
|
506
|
+
var renderChar = function renderChar(obj, i) {
|
|
507
|
+
var className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
|
508
|
+
var char = obj.char,
|
|
509
|
+
ref = obj.ref,
|
|
510
|
+
maskChar = obj.maskChar,
|
|
511
|
+
isSpecialSymbol = obj.isSpecialSymbol;
|
|
512
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
513
|
+
tabIndex: i === 0 ? 1 : -1,
|
|
514
|
+
key: i,
|
|
515
|
+
maxLength: 1,
|
|
516
|
+
"attr-char-id": i,
|
|
517
|
+
className: "input-mask_value_item ".concat(className, " ").concat(isDigitMaskChar(obj.maskChar) ? 'input-mask_value_item--digit' : '', " ").concat(isLetterMaskChar(obj.maskChar) ? 'input-mask_value_item--letter' : '', " ").concat(obj.isSpecialSymbol ? 'input-mask_value_item--spec' : ''),
|
|
518
|
+
onClick: function onClick(e) {
|
|
519
|
+
_onClick(e, function () {
|
|
520
|
+
return _onFocus(e, i);
|
|
521
|
+
});
|
|
522
|
+
},
|
|
523
|
+
onFocus: function onFocus(e) {
|
|
524
|
+
return _onFocus(e, i);
|
|
525
|
+
},
|
|
526
|
+
onBlur: onBlur,
|
|
527
|
+
onKeyPress: cancelDefaultAction,
|
|
528
|
+
onKeyDown: function onKeyDown(e) {
|
|
529
|
+
return _onKeyDown(e, i);
|
|
530
|
+
},
|
|
531
|
+
onChange: function onChange() {},
|
|
532
|
+
contentEditable: true,
|
|
533
|
+
inputMode: isDigitMaskChar(maskChar) ? 'numeric' : 'text',
|
|
534
|
+
suppressContentEditableWarning: true,
|
|
535
|
+
unselectable: true,
|
|
536
|
+
onSelect: cancelDefaultAction,
|
|
537
|
+
onMouseDown: cancelDefaultAction,
|
|
538
|
+
onPaste: cancelDefaultAction // TODO IF NEEDED
|
|
539
|
+
,
|
|
540
|
+
ref: ref
|
|
541
|
+
}, isSpecialSymbol ? maskChar : char === '' ? getPlaceholderCharByIndex(i) : char);
|
|
542
|
+
};
|
|
543
|
+
|
|
544
|
+
var renderMaskChar = function renderMaskChar(obj, i) {
|
|
545
|
+
return renderChar(obj, i, 'input-mask_value_item_mask-char');
|
|
546
|
+
};
|
|
547
|
+
|
|
548
|
+
var renderValueChar = function renderValueChar(obj, i) {
|
|
549
|
+
return renderChar(obj, i, 'input-mask_value_item_value-char');
|
|
550
|
+
};
|
|
551
|
+
|
|
552
|
+
var renderSpecialChar = function renderSpecialChar(obj, i) {
|
|
553
|
+
return renderChar(obj, i, 'input-mask_value_item_spec-char');
|
|
554
|
+
};
|
|
555
|
+
|
|
556
|
+
var renderInputValue = function renderInputValue() {
|
|
557
|
+
return innerValue.map(function (obj, i) {
|
|
558
|
+
var char = obj.char,
|
|
559
|
+
maskChar = obj.maskChar,
|
|
560
|
+
isSpecialSymbol = obj.isSpecialSymbol;
|
|
561
|
+
|
|
562
|
+
if (isSpecialSymbol) {
|
|
563
|
+
return renderSpecialChar(obj, i);
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
var isMaskItem = function () {
|
|
567
|
+
return char === '';
|
|
568
|
+
}();
|
|
569
|
+
|
|
570
|
+
return isMaskItem ? renderMaskChar(obj, i) : renderValueChar(obj, i);
|
|
571
|
+
});
|
|
572
|
+
};
|
|
573
|
+
|
|
574
|
+
var renderSingleInputValue = function renderSingleInputValue() {
|
|
575
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
576
|
+
onClick: function onClick() {
|
|
577
|
+
return setFocused(true);
|
|
578
|
+
}
|
|
579
|
+
}, getInnerValueAsString());
|
|
580
|
+
};
|
|
581
|
+
|
|
582
|
+
var render = function render() {
|
|
583
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
584
|
+
className: "input-mask_wrapper ".concat(className),
|
|
585
|
+
onBlur: onBlur,
|
|
586
|
+
ref: wrapperRef
|
|
587
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
588
|
+
className: "input-mask ".concat(isFocused ? 'input-mask_focus' : '', " ").concat(isError ? 'input-mask_error' : '', " ").concat(blinkError ? 'input-mask_blink-error' : ''),
|
|
589
|
+
ref: inputRefWrapper,
|
|
590
|
+
onClick: function onClick(e) {
|
|
591
|
+
return _onClick(e, onEndDown(e, 0));
|
|
592
|
+
},
|
|
593
|
+
onBlur: onBlur
|
|
594
|
+
}, isIconLeft && showIcon && /*#__PURE__*/_react.default.createElement("div", {
|
|
595
|
+
className: "input-mask_icon input-mask_icon--left"
|
|
596
|
+
}, icon), /*#__PURE__*/_react.default.createElement("div", {
|
|
597
|
+
className: "input-mask_value",
|
|
598
|
+
ref: inputRef,
|
|
599
|
+
onKeyUp: cancelDefaultAction,
|
|
600
|
+
onKeyDown: cancelDefaultAction,
|
|
601
|
+
onKeyPress: cancelDefaultAction,
|
|
602
|
+
onBlur: onBlur
|
|
603
|
+
}, renderInputValue()), isClearable && /*#__PURE__*/_react.default.createElement("div", {
|
|
604
|
+
className: "input-mask_clear"
|
|
605
|
+
}, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
|
|
606
|
+
onClick: clearValue
|
|
607
|
+
})), isIconRight && showIcon && /*#__PURE__*/_react.default.createElement("div", {
|
|
608
|
+
className: "input-mask_icon input-mask_icon--right"
|
|
609
|
+
}, icon)), showNativeErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
|
|
610
|
+
className: "input-mask_error-text"
|
|
611
|
+
}, errorMessage));
|
|
612
|
+
};
|
|
613
|
+
|
|
614
|
+
return render();
|
|
615
|
+
}
|