intelicoreact 0.1.51 → 0.1.52

package/dist/Atomic/FormElements/InputMask/InputMask.js

@@ -43,7 +43,7 @@ var UPPERCASE_LETTER_MASK_CHAR = 'L';
 var LOWERCASE_LETTER_MASK_CHAR = 'l';
 var DIGIT_MASK_CHAR = 'D';
 var SPACE_CHAR = "\xA0";
-var EXCLUDED_KEYS = ["Tab"];
+var EXCLUDED_KEYS = ['Tab'];
 var DEFAULT_ERRORS = {
   onlyLetter: 'Type letter',
   onlyDigit: 'Type digit',
@@ -261,7 +261,7 @@ function InputMask() {
   };
 
   var isLetter = function isLetter(char) {
-    return char.length === 1 && char.match(/[a-z]/i);
+    return (char === null || char === void 0 ? void 0 : char.length) === 1 && (char === null || char === void 0 ? void 0 : char.match(/[a-z]/i));
   };
 
   var isUpperCaseLetter = function isUpperCaseLetter(char) {
@@ -284,11 +284,16 @@ function InputMask() {
     return char === UPPERCASE_LETTER_MASK_CHAR || char === LOWERCASE_LETTER_MASK_CHAR;
   };
 
-  var isValidChar = function isValidChar(_ref8) {
-    var key = _ref8.char,
-        i = _ref8.i,
-        _ref8$disableErrors = _ref8.disableErrors,
-        disableErrors = _ref8$disableErrors === void 0 ? false : _ref8$disableErrors;
+  var isSpecialSymbolMaskChar = function isSpecialSymbolMaskChar(_ref8) {
+    var char = _ref8.char;
+    return !isDigitMaskChar(char) && !isLetterMaskChar(char);
+  };
+
+  var isValidChar = function isValidChar(_ref9) {
+    var key = _ref9.char,
+        i = _ref9.i,
+        _ref9$disableErrors = _ref9.disableErrors,
+        disableErrors = _ref9$disableErrors === void 0 ? false : _ref9$disableErrors;
     var maskChar = getMaskCharByIndex(i);
 
     switch (maskChar) {
@@ -341,9 +346,16 @@ function InputMask() {
     return true;
   };
 
+  var isSpecialSymbolChar = function isSpecialSymbolChar(_ref10) {
+    var char = _ref10.char;
+    return !isDigit(char) && !isLetter(char);
+  };
+
   var getCharObj = function getCharObj(char) {
     var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var isSpecialSymbol = !(isDigitMaskChar(char) || isLetterMaskChar(char));
+    var isSpecialSymbol = isSpecialSymbolChar({
+      char: char
+    });
     if (char === ' ') char = SPACE_CHAR;
     return _objectSpread({
       char: isSpecialSymbol ? char : '',
@@ -423,7 +435,7 @@ function InputMask() {
   var onArrowRightDown = function onArrowRightDown(e, i) {
     var key = (e === null || e === void 0 ? void 0 : e.key) || null;
     var nextIndex = i + 1;
-    if (maskAsPlaceholder && nextIndex > getLastTypedIndex() && key === "ArrowRight") nextIndex = getLastTypedIndex();
+    if (maskAsPlaceholder && nextIndex > getLastTypedIndex() && key === 'ArrowRight') nextIndex = getLastTypedIndex();
     setFocusOnChar(nextIndex, i);
   };
 
@@ -536,16 +548,15 @@ function InputMask() {
   };
 
   var handleKeyDown = function handleKeyDown(e, i) {
-    var _ref9 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        _ref9$disableErrors = _ref9.disableErrors,
-        disableErrors = _ref9$disableErrors === void 0 ? false : _ref9$disableErrors;
+    var _ref11 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref11$disableErrors = _ref11.disableErrors,
+        disableErrors = _ref11$disableErrors === void 0 ? false : _ref11$disableErrors;
 
     try {
       e.stopPropagation();
       e.preventDefault();
     } catch (e) {}
 
-    ;
     var key = e.key;
     var charObj = getCharByIndex(i);
     if (!charObj) return false;
@@ -598,9 +609,9 @@ function InputMask() {
   };
 
   var onClick = function onClick(e, cb) {
-    var _ref10 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        _ref10$ignoreIsSelect = _ref10.ignoreIsSelecting,
-        ignoreIsSelecting = _ref10$ignoreIsSelect === void 0 ? false : _ref10$ignoreIsSelect;
+    var _ref12 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref12$ignoreIsSelect = _ref12.ignoreIsSelecting,
+        ignoreIsSelecting = _ref12$ignoreIsSelect === void 0 ? false : _ref12$ignoreIsSelect;
 
     e.stopPropagation();
     e.preventDefault();
@@ -674,7 +685,6 @@ function InputMask() {
       e.stopPropagation();
     } catch (error) {}
 
-    ;
     var pastedText = (e === null || e === void 0 ? void 0 : (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('Text')) || e.text;
     if (!pastedText) return false;
     var replacedIndexes = [];
@@ -767,12 +777,11 @@ function InputMask() {
     (0, _functions.selectElementContents)(inputRef.current);
     setSelectedText((0, _functions.getSelectionText)());
   }; ///--- OBSERVERS ---///
-  //Init InnerValue
+  //Render Mask
 
 
   (0, _react.useEffect)(function () {
     if (!maskPattern) maskPattern = '';
-    var maskLength = maskPattern.length;
     maskPattern.concat(' ').split('').map(function (char, id) {
       return addInnerValueChar({
         char: char
@@ -780,17 +789,39 @@ function InputMask() {
         id: id
       });
     });
+    setMaskRendered(true);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!isMaskRendered) return false;
+
+    if (value && value !== '') {
+      var valueCharIndex = 0;
+      innerValue.map(function (_ref13, i) {
+        var isSpecialSymbol = _ref13.isSpecialSymbol;
+        if (isSpecialSymbol) return false;
+        var char = value[valueCharIndex];
 
-    if (value && value !== '' && (value === null || value === void 0 ? void 0 : value.length) === maskLength) {
-      value.split('').map(function (char, i) {
-        return updateInnerValueChar({
-          char: char
-        }, i);
+        while (isSpecialSymbolChar({
+          char: value[valueCharIndex]
+        })) {
+          char = value[++valueCharIndex];
+        } //If Valid
+
+
+        if (isValidChar({
+          char: char,
+          i: i,
+          disableErrors: true
+        })) {
+          updateInnerValueChar({
+            char: char
+          }, i);
+        }
+
+        ++valueCharIndex;
       });
     }
-
-    setMaskRendered(true);
-  }, []); // Focus Observer
+  }, [isMaskRendered]); // Focus Observer
 
   (0, _react.useEffect)(function () {
     if (!isFocused) {

package/dist/Atomic/FormElements/InputMask/InputMask.stories.js

@@ -191,7 +191,7 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)('0123456789'),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
       setValue = _useState2[1];
@@ -224,10 +224,12 @@ var Template = function Template(args) {
 var InputMaskTemplate = Template.bind({});
 exports.InputMaskTemplate = InputMaskTemplate;
 InputMaskTemplate.args = {
-  maskPattern: 'DD/DD/DDDD',
-  maskPatternPlaceholder: 'MM/DD/YYYY',
+  // maskPattern: 'DD/DD/DDDD',
+  // maskPatternPlaceholder: 'MM/DD/YYYY',
+  maskPattern: 'DDD-DDD-DDDD',
+  maskPatternPlaceholder: 'XXX-XXX-XXXX',
   usePatternPlaceholder: false,
-  maskPlaceholder: '_',
+  maskPlaceholder: 'X',
   maskDigitPlaceholder: '',
   maskLetterPlaceholder: '',
   maskAsPlaceholder: true,
@@ -238,7 +240,7 @@ InputMaskTemplate.args = {
   isIconLeft: true,
   isIconRight: false,
   isClearable: true,
-  value: '',
+  value: '1234567890',
   onChange: function onChange() {},
   blinkErrors: false,
   blinkDuration: 100,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.51",
+  "version": "0.1.52",
   "description": "fixes",
   "main": "dist/index.js",
   "files": ["dist/*", "node_modules/anme/*", "node_modules/moment/*", "node_modules/moment-timezone/*"],