intelicoreact 1.8.10 → 1.8.12

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

@@ -1,337 +0,0 @@
-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()}
-        />
-      )}
-
-    </div>
-  );
-}
-
-export default NumericInput;

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

@@ -1,66 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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;