intelicoreact 0.1.33 → 0.1.36

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

@@ -0,0 +1,111 @@
+.unselectable {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
+.input-mask_wrapper {
+  outline: none;
+  display: block;
+  width: 250px;
+
+  .input-mask{
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid #e2e5ec;
+    box-sizing: border-box;
+    background-color: #fff;
+    border-radius: 4px;
+    padding:8px;
+    cursor: text;
+    width: 100%;
+
+    &_focus{
+      border-color: #6b81dd;
+      filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
+
+      .input-mask_value {
+        opacity: 1;
+      }
+    }
+
+    &_error,
+    &_blink-error{
+      border-color: #dd6b6b;
+      filter: drop-shadow(0px 0px 4px rgba(255, 93, 93, 0.5));
+    }
+
+    &_icon{
+      height: 16px;
+      width: 16px;
+      position: relative;
+
+      &--left{
+        margin-right: 4px;
+      }
+
+      &--right{
+        margin-left: 4px;
+        right: 0;
+      }
+    }
+
+    &_clear{
+      height: 16px;
+      width: 16px;
+      cursor: pointer!important;
+    }
+
+    &_value{
+      opacity: 0.6;
+      display: flex;
+      align-items: center;
+      outline: none;
+      position: relative;
+      width: 100%;
+
+      &_item{
+        @extend .unselectable;
+        display: inline-flex;
+        min-width: 0;
+        font-size: 16px;
+        width: unset;
+        padding: 0;
+        margin: 0;
+        border: none;
+        outline: none;
+
+        &--letter{
+        }
+
+        &_mask-char{
+          color: #9c9c9c;
+        }
+
+        &_value-char,
+        &_spec-char{
+          color: #333333;
+        }
+
+        &_spec-char{
+          text-align: center;
+        }
+
+        &:last-child{
+          max-width: 1px;
+        }
+      }
+    }
+  }
+
+  .input-mask_error-text{
+    font-size: 12px;
+    margin-top: 8px;
+    color:rgb(211, 82, 82);
+  }
+}

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

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputMaskTemplate = exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactFeather = require("react-feather");
+
+var _InputMask = _interopRequireDefault(require("./InputMask"));
+
+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); }
+
+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; }
+
+global.lng = 'en';
+var _default = {
+  title: 'Form Elements/Input Mask',
+  component: _InputMask.default,
+  argTypes: {
+    maskPattern: {
+      title: 'Mask Pattern',
+      description: '<b>"D"</b> - Digit.<br/><b>"L"</b> or <b>"l"</b> - Letter.'
+    },
+    maskPatternPlaceholder: {
+      title: 'Pattern Placeholder',
+      description: 'Fine-tuning the mask character.<br/>Works if <b>"usePatternPlaceholder"</b> is <b>ENABLED</b>.'
+    },
+    usePatternPlaceholder: {
+      title: 'Pattern Placeholder',
+      type: 'boolean',
+      default: false,
+      description: 'Turn <b>On/Off</b> use of <b>"maskPatternPlaceholder"</b>'
+    },
+    maskPlaceholder: {
+      title: 'Mask Placeholder',
+      type: 'string',
+      description: 'General Mask Char.<br/>Uses if <b>"usePatternPlaceholder"</b> is <b>Turned Off</b> or Specialized Mask Char is not recieved.'
+    },
+    maskDigitPlaceholder: {
+      title: 'Specialized Mask Placeholder for Digit Char',
+      description: 'Specialized Mask Placeholder for <b>Digit</b>.'
+    },
+    maskLetterPlaceholder: {
+      title: 'Specialized Mask Placeholder for Letter Char',
+      description: 'Specialized Mask Placeholder for <b>Letter</b>.'
+    },
+    isCaseSensitive: {
+      type: 'boolean',
+      default: false,
+      description: 'Turn <b>On/Off</b> use of <b>Case Sensitive Mode</b>.'
+    },
+    adaptTextCase: {
+      type: 'boolean',
+      default: false,
+      description: 'Turn <b>On/Off</b> use of <b>Auto Text Case Adapt</b>.'
+    },
+    icon: {
+      type: 'object',
+      description: 'Icon for Input.<br/>Will works only if <b>"showIcon"</b> is <b>ENABLED</b>.'
+    },
+    showIcon: {
+      type: 'boolean',
+      default: false,
+      description: 'Turn <b>On/Off</b> Icon Display.'
+    },
+    isIconLeft: {
+      type: 'boolean',
+      default: false,
+      description: 'Display Icon on Left Side.'
+    },
+    isIconRight: {
+      type: 'boolean',
+      default: false,
+      description: 'Display Icon on Right Side.'
+    },
+    isClearable: {
+      type: 'boolean',
+      default: false,
+      description: 'Display Clear Button and Enable Clearable Possibility.'
+    },
+    value: {
+      type: 'string',
+      description: 'Input Value',
+      default: ''
+    },
+    onChange: {
+      type: 'function',
+      description: 'Callback Function for Handle <b>Input Value Change</b>'
+    },
+    blinkErrors: {
+      type: 'boolean',
+      default: true,
+      description: 'Turn <b>On/Off</b> Blinking Error Mode.'
+    },
+    blinkDuration: {
+      type: 'number',
+      description: 'Duration of <b>Error Blink</b> in <b>ms</b>.',
+      default: 100
+    },
+    showNativeErrors: {
+      type: 'boolean',
+      default: true,
+      description: 'Turn <b>On/Off</b> Display of Native Event 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"
+    },
+    onFocus: {
+      type: 'function',
+      description: 'Callback Function for Handle <b>Input Focus</b>'
+    },
+    onBlur: {
+      type: 'function',
+      description: 'Callback Function for Handle <b>Input Blur</b>'
+    },
+    className: {
+      type: 'string',
+      description: 'ClassName For Input Mask Wrapper',
+      default: ''
+    },
+    isFocusedDefault: {
+      type: 'boolean',
+      description: 'Set Autofocus On Render',
+      default: false
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      clearValue = _useState4[0],
+      setClearValue = _useState4[1];
+
+  var ref = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: "24px",
+      fontWeight: '200'
+    }
+  }, "Value: ", value), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: "24px",
+      fontWeight: '200'
+    }
+  }, "Clear Value: ", clearValue)), /*#__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);
+      setClearValue(cv);
+    }
+  })));
+};
+
+var InputMaskTemplate = Template.bind({});
+exports.InputMaskTemplate = InputMaskTemplate;
+InputMaskTemplate.args = {
+  maskPattern: 'DDD DDD DDDD | LLL ll',
+  maskPatternPlaceholder: 'XXX xxx XXXX | AAA aa',
+  usePatternPlaceholder: false,
+  maskPlaceholder: '_',
+  maskDigitPlaceholder: '',
+  maskLetterPlaceholder: '',
+  isCaseSensitive: false,
+  adaptTextCase: false,
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Type, null),
+  showIcon: false,
+  isIconLeft: true,
+  isIconRight: false,
+  isClearable: false,
+  value: '',
+  onChange: function onChange() {},
+  blinkErrors: false,
+  blinkDuration: 100,
+  showNativeErrors: true,
+  errors: {},
+  onFocus: function onFocus() {},
+  onBlur: function onBlur() {},
+  className: '',
+  isFocusedDefault: false
+};

package/dist/Atomic/FormElements/NumericInput/NumericInput.js

@@ -41,8 +41,7 @@ var timerOutside;
 var timerFocus;
 
 var NumericInput = function NumericInput(_ref) {
-  var onChange = _ref.onChange,
-      disabled = _ref.disabled,
+  var disabled = _ref.disabled,
       withDelete = _ref.withDelete,
       _ref$numStep = _ref.numStep,
       numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
@@ -52,9 +51,16 @@ var NumericInput = function NumericInput(_ref) {
       value = _ref.value,
       placeholder = _ref.placeholder,
       className = _ref.className,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onKeyUp = _ref.onKeyUp,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$onBlur = _ref.onBlur,
+      onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+      _ref$onFocus = _ref.onFocus,
+      onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
+      _ref$onKeyUp = _ref.onKeyUp,
+      onKeyUp = _ref$onKeyUp === void 0 ? function () {} : _ref$onKeyUp,
+      _ref$onKeyDown = _ref.onKeyDown,
+      onKeyDown = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
       mask = _ref.mask,
       maskChar = _ref.maskChar,
       formatChars = _ref.formatChars,
@@ -72,7 +78,7 @@ var NumericInput = function NumericInput(_ref) {
   var decRef = (0, _react.useRef)(null);
   var incRef = (0, _react.useRef)(null);
   var wrapRef = (0, _react.useRef)(null);
-  var previousValueRef = (0, _react.useRef)(value); // STATES
+  var previousValueRef = (0, _react.useRef)(value || min || ''); // STATES
 
   var _useState = (0, _react.useState)(value || min || ''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -107,8 +113,16 @@ var NumericInput = function NumericInput(_ref) {
   var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
       isToHighlightError = _useState14[0],
-      setIsToHighlightError = _useState14[1]; // HANDLES
+      setIsToHighlightError = _useState14[1];
 
+  var _useState15 = (0, _react.useState)(value || min || ''),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      prevValue = _useState16[0],
+      setPreviousValue = _useState16[1];
+
+  var formatedValue = (0, _react.useMemo)(function () {
+    return isFocused ? (0, _fieldValueFormatters.formatToRemoveComa)(inputValue) : (0, _fieldValueFormatters.formatToAddBitDepthPoints)(inputValue);
+  }, [inputValue, isFocused]); // HANDLES
 
   var handle = {
     change: function change(e) {
@@ -144,36 +158,48 @@ var NumericInput = function NumericInput(_ref) {
       setEditing(false);
       if (onBlur) onBlur(e);
     },
+    keyDown: function keyDown(e) {
+      var _e$target;
+
+      setPreviousValue(e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+      onKeyDown(e.keyCode, e);
+    },
     keyUp: function keyUp(e) {
       if (!isNotBlinkErrors) {
-        var _previousValueRef$cur;
-
         var changedValue = '' + (value !== null && value !== void 0 ? value : '');
-        var previousValue = '' + ((_previousValueRef$cur = previousValueRef.current) !== null && _previousValueRef$cur !== void 0 ? _previousValueRef$cur : '');
-
-        var currentSet = function () {
-          if (previousValue.length < changedValue.length) return value.toString().slice(previousValue.length - changedValue.length);else return changedValue.toString().includes(e.key) ? e.key : '';
-        }();
-
-        if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
-        if (_index.KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;else previousValueRef.current = previousValue + currentSet[0];
+        var previousValue = '' + prevValue;
+        var short = previousValue.length <= changedValue.length ? previousValue : changedValue;
+        var long = previousValue.length > changedValue.length ? previousValue : changedValue;
+        var infoAboutDifferencesSameness = short.split('').reduce(function (acc, symbol, idx) {
+          if (acc.countOn && symbol === long[idx]) acc.same.push(symbol);else {
+            acc.countOn = false;
+            acc.differences.push([idx, symbol]);
+          }
+          return acc;
+        }, {
+          same: [],
+          countOn: true,
+          differences: []
+        });
+        var samePart = infoAboutDifferencesSameness.same.join('');
+        var differencesLength = infoAboutDifferencesSameness.differences.length;
+        var currentSet = changedValue.replace(samePart, '');
+        if (!_index.KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(!(!differencesLength && e.key === currentSet));
       }
 
       if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
     },
     decrement: function decrement(e) {
-      handle.change(intMemoVal - +numStep);
+      handle.change(+intMemoVal - +numStep);
     },
     increment: function increment(e) {
-      handle.change(intMemoVal + +numStep);
+      handle.change(+intMemoVal + +numStep);
     }
   }; //Check Outside Click
 
   (0, _react.useEffect)(function () {
     var handleClickOutside = function handleClickOutside(event) {
-      if (!wrapRef.current.contains(event.target)) {
-        setIsFocused(false);
-      }
+      if (!wrapRef.current.contains(event.target)) setIsFocused(false);
     };
 
     document.addEventListener('mousedown', handleClickOutside, true);
@@ -189,7 +215,10 @@ var NumericInput = function NumericInput(_ref) {
         setIsToHighlightError(false);
       }, blinkTime || DEFAULT_BLINK_TIME);
     }
-  }, [isAttemptToChange]); //On Input Value Change
+  }, [isAttemptToChange]);
+  (0, _react.useEffect)(function () {
+    if (value && value !== inputValue) setInputValue(value);
+  }, [value]); //On Input Value Change
 
   (0, _react.useEffect)(function () {
     if (inputValue !== value) setIsFocused(true);
@@ -242,6 +271,7 @@ var NumericInput = function NumericInput(_ref) {
       onBlur: function onBlur() {
         return setEditing(false);
       },
+      onKeyDown: handle.keyDown,
       onKeyUp: handle.keyUp,
       min: min,
       max: max

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

@@ -85,17 +85,37 @@ var _default = {
   }
 };
 exports.default = _default;
+var buttonStyles = {
+  border: 'solid 1px #000',
+  padding: '5px',
+  margin: '20px 0'
+};
 
 var Template = function Template(args) {
-  var _useState = (0, _react.useState)('15000'),
+  var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
       setValue = _useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_NumericInput.default, (0, _extends2.default)({}, args, {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isDsiabled = _useState4[0],
+      setIsDisabled = _useState4[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_NumericInput.default, (0, _extends2.default)({}, args, {
     value: value,
-    onChange: setValue
-  }));
+    onChange: setValue,
+    disabled: isDsiabled
+  })), /*#__PURE__*/_react.default.createElement("button", {
+    style: buttonStyles,
+    onClick: function onClick() {
+      setIsDisabled(true);
+      setTimeout(function () {
+        setValue('500');
+        setIsDisabled(false);
+      }, 1000);
+    }
+  }, "start timeout"));
 };
 
 var NumericInputTemplate = Template.bind({});
@@ -111,7 +131,7 @@ NumericInputTemplate.args = {
   numStep: 100,
   min: '0',
   max: '15000',
-  symbolsLimit: 5,
+  symbolsLimit: 6,
   placeholder: 'Placeholder' // icon: <User />
 
 };

package/dist/Atomic/FormElements/RangeList/RangeList.js

@@ -48,7 +48,7 @@ var RangeList = function RangeList(props) {
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
       disabled = props.disabled,
-      validate = props.validate,
+      validateErrors = props.validateErrors,
       onChange = props.onChange,
       isFloatValues = props.isFloatValues,
       decimalPlaces = props.decimalPlaces,
@@ -67,6 +67,11 @@ var RangeList = function RangeList(props) {
       innerError = _useState4[0],
       setInnerError = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      outerError = _useState6[0],
+      setOuterError = _useState6[1];
+
   var inputFromRef = (0, _react.useRef)(null);
   var inputToRef = (0, _react.useRef)(null);
   var isValidRange = !!(state !== null && state !== void 0 && state.from && state !== null && state !== void 0 && state.to && +(state === null || state === void 0 ? void 0 : state.from) <= +(state === null || state === void 0 ? void 0 : state.to));
@@ -75,13 +80,14 @@ var RangeList = function RangeList(props) {
       return setState(_objectSpread(_objectSpread({}, state), {}, (0, _defineProperty2.default)({}, prop, val)));
     },
     addRange: function addRange() {
-      var _validate;
+      var _validateErrors;
 
-      if (isValidRange && ((_validate = validate === null || validate === void 0 ? void 0 : validate(+state.from, +state.to)) !== null && _validate !== void 0 ? _validate : true)) {
+      if (isValidRange && ((_validateErrors = !(validateErrors !== null && validateErrors !== void 0 && validateErrors(+state.from, +state.to))) !== null && _validateErrors !== void 0 ? _validateErrors : true)) {
         onChange((0, _operations.addRangeDefault)(+state.from, +state.to, value, isFloatValues ? decimalPlaces : null));
         setState(DEFAULT_STATE);
         setInnerError('');
-      } else setInnerError(defaultErrorText);
+        setOuterError('');
+      } else if (!isValidRange) setInnerError(defaultErrorText);else if (validateErrors) setOuterError(validateErrors(+state.from, +state.to));
     },
     removeRange: function removeRange(index) {
       return onChange(value.filter(function (item, idx) {
@@ -93,18 +99,19 @@ var RangeList = function RangeList(props) {
 
       if (!(state !== null && state !== void 0 && state.from) && !(state !== null && state !== void 0 && state.to)) {
         setInnerError('');
+        setOuterError('');
         return e;
       } else if (!state[oppositeKey]) {
         var mustToFocus = key === 'from' ? inputToRef.current : inputFromRef.current;
         mustToFocus.focus();
-      } else if (!isValidRange) setInnerError(defaultErrorText);else {
+      } else if (!isValidRange) {
+        setInnerError(defaultErrorText);
+        if (validateErrors) setOuterError(validateErrors(+state.from, +state.to));
+      } else {
         setInnerError('');
-        return e;
+        if (validateErrors) setOuterError(validateErrors(+state.from, +state.to));
       }
     },
-    onFocus: function onFocus() {
-      return setInnerError('');
-    },
     onKeyUpFromInput: function onKeyUpFromInput(code) {
       if (code === 13) {
         if (isValidRange) inputFromRef.current.blur();else if (!state.to) inputToRef.current.focus();else if (state.from) inputFromRef.current.select();
@@ -135,9 +142,6 @@ var RangeList = function RangeList(props) {
       type: 'int'
     },
     value: state.from,
-    onFocus: function onFocus() {
-      return handle.onFocus();
-    },
     onBlur: function onBlur(e) {
       return handle.rangeValidation(e, 'from');
     },
@@ -158,9 +162,6 @@ var RangeList = function RangeList(props) {
       type: 'int'
     },
     value: state.to,
-    onFocus: function onFocus() {
-      return handle.onFocus();
-    },
     onBlur: function onBlur(e) {
       return handle.rangeValidation(e, 'to');
     },
@@ -174,9 +175,9 @@ var RangeList = function RangeList(props) {
     className: "".concat(RC, "__cell-button")
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: handle.addRange
-  }, "Add"))), (innerError || error) && /*#__PURE__*/_react.default.createElement("span", {
+  }, "Add"))), (innerError || outerError || error) && /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(RC, "__error")
-  }, error || innerError), !(value !== null && value !== void 0 && value.length) && /*#__PURE__*/_react.default.createElement("div", {
+  }, innerError || error || outerError), !(value !== null && value !== void 0 && value.length) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__values"), "".concat(RC, "__null-value"))
   }, NULL_VALUE_TEXT), value.map(function (row, idx) {
     return /*#__PURE__*/_react.default.createElement(_RangeListRow.default, (0, _extends2.default)({

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

@@ -21,7 +21,7 @@ var _RangeList = _interopRequireDefault(require("./RangeList"));
 
 require("./partial/AnyOuterClass.scss");
 
-var _excluded = ["includeOuterStyles", "isAddValidateForExamle", "isUseInitialValues", "initialValues"];
+var _excluded = ["includeOuterStyles", "isAddValidateErrorsForExamle", "isUseErrorsState", "isUseInitialValues", "initialValues"];
 
 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); }
 
@@ -41,7 +41,8 @@ var rootStyles = {
 
 var Template = function Template(args) {
   var includeOuterStyles = args.includeOuterStyles,
-      isAddValidateForExamle = args.isAddValidateForExamle,
+      isAddValidateErrorsForExamle = args.isAddValidateErrorsForExamle,
+      isUseErrorsState = args.isUseErrorsState,
       isUseInitialValues = args.isUseInitialValues,
       initialValues = args.initialValues,
       restArgs = (0, _objectWithoutProperties2.default)(args, _excluded);
@@ -56,14 +57,18 @@ var Template = function Template(args) {
       error = _useState4[0],
       setError = _useState4[1];
 
-  var validateForExample = function validateForExample(from, to) {
-    if (+from < 18) {
-      setError('18 is the minimum allowed value');
-      return false;
-    } else {
-      setError('');
-      return true;
-    }
+  var getValidate = function getValidate(isUseState) {
+    return function (from, to) {
+      var errorText = '18 is the minimum allowed value';
+
+      if (+from < 18) {
+        if (isUseState) setError(errorText);
+        return errorText;
+      } else {
+        if (isUseState) setError('');
+        return '';
+      }
+    };
   };
 
   (0, _react.useEffect)(function () {
@@ -79,7 +84,7 @@ var Template = function Template(args) {
       return setValue(val);
     },
     error: error,
-    validate: isAddValidateForExamle ? validateForExample : null
+    validateErrors: isAddValidateErrorsForExamle ? getValidate(isUseErrorsState) : null
   })));
 };
 
@@ -87,7 +92,8 @@ var RangeListTemplate = Template.bind({});
 exports.RangeListTemplate = RangeListTemplate;
 RangeListTemplate.args = {
   includeOuterStyles: false,
-  isAddValidateForExamle: true,
+  isAddValidateErrorsForExamle: true,
+  isUseErrorsState: false,
   disabled: false,
   isFloatValues: false,
   decimalPlaces: 2,