intelicoreact 0.1.37 → 0.1.40

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

@@ -76,12 +76,14 @@ function InputMask() {
       blinkErrors = _ref$blinkErrors === void 0 ? true : _ref$blinkErrors,
       _ref$blinkDuration = _ref.blinkDuration,
       blinkDuration = _ref$blinkDuration === void 0 ? 100 : _ref$blinkDuration,
-      _ref$showNativeErrors = _ref.showNativeErrors,
-      showNativeErrors = _ref$showNativeErrors === void 0 ? true : _ref$showNativeErrors,
+      _ref$showErrors = _ref.showErrors,
+      showErrors = _ref$showErrors === void 0 ? false : _ref$showErrors,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
       _ref$errors = _ref.errors,
       customErrors = _ref$errors === void 0 ? DEFAULT_ERRORS : _ref$errors,
+      _ref$error = _ref.error,
+      error = _ref$error === void 0 ? '' : _ref$error,
       ref = _ref.ref,
       _ref$onFocus = _ref.onFocus,
       onFocusProp = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
@@ -221,7 +223,7 @@ function InputMask() {
   };
 
   var getInnerValueAsString = function getInnerValueAsString() {
-    return innerValue.map(function (_ref4, i) {
+    return innerValue.slice(0, innerValue.length - 1).map(function (_ref4, i) {
       var char = _ref4.char,
           maskChar = _ref4.maskChar;
       return char === '' ? getPlaceholderCharByIndex(i) || maskChar : char;
@@ -749,7 +751,12 @@ function InputMask() {
         return false;
       });
     });
-  }, []); ///--- RENDER ---///
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (isError) return;
+    setError(error !== '');
+    setErrorMessage(error === '' ? errors.default : error);
+  }, [error, isError]); ///--- RENDER ---///
 
   var renderChar = function renderChar(obj, i) {
     var className = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
@@ -842,10 +849,10 @@ function InputMask() {
 
   var render = function render() {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-mask_wrapper ".concat(className),
+      className: "input-mask_wrapper ".concat(className, " ").concat(isError ? 'input-mask_error' : ''),
       onBlur: onBlur
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "input-mask ".concat(isFocused ? 'input-mask_focus' : '', " ").concat(isError ? 'input-mask_error' : '', " ").concat(blinkError ? 'input-mask_blink-error' : ''),
+      className: "input-mask ".concat(isFocused ? 'input-mask_focus' : '', " ").concat(blinkError ? 'input-mask_blink-error' : ''),
       onMouseDown: function onMouseDown() {
         return setIsMouseDown(true);
       },
@@ -887,7 +894,7 @@ function InputMask() {
       hint: hintText,
       className: hintClassName,
       side: hintPosition
-    }))), showNativeErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
+    }))), showErrors && errorMessage && /*#__PURE__*/_react.default.createElement("div", {
       className: "input-mask_error-text"
     }, errorMessage));
   };

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

@@ -1,8 +1,8 @@
-.input-mask_wrapper {
+.input-mask_wrapper{
   outline: none;
   display: block;
   // width: fit-content;
-  width: 250px;
+  width: 100%;
 
   .input-mask{
     display: inline-flex;
@@ -19,10 +19,6 @@
     &_focus{
       border-color: #6b81dd;
       filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
-
-      .input-mask_value {
-        opacity: 1;
-      }
     }
 
     &_error,
@@ -90,7 +86,6 @@
     }
 
     &_value{
-      opacity: 0.6;
       display: flex;
       align-items: center;
       outline: none;
@@ -124,6 +119,7 @@
         }
 
         &:last-child{
+          color: #333333;
           max-width: 1px;
         }
       }

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

@@ -108,15 +108,20 @@ var _default = {
       description: 'Duration of <b>Error Blink</b> in <b>ms</b>.',
       default: 100
     },
-    showNativeErrors: {
+    showErrors: {
       type: 'boolean',
       default: true,
-      description: 'Turn <b>On/Off</b> Display of Native Event Errors.'
+      description: 'Turn <b>On/Off</b> Display of Errors.'
     },
     errors: {
       type: 'object',
       description: "Errors Descriptions: <br/>\n\n      {\n        onlyLetter: 'Type letter',\n        onlyDigit: 'Type digit',\n        onlyUpperCase: 'Type letter in UpperCase',\n        onlyLowerCase: 'Type letter in LowerCase',\n        default: null\n      }\n"
     },
+    error: {
+      type: 'string',
+      default: '',
+      description: 'Custom Error Text. If is not empty, field would be hightlited'
+    },
     onFocus: {
       type: 'function',
       description: 'Callback Function for Handle <b>Input Focus</b>'
@@ -230,8 +235,9 @@ InputMaskTemplate.args = {
   onChange: function onChange() {},
   blinkErrors: false,
   blinkDuration: 100,
-  showNativeErrors: true,
+  showErrors: true,
   errors: {},
+  error: '',
   onFocus: function onFocus() {},
   onBlur: function onBlur() {},
   className: '',

package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js

@@ -48,7 +48,9 @@ var RangeInputs = function RangeInputs(_ref) {
       onChange = _ref.onChange,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'int' : _ref$type,
-      setInnerError = _ref.setError;
+      setInnerError = _ref.setError,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? "" : _ref$label;
 
   var _useState = (0, _react.useState)({
     from: '',
@@ -98,7 +100,9 @@ var RangeInputs = function RangeInputs(_ref) {
 
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_column"), isColumnPosition))
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, label && label !== " " && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__label")
+  }, label), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__wrapper")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__input-from")

package/dist/Atomic/FormElements/RangeInputs/RangeInputs.scss

@@ -2,7 +2,8 @@
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
+  flex-direction: column;
 
   &__wrapper {
     width: 100%;
@@ -47,4 +48,13 @@
       margin-bottom: 15px;
     }
   }
+
+  .range-inputs__label{
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 24px;
+    margin-bottom: 8px;
+  }
 }

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

@@ -51,5 +51,6 @@ exports.RangeInputsTemplate = RangeInputsTemplate;
 RangeInputsTemplate.args = {
   isColumnPosition: true,
   className: '',
-  type: 'int'
+  type: 'int',
+  label: 'Range Inputs'
 };

package/package.json

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