intelicoreact 0.0.73 → 0.0.77

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -36,7 +36,8 @@ var RC = 'dropdown';
 var Dropdown = function Dropdown(_ref) {
   var _options$find, _filteredOptions$find;
 
-  var options = _ref.options,
+  var _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
       value = _ref.value,
       error = _ref.error,
       onChange = _ref.onChange,

package/dist/Atomic/FormElements/Input/Input.js

@@ -23,6 +23,8 @@ var _reactFeather = require("react-feather");
 
 var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
+var _index = require("../../../Constants/index.constants");
+
 require("./Input.scss");
 
 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); }
@@ -56,9 +58,11 @@ var Input = function Input(_ref) {
       formatChars = _ref.formatChars,
       error = _ref.error,
       icon = _ref.icon,
-      symbolsLimit = _ref.symbolsLimit;
+      symbolsLimit = _ref.symbolsLimit,
+      isNotBlinkErrors = _ref.isNotBlinkErrors,
+      blinkTime = _ref.blinkTime;
+  var DEFAULT_BLINK_TIME = 100; // STATES
 
-  // STATES
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isFocused = _useState2[0],
@@ -69,7 +73,19 @@ var Input = function Input(_ref) {
       isEditing = _useState4[0],
       setEditing = _useState4[1];
 
-  var inputRef = (0, _react.useRef)(null); // HANDLES
+  var inputRef = (0, _react.useRef)(null);
+  var previousValueRef = (0, _react.useRef)(value);
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isAttemptToChange = _useState6[0],
+      setIsAttemptToChange = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isToHighlightError = _useState8[0],
+      setIsToHighlightError = _useState8[1]; // HANDLES
+
 
   var handle = {
     change: function change(e) {
@@ -99,7 +115,21 @@ var Input = function Input(_ref) {
       if (onBlur) onBlur(e);
     },
     keyUp: function keyUp(e) {
-      return onKeyUp ? onKeyUp(e.keyCode, event) : null;
+      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.slice(previousValue.length - changedValue.length);else return changedValue.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];
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
     }
   };
   (0, _react.useEffect)(function () {
@@ -153,8 +183,17 @@ var Input = function Input(_ref) {
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
   }
 
+  (0, _react.useEffect)(function () {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(null);
+      setIsToHighlightError(true);
+      setTimeout(function () {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
+    className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error || isToHighlightError), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
   }, renderInput(), icon, withDelete && !isNumeric && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("input__close", {
       hidden: !value

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

@@ -102,14 +102,14 @@ var Template = function Template(args) {
 var InputTemplate = Template.bind({});
 exports.InputTemplate = InputTemplate;
 InputTemplate.args = {
-  type: 'text',
+  type: 'number',
   disabled: false,
   error: '',
   withDelete: true,
   isNumeric: false,
   numStep: 1,
-  min: '0',
-  max: '5',
+  // min: '0',
+  // max: '5',
   placeholder: 'Placeholder',
   // mask: 'nnnnn0129',
   // maskChar: '_',

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js

@@ -96,20 +96,14 @@ var InputDateRange = function InputDateRange(props) {
     return formatedValue;
   };
 
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      mountDate = _useState6[0],
-      setMD = _useState6[1];
-
-  (0, _react.useEffect)(function () {
-    if (value && !mountDate) {
-      setMD(true);
-      handleChange(_objectSpread({}, value));
-    }
-  }, [value]);
-
   var Range = function Range() {
     var SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
+
+    if (!actualValues.start && value.start) {
+      actualValues.start = value.start;
+      actualValues.end = value.end || '';
+    }
+
     var start = actualValues.start,
         end = actualValues.end;
     if (!start || !end) return null;

package/dist/Atomic/UI/Arrow/Arrow.js

@@ -37,7 +37,8 @@ var Arrow = function Arrow(_ref) {
       setColor = _useState2[1];
 
   (0, _react.useEffect)(function () {
-    if (ref.current) {//setColor(getStyles(ref.current, 'color'));
+    if (ref.current) {
+      setColor((0, _utils.getStyles)(ref.current, 'color'));
     }
 
     ;

package/dist/Constants/index.constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KEYBOARD_SERVICE_KEYS = void 0;
+var KEYBOARD_SERVICE_KEYS = ['Escape', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12', 'Tab', 'CapsLock', 'Shift', 'Control', 'Meta', 'Option', 'Alt', 'ContextMenu', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'NumLock', 'Backspace', 'Delete', 'Enter', 'Return', 'Insert', 'Home', 'End', 'PageUp', 'PageDown', 'PrintScreen', 'ScrollLock', 'Pause'];
+exports.KEYBOARD_SERVICE_KEYS = KEYBOARD_SERVICE_KEYS;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.73",
-  "description": "Date range fixes and dropdown refactor",
+  "version": "0.0.77",
+  "description": "",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/Atomic/FormElements/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@ import './Dropdown.scss';
 
 const RC = 'dropdown';
 
-const Dropdown = ({ options, value, error, onChange, placeholder, className, isSearchable, entity }) => {
+const Dropdown = ({ options = [], value, error, onChange, placeholder, className, isSearchable, entity }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const dropdownRef = useRef(null);

package/src/Atomic/FormElements/Input/Input.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import cn from 'classnames';
 import { Minus, Plus } from 'react-feather';
 import InputMask from 'react-input-mask';
+import { KEYBOARD_SERVICE_KEYS } from '../../../Constants/index.constants';
 
 import './Input.scss';
 
@@ -26,11 +27,17 @@ const Input = ({
   error,
   icon,
   symbolsLimit,
+  isNotBlinkErrors,
+  blinkTime,
 }) => {
+  const DEFAULT_BLINK_TIME = 100;
   // STATES
   const [isFocused, setIsFocused] = useState(false);
   const [isEditing, setEditing] = useState(false);
   const inputRef = useRef(null);
+  const previousValueRef = useRef(value);
+  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+  const [isToHighlightError, setIsToHighlightError] = useState(false);
   // HANDLES
   const handle = {
     change: e => {
@@ -56,7 +63,22 @@ const Input = ({
       setEditing(false);
       if (onBlur) onBlur(e);
     },
-    keyUp: e => (onKeyUp ? onKeyUp(e.keyCode, event) : null)
+    keyUp: e => {
+      if (!isNotBlinkErrors) {
+        const changedValue = '' + (value ?? '');
+        const previousValue = '' + (previousValueRef.current ?? '');
+        const currentSet = (() => {
+          if (previousValue.length < changedValue.length) return value.slice(previousValue.length - changedValue.length);
+          else return changedValue.includes(e.key) ? e.key : '';
+        })();
+
+        if(!KEYBOARD_SERVICE_KEYS.includes(e.key) && changedValue === previousValue) setIsAttemptToChange(true);
+        if (KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet) previousValueRef.current = value;
+        else previousValueRef.current = previousValue + currentSet[0];
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
+    }
   };
 
   useEffect(() => {
@@ -99,13 +121,23 @@ const Input = ({
       </>
     );
   }
+      
+  useEffect(() => {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(null);
+      setIsToHighlightError(true);
+      setTimeout(() => {
+        setIsToHighlightError(false)
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
 
   return (
     <div
       className={cn(
         `input__wrap`,
         { [`input__wrap_focus`]: isFocused },
-        { [`input__wrap_error`]: error },
+        { [`input__wrap_error`]: error || isToHighlightError },
         { [`input__wrap_disabled`]: disabled }
       )}
     >

package/src/Atomic/FormElements/Input/Input.stories.js

@@ -58,14 +58,14 @@ const Template = args => {
 export const InputTemplate = Template.bind({});
 
 InputTemplate.args = {
-  type: 'text',
+  type: 'number',
   disabled: false,
   error: '',
   withDelete: true,
   isNumeric: false,
   numStep: 1,
-  min: '0',
-  max: '5',
+  // min: '0',
+  // max: '5',
   placeholder: 'Placeholder',
   // mask: 'nnnnn0129',
   // maskChar: '_',

package/src/Atomic/FormElements/InputDateRange/InputDateRange.js

@@ -49,17 +49,12 @@ const InputDateRange = props => {
     return formatedValue;
   };
 
-  const [mountDate, setMD] = useState(false);
-
-  useEffect(() => {
-    if (value && !mountDate) {
-      setMD(true);
-      handleChange({ ...value });
-    }
-  }, [value]);
-
   const Range = () => {
     const SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
+    if (!actualValues.start && value.start) {
+      actualValues.start = value.start;
+      actualValues.end = value.end || '';
+    }
     const { start, end } = actualValues;
     if (!start || !end) return null;
 
@@ -162,7 +157,7 @@ const InputDateRange = props => {
               <div className="date-range-input__interval-key">
                 <span>
                   {(txt?.labels && txt.labels[actualValues?.intervalKey]) ??
-                    (INTERVALS[actualValues?.intervalKey]?.label || CUSTOM_INTERVAL_KEY_TEXT)}
+                  (INTERVALS[actualValues?.intervalKey]?.label || CUSTOM_INTERVAL_KEY_TEXT)}
                 </span>
                 {current !== ALL_TIME_KEY && <span>:</span>}
               </div>

package/src/Atomic/UI/Arrow/Arrow.js

@@ -12,7 +12,7 @@ const Arrow = ({type, className, onClick, disabled}) => {
 
   useEffect(() => {
     if (ref.current) {
-      //setColor(getStyles(ref.current, 'color'));
+      setColor(getStyles(ref.current, 'color'));
     };
   }, [ref.current]);
 

package/src/Constants/index.constants.js

@@ -0,0 +1,41 @@
+
+export const KEYBOARD_SERVICE_KEYS = [
+  'Escape',
+  'F1',
+  'F2',
+  'F3',
+  'F4',
+  'F5',
+  'F6',
+  'F7',
+  'F8',
+  'F9',
+  'F10',
+  'F11',
+  'F12',
+  'Tab',
+  'CapsLock',
+  'Shift',
+  'Control',
+  'Meta',
+  'Option',
+  'Alt',
+  'ContextMenu',
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+  'NumLock',
+  'Backspace',
+  'Delete',
+  'Enter',
+  'Return',
+  'Insert',
+  'Home',
+  'End',
+  'PageUp',
+  'PageDown',
+  'PrintScreen',
+  'ScrollLock',
+  'Pause'
+];