intelicoreact 0.0.94 → 0.0.97

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

@@ -1,263 +0,0 @@
-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';
-
-let timerOutside;
-let timerFocus;
-
-const NumericInput = ({
-  onChange,
-  disabled,
-  withDelete,
-  numStep = 1,
-  min = 0,
-  max,
-  value,
-  placeholder,
-  className,
-  onBlur,
-  onFocus,
-  onKeyUp,
-  mask,
-  maskChar,
-  formatChars,
-  error,
-  icon,
-  symbolsLimit,
-  isNotBlinkErrors,
-  blinkTime,
-  isPriceInput,
-  isFocusDefault = false
-}) => {
-  const DEFAULT_BLINK_TIME = 200;
-
-  //REFS
-  const inputRef = useRef(null);
-  const decRef = useRef(null);
-  const incRef = useRef(null);
-  const wrapRef = useRef(null);
-
-  const previousValueRef = useRef(value);
-
-  // STATES
-  const [inputValue, setInputValue] = useState(value || min || '');
-  const [inputValueFormated, setInputValueFormated] = useState(inputValue);
-  const [intMemoVal, setIntMemoVal] = useState(0);
-
-  const [isFocused, setIsFocused] = useState(false);
-  const [isEditing, setEditing] = useState(false);
-
-  const [isAttemptToChange, setIsAttemptToChange] = useState(false);
-  const [isToHighlightError, setIsToHighlightError] = useState(false);
-
-  const { onlyNumbers } = formatInput;
-  const { addCommas, removeComma } = formatInput.priceInput;
-
-  // HANDLES
-  const handle = {
-    change: (e) => {
-      let inputValue = e.target ? onlyNumbers(e.target.value) : e;
-
-      if (
-        inputValue &&
-        (decRef.current.contains(e.target) || incRef.current.contains(e.target))
-      ) {
-        inputValue = parseFloat(inputValue);
-        if (min && +min > inputValue) {
-          inputValue = min;
-        } else if (max && +max < inputValue) inputValue = max;
-      }
-      if (symbolsLimit) {
-        inputValue = inputValue.toString().substring(0, +symbolsLimit);
-      }
-      setInputValue(inputValue.toString());
-    },
-    clear: () => {
-      handle.change(min || '');
-    },
-    focus: (e) => {
-      if (isFocused) return;
-      setIsFocused(true);
-      if (onFocus) onFocus(e);
-    },
-    blur: (e) => {
-      if (!isFocused) return;
-
-      setIsFocused(false);
-      setEditing(false);
-
-      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: (e) => {
-      handle.change(intMemoVal - +numStep);
-    },
-    increment: (e) => {
-      handle.change(intMemoVal + +numStep);
-    }
-  };
-
-  //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]);
-
-  //On Input Value Change
-  useEffect(() => {
-    if (inputValue !== value) setIsFocused(true);
-
-    setInputValueFormated(
-      isPriceInput
-        ? isFocused
-          ? removeComma(inputValue)
-          : addCommas(inputValue)
-        : inputValue
-    );
-    setIntMemoVal(parseInt(inputValue));
-
-    if (typeof onChange === 'function') onChange(inputValue?.toString());
-  }, [inputValue]);
-
-  //On Integer Value Change
-  useEffect(() => {
-    if (isNaN(intMemoVal)) setIntMemoVal(min || 0);
-  }, [intMemoVal]);
-
-  //On Focuse Change
-  useEffect(() => {
-    setInputValueFormated(
-      isPriceInput
-        ? isFocused
-          ? removeComma(inputValue)
-          : addCommas(inputValue)
-        : inputValue
-    );
-
-    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);
-      setEditing(isFocusDefault)
-  }, [inputRef, isFocusDefault]);
-
-  function renderInput() {
-    const uniProps = {
-      className: `input ${className || ''}`,
-      placeholder,
-      value: inputValueFormated,
-      disabled,
-      onChange: handle.change,
-      onFocus: () => {
-        setIsFocused(true);
-        setEditing(true);
-      },
-      onBlur: () => setEditing(false),
-      onKeyUp: handle.keyUp,
-      min,
-      max,
-      ...(maskChar ? { maskChar } : {}),
-      ...(formatChars ? { formatChars } : {})
-    };
-
-    return (
-      <>
-        <input {...uniProps} ref={inputRef} type='text' />
-
-        <div className='input__nums'>
-          <button
-            ref={decRef}
-            onMouseDown={(e) => handle.decrement(e)}
-            className={cn(`input__num-btn`, { disabled: +value <= min })}
-          >
-            <Minus />
-          </button>
-          <button
-            ref={incRef}
-            onMouseDown={(e) => handle.increment(e)}
-            className={cn(`input__num-btn`, { disabled: +value >= max })}
-          >
-            <Plus />
-          </button>
-        </div>
-      </>
-    );
-  }
-
-  return (
-    <div
-      ref={wrapRef}
-      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: !inputValue })}
-          onClick={() => handle.clear()}
-        />
-      )}
-    </div>
-  );
-};
-
-export default NumericInput;

package/src/Atomic/FormElements/NumericInput/NumericInput.scss

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

@@ -1,78 +0,0 @@
-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'
-    },
-    isFocusDefault: {
-      description: 'boolean - if true, input will be focused on mount'
-    },
-    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'
-    },
-    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('15000');
-  return <NumericInput {...args} value={value} onChange={setValue} />;
-};
-
-export const NumericInputTemplate = Template.bind({});
-
-NumericInputTemplate.args = {
-  disabled: false,
-  isFocusDefault: false,
-  error: '',
-  isPriceInput: false,
-  mask: '',
-  withDelete: true,
-  isNumeric: false,
-  numStep: 100,
-  min: '0',
-  max: '15000',
-  symbolsLimit: 5,
-  placeholder: 'Placeholder',
-  icon: <User />
-};

package/src/Atomic/FormElements/RadioInput/RadioInput.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-import './RadioInput.scss';
-
-const RC = 'radio-input';
-
-const RadioInput = ({ label, id, checked, name, onChange, disabled, className, value }) => {
-  return (
-    <label className={cn(RC, className, { [`${RC}_disabled`]: disabled })} htmlFor={id}>
-      <div className={cn(`${RC}__input`)}>
-        <input
-          id={id}
-          type="radio"
-          checked={checked === value}
-          className={`${RC}__radio`}
-          onChange={() => onChange(checked)}
-          name={name}
-          disabled={disabled}
-        />
-        <div className={`${RC}__mark`} />
-      </div>
-      {label && <div className={`${RC}__label`}>{label}</div>}
-    </label>
-  );
-};
-
-export default RadioInput;

package/src/Atomic/FormElements/RadioInput/RadioInput.scss

@@ -1,63 +0,0 @@
-@import "../../../scss/vars";
-
-.radio-input {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-
-  &_disabled {
-    .radio-input__input {
-      opacity: 0.3;
-      pointer-events: none;
-      cursor: auto;
-    }
-  }
-
-  &:hover {
-    .radio-input__input {
-      background-color: $color--gray--light;
-    }
-  }
-
-  &__input {
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    border: 1px solid $color--gray;
-    position: relative;
-    background-color: #ffff;
-  }
-
-  &__mark {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: $color--primary;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    margin: auto;
-    z-index: 1;
-    display: none;
-  }
-
-  .radio-input__radio:checked ~ .radio-input__mark {
-    display: block;
-  }
-
-  &__radio {
-    opacity: 0;
-    position: absolute;
-    height: 0;
-    width: 0;
-  }
-
-  &__label {
-    font-size: 13px;
-    font-weight: 400;
-    user-select: none;
-    margin-left: 5px;
-  }
-}

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import RadioInput from './RadioInput';
-
-global.lng = 'en';
-export default {
-  title: 'RadioInput',
-  component: RadioInput
-};
-
-const Template = args => (
-  <>
-    <RadioInput {...args} />
-  </>
-);
-
-export const Radio = Template.bind({});
-
-Radio.args = {
-  name: 'test-name',
-  label: 'Test label',
-  disabled: false,
-  value: false
-};