intelicoreact 1.8.3 → 1.8.5

package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.jsx

@@ -0,0 +1,18 @@
+import './DropdownLoader.scss';
+
+function DropdownLoader({ variant = '' }) {
+  return (
+    <div className="dropdown-loader-box j5">
+      <div
+        className={`lds-ring${variant === 'little' ? ' lds-ring_little' : ''}`}
+      >
+        <div />
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
+}
+
+export default DropdownLoader;

package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN_old.jsx

@@ -0,0 +1,121 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { Eye, EyeOff } from 'react-feather';
+
+import { setCarretToEnd } from '../../../Functions/utils';
+import Input from '../Input/Input';
+
+import './FormattedRawSSN.scss';
+
+function FormattedRawSSN({
+  value = '',
+  postfix = '',
+  onChange: onChangeProp = () => {},
+  maskChar = '*',
+  testId = 'formatted-raw-ssn',
+  isHiddenDefault = true,
+  maxLen = 9,
+  ...args
+}) {
+  const [SSN, setSSN] = useState(value?.substring(0, maxLen) ?? '');
+  const [isHidden, setIsHidden] = useState(isHiddenDefault);
+  const wrapperRef = useRef(null);
+
+  useEffect(() => {
+    setSSN(value?.toString()?.substring(0, maxLen) ?? '');
+  }, [value]);
+
+  const onChange = (value) => {
+    if (!value && value !== '') return '';
+
+    if (value.replace(/-/g, '').length < SSN.length) {
+      const last = SSN.length - 1;
+      setSSN(SSN.slice(0, last));
+      return;
+    }
+
+    const numValue = value.replace(/\D/g, '');
+    let newSSN = '';
+
+    if (isHidden) {
+      if (SSN.length > 5) {
+        newSSN = SSN.slice(0, 5) + numValue;
+      }
+      else {
+        newSSN = SSN + numValue;
+      }
+    }
+    else {
+      newSSN = numValue;
+    }
+
+    if (newSSN.length > maxLen) {
+      return;
+    }
+    setSSN(newSSN);
+  };
+  const switchView = () => {
+    const input = wrapperRef?.current?.querySelector('input');
+    input?.focus();
+    setCarretToEnd(input);
+    setIsHidden(!isHidden);
+  };
+
+  const getFormatedValue = (v) => {
+    if (!v) return '';
+
+    v = v.slice(0, 11).replace(/-/g, '');
+    if (v.length <= 3) {
+      return v;
+    }
+    if (v.length > 3 && v.length <= 5) {
+      return `${v.slice(0, 3)}-${v.slice(3)}`;
+    }
+    if (v.length > 5) {
+      return `${v.slice(0, 3)}-${v.slice(3, 5)}-${v.slice(5)}`;
+    }
+  };
+  const getMaskedValue = (v) => {
+    return isHidden
+      ? v.slice(0, 7).replace(/\d/g, maskChar).concat(v.slice(7))
+      : v;
+  };
+
+  useEffect(() => {
+    if (SSN) {
+      onChangeProp?.(
+        SSN.concat(SSN.length === maxLen ? postfix : '').replace(/-/g, ''),
+      );
+    }
+  }, [SSN]);
+
+  return (
+    <div data-testid={testId} className="formatted-raw-ssn" ref={wrapperRef}>
+      <Input
+        {...args}
+        value={getMaskedValue(getFormatedValue(SSN))}
+        onChange={onChange}
+      />
+      {postfix && (
+        <span
+          className="formatted-raw-ssn-postfix"
+          onClick={() => wrapperRef?.current?.querySelector('input')?.focus()}
+        >
+          {postfix}
+        </span>
+      )}
+      <span className="formatted-raw-ssn-eye-holder" onClick={switchView}>
+        {' '}
+        {isHidden
+          ? (
+              <Eye strokeWidth={1} className="password-icon" />
+            )
+          : (
+              <EyeOff strokeWidth={1} className="password-icon" />
+            )}
+      </span>
+    </div>
+  );
+}
+
+export default FormattedRawSSN;

package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.jsx

@@ -0,0 +1,507 @@
+import moment from 'moment';
+
+import { useEffect, useRef, useState } from 'react';
+import { ChevronDown, ChevronUp } from 'react-feather';
+
+import './MobileCalendar.scss';
+
+require('../../../Functions/customEventListener');
+
+function MobileCalendar({
+  min = moment().subtract('10', 'years'),
+  max = moment().add('10', 'years'),
+  value = moment(),
+  rows = 5,
+  label = '',
+  timeout = 75,
+  isMobile = true,
+  showSelectedDate = false,
+  listItemHeight = 32,
+
+  classes = {
+    wrapper: '',
+    label: '',
+    body: '',
+
+    yearsBlock: '',
+    yearsList: '',
+    yearsListItem: '',
+
+    monthsBlock: '',
+    monthsList: '',
+    monthsListItem: '',
+
+    daysBlock: '',
+    daysList: '',
+    daysListItem: '',
+
+    prevItem: '',
+    nextItem: '',
+    activeItem: '',
+  },
+  onChange = () => {},
+  onMinDateReached = () => {},
+  onMaxDateReached = () => {},
+}) {
+  const Body = document.querySelector('body');
+  const listItem = document.querySelector(
+    '.mobile-calendar_wrapper_body_months-list--item',
+  );
+
+  const [date, setDate] = useState(value ? moment(value) : moment());
+  const [minDate, setMinDate] = useState(moment(min));
+  const [maxDate, setMaxDate] = useState(moment(max));
+
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const [mouseDownOn, setMouseDownOn] = useState(null);
+  const [changeInterval, setChangeInterval] = useState(null);
+
+  const [touchY, setTouchY] = useState(null);
+  const [touchType, setTouchType] = useState(null);
+  const [touchTimestamp, setTouchTimestamp] = useState(null);
+
+  const [scrollDirection, setScrollDirection] = useState(0);
+
+  const monthsListRef = useRef(null);
+  const daysListRef = useRef(null);
+  const yearsListRef = useRef(null);
+
+  const dateRef = useRef(null);
+  const intervalRef = useRef(null);
+
+  // --HANDLERS--//
+  const changeItem = (type, value) => {
+    setScrollDirection(value);
+    setDate((date) => {
+      const newDate = moment(date).add(value, type);
+
+      if (moment(newDate).isBefore(minDate)) return minDate;
+      if (moment(newDate).isAfter(maxDate)) return maxDate;
+
+      return newDate;
+    });
+    setTimeout(() => {
+      setScrollDirection(0);
+    }, 50);
+  };
+
+  const checkAvailability = (type, value) => {
+    if (!dateRef?.current) return false;
+
+    const newDate = moment(dateRef?.current).add(value, type);
+
+    if (moment(newDate).isBefore(minDate)) return false;
+    if (moment(newDate).isAfter(maxDate)) return false;
+
+    return true;
+  };
+  const onArrowMouseDown = (type, value) => {
+    setIsMouseDown(true);
+    setMouseDownOn({ type, value });
+  };
+  const onArrowMouseUp = () => {
+    setIsMouseDown(false);
+    setMouseDownOn(null);
+  };
+  const onWheel = (e, type) => {
+    e.preventDefault();
+
+    const { deltaY } = e;
+    const top = window.scrollX;
+    const left = window.scrollY;
+
+    window.scrollTo({ top, left });
+
+    changeItem(type, deltaY < 0 ? -1 : 1);
+  };
+  const onTouchStart = (e, type) => {
+    e.preventDefault();
+
+    if (intervalRef?.current) {
+      clearInterval(intervalRef?.current);
+      intervalRef.current = null;
+    }
+
+    const { timeStamp, changedTouches } = e;
+    const { pageY } = changedTouches[0];
+
+    setTouchY(pageY);
+    setTouchTimestamp(timeStamp);
+    setTouchType(type);
+
+    window.addEventListener(
+      'touchend',
+      e => onTouchEnd(e, pageY, timeStamp, type),
+      { once: true },
+    );
+  };
+  const onTouchMove = (e) => {
+    if (!touchY || !touchType) return;
+
+    const { timeStamp, changedTouches } = e;
+    const { pageY } = changedTouches[0];
+
+    const deltaY = touchY - pageY;
+
+    if (Math.abs(deltaY) < listItemHeight) return;
+
+    const direction = deltaY < 0 ? -1 : 1;
+
+    setScrollDirection(direction);
+
+    changeItem(touchType, direction);
+    setTouchY(pageY);
+    setTouchTimestamp(timeStamp);
+  };
+  const onTouchEnd = (e, startY, startTime, touchType) => {
+    const { timeStamp, changedTouches } = e;
+    const { pageY } = changedTouches[0];
+
+    const path = Math.abs(startY - pageY); // in px
+    const time = timeStamp - startTime; // ms
+    const pxPerMs = path / time;
+
+    if (pxPerMs > 0.65)
+      innertionScroll({ startY, pageY, timeStamp, startTime, touchType });
+    else setTouchType(null);
+
+    setTouchY(null);
+  };
+  const innertionScroll = ({
+    startY,
+    pageY,
+    timeStamp,
+    startTime,
+    touchType,
+  }) => {
+    const path = Math.abs(startY - pageY); // in px
+    const time = timeStamp - startTime; // ms
+    const pxPerMs = Math.ceil(path / time); // speed
+
+    const S = (pxPerMs / 2) * time;
+    const blocks = Math.ceil((S / listItemHeight) * pxPerMs);
+
+    let i = 1;
+
+    intervalRef.current = setInterval(() => {
+      if (
+        checkAvailability(touchType, startY - pageY < 0 ? -1 : 1, date)
+        && i <= blocks
+      ) {
+        changeItem(touchType, startY - pageY < 0 ? -1 : 1);
+      }
+      else {
+        setTouchType(null);
+        clearInterval(intervalRef?.current);
+        intervalRef.current = null;
+      }
+
+      ++i;
+    }, timeout);
+
+    // for(let i = 1; i <= blocks; ++i){
+    //   // timeout = i*pxPerMs+Math.pow(i,2)*10;
+    //   timeout += 80;
+    //   if(checkAvailability(touchType, startY-pageY < 0 ? -1 : 1, date)){
+    //     setTimeout(() => {
+    //       console.log({timeout})
+    //       changeItem(touchType, startY-pageY < 0 ? -1 : 1);
+    //     }, timeout)
+    //   }
+
+    // }
+  };
+
+  // --FUNCTIONS--//
+  const intervalWorker = () => {
+    if (!mouseDownOn) return;
+
+    const { type, value } = mouseDownOn;
+    changeItem(type, value);
+  };
+  const getList = (type, format) => {
+    const list = [];
+
+    const renderRows = rows;
+
+    for (let i = (renderRows - 1) / 2; i >= ((renderRows - 1) / 2) * -1; --i) {
+      list.push(moment(date).subtract(i, type).format(format));
+    }
+
+    return list;
+  };
+  const getMonthList = () => getList('months', 'MMMM');
+  const getDaysList = () => getList('days', 'D');
+  const getYearsList = () => getList('years', 'YYYY');
+
+  // --OBSERVERS--//
+  useEffect(() => {
+    if (moment(date.format('L')).isBefore(minDate.format('L')))
+      setDate(minDate);
+    if (moment(date.format('L')).isAfter(maxDate.format('L'))) setDate(maxDate);
+  }, []);
+
+  // Events Observer
+  useEffect(() => {
+    document.addEventListener('mouseup', onArrowMouseUp);
+    return () => {
+      document.removeEventListener('mouseup', onArrowMouseUp);
+    };
+  }, []);
+
+  useEffect(() => {
+    onChange(date);
+    dateRef.current = date;
+
+    if (moment(date.format('L')).isSame(minDate.format('L')))
+      onMinDateReached(minDate);
+    if (moment(date.format('L')).isSame(maxDate.format('L')))
+      onMaxDateReached(maxDate);
+  }, [date]);
+
+  // monthList Events
+  useEffect(() => {
+    if (monthsListRef?.current) {
+      monthsListRef?.current?.addEventListener(
+        'mousewheel',
+        e => onWheel(e, 'months'),
+        { passive: false },
+      );
+      monthsListRef?.current?.addEventListener(
+        'touchstart',
+        e => onTouchStart(e, 'months'),
+        { passive: false },
+      );
+    }
+
+    return () => {
+      monthsListRef?.current?.clearEventListeners('mousewheel');
+      monthsListRef?.current?.clearEventListeners('touchstart');
+    };
+  }, [monthsListRef]);
+
+  // daysList Events
+  useEffect(() => {
+    if (daysListRef?.current) {
+      daysListRef?.current?.addEventListener(
+        'mousewheel',
+        e => onWheel(e, 'days'),
+        { passive: false },
+      );
+      daysListRef?.current?.addEventListener(
+        'touchstart',
+        e => onTouchStart(e, 'days'),
+        { passive: false },
+      );
+    }
+
+    return () => {
+      daysListRef?.current?.clearEventListeners('mousewheel');
+      daysListRef?.current?.clearEventListeners('touchstart');
+    };
+  }, [daysListRef]);
+
+  // yearsList Events
+  useEffect(() => {
+    if (yearsListRef?.current) {
+      yearsListRef?.current?.addEventListener(
+        'mousewheel',
+        e => onWheel(e, 'years'),
+        { passive: false },
+      );
+      yearsListRef?.current?.addEventListener(
+        'touchstart',
+        e => onTouchStart(e, 'years'),
+        { passive: false },
+      );
+    }
+
+    return () => {
+      yearsListRef?.current?.clearEventListeners('mousewheel');
+      yearsListRef?.current?.clearEventListeners('touchstart');
+    };
+  }, [yearsListRef]);
+
+  // --RENDER--//
+  const renderMonthsList = () => {
+    const half = (rows - 1) / 2;
+    return getMonthList().map((month, i) => (
+      <div
+        className={`mobile-calendar_wrapper_body_months-list--item ${i === half ? 'active' : ''} ${
+          i === 0 || i === rows - 1 ? 'transparent' : ''
+        } ${classes?.monthsListItem} ${i === half ? classes?.activeItem : ''}`}
+        key={`month-${month}`}
+        onClick={
+          touchY
+            ? null
+            : () => (i - half === 0 ? {} : changeItem('months', i - half))
+        }
+        attr-scroll-direction={touchType === 'months' ? scrollDirection : 0}
+        attr-is-scrolling={touchType === 'months' ? 1 : 0}
+      >
+        {month}
+      </div>
+    ));
+  };
+  const renderDaysList = () => {
+    const half = (rows - 1) / 2;
+    return getDaysList().map((day, i) => (
+      <div
+        className={`mobile-calendar_wrapper_body_days-list--item ${i === half ? 'active' : ''} ${
+          i === 0 || i === rows - 1 ? 'transparent' : ''
+        } ${classes?.daysListItem} ${i === half ? classes?.activeItem : ''}`}
+        key={`day-${day}`}
+        onClick={() => (i - half === 0 ? {} : changeItem('days', i - half))}
+        attr-scroll-direction={touchType === 'days' ? scrollDirection : 0}
+        attr-is-scrolling={touchType === 'days' ? 1 : 0}
+      >
+        {day}
+      </div>
+    ));
+  };
+  const renderYearsList = () => {
+    const half = (rows - 1) / 2;
+    return getYearsList().map((year, i) => (
+      <div
+        className={`mobile-calendar_wrapper_body_years-list--item ${i === half ? 'active' : ''} ${
+          i === 0 || i === rows - 1 ? 'transparent' : ''
+        } ${classes?.yearsListItem} ${i === half ? classes?.activeItem : ''}`}
+        key={`year-${year}`}
+        onClick={() => (i - half === 0 ? {} : changeItem('years', i - half))}
+        attr-scroll-direction={touchType === 'years' ? scrollDirection : 0}
+        attr-is-scrolling={touchType === 'years' ? 1 : 0}
+      >
+        {year}
+      </div>
+    ));
+  };
+
+  const renderMonthsBlock = () => {
+    return (
+      <div
+        className={`mobile-calendar_wrapper_body_months ${classes?.monthsBlock}`}
+      >
+        <div
+          className={`mobile-calendar_wrapper_body_months--prev ${classes?.prevItem}`}
+        >
+          <ChevronUp
+            onClick={() => changeItem('months', -1)}
+            onMouseDown={() => onArrowMouseDown('months', -1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_months-list ${classes?.monthsList}`}
+          ref={monthsListRef}
+        >
+          {renderMonthsList()}
+          {isMobile && (
+            <div className="mobile-calendar_wrapper_body_months-list_touch-zone"></div>
+          )}
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_months--next ${classes?.nextItem}`}
+        >
+          <ChevronDown
+            onClick={() => changeItem('months', 1)}
+            onMouseDown={() => onArrowMouseDown('months', 1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+      </div>
+    );
+  };
+  const renderDaysBlock = () => {
+    return (
+      <div
+        className={`mobile-calendar_wrapper_body_days ${classes?.daysBlock}`}
+      >
+        <div
+          className={`mobile-calendar_wrapper_body_days--prev ${classes?.prevItem}`}
+        >
+          <ChevronUp
+            onClick={() => changeItem('days', -1)}
+            onMouseDown={() => onArrowMouseDown('days', -1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_days-list ${classes?.daysList}`}
+          ref={daysListRef}
+        >
+          {renderDaysList()}
+          {isMobile && (
+            <div className="mobile-calendar_wrapper_body_days-list_touch-zone"></div>
+          )}
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_days--next ${classes?.nextItem}`}
+        >
+          <ChevronDown
+            onClick={() => changeItem('days', 1)}
+            onMouseDown={() => onArrowMouseDown('days', 1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+      </div>
+    );
+  };
+  const renderYearsBlock = () => {
+    return (
+      <div
+        className={`mobile-calendar_wrapper_body_years ${classes?.yearsBlock}`}
+      >
+        <div
+          className={`mobile-calendar_wrapper_body_years--prev ${classes?.prevItem}`}
+        >
+          <ChevronUp
+            onClick={() => changeItem('years', -1)}
+            onMouseDown={() => onArrowMouseDown('years', -1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_years-list ${classes?.yearsList}`}
+          ref={yearsListRef}
+        >
+          {renderYearsList()}
+          {isMobile && (
+            <div className="mobile-calendar_wrapper_body_years-list_touch-zone"></div>
+          )}
+        </div>
+        <div
+          className={`mobile-calendar_wrapper_body_years--next ${classes?.nextItem}`}
+        >
+          <ChevronDown
+            onClick={() => changeItem('years', 1)}
+            onMouseDown={() => onArrowMouseDown('years', 1)}
+            onMouseUp={onArrowMouseUp}
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={`mobile-calendar_wrapper ${classes?.wrapper}`}
+      onTouchMove={onTouchMove}
+    >
+      <div className={`mobile-calendar_wrapper_label ${classes?.label}`}>
+        {label}
+      </div>
+      {showSelectedDate && (
+        <div className={`mobile-calendar_wrapper_label  ${classes?.label}`}>
+          {moment(date).format('LL')}
+        </div>
+      )}
+      <div className={`mobile-calendar_wrapper_body  ${classes?.body}`}>
+        {renderMonthsBlock()}
+        {renderDaysBlock()}
+        {renderYearsBlock()}
+      </div>
+    </div>
+  );
+}
+
+export default MobileCalendar;

package/dist/Atomic/FormElements/MultiSelect/MultiSelect.jsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+
+import CheckboxInput from '../CheckboxInput/CheckboxInput';
+import Input from '../Input/Input';
+
+import './MultiSelect.scss';
+
+function MultiSelect({ options, chosenOptions, onChange }) {
+  const [searchValue, setSearchValue] = useState('');
+
+  const checkHandler = (state, value) => {
+    if (state) {
+      onChange([...chosenOptions, value]);
+    }
+    else {
+      onChange(chosenOptions.filter(item => item !== value));
+    }
+  };
+
+  const filteredOptions = options.filter(({ label }) =>
+    label.toLowerCase().includes(searchValue.toLowerCase()),
+  );
+
+  return (
+    <div className="multiselect">
+      <Input
+        value={searchValue}
+        onChange={value => setSearchValue(value)}
+        placeholder="Search"
+      />
+      <div className="multiselect__list">
+        {filteredOptions.map(({ label, value, id }) => (
+          <CheckboxInput
+            key={id}
+            value={chosenOptions.includes(value)}
+            label={label}
+            onChange={state => checkHandler(state, value)}
+            className="multiselect__item"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default MultiSelect;