intelicoreact 0.0.94 → 0.0.95

package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -26,8 +26,12 @@ const OpenedPart = React.forwardRef((props, ref) => {
         setIsCompare,
         toggleOff,
         isShortWeekNames,
-        minDate = null,
-        maxDate = null
+        minDate,
+        maxDate,
+        format,
+        momentMinDate,
+        momentMaxDate,
+        isDontLimitFuture,
     } = props;
 
     const items = isCompact ? [...Object.keys(intervals)] : [...Object.keys(intervals), customKey];
@@ -82,7 +86,7 @@ const OpenedPart = React.forwardRef((props, ref) => {
                                 label={(txt?.labels && txt?.labels[item]) || intervals[item]?.label || (item === customKey ? CUSTOM_INTERVAL_KEY_TEXT : item )}
                                 isActive={activeInterval === item}
                                 onItemClick={() => handleItemClick(item.value || item)}
-                                disabled={item === customKey}
+                                disabled={item === customKey || (minDate && intervals[item]?.start?.()?.isBefore?.(momentMinDate))}
                             />
                         ))}
                     </div>
@@ -109,6 +113,10 @@ const OpenedPart = React.forwardRef((props, ref) => {
                         isShortWeekNames={isShortWeekNames}
                         minDate={minDate}
                         maxDate={maxDate}
+                        format={format}
+                        momentMinDate={momentMinDate}
+                        momentMaxDate={momentMaxDate}
+                        isDontLimitFuture={isDontLimitFuture}
                     />
                 )}
             </div>

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

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

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

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