intelicoreact 0.1.34 → 0.1.37

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

@@ -0,0 +1,138 @@
+.input-mask_wrapper {
+  outline: none;
+  display: block;
+  // width: fit-content;
+  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;
+      }
+    }
+
+    &_hint{
+      display: flex;
+      text-align: center;
+      align-items: center;
+
+      & .hint__text_right{
+        top: 50%;
+        left: 24px;
+        transform: translateY(-50%);
+
+        &::before{
+          top: calc(50% - 4px);
+          left: -3px;
+        }
+      }
+
+      & .hint__text_left{
+        top: 50%;
+        right: 32px;
+        transform: translateY(-50%);
+
+        &::before{
+          top: calc(50% - 4px);
+          right: -3px;
+        }
+      }
+
+      &--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{
+        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,247 @@
+"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
+    },
+    imitateTypingOnPaste: {
+      type: 'boolean',
+      description: '<b>Manual Input Simulation Mode</b> when called <b>Pasting Text Event</b>.',
+      default: false
+    },
+    imitateTypingOnPasteDelay: {
+      type: 'number',
+      description: '<b>Delay Time</b> for <b>Manual Input Simulation Mode</b> when called <b>Pasting Text Event</b>.',
+      default: 100
+    },
+    showHint: {
+      type: 'boolean',
+      description: 'Turn <b>On/Off</b> Input Hint.',
+      default: false
+    },
+    hintText: {
+      type: 'string',
+      description: 'Input Hint Text.',
+      default: ''
+    },
+    hintClassName: {
+      type: 'string',
+      description: 'ClassName for Input Hint.',
+      default: ''
+    },
+    isHintLeft: {
+      type: 'boolean',
+      default: false,
+      description: 'Display Input Hint on Left Side.'
+    },
+    isHintRight: {
+      type: 'boolean',
+      default: true,
+      description: 'Display Input Hint on Right Side.'
+    },
+    hintPosition: {
+      type: 'string',
+      description: 'Position of <b>Input Hint Text</b>',
+      default: 'right'
+    }
+  }
+};
+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: 'DDDD DDDD DDDD DDDD',
+  maskPatternPlaceholder: 'xxxx xxxx xxxx xxxx',
+  usePatternPlaceholder: false,
+  maskPlaceholder: '_',
+  maskDigitPlaceholder: '',
+  maskLetterPlaceholder: '',
+  isCaseSensitive: false,
+  adaptTextCase: false,
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Type, null),
+  showIcon: false,
+  isIconLeft: true,
+  isIconRight: false,
+  isClearable: true,
+  value: '',
+  onChange: function onChange() {},
+  blinkErrors: false,
+  blinkDuration: 100,
+  showNativeErrors: true,
+  errors: {},
+  onFocus: function onFocus() {},
+  onBlur: function onBlur() {},
+  className: '',
+  isFocusedDefault: false,
+  imitateTypingOnPaste: false,
+  imitateTypingOnPasteDelay: 100,
+  showHint: false,
+  hintText: 'Hint Text',
+  hintClassName: '',
+  isHintRight: true,
+  isHintLeft: false,
+  hintPosition: 'right'
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectElementContents = exports.copyToClipboard = exports.resetSelectionText = exports.getSelectionText = void 0;
+
+var getSelectionText = function getSelectionText() {
+  var text = "";
+
+  if (window.getSelection) {
+    text = window.getSelection().toString();
+  } else if (document.selection && document.selection.type != "Control") {
+    text = document.selection.createRange().text;
+  }
+
+  return text.replace(/\n/g, '');
+};
+
+exports.getSelectionText = getSelectionText;
+
+var resetSelectionText = function resetSelectionText() {
+  if (window.getSelection) {
+    window.getSelection().removeAllRanges();
+  }
+};
+
+exports.resetSelectionText = resetSelectionText;
+
+var copyToClipboard = function copyToClipboard(str) {
+  if (navigator && navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(str);
+  return Promise.reject('The Clipboard API is not available.');
+};
+
+exports.copyToClipboard = copyToClipboard;
+
+var selectElementContents = function selectElementContents(el) {
+  var range = document.createRange();
+  range.selectNodeContents(el);
+  var sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+};
+
+exports.selectElementContents = selectElementContents;

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 />
 
 };