intelicoreact 0.0.76 → 0.0.81

package/dist/Atomic/FormElements/NumericInput/NumericInput.scss

@@ -0,0 +1,135 @@
+.input {
+  position: relative;
+  word-break: break-all;
+  border: none;
+  background: none;
+  padding: 0 10px;
+  width: 100%;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  &__wrap {
+    display: flex;
+    align-items: center;
+    border: 1px solid #e2e5ec;
+    box-sizing: border-box;
+    background-color: #fff;
+    height: 28px;
+    border-radius: 4px;
+
+    &_focus {
+      border-color: #6b81dd;
+      filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
+    }
+
+    &_disabled {
+      background: #f7f8fa;
+      opacity: 0.5;
+      border-color: #a6acb1;
+      pointer-events: none;
+    }
+
+    &_error {
+      border-color: #f06d8d;
+    }
+  }
+
+  &_disabled {
+    background: #f7f8fa;
+    opacity: 0.5;
+    border-color: #a6acb1;
+    pointer-events: none;
+  }
+
+  &_error {
+    border-color: #f06d8d;
+  }
+
+  svg {
+    margin-right: 4px;
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    font-size: 13px;
+    font-weight: 400;
+    color: #1e1e2d;
+    border: none;
+    padding: 0 5px;
+    border-radius: 4px;
+  }
+
+  &__close {
+    position: relative;
+    opacity: 0.6;
+    width: 14px;
+    height: 14px;
+    background: none;
+    cursor: pointer;
+    margin-right: 4px;
+    visibility: hidden;
+    pointer-events: none;
+    &:hover {
+      opacity: 1;
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+      height: 14px;
+      width: 2px;
+      background-color: #9aa0b9;
+    }
+
+    &:before {
+      transform: rotate(45deg);
+    }
+
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+
+  &__nums {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  &__num-btn {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 24px;
+    border-left: 1px solid #e2e5ec;
+    background: none;
+    font-size: 20px;
+    user-select: none;
+    &.disabled {
+      opacity: 0.3;
+    }
+    svg {
+      margin-right: 0;
+    }
+  }
+
+  &-label {
+    margin-bottom: 5px;
+  }
+}
+
+.input__wrap:hover .input__close {
+  visibility: visible;
+  pointer-events: all;
+}

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/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.76",
-  "description": "Date range fixes and dropdown refactor",
+  "version": "0.0.81",
+  "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

@@ -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>
   );
 };

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import {User} from 'react-feather';
+import { User } from 'react-feather';
 import Input from './Input';
 
 global.lng = 'en';
@@ -9,48 +9,65 @@ export default {
   component: Input,
   argTypes: {
     disabled: {
-      description: 'boolean',
+      description: 'boolean'
     },
     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'
     },
-    isNumeric: {
-      description: 'boolean - add plus/minus buttons, force input to numeric type'
-    },
-    numStep: {
-      description: 'number/text - plus/minus buttons factor (default: 1)'
+    isOnlyNumber: {
+      description: 'boolean - only numbers'
     },
-    min: {
-      description: 'number/text - minimal number for numeric input'
+    isOnlyString: {
+      description: 'boolean - only strings'
     },
-    max: {
-      description: 'number/text - maximal number for numeric input'
+    isTwoDigitAfterDot: {
+      description: 'boolean - only two digits after dot'
     },
     placeholder: {
       description: 'text'
     },
     type: {
-      description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
+      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']
+        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' },
+    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' }
   }
 };
 
-const Template = args => {
+const Template = (args) => {
   const [value, setValue] = useState('');
   return <Input {...args} value={value} onChange={setValue} />;
 };
@@ -59,21 +76,15 @@ export const InputTemplate = Template.bind({});
 
 InputTemplate.args = {
   type: 'text',
+  isOnlyNumber: false,
+  isOnlyString: false,
+  isPriceInput: false,
+  isTwoDigitAfterDot: false,
   disabled: false,
   error: '',
+  mask: '',
   withDelete: true,
-  isNumeric: false,
-  numStep: 1,
-  min: '0',
-  max: '5',
+  symbolsLimit: 255,
   placeholder: 'Placeholder',
-  // mask: 'nnnnn0129',
-  // maskChar: '_',
-  // formatChars: {
-  //   'n': '[0-9]',
-  //   's': '[A-Za-z]',
-  //   '*': '[A-Za-z0-9]'
-  // },
-  icon: <User />,
-  symbolsLimit: 225
+  icon: <User />
 };