intelicoreact 0.0.7 → 0.0.8

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

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumericInputTemplate = 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 _NumericInput = _interopRequireDefault(require("./NumericInput"));
+
+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/NumericInput',
+  component: _NumericInput.default,
+  argTypes: {
+    disabled: {
+      description: 'boolean'
+    },
+    isInitialFocus: {
+      description: 'boolean - if true, the input will be focused on mount'
+    },
+    error: {
+      description: 'text - coloring input if is errored'
+    },
+    isPriceInput: {
+      description: 'boolean - if true, the input will be styled as PriceInput'
+    },
+    withDelete: {
+      description: 'boolean - add clear-cross by hover'
+    },
+    numStep: {
+      description: 'number/text - plus/minus buttons factor (default: 1)'
+    },
+    min: {
+      description: 'number/text - minimal number for numeric input'
+    },
+    max: {
+      description: 'number/text - maximal number for numeric input'
+    },
+    placeholder: {
+      description: 'text'
+    },
+    type: {
+      description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
+      control: {
+        type: 'select',
+        options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
+      }
+    },
+    icon: {
+      description: 'JSX'
+    },
+    value: {
+      description: '(* - required prop)'
+    },
+    className: {
+      description: 'string'
+    },
+    mask: {
+      description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
+    },
+    symbolsLimit: {
+      description: 'Set limit of symbols in input, overhead will be ignored'
+    },
+    onBlur: {
+      description: 'custom callback on blur'
+    },
+    onFocus: {
+      description: 'custom callback on focus'
+    },
+    onKeyUp: {
+      description: 'custom callback on keyup, returns event keyCode'
+    }
+  }
+};
+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];
+
+  return /*#__PURE__*/_react.default.createElement(_NumericInput.default, (0, _extends2.default)({}, args, {
+    value: value,
+    onChange: setValue
+  }));
+};
+
+var NumericInputTemplate = Template.bind({});
+exports.NumericInputTemplate = NumericInputTemplate;
+NumericInputTemplate.args = {
+  type: 'text',
+  disabled: false,
+  error: '',
+  isPriceInput: false,
+  mask: '',
+  withDelete: true,
+  isNumeric: false,
+  numStep: 100,
+  min: '0',
+  max: '15000',
+  symbolsLimit: 2,
+  placeholder: 'Placeholder',
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
+};

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

@@ -58,9 +58,9 @@ var Arrow = function Arrow(_ref) {
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M15 18L9 12L15 6",
     stroke: color,
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   })) : /*#__PURE__*/_react.default.createElement("svg", {
     width: "24",
     height: "24",
@@ -70,9 +70,9 @@ var Arrow = function Arrow(_ref) {
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M9 18L15 12L9 6",
     stroke: color,
-    "stroke-width": "2",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
   })));
 };
 

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/dist/Functions/inputExecutor.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatInput = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var formatInput = {
+  priceInput: {
+    addCommas: function addCommas(value) {
+      value = value.toString();
+      var isFraction = value.includes('.');
+      var valueBeforeDot = isFraction ? value.slice(0, value.indexOf('.')) : value;
+      var intPart = valueBeforeDot.split('').reverse().reduce(function (acc, item, idx) {
+        return idx % 3 === 0 && idx !== 0 ? [].concat((0, _toConsumableArray2.default)(acc), [',', item]) : [].concat((0, _toConsumableArray2.default)(acc), [item]);
+      }, []).reverse().join('');
+      return isFraction ? intPart + value.slice(value.indexOf('.')) : intPart;
+    },
+    removeComma: function removeComma(value) {
+      return parseFloat(value.toString().replace(/\,/g, ''));
+    }
+  },
+  onlyNumbers: function onlyNumbers(value) {
+    var isDot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var val = value.slice(0, 1) !== '0' && value.slice(0, 1) !== '.' ? value : value.slice(1);
+    if (isDot) return twoDigitAfterDot(val.replace(/[^0-9.]/g, ''));else return +val.toString().replace(/\D/g, '');
+  },
+  onlyString: function onlyString(value) {
+    return value.toString().replace(/[^a-z]/gi, '');
+  }
+}; //обрезает числа после точки до 2х
+// 342.23423432 -> 342.23
+
+exports.formatInput = formatInput;
+
+var twoDigitAfterDot = function twoDigitAfterDot(value) {
+  if (value.includes('.')) {
+    var valueAfterDot = value.slice(0, value.indexOf('.') + 3);
+    var rest = value.slice(value.indexOf('.') + 1, value.indexOf('.') + 3);
+    return allButTheFirstDotCutter(valueAfterDot);
+  } else {
+    return value;
+  }
+}; //обрезает все точки кроме первой.
+//для фомата "2 цифры после точки"
+// нельзя = 123...
+// можно 123.99
+
+
+function allButTheFirstDotCutter(str) {
+  return str.replace(/^([^.]*\.)(.*)$/, function (a, b, c) {
+    return b + c.replace(/\./g, '');
+  });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.7",
-  "description": "Date range fixes",
+  "version": "0.0.8",
+  "description": "",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -14,14 +14,15 @@
     "moment-timezone": "^0.5.34",
     "react": "^17.0.2",
     "react-feather": "^2.0.9",
-    "react-input-mask": "^2.0.4"
+    "react-input-mask": "^2.0.4",
+    "classnames": "^2.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.7",
     "@babel/core": "^7.15.5",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.15.6",
-    "anme": "^1.0.0",
-    "classnames": "^2.3.1"
+    "anme": "^1.0.0"
+
   }
 }

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

@@ -1,78 +1,76 @@
 import React, { useState, useRef, useEffect } from 'react';
 import cn from 'classnames';
 import { Check, ChevronDown, ChevronUp } from 'react-feather';
-import Label from '../Label/Label';
 
 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);
-
+  if (!options) return null;
   const filteredGroups = options
-    .filter((item) => item.items?.length)
-    .map((item) => ({ ...item, items: item.items.filter((el) => el?.label?.toLowerCase().includes(searchValue?.toLowerCase() || '')) }))
-    .filter((item) => item.items?.length > 0);
+    .filter(item => item.items?.length)
+    .map(item => ({ ...item, items: item.items.filter(el => el?.label?.toLowerCase().includes(searchValue?.toLowerCase() || '')) }))
+    .filter(item => item.items?.length > 0);
 
   const filteredItems = options
-    .filter((item) => !item.items?.length)
-    .filter((item) => item?.label?.toLowerCase().includes(searchValue?.toLowerCase() || ''));
+    .filter(item => !item.items?.length)
+    .filter(item => item?.label?.toLowerCase().includes(searchValue?.toLowerCase() || ''));
 
-  let filteredOptions = [...filteredItems, ...filteredGroups];
+  const filteredOptions = [...filteredItems, ...filteredGroups];
 
   const modalBtnTrigger = entity && entity !== '' && typeof entity === 'string';
-  //decorator
-  const getDepends = (modalBtnTrigger, item) => {
-    const newOnChange = (item) => {
-      if (item.value === 'open_modal') {
+  const onChangeHandler = item => {
+    setIsOpen(false);
+    setSearchValue(null);
+    onChange(item.value);
+  };
+  // decorator
+  const getDepends = getDependsTrigger => {
+    const newOnChange = e => {
+      if (e.value === 'open_modal') {
         onChange('open_modal');
       } else {
-        onChangeHandler(item);
+        onChangeHandler(e);
       }
     };
 
-    //add pseudo option
+    // add pseudo option
     const newOptions = [
       {
-        label: 'New ' + entity,
+        label: `New ${entity}`,
         value: 'open_modal',
-        className: 'dropdown__list-item--modal',
+        className: 'dropdown__list-item--modal'
       },
-      ...filteredOptions,
+      ...filteredOptions
     ];
 
     return {
-      onChange: (item) => (modalBtnTrigger ? newOnChange(item) : onChangeHandler(item)),
-      options: modalBtnTrigger ? newOptions : options,
+      onChange: changeItem => (getDependsTrigger ? newOnChange(changeItem) : onChangeHandler(changeItem)),
+      options: getDependsTrigger ? newOptions : options
     };
   };
 
-  const handleClickOutside = (event) => {
+  const handleClickOutside = event => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsOpen(false);
       setSearchValue(null);
     }
   };
 
-  const onChangeHandler = (item) => {
-    setIsOpen(false);
-    setSearchValue(null);
-    onChange(item.value);
-  };
-
-  const onSearchHandler = (name) => {
+  const onSearchHandler = name => {
     setSearchValue(name);
   };
 
-  const hightlightedText = (text) =>
-    searchValue ? text?.replace(new RegExp(searchValue, 'i'), (match) => `<span class="bg--yellow">${match}</span>`) : text;
+  const hightlightedText = text =>
+    searchValue ? text?.replace(new RegExp(searchValue, 'i'), match => `<span class="bg--yellow">${match}</span>`) : text;
 
   const depend = getDepends(modalBtnTrigger);
 
-  const getMarkupForElement = (item) =>
+  const getMarkupForElement = item =>
     item.label.toLowerCase().includes(searchValue?.toLowerCase() || '') ? (
       <button
         key={item.value}
@@ -92,17 +90,16 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
     return () => document.removeEventListener('click', handleClickOutside, true);
   }, [value]);
 
-  const filteredOptionList = (filteredOption) =>
+  const filteredOptionList = filteredOption =>
     filteredOption.items?.length > 0 ? (
       <div key={filteredOption.value} className={`${RC}-group`}>
         <div className={`${RC}-group__name`}>{filteredOption.label}</div>
-        {filteredOption.items.map((el) => getMarkupForElement(el))}
+        {filteredOption.items.map(el => getMarkupForElement(el))}
       </div>
     ) : null;
 
   const selectedLabel =
-    options.find((el) => el.value === value)?.label ||
-    options.reduce((acc, item) => acc || item.items?.find((el) => el.value === value)?.label, null);
+    options.find(el => el.value === value)?.label || options.reduce((acc, item) => acc || item.items?.find(el => el.value === value)?.label, null);
 
   return (
     <div className={cn(RC, className)} ref={dropdownRef}>
@@ -113,9 +110,9 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
         {isSearchable ? (
           <input
             className={`${RC}__input`}
-            value={searchValue || filteredOptions.find(el => el.value === value)?.label  || ''}
-            onChange={(e) => {
-              onSearchHandler(e.target.value)
+            value={searchValue || filteredOptions.find(el => el.value === value)?.label || ''}
+            onChange={e => {
+              onSearchHandler(e.target.value);
             }}
             placeholder={placeholder}
             onFocus={e => {
@@ -132,7 +129,7 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
       </button>
       {isOpen && filteredOptions.length > 0 && (
         <div className={`${RC}__list`}>
-          {depend.options.map((filteredOption) =>
+          {depend.options.map(filteredOption =>
             filteredOption.items?.length ? filteredOptionList(filteredOption) : getMarkupForElement(filteredOption)
           )}
         </div>

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

@@ -1,64 +1,113 @@
 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 { formatInput } from '../../../Functions/inputExecutor';
 
 import './Input.scss';
 
 const Input = ({
   onChange,
+  onBlur,
+  onFocus,
+  onKeyUp,
+  isNotBlinkErrors,
+  isPriceInput,
+  isOnlyNumber,
+  isOnlyString,
+  isTwoDigitAfterDot,
   disabled,
   withDelete,
-  isNumeric,
-  numStep = 1,
-  min = 0,
-  max,
   value,
   placeholder,
   className,
   type = 'text',
-  onBlur,
-  onFocus,
-  onKeyUp,
   mask,
   maskChar,
   formatChars,
   error,
   icon,
   symbolsLimit,
+  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);
+
+  const { onlyNumbers, onlyString } = formatInput;
+  const { addCommas, removeComma } = formatInput.priceInput;
   // HANDLES
   const handle = {
-    change: e => {
+    change: (e) => {
       let inputValue = e.target ? e.target.value : e;
-      if (isNumeric || (type === 'number' && inputValue !== '')) {
-        inputValue = parseFloat(inputValue) || '';
-        if (min && +min > inputValue) {
-          inputValue = min;
-        } else if (max && +max < inputValue) inputValue = max;
-      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
+      if (symbolsLimit && inputValue.length > +symbolsLimit) {
+        inputValue = inputValue.substring(0, +symbolsLimit);
+      }
+
+      if (isOnlyNumber && !isTwoDigitAfterDot)
+        inputValue = onlyNumbers(inputValue);
+      if (isTwoDigitAfterDot) inputValue = onlyNumbers(inputValue, true);
+      if (isOnlyString) inputValue = onlyString(inputValue);
+
       onChange(inputValue.toString());
     },
     toggleEdit: () => {
       setEditing(!isEditing);
       onChange('');
     },
-    focus: e => {
+    focus: (e) => {
       setIsFocused(true);
+      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot)
+        onChange(removeComma(value));
+
       if (onFocus) onFocus(e);
     },
-    blur: e => {
+    blur: (e) => {
       setIsFocused(false);
       setEditing(false);
+      if (isPriceInput && isOnlyNumber && !isTwoDigitAfterDot) {
+        onChange(addCommas(value));
+      }
+      if (isTwoDigitAfterDot && !isPriceInput) {
+        onChange(cutOffsingleDot(value));
+      }
       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);
+
+        console.log(changedValue, previousValue);
+        if (KEYBOARD_SERVICE_KEYS.includes(e.key) || !currentSet)
+          previousValueRef.current = value;
+        else previousValueRef.current = previousValue + currentSet[0];
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e);
+    }
   };
 
+  function cutOffsingleDot(value) {
+    return value.slice(-1) === '.' ? value.slice(0, -1) : value;
+  }
+
   useEffect(() => {
     if (isEditing) inputRef.current.focus();
   }, [isEditing, isFocused]);
@@ -72,10 +121,8 @@ const Input = ({
     onFocus: handle.focus,
     onBlur: handle.blur,
     onKeyUp: handle.keyUp,
-    min,
-    max,
     ...(maskChar ? { maskChar } : {}),
-    ...(formatChars ? { formatChars } : {}),
+    ...(formatChars ? { formatChars } : {})
   };
 
   function renderInput() {
@@ -84,34 +131,37 @@ const Input = ({
     }
 
     return (
-      <>
-        <input {...uniProps} ref={inputRef} type={isNumeric ? 'number' : type} />
-        {isNumeric && (
-          <div className="input__nums">
-            <button onClick={() => handle.change(value - numStep)} className={cn(`input__num-btn`, { disabled: value <= min })}>
-              <Minus />
-            </button>
-            <button onClick={() => handle.change(+value + +numStep)} className={cn(`input__num-btn`, { disabled: value >= max })}>
-              <Plus />
-            </button>
-          </div>
-        )}
-      </>
+      <input {...uniProps} ref={inputRef} type={isPriceInput ? 'text' : type} />
     );
   }
 
+  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 }
       )}
     >
       {renderInput()}
       {icon}
-      {withDelete && !isNumeric && <span className={cn(`input__close`, { hidden: !value })} onClick={handle.toggleEdit} />}
+      {withDelete && (
+        <span
+          className={cn(`input__close`, { hidden: !value })}
+          onClick={handle.toggleEdit}
+        />
+      )}
     </div>
   );
 };