intelicoreact 1.8.10 → 1.8.12

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

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

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