intelicoreact 0.0.95 → 0.0.98

package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.js

@@ -1,315 +0,0 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
-import moment from 'moment';
-
-import './MobileCalendar.scss';
-import { ChevronDown, ChevronUp } from 'react-feather';
-import { IoFastFood } from 'react-icons/io5';
-
-require('./../../../../src/Functions/customEventListener');
-
-const MobileCalendar = ({
-  minDate = moment().subtract('10', 'years'),
-  maxDate = moment().add('10', 'years'),
-  value,
-  rows = 5,
-  label = "",
-  timeout = 500,
-  isMobile = true,
-  showSelectedDate = false,
-
-  classes = {
-    wrapper: "",
-    label: "",
-    body: "",
-
-    yearsBlock: "",
-    yearsList: "",
-    yearsListItem: "",
-
-    monthsBlock: "",
-    monthsList: "",
-    monthsListItem: "",
-
-    daysBlock: "",
-    daysList: "",
-    daysListItem: "",
-
-    prevItem: "",
-    nextItem: "",
-    activeItem: "",
-  },
-  onChange = () => {},
-}) => {
-  const Body = document.querySelector("body");
-  const listItem = document.querySelector(".mobile-calendar_wrapper_body_months-list--item");
-
-  const [date, setDate] = useState(value || moment());
-
-  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 listItemHeight = listItem?.getBoundingClientRect()?.height;
-
-  //--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 onArrowMouseDown = (type, value) => {
-    setIsMouseDown(true);
-    setMouseDownOn({ type, value });
-  };
-  const onArrowMouseUp = () => {
-    setIsMouseDown(false);
-    setMouseDownOn(null);
-  };
-  const onWheel = (e, type) => {
-    const { deltaY } = e;
-
-    changeItem(type, deltaY < 0 ? -1 : 1);
-  };
-  const onTouchStart = (e, type) => {
-    const { timeStamp, changedTouches } = e;
-    const { pageY } = changedTouches[0];
-
-    setTouchY(pageY);
-    setTouchTimestamp(timeStamp);
-    setTouchType(type);
-
-    Body?.addEventListener('touchend', (e) => onTouchEnd(e, pageY, timeStamp, type));
-
-  };
-  const onTouchMove = (e) => {
-    if(!touchY || !touchType) return;
-
-    const { timeStamp, changedTouches } = e;
-    const { pageY } = changedTouches[0];
-
-    const deltaY = touchY - pageY;
-
-    if(Math.abs(deltaY) < listItemHeight/2) 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 > 1)
-      innertionScroll({startY, pageY, timeStamp, startTime, touchType});
-    else
-      setTouchType(null);
-
-    setTouchY(null);
-
-    Body?.clearEventListeners('touchend');
-  };
-  const innertionScroll = ({startY, pageY, timeStamp, startTime, touchType}) => {
-    const path = Math.abs(startY-pageY);//in px
-    const time = timeStamp-startTime;//ms
-    const pxPerMs = path/time;//speed
-
-    const S = (pxPerMs/2*time)/2;
-    const blocks = Math.ceil(S/listItemHeight)*6*pxPerMs;
-    let timeout;
-
-    for(let i = 1; i <= blocks; ++i){
-      timeout = i*pxPerMs+Math.pow(i,2)*1.2;
-      setTimeout(() => {
-        changeItem(touchType, startY-pageY < 0 ? -1 : 1);
-      }, timeout)
-    }
-
-    setTimeout(() => {
-      setTouchType(null);
-    }, 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--//
-  //Events Observer
-  useEffect(() => {
-    document.addEventListener('mouseup', onArrowMouseUp);
-    return () => {
-      document.removeEventListener('mouseup', onArrowMouseUp);
-    };
-  }, []);
-
-  useEffect(() => {
-    onChange(date);
-  }, [date]);
-
-  //--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 renderMonthBlock = () => {
-    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}`}
-          onTouchStart={(e) => onTouchStart(e, "months")}
-          onWheel={(e) => onWheel(e, "months")}
-        >
-          {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}`}
-          onTouchStart={(e) => onTouchStart(e, "days")}
-          onWheel={(e) => onWheel(e, "days")}
-        >
-          {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}`}
-          onTouchStart={(e) => onTouchStart(e, "years")}
-          onWheel={(e) => onWheel(e, "years")}
-        >
-          {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}`}>
-        {renderMonthBlock()}
-        {renderDaysBlock()}
-        {renderYearsBlock()}
-      </div>
-    </div>
-  );
-};
-
-export default MobileCalendar;

package/src/Atomic/FormElements/MobileCalendar/MobileCalendar.scss

@@ -1,120 +0,0 @@
-.unselectable {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.mobile-calendar_wrapper{
-  @extend .unselectable;
-  max-width: 350px;
-  background: #F8FBFF;
-  padding: 10px;
-  box-shadow: 0 0 10px 10px #00000014;
-  border-radius: 16px;
-
-  &_label{
-    text-align: center;
-    font-size: 16px;
-    line-height: 24px;
-    margin: 16px 0px;
-  }
-
-  &_body{
-    display: flex;
-    justify-content: space-between;
-
-    &_months,
-    &_days,
-    &_years{
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      &--prev,
-      &--next{
-        color:#A6AAB4;
-        cursor: pointer;
-      }
-
-      &-list{
-        position: relative;
-        overflow: hidden;
-
-        &::before,
-        &::after{
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: #3B414B;
-          height: 32px;
-          width: 90px;
-          cursor: pointer;
-          content: "0000";
-          background-color: red;
-          position: absolute;
-        }
-
-        &::before{
-          top: 0;
-          transform: translateY(-100%);
-        }
-
-        &::after{
-          bottom: 0;
-          transform: translateY(100%);
-        }
-
-        &--item{
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: #3B414B;
-          height: 32px;
-          width: 90px;
-          cursor: pointer;
-
-          &:not(.active){
-            transition: transform 1s;
-          }
-          &:not(.active)[attr-scroll-direction="1"]{
-            transform: translateY(25%);
-          }
-          &:not(.active)[attr-scroll-direction="-1"]{
-            transform: translateY(-25%);
-          }
-
-          &:not(.active)[attr-is-scrolling="1"]{
-            opacity: 0.3;
-          }
-
-
-          &.active{
-            background: #FFFFFF;
-            border: 1px solid #FFFFFF;
-            box-sizing: border-box;
-            box-shadow: 0px 4px 26px rgba(0, 67, 96, 0.1);
-            border-radius: 8px;
-          }
-
-          &.transparent{
-            opacity: 0.5;
-          }
-        }
-
-        &_touch-zone{
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          z-index: 5;
-        }
-      }
-
-
-    }
-  }
-}

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

@@ -1,30 +0,0 @@
-import React, { useState } from 'react';
-import MobileCalendar from './MobileCalendar';
-
-global.lng = 'en';
-
-export default {
-  title: 'Form Elements/Mobile Calendar',
-  component: MobileCalendar,
-  argTypes: {
-    value: {
-      description: 'string (mm.dd.yyyy)',
-    },
-  },
-};
-
-const Template = (args) => {
-  const [date, setDate] = useState('');
-
-  return <MobileCalendar classes={{wrapper: "123"}} onChange={console.log}/>;
-};
-
-export const CalendarTemplate = Template.bind({});
-
-CalendarTemplate.args = {
-  value: '',
-  minDate: '01/01/1900',
-  maxDate: '01/01/2100',
-  isDontLimitFuture: true,
-  // isListTop: true,
-};

package/src/Atomic/FormElements/Modal/Modal.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-import { X } from 'react-feather';
-
-import Button from '../../UI/Button/Button';
-
-import './Modal.scss';
-
-const Modal = ({
-  isOpen,
-  onConfirm,
-  closeModal,
-  children,
-  className,
-  title,
-  variant,
-  mode,
-  size,
-  confirmBtnLabel,
-  noConfirmBtn,
-  noFooter,
-  confirmBtnVariant = 'primary',
-  closeBtnText
-}) => {
-  if (!isOpen) return null;
-
-  const renderModalTitle = () => {
-    if (mode && mode !== 'default') return `${mode?.[0].toUpperCase() + mode?.slice(1)} ${title}`;
-    return title;
-  };
-
-  const handleConfirm = () => {
-    if (onConfirm) onConfirm();
-    closeModal();
-  };
-
-  return (
-    <div className="modal-box j5">
-      <div className={isOpen ? 'modal-overlay' : 'hidden'} onClick={closeModal} />
-
-      <div className={cn(className, { [`modal-${size}`]: size }, `${isOpen ? 'modal' : 'hidden'}`)}>
-        <div className={cn('modal__header', { [`modal__header-${variant}`]: variant })}>
-          <span className={cn('modal__header-title', { [`modal__header-${variant}-title`]: variant })}>{renderModalTitle()}</span>
-
-          <div onClick={closeModal} className={cn('modal-close-icon-box', { 'modal-close-icon-box-primary': variant === 'primary' })}>
-            <X className="modal-close-icon" />
-          </div>
-        </div>
-
-        <div className="modal__body">{children}</div>
-        {!noFooter && (
-          <div className="modal__footer">
-            <Button variant="dark-outline" onClick={closeModal} label={closeBtnText || 'Cancel'} />
-            {!noConfirmBtn && (
-              <Button
-                onClick={() => handleConfirm()}
-                label={confirmBtnLabel || mode?.[0].toUpperCase() + mode?.slice(1) || 'Apply'}
-                className="ml5"
-                variant={confirmBtnVariant}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Modal;