intelicoreact 1.8.3 → 1.8.5

package/dist/Atomic/FormElements/NumericInput/NumericInput.jsx

@@ -0,0 +1,337 @@
+import cn from 'classnames';
+
+import { useEffect, useRef, useState } from 'react';
+import { Minus, Plus } from 'react-feather';
+
+import { KEYBOARD_SERVICE_KEYS } from '../../../Constants/index.constants';
+import {
+  formatToAddBitDepthPoints as addCommas,
+  filterNumeric,
+  formatToRemoveComa as removeCommas,
+} from '../../../Functions/fieldValueFormatters';
+import Spinner from '../../Layout/Spinner/Spinner';
+
+import './NumericInput.scss';
+
+function NumericInput({
+  disabled,
+  withDelete,
+  numStep = 1,
+  min = 0,
+  max,
+  value,
+  placeholder,
+  className,
+  testId = 'numeric-input',
+  name,
+  fieldKey,
+  id,
+
+  onChange = () => {},
+  onBlur = () => {},
+  onFocus = () => {},
+  onKeyUp = () => {},
+  onKeyDown = () => {},
+
+  maskChar,
+  formatChars,
+  error,
+  icon,
+  isNotBlinkErrors,
+  blinkTime,
+  isPriceInput,
+  isFocusDefault = false,
+  isNotRenderButtons = false,
+  isUseAutoSelect = true,
+  isLoading = false,
+  isAllowNullValue = false,
+  onlyNumbers = {
+    type: 'int',
+  },
+
+  attributesOfNativeInput = {},
+}) {
+  const DEFAULT_BLINK_TIME = 200;
+
+  // REFS
+  const inputRef = useRef(null);
+  const decRef = useRef(null);
+  const incRef = useRef(null);
+  const wrapRef = useRef(null);
+
+  // STATES
+  const initialMin = isAllowNullValue ? '' : min;
+  const [inputValue, setInputValue] = useState(value || initialMin);
+  const [inputValueFormated, setInputValueFormated] = useState(inputValue);
+  const [intMemoVal, setIntMemoVal] = useState(0);
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
+  const [isToHighlightError, setIsToHighlightError] = useState(false);
+
+  const [prevValue, setPreviousValue] = useState(value || initialMin);
+
+  const setCursorToEnd = () => {
+    const input = inputRef.current;
+    const cursor = input?.value?.length;
+    if (input) setTimeout(() => input.setSelectionRange(cursor, cursor), 10);
+  };
+
+  // HANDLES
+  const handle = {
+    change: (e) => {
+      const inputValue = e.target
+        ? filterNumeric(e.target.value, onlyNumbers)
+        : filterNumeric(e, onlyNumbers);
+      setInputValue(inputValue.toString());
+    },
+    clear: () => {
+      handle.change(initialMin || '');
+    },
+    focus: (e) => {
+      setIsFocused(true);
+      if (onFocus) onFocus(e);
+    },
+    blur: (e) => {
+      setIsFocused(false);
+
+      if (Number.isNaN(inputValue) || inputValue < min)
+        setInputValue(initialMin);
+      if (max && Number(max) < inputValue) setInputValue(max);
+
+      if (onBlur) onBlur(e);
+    },
+    keyDown: (e) => {
+      setPreviousValue(e?.target?.value);
+      onKeyDown(e.keyCode, e);
+    },
+
+    keyUp: (e) => {
+      if (!isNotBlinkErrors) {
+        const changedValue = String(value ?? '');
+        const previousValue = String(prevValue);
+
+        const short
+          = previousValue.length <= changedValue.length
+            ? previousValue
+            : changedValue;
+        const long
+          = previousValue.length > changedValue.length
+            ? previousValue
+            : changedValue;
+
+        const infoAboutDifferencesSameness = short.split('').reduce(
+          (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: [] },
+        );
+
+        const samePart = infoAboutDifferencesSameness.same.join('');
+        const differencesLength
+          = infoAboutDifferencesSameness.differences.length;
+        const currentSet = changedValue?.replace(samePart, '');
+
+        if (
+          !KEYBOARD_SERVICE_KEYS.includes(e.key)
+          && changedValue === previousValue
+        ) {
+          setIsAttemptToChange(!(!differencesLength && e.key === currentSet));
+        }
+      }
+
+      if (onKeyUp) onKeyUp(e.keyCode, e.target.value);
+    },
+    decrement: (e) => {
+      let newValue = Number(intMemoVal) - Number(numStep);
+      if (newValue < min) newValue = min;
+      else if (newValue > max) newValue = max;
+
+      handle.change(newValue);
+
+      setTimeout(() => {
+        inputRef?.current?.focus();
+        setCursorToEnd();
+      }, 100);
+    },
+    increment: (e) => {
+      let newValue = Number(intMemoVal) + Number(numStep);
+      if (newValue < min) newValue = min;
+      else if (newValue > max) newValue = max;
+
+      handle.change(newValue);
+
+      setTimeout(() => {
+        inputRef?.current?.focus();
+        setCursorToEnd();
+      }, 100);
+    },
+  };
+
+  // Check Outside Click
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!wrapRef.current.contains(event.target)) setIsFocused(false);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () =>
+      document.removeEventListener('mousedown', handleClickOutside, true);
+  }, []);
+
+  useEffect(() => {
+    if (!isNotBlinkErrors && isAttemptToChange) {
+      setIsAttemptToChange(false);
+      setIsToHighlightError(true);
+      setTimeout(() => {
+        setIsToHighlightError(false);
+      }, blinkTime || DEFAULT_BLINK_TIME);
+    }
+  }, [isAttemptToChange]);
+
+  useEffect(() => {
+    if (value && value !== inputValue) setInputValue(value);
+  }, [value]);
+
+  // On Input Value Change
+  useEffect(() => {
+    if (inputValue !== value) setIsFocused(true);
+
+    setInputValueFormated(
+      isPriceInput && inputValue?.length > 0
+        ? isFocused
+          ? removeCommas(inputValue)
+          : addCommas(inputValue)
+        : inputValue,
+    );
+    setIntMemoVal(removeCommas(inputValue));
+
+    if (typeof onChange === 'function' && value !== undefined && +inputValue !== +value) onChange(inputValue?.toString());
+  }, [inputValue]);
+
+  // On Integer Value Change
+  useEffect(() => {
+    if (isNaN(intMemoVal)) setIntMemoVal(min || 0);
+  }, [intMemoVal]);
+
+  // On Focuse Change
+  useEffect(() => {
+    let formatedValue = inputValue;
+    if (isPriceInput) {
+      formatedValue = isFocused
+        ? removeCommas(inputValue)
+        : addCommas(inputValue);
+    }
+    setInputValueFormated(formatedValue);
+
+    if (isFocused) {
+      if (typeof onFocus === 'function') onFocus({ target: inputRef?.current });
+      inputRef?.current?.focus();
+    }
+    else {
+      if (typeof onBlur === 'function') onBlur({ target: inputRef?.current });
+      inputRef?.current?.blur();
+    }
+  }, [isFocused]);
+
+  useEffect(() => {
+    if (inputRef?.current && typeof isFocusDefault === 'boolean')
+      setIsFocused(isFocusDefault);
+  }, [inputRef, isFocusDefault]);
+
+  function renderInput() {
+    const uniProps = {
+      name: name || fieldKey || id || testId || '',
+      className: `input ${className || ''}`,
+      placeholder,
+      value: inputValueFormated,
+      disabled,
+      onChange: handle.change,
+      onFocus: handle.focus,
+      onBlur: handle.blur,
+      onKeyDown: handle.keyDown,
+      onKeyUp: handle.keyUp,
+      min,
+      max,
+      ...(maskChar ? { maskChar } : {}),
+      ...(formatChars ? { formatChars } : {}),
+    };
+
+    return (
+      <>
+        <input
+          {...uniProps}
+          data-testid={`${testId}-input`}
+          value={value?.length > 0 ? addCommas(removeCommas(value)) : value}
+          ref={inputRef}
+          type="text"
+          onFocus={(...params) => {
+            if (isUseAutoSelect) inputRef.current.select();
+            if (uniProps.onFocus) uniProps.onFocus(...params);
+          }}
+          {...attributesOfNativeInput}
+        />
+
+        {!isNotRenderButtons
+          ? (
+              <div className="input__nums">
+                <button
+                  data-testid={`${testId}-minus-btn`}
+                  ref={decRef}
+                  className={cn('input__num-btn', {
+                    'events-none': Number(value) <= min,
+                  })}
+                  onMouseDown={e => handle.decrement(e)}
+                >
+                  <Minus className={cn({ disabled: Number(value) <= min })} />
+                </button>
+                <button
+                  data-testid={`-${testId}-plus-btn`}
+                  ref={incRef}
+                  className={cn('input__num-btn', {
+                    'events-none': Number(value) >= max,
+                  })}
+                  onMouseDown={e => handle.increment(e)}
+                >
+                  <Plus className={cn({ disabled: Number(value) >= max })} />
+                </button>
+              </div>
+            )
+          : null}
+      </>
+    );
+  }
+
+  return (
+    <div
+      data-testid={testId}
+      ref={wrapRef}
+      className={cn(
+        `input__wrap`,
+        { [`input__wrap_focus`]: isFocused },
+        { [`input__wrap_error`]: error || isToHighlightError },
+        { [`input__wrap--disabled`]: disabled || isLoading },
+      )}
+    >
+      {renderInput()}
+      {icon}
+      {withDelete && (
+        <span
+          className={cn(`input__close`, { hidden: !inputValue })}
+          onClick={() => handle.clear()}
+        />
+      )}
+      {isLoading && <Spinner size="small" />}
+    </div>
+  );
+}
+
+export default NumericInput;

package/dist/Atomic/FormElements/RadioGroup/RadioGroup.jsx

@@ -0,0 +1,66 @@
+import cn from 'classnames';
+
+import { useLayoutEffect, useState } from 'react';
+
+import RadioInput from '../RadioInput/RadioInput';
+
+import './RadioGroup.scss';
+
+function RadioGroup({
+  className,
+  disabled,
+  value,
+  onChange = () => {},
+  direction = 'row',
+  options = [],
+}) {
+  const [values, setValues] = useState(options);
+
+  useLayoutEffect(
+    () =>
+      setValues(
+        options.map(item =>
+          item.value === value ? { ...item, checked: value } : item,
+        ),
+      ),
+    [options, value],
+  );
+
+  const handle = {
+    change: (value) => {
+      const newValues = values.map((item) => {
+        if (item.value === value) {
+          return {
+            ...item,
+            checked: value,
+          };
+        }
+        return {
+          id: item.id,
+          label: item.label,
+          value: item.value,
+        };
+      });
+      setValues(newValues);
+      onChange(value);
+    },
+  };
+  return (
+    <div
+      className={cn('radio-group', className, `radio-group--${direction}`, {
+        'radio-group--disabled': disabled,
+      })}
+    >
+      {values.map(item => (
+        <RadioInput
+          key={item.id}
+          {...item}
+          onChange={handle.change}
+          checked={item.checked}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default RadioGroup;

package/dist/Atomic/FormElements/RadioGroupWithInput/RadioGroupWithInput.jsx

@@ -0,0 +1,78 @@
+import cn from 'classnames';
+
+import FormElement from '../../../Molecular/FormElement/FormElement';
+import Alert from '../../UI/Alert/Alert';
+
+import Input from './../Input/Input';
+import RadioInput from './../RadioInput/RadioInput';
+
+import './RadioGroupWithInput.scss';
+
+function RadioGroupWithInput({
+  alert,
+  className,
+  disabled,
+  onChange = () => {},
+  direction = 'row',
+  options = [],
+}) {
+  const handle = {
+    changeRadio: (value, el) => {
+      const newOptions = options.map((item) => {
+        return {
+          ...item,
+          checked: el.value === item.value ? item.value : false,
+        };
+      });
+      onChange(newOptions);
+    },
+    changeInput: (value, el) => {
+      el.input.value = value;
+      onChange(options);
+    },
+  };
+
+  return (
+    <div className="radio-group-input-box">
+      {alert && <Alert className="mb10" {...alert} />}
+      <div
+        className={cn(
+          'radio-group-input',
+          className,
+          `radio-group-input--${direction}`,
+          {
+            'radio-group-input--disabled': disabled,
+          },
+        )}
+      >
+        {options?.map((item) => {
+          return (
+            <div
+              key={item.id}
+              className={cn(
+                'radio-group-input-item',
+                `radio-group-input-item-${item.id}`,
+              )}
+            >
+              <RadioInput
+                {...item}
+                onChange={value => handle.changeRadio(value, item)}
+                checked={item.checked}
+              />
+              {item.input && item.checked && (
+                <FormElement {...item.input}>
+                  <Input
+                    onChange={value => handle.changeInput(value, item)}
+                    {...item.input}
+                  />
+                </FormElement>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default RadioGroupWithInput;

package/dist/Atomic/FormElements/RadioRowSwitcher/RadioRowSwitcher.jsx

@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+
+import "./RadioRowSwitcher.scss";
+
+const classNames = require("classnames");
+
+function RadioRowSwitcher({ onChange, radios, label = '', value = '' }) {
+  const handle = {
+    change: (newValue) => {
+      if (newValue === value) onChange('');
+      else onChange(newValue);
+    },
+  };
+
+  const itemClass = key =>
+    classNames('radio-row-switcher__item', {
+      [`radio-row-switcher__item--active`]: key === value,
+    });
+  const sliderClass = key =>
+    classNames(
+      'radio-row-switcher__slider',
+      `radio-row-switcher__slider--${key}`,
+    );
+
+  return (
+    <div className="radio-row-switcher">
+      {label && <div className="radio-row-switcher__label">{label}</div>}
+
+      <div className="radio-row-switcher__items-box">
+        {radios.map((item) => {
+          return (
+            <React.Fragment key={item.key}>
+              <div
+                onClick={() => handle.change(item.key)}
+                className={itemClass(item.key)}
+              >
+                {item.label}
+              </div>
+            </React.Fragment>
+          );
+        })}
+
+        {value && (
+          <div
+            onClick={() => handle.change('')}
+            className={sliderClass(value)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RadioRowSwitcher;