intelicoreact 0.1.44 → 0.1.45

package/dist/Atomic/FormElements/Input/Input.scss

@@ -32,7 +32,7 @@
     }
 
     &_error {
-      border-color: #f06d8d;
+      border-color: #f06d8d !important;
     }
   }
 

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

@@ -34,25 +34,14 @@ var getCaretPosition = function getCaretPosition(ctrl) {
 exports.getCaretPosition = getCaretPosition;
 
 var setCaretPosition = function setCaretPosition(ctrl, start, end) {
+  if (!ctrl) return false;
   var range = document.createRange();
   var sel = window.getSelection();
-  range.setStart(ctrl.childNodes[0], start);
+  range.setStart(ctrl === null || ctrl === void 0 ? void 0 : ctrl.childNodes[0], start);
   range.collapse(true);
   sel.removeAllRanges();
   sel.addRange(range);
-  ctrl.focus(); // // IE >= 9 and other browsers
-  // if (ctrl.setSelectionRange) {
-  //     ctrl.focus();
-  //     ctrl.setSelectionRange(start, end);
-  // }
-  // // IE < 9
-  // else if (ctrl.createTextRange) {
-  //     var range = ctrl.createTextRange();
-  //     range.collapse(true);
-  //     range.moveEnd('character', end);
-  //     range.moveStart('character', start);
-  //     range.select();
-  // }
+  ctrl.focus();
 };
 
 exports.setCaretPosition = setCaretPosition;

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

@@ -60,6 +60,8 @@ function InputMask() {
       maskDigitPlaceholder = _ref.maskDigitPlaceholder,
       maskLetterPlaceholder = _ref.maskLetterPlaceholder,
       usePatternPlaceholder = _ref.usePatternPlaceholder,
+      _ref$maskAsPlaceholde = _ref.maskAsPlaceholder,
+      maskAsPlaceholder = _ref$maskAsPlaceholde === void 0 ? true : _ref$maskAsPlaceholde,
       _ref$isFocusedDefault = _ref.isFocusedDefault,
       isFocusedDefault = _ref$isFocusedDefault === void 0 ? false : _ref$isFocusedDefault,
       isClearable = _ref.isClearable,
@@ -159,7 +161,7 @@ function InputMask() {
       innerValue = _useState18[0],
       setInnerValue = _useState18[1];
 
-  var _useState19 = (0, _react.useState)([]),
+  var _useState19 = (0, _react.useState)(''),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
       selectedText = _useState20[0],
       setSelectedText = _useState20[1];
@@ -223,11 +225,16 @@ function InputMask() {
   };
 
   var getInnerValueAsString = function getInnerValueAsString() {
-    return innerValue.slice(0, innerValue.length - 1).map(function (_ref4, i) {
-      var char = _ref4.char,
-          maskChar = _ref4.maskChar;
+    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref4$replaceSpace = _ref4.replaceSpace,
+        replaceSpace = _ref4$replaceSpace === void 0 ? false : _ref4$replaceSpace;
+
+    var result = innerValue.slice(0, innerValue.length - 1).map(function (_ref5, i) {
+      var char = _ref5.char,
+          maskChar = _ref5.maskChar;
       return char === '' ? getPlaceholderCharByIndex(i) || maskChar : char;
-    }).join('').replace(/\u00A0/g, ' ');
+    }).join('');
+    return replaceSpace ? result.replace(/\u00A0/g, ' ') : result;
   };
 
   var getSelectedValueAsString = function getSelectedValueAsString() {
@@ -235,15 +242,24 @@ function InputMask() {
   };
 
   var getClearInnerValueAsString = function getClearInnerValueAsString() {
-    return innerValue.reduce(function (result, _ref5) {
-      var char = _ref5.char,
-          maskChar = _ref5.maskChar,
-          isSpecialSymbol = _ref5.isSpecialSymbol;
+    return innerValue.reduce(function (result, _ref6) {
+      var char = _ref6.char,
+          maskChar = _ref6.maskChar,
+          isSpecialSymbol = _ref6.isSpecialSymbol;
       if (char !== maskChar && char !== '' || isSpecialSymbol) result += char;
       return result;
     }, '');
   };
 
+  var getLastTypedIndex = function getLastTypedIndex() {
+    return innerValue.reduce(function (lastIndex, _ref7, i) {
+      var char = _ref7.char,
+          isSpecialSymbol = _ref7.isSpecialSymbol;
+      if (!isSpecialSymbol && char !== SPACE_CHAR && char !== '' || lastIndex === null) lastIndex = i;
+      return lastIndex;
+    }, -1) + 1;
+  };
+
   var isLetter = function isLetter(char) {
     return char.length === 1 && char.match(/[a-z]/i);
   };
@@ -268,11 +284,11 @@ function InputMask() {
     return char === UPPERCASE_LETTER_MASK_CHAR || char === LOWERCASE_LETTER_MASK_CHAR;
   };
 
-  var isValidChar = function isValidChar(_ref6) {
-    var key = _ref6.char,
-        i = _ref6.i,
-        _ref6$disableErrors = _ref6.disableErrors,
-        disableErrors = _ref6$disableErrors === void 0 ? false : _ref6$disableErrors;
+  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 maskChar = getMaskCharByIndex(i);
 
     switch (maskChar) {
@@ -405,20 +421,48 @@ function InputMask() {
   };
 
   var onArrowRightDown = function onArrowRightDown(e, i) {
-    return setFocusOnChar(i + 1, 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();
+    setFocusOnChar(nextIndex, i);
   };
 
   var onBackspaceDown = function onBackspaceDown(e, i) {
+    // if (Boolean(getSelectionText().length)) {
+    //   const selStartInd = getSelectStartIndex();
+    //   const selEndInd = getSelectionText().length+selStartInd;
+    //   console.log(selStartInd, selEndInd)
+    //   if (selStartInd > 0) {
+    //     resetSelectionText();
+    //     for (let index = selStartInd; index < selEndInd; ++index) {
+    //       console.log({index})
+    //       updateInnerValueChar({char: ''}, index);
+    //     }
+    //     setFocusOnChar(selStartInd, i);
+    //   }
+    //   return true;
+    // }
     var prevIndex = i - 1;
     var charObj = getCharByIndex(prevIndex);
     if (!charObj) return false;
     var char = charObj.char,
         isSpecialSymbol = charObj.isSpecialSymbol;
     if (isSpecialSymbol) return onBackspaceDown(e, prevIndex);
+
+    if (maskAsPlaceholder) {
+      var newText = getInnerValueAsString().substr(0, prevIndex) + getInnerValueAsString().substr(i);
+      resetInnerValue();
+
+      _onPaste({
+        text: newText
+      }, 0);
+    } else {
+      updateInnerValueChar({
+        char: ''
+      }, prevIndex);
+    }
+
     setFocusOnChar(prevIndex, i);
-    updateInnerValueChar({
-      char: ''
-    }, prevIndex);
     return true;
   };
 
@@ -429,10 +473,23 @@ function InputMask() {
     var char = charObj.char,
         isSpecialSymbol = charObj.isSpecialSymbol;
     if (isSpecialSymbol) return onDeleteDown(e, i + 1);
-    setFocusOnChar(nextIndex, i);
-    updateInnerValueChar({
-      char: ''
-    }, i);
+
+    if (maskAsPlaceholder) {
+      var newText = getInnerValueAsString().substr(0, i) + getInnerValueAsString().substr(nextIndex);
+      resetInnerValue();
+
+      _onPaste({
+        text: newText
+      }, 0);
+
+      setFocusOnChar(i, i);
+    } else {
+      updateInnerValueChar({
+        char: ''
+      }, i);
+      setFocusOnChar(nextIndex, i);
+    }
+
     return true;
   };
 
@@ -441,7 +498,7 @@ function InputMask() {
   };
 
   var onEndDown = function onEndDown(e, i) {
-    return setFocusOnChar(innerValue.length - 1, 0);
+    return setFocusOnChar(maskAsPlaceholder ? getLastTypedIndex() : innerValue.length - 1, 0);
   };
 
   var handleServiceKeyDown = function handleServiceKeyDown(e, i) {
@@ -479,9 +536,9 @@ function InputMask() {
   };
 
   var handleKeyDown = function handleKeyDown(e, i) {
-    var _ref7 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        _ref7$disableErrors = _ref7.disableErrors,
-        disableErrors = _ref7$disableErrors === void 0 ? false : _ref7$disableErrors;
+    var _ref9 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+        _ref9$disableErrors = _ref9.disableErrors,
+        disableErrors = _ref9$disableErrors === void 0 ? false : _ref9$disableErrors;
 
     try {
       e.stopPropagation();
@@ -540,14 +597,14 @@ function InputMask() {
     }
   };
 
-  var _onClick = function onClick(e, cb) {
-    var _ref8 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        _ref8$ignoreIsSelecti = _ref8.ignoreIsSelecting,
-        ignoreIsSelecting = _ref8$ignoreIsSelecti === void 0 ? false : _ref8$ignoreIsSelecti;
+  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;
 
     e.stopPropagation();
     e.preventDefault();
-    if (isSelecting && !ignoreIsSelecting) return false;
+    if (isSelecting && (Boolean(selectedText.length) || Boolean((0, _functions.getSelectionText)().length)) && !ignoreIsSelecting) return false;
     setFocused(true);
     if (typeof cb === 'function') cb(e);
   };
@@ -555,10 +612,20 @@ function InputMask() {
   var onCharClick = function onCharClick(e, i) {
     e.preventDefault();
     e.stopPropagation();
+
+    var _getCharByIndex2 = getCharByIndex(i),
+        char = _getCharByIndex2.char,
+        maskChar = _getCharByIndex2.maskChar;
+
+    if (maskAsPlaceholder && !isValidChar({
+      char: char,
+      i: i,
+      disableErrors: true
+    })) i = getLastTypedIndex();
     setIsSelecting(false);
     (0, _functions.resetSelectionText)();
     setTimeout(function () {
-      return _onClick(e, function () {
+      return onClick(e, function () {
         return _onFocus(e, i);
       }, {
         ignoreIsSelecting: true
@@ -566,6 +633,14 @@ function InputMask() {
     }, 50);
   };
 
+  var onWrapperClick = function onWrapperClick(e) {
+    return cancelDefaultAction(e, function () {
+      !isMouseDown ? onClick(e, function () {
+        return onEndDown(e, 0);
+      }) : null;
+    });
+  };
+
   var onBlur = function onBlur(e) {
     if (isFocused) onBlurProp();
     setFocused(false);
@@ -589,11 +664,18 @@ function InputMask() {
   };
 
   var _onPaste = function onPaste(e, i) {
+    var _e$clipboardData;
+
     setIsSelecting(false);
     (0, _functions.resetSelectionText)();
-    e.preventDefault();
-    e.stopPropagation();
-    var pastedText = e.clipboardData.getData('Text');
+
+    try {
+      e.preventDefault();
+      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 = [];
     var result = pastedText.split('').filter(function (char) {
@@ -699,7 +781,7 @@ function InputMask() {
       });
     });
 
-    if (value !== '' && value.length === maskLength) {
+    if (value && value !== '' && (value === null || value === void 0 ? void 0 : value.length) === maskLength) {
       value.split('').map(function (char, i) {
         return updateInnerValueChar({
           char: char
@@ -727,7 +809,9 @@ function InputMask() {
     if (!isMaskRendered) return false;
     setError(false);
     clearErrorMessage();
-    onChangeProp(getInnerValueAsString(), getClearInnerValueAsString());
+    onChangeProp(getInnerValueAsString({
+      replaceSpace: true
+    }), getClearInnerValueAsString());
   }, [innerValue, isMaskRendered]); // Blink Error
 
   (0, _react.useEffect)(function () {
@@ -741,10 +825,16 @@ function InputMask() {
       setSelectedText('');
       (0, _functions.resetSelectionText)();
     }
-  }, [isSelecting]);
+
+    if (!isMouseDown && isSelecting && !Boolean((0, _functions.getSelectionText)().length)) setIsSelecting(false);
+  }, [isSelecting, isMouseDown]);
   (0, _react.useEffect)(function () {
     document.addEventListener('mouseup', function () {
       setIsMouseDown(function (isMouseDown) {
+        document.addEventListener('keydown', _onKeyDown, {
+          once: true
+        });
+
         if (isMouseDown) {
           setSelectedText((0, _functions.getSelectionText)());
           document.addEventListener('click', function () {
@@ -782,7 +872,7 @@ function InputMask() {
       "attr-char-id": i,
       className: "\n          input-mask_value_item\n          ".concat(className, "\n          ").concat(isDigitMaskChar(obj.maskChar) ? 'input-mask_value_item--digit' : '', "\n          ").concat(isLetterMaskChar(obj.maskChar) ? 'input-mask_value_item--letter' : '', "\n          ").concat(obj.isSpecialSymbol ? 'input-mask_value_item--spec' : '', "\n          ").concat(isSelected ? 'input-mask_value_item--selected' : '', "\n        "),
       onClick: function onClick(e) {
-        onCharClick(e, i);
+        return onCharClick(e, i);
       },
       onFocus: function onFocus(e) {
         return _onFocus(e, i);
@@ -811,7 +901,6 @@ function InputMask() {
           return _onCut(e, i);
         });
       },
-      on: true,
       ref: ref,
       onDoubleClick: function onDoubleClick(e) {
         setIsSelecting(true);
@@ -854,24 +943,22 @@ function InputMask() {
 
   var render = function render() {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-mask_wrapper ".concat(className, " ").concat(isError ? 'input-mask_error' : '', " ").concat(isFocused ? 'input-mask_focus' : '', " ").concat(blinkError ? 'input-mask_blink-error' : ''),
+      className: "\n          input-mask_wrapper\n          ".concat(className, "\n          ").concat(isError ? 'input-mask_error' : '', "\n          ").concat(isFocused ? 'input-mask_focus' : '', "\n          ").concat(blinkError ? 'input-mask_blink-error' : '', "\n        "),
+      onClick: onWrapperClick,
       onBlur: onBlur,
       tabIndex: "auto"
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-mask ".concat(isError ? 'input-mask_error' : '', " ").concat(isFocused ? 'input-mask_focus' : '', " ").concat(blinkError ? 'input-mask_blink-error' : ''),
+      className: "\n            input-mask\n            ".concat(isError ? 'input-mask_error' : '', "\n            ").concat(isFocused ? 'input-mask_focus' : '', "\n            ").concat(blinkError ? 'input-mask_blink-error' : '', "\n          "),
       onMouseDown: function onMouseDown() {
         return setIsMouseDown(true);
       },
+      onMouseUp: function onMouseUp() {
+        return setIsMouseDown(false);
+      },
       onMouseMove: function onMouseMove() {
         return isMouseDown ? setIsSelecting(true) : null;
       },
-      onClick: function onClick(e) {
-        return cancelDefaultAction(e, function () {
-          return !isMouseDown ? _onClick(e, function () {
-            return onEndDown(e, 0);
-          }) : null;
-        });
-      },
+      onClick: onWrapperClick,
       onBlur: onBlur
     }, showHint && isHintLeft && /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_hint input-mask_hint--left"
@@ -887,7 +974,8 @@ function InputMask() {
       onKeyUp: cancelDefaultAction,
       onKeyDown: cancelDefaultAction,
       onKeyPress: cancelDefaultAction,
-      onBlur: onBlur
+      onBlur: onBlur,
+      onClick: onWrapperClick
     }, renderInputValue()), isClearable && /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_clear"
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {

package/dist/Atomic/FormElements/InputMask/InputMask.scss

@@ -119,7 +119,7 @@
         }
 
         &:last-child{
-          color: #333333;
+          // color: #333333;
           max-width: 1px;
         }
       }

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

@@ -55,6 +55,12 @@ var _default = {
       title: 'Specialized Mask Placeholder for Letter Char',
       description: 'Specialized Mask Placeholder for <b>Letter</b>.'
     },
+    maskAsPlaceholder: {
+      title: 'Use Mask As Placeholder',
+      description: 'Use Mask As Placeholder',
+      type: 'boolean',
+      default: true
+    },
     isCaseSensitive: {
       type: 'boolean',
       default: false,
@@ -201,12 +207,12 @@ var Template = function Template(args) {
       fontSize: "24px",
       fontWeight: '200'
     }
-  }, "Value: ", value), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Value: ", /*#__PURE__*/_react.default.createElement("div", null, value)), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       fontSize: "24px",
       fontWeight: '200'
     }
-  }, "Clear Value: ", clearValue)), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("input", null), /*#__PURE__*/_react.default.createElement("input", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_InputMask.default, (0, _extends2.default)({}, args, {
+  }, "Clear Value: ", /*#__PURE__*/_react.default.createElement("div", null, clearValue))), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_InputMask.default, (0, _extends2.default)({}, args, {
     value: value,
     onChange: function onChange(v, cv) {
       setValue(v);
@@ -218,12 +224,13 @@ var Template = function Template(args) {
 var InputMaskTemplate = Template.bind({});
 exports.InputMaskTemplate = InputMaskTemplate;
 InputMaskTemplate.args = {
-  maskPattern: 'DDDD DDDD DDDD DDDD',
-  maskPatternPlaceholder: 'xxxx xxxx xxxx xxxx',
+  maskPattern: 'DD/DD/DDDD',
+  maskPatternPlaceholder: 'MM/DD/YYYY',
   usePatternPlaceholder: false,
   maskPlaceholder: '_',
   maskDigitPlaceholder: '',
   maskLetterPlaceholder: '',
+  maskAsPlaceholder: true,
   isCaseSensitive: false,
   adaptTextCase: false,
   icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Type, null),

package/package.json

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