intelicoreact 0.0.76 → 0.0.81

package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -205,7 +205,7 @@
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     background: #FFFFFF;
-
+    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
     &_right-position-once-element {
       justify-content: flex-end;
     }
@@ -222,15 +222,15 @@
     position: relative;
 
     width: 100%;
-    padding: 4px 8px 4px 32px;
+    padding: 0 20px 0 30px;
 
     text-transform: capitalize;
     white-space: nowrap;
     font-style: normal;
     font-weight: 300;
     font-family: var(--font-family);
-    font-size: var(--font-size);
-    line-height: var(--line-height);
+    font-size: 12px;
+    line-height: 24px;
     cursor: pointer;
 
     display: flex;
@@ -242,6 +242,9 @@
       // background-color: rgba(128, 128, 128, 0.1);
       background-color: #F2F2F8;
     }
+    &_active {
+      background: #f2f2f8;
+    }
 
     &-icon-active {
       position: absolute;
@@ -293,7 +296,7 @@
 
     &>div:not(.date-picker__inputs-separator) {
       width: 110px;
-      height: 100%;
+      min-height: 100%;
       margin-right: 9px;
 
       border: 1px solid var(--border-color);
@@ -323,6 +326,9 @@
     .date-picker__inputs-separator {
       margin-right: 9px;
     }
+    input {
+      font-weight: 300;
+    }
   }
 
   &__date-input {
@@ -348,7 +354,7 @@
 
     &>.dropdown__trigger {
       width: 100%;
-      height: 100%;
+      height: 28px;
       padding-left: 10px;
       padding-right: 15px;
 
@@ -592,3 +598,27 @@
     height: 100%;
   }
 }
+
+@media screen and (max-width: 992px) {
+  .opened-part__intervals-list {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 745px) {
+  .date-picker__inputs-block {
+    flex-flow: wrap;
+  }
+
+  .date-picker__header {
+    flex-flow: row wrap
+  }
+  .date-picker__calendars-wrapper {
+    display: block;
+    margin: auto;
+  }
+  .date-picker__calendars .range-calendar {
+    margin: 0!important;
+    width: 100%;
+  }
+}

package/src/Atomic/FormElements/NumericInput/NumericInput.js

@@ -0,0 +1,220 @@
+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 './NumericInput.scss';
+
+const NumericInput = ({
+  onChange,
+  disabled,
+  withDelete,
+  numStep = 1,
+  min = 0,
+  max,
+  value,
+  placeholder,
+  className,
+  type = 'number',
+  onBlur,
+  onFocus,
+  onKeyUp,
+  mask,
+  maskChar,
+  formatChars,
+  error,
+  icon,
+  symbolsLimit,
+  isNotBlinkErrors,
+  blinkTime,
+  isPriceInput
+}) => {
+  const DEFAULT_BLINK_TIME = 200;
+  // STATES
+  const [isFocused, setIsFocused] = useState(false);
+  const [isEditing, setEditing] = useState(false);
+  const inputRef = useRef(null);
+  const decRef = useRef(null);
+  const incRef = useRef(null);
+  const previousValueRef = useRef(value);
+  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+  const [isToHighlightError, setIsToHighlightError] = useState(false);
+
+  const [intMemoVal, setIntMemoVal] = useState(0);
+
+  const { onlyNumbers } = formatInput;
+  const { addCommas, removeComma } = formatInput.priceInput;
+
+  // HANDLES
+  const handle = {
+    change: (e) => {
+      let inputValue = e.target ? onlyNumbers(e.target.value) : e;
+      if (inputValue !== '') {
+        inputValue = parseFloat(inputValue) || '';
+        if (min && +min > inputValue) {
+          inputValue = min;
+        } else if (max && +max < inputValue) inputValue = max;
+      }
+      if (symbolsLimit) {
+        inputValue = inputValue.toString().substring(0, +symbolsLimit);
+      }
+
+      setIntMemoVal(parseFloat(inputValue));
+      onChange(inputValue.toString());
+    },
+    toggleEdit: () => {
+      setEditing(!isEditing);
+      onChange('');
+    },
+    focus: (e) => {
+      setIsFocused(true);
+      if (isPriceInput) onChange(removeComma(value));
+      if (onFocus) onFocus(e);
+    },
+    blur: (e) => {
+      setIsFocused(false);
+      setEditing(false);
+      if (isPriceInput) {
+        if (!isFinite(value)) {
+          value = intMemoVal;
+        }
+        onChange(addCommas(value));
+      }
+
+      if (onBlur) onBlur(e);
+    },
+    keyUp: (e) => {
+      if (!isNotBlinkErrors) {
+        const changedValue = '' + (value ?? '');
+        const previousValue = '' + (previousValueRef.current ?? '');
+        const currentSet = (() => {
+          if (previousValue.length < changedValue.length)
+            return value
+              .toString()
+              .slice(previousValue.length - changedValue.length);
+          else return changedValue.toString().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);
+    },
+    decrement: () => {
+      handle.change(intMemoVal - +numStep);
+    },
+    increment: () => {
+      handle.change(intMemoVal + +numStep);
+    }
+  };
+
+  const handleClickOutside = (event) => {
+    if (
+      inputRef.current &&
+      !inputRef.current.contains(event.target) &&
+      !decRef.current.contains(event.target) &&
+      !incRef.current.contains(event.target)
+    ) {
+      setTimeout(() => {
+        inputRef.current.focus();
+        inputRef.current.blur();
+      }, 0);
+    }
+  };
+
+  useEffect(() => {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(false);
+      setIsToHighlightError(true);
+      setTimeout(() => {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    return () =>
+      document.removeEventListener('click', handleClickOutside, true);
+  }, []);
+
+  useEffect(() => {
+    if (isNaN(intMemoVal)) setIntMemoVal(min || '');
+  }, [intMemoVal]);
+
+  useEffect(() => {
+    if (isEditing || isFocused) inputRef.current.focus();
+  }, [isEditing, isFocused]);
+
+  const uniProps = {
+    className: `input ${className}`,
+    placeholder,
+    value: value || '',
+    disabled,
+    onChange: handle.change,
+    onFocus: handle.focus,
+    onBlur: handle.blur,
+    onKeyUp: handle.keyUp,
+    min,
+    max,
+    ...(maskChar ? { maskChar } : {}),
+    ...(formatChars ? { formatChars } : {})
+  };
+
+  function renderInput() {
+    return (
+      <>
+        <input {...uniProps} ref={inputRef} type={type} />
+
+        <div className='input__nums'>
+          <button
+            ref={decRef}
+            onClick={() => handle.decrement()}
+            className={cn(`input__num-btn`, { disabled: +value <= min })}
+          >
+            <Minus />
+          </button>
+          <button
+            ref={incRef}
+            onClick={() => handle.increment()}
+            className={cn(`input__num-btn`, { disabled: +value >= max })}
+          >
+            <Plus />
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        `input__wrap`,
+        { [`input__wrap_focus`]: isFocused },
+        { [`input__wrap_error`]: error || isToHighlightError },
+        { [`input__wrap_disabled`]: disabled }
+      )}
+    >
+      {renderInput()}
+      {icon}
+      {withDelete && (
+        <span
+          className={cn(`input__close`, { hidden: !value })}
+          onClick={handle.toggleEdit}
+        />
+      )}
+    </div>
+  );
+};
+
+export default NumericInput;

package/src/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/src/Atomic/FormElements/NumericInput/NumericInput.stories.js

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { User } from 'react-feather';
+import NumericInput from './NumericInput';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/NumericInput',
+  component: NumericInput,
+  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' }
+  }
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState('');
+  return <NumericInput {...args} value={value} onChange={setValue} />;
+};
+
+export const NumericInputTemplate = Template.bind({});
+
+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: <User />
+};

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'
+];

package/src/Functions/inputExecutor.js

@@ -0,0 +1,62 @@
+export const formatInput = {
+  priceInput: {
+    addCommas: (value) => {
+      value = value.toString();
+      const isFraction = value.includes('.');
+
+      const valueBeforeDot = isFraction
+        ? value.slice(0, value.indexOf('.'))
+        : value;
+
+      const intPart = valueBeforeDot
+        .split('')
+        .reverse()
+        .reduce(
+          (acc, item, idx) =>
+            idx % 3 === 0 && idx !== 0 ? [...acc, ',', item] : [...acc, item],
+          []
+        )
+        .reverse()
+        .join('');
+
+      return isFraction ? intPart + value.slice(value.indexOf('.')) : intPart;
+    },
+    removeComma: (value) => {
+      return parseFloat(value.toString().replace(/\,/g, ''));
+    }
+  },
+  onlyNumbers: (value, isDot = false) => {
+    const 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: (value) => {
+    return value.toString().replace(/[^a-z]/gi, '');
+  }
+};
+
+//обрезает числа после точки до 2х
+// 342.23423432 -> 342.23
+const twoDigitAfterDot = (value) => {
+  if (value.includes('.')) {
+    const valueAfterDot = value.slice(0, value.indexOf('.') + 3);
+    let 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/src/Functions/utils.js

@@ -5,7 +5,10 @@ export const handleObjectChange =
   (data, prop = '', isNumber) => {
     let value;
     if (data?.target) {
-      value = data.target.type === 'checkbox' ? data.target.checked : data.target.value;
+      value =
+        data.target.type === 'checkbox'
+          ? data.target.checked
+          : data.target.value;
     } else value = data;
 
     value = isNumber ? +value : value;