intelicoreact 0.0.96 → 0.0.97

package/src/Atomic/UI/Calendar/Calendar.js

@@ -1,190 +0,0 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
-import cn from 'classnames';
-import moment from 'moment';
-import InputMask from 'react-input-mask';
-import { ChevronLeft, ChevronRight } from 'react-feather';
-import './Calendar.scss';
-
-export default function (props) {
-  const { 
-    date, 
-    setDate, 
-    setIsOpened, 
-    allowPrev = true, 
-    allowNext = true, 
-    params, 
-    className, 
-    isListTop,
-  } = props;
-  // const { minDate = '01/01/1900', maxDate = moment().format('MM/DD/YYYY') } = params;
-  const { format, minDate, maxDate, momentMinDate, momentMaxDate, isDontLimitFuture } = params;
-  const [days, setDays] = useState({});
-  const [showDate, setShowDate] = useState(date);
-  const [isChangeYear, setIsChangeYear] = useState(false);
-  const [inputYearValue, setInputYearValue] = useState(moment(showDate).format('YYYY'));
-  const yearInputRef = useRef(null);
-
-  const selectedDay = moment(showDate);
-  const isError = 'Invalid date';
-
-  const showMonth = useMemo(() => moment(showDate).format('MMM'), [date, showDate]);
-  const showYear = useMemo(() => moment(showDate).format('YYYY'), [date, showDate]);
-
-  const isShovPrevArrow = allowPrev && !(minDate && moment(showDate).startOf('month').isSameOrBefore(momentMinDate, 'months'));
-  const isShovNextArrow = allowNext && (
-    isDontLimitFuture ||
-    !moment(showDate).startOf('month').isSameOrAfter(maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day'), 'months')
-  );
-
-  useEffect(() => {
-    const result = {};
-    const day = selectedDay.startOf('month');
-    const daysInMonth = day.daysInMonth();
-    for (let d = 0; d < daysInMonth; d += 1) {
-      let week = day.week();
-      if (day.month() === 11 && week === 1) week = 53;
-      if (day.month() === 0 && week === 53) week = 0;
-      if (!Object.prototype.hasOwnProperty.call(result, week)) {
-        result[week] = {};
-      }
-      result[week][day.weekday()] = { date: day.toDate() };
-      day.add(1, 'd');
-    }
-    setDays(result);
-  }, [showDate]);
-
-  const renderDay = (week, dayOfWeek) => {
-    const day = days[week][dayOfWeek];
-    if (!day) return <div className="calendar__day" />;
-    const isFutureDay = day && !isDontLimitFuture && maxDate ? moment(day.date).isAfter(momentMaxDate || moment().add(1, 'days'), 'day') : moment(day.date).isAfter(moment(), 'day');
-    const isBeforeDay = day && moment(day.date).isBefore((momentMinDate || ''), 'day');
-
-    const classNames = cn(
-      'calendar__day',
-      { 'calendar__day--clickable': day },
-      { 'calendar__day--disabled': !isDontLimitFuture && isFutureDay },
-      { 'calendar__day--disabled': isBeforeDay },
-      { 'calendar__day--selected': moment(date).format() === moment(day.date).format() }
-    );
-
-    return (
-      <div
-        key={`${week}_${dayOfWeek}`}
-        className={classNames}
-        onClick={
-          day && (isDontLimitFuture || !isFutureDay)
-            ? () => {
-                setDate(moment(day.date).format('L'));
-                setIsOpened(false);
-              }
-            : null
-        }
-        // onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
-        // onMouseLeave={() => onHover(null)}
-      >
-        {day && day.date.getDate()}
-      </div>
-    );
-  };
-
-  const handlePrev = () => {
-    setShowDate(moment(showDate).subtract(1, 'month').format('L'));
-  };
-
-  const handleNext = () => {
-    setShowDate(moment(showDate).add(1, 'month').format('L'));
-  };
-
-  const closeYearInput = () => {
-    const newDate = (() => {
-      const dateArr = showDate.split('/');
-      const oldYear = dateArr[2];
-      dateArr[2] = inputYearValue;
-      return moment(dateArr.join('/')).format('MM/DD/YYYY') === isError ? showDate : moment(dateArr.join('/')).format('MM/DD/YYYY');
-    })();
-    let resultDate = newDate;
-    if (minDate && moment(minDate) > moment(newDate)) resultDate = moment(showDate).format('MM/DD/YYYY');
-    else if (maxDate && moment(maxDate) < moment(newDate)) resultDate = moment(showDate).format('MM/DD/YYYY');
-
-    setIsChangeYear(false);
-    setShowDate(resultDate);
-    setInputYearValue(resultDate);
-  };
-
-  useEffect(() => {
-    if (isChangeYear && yearInputRef.current) {
-      const input = yearInputRef.current.getElementsByTagName('input')[0];
-      setInputYearValue(showYear);
-      setTimeout(() => {
-        input.focus();
-        input.select();
-      }, 0);
-    }
-  }, [isChangeYear]);
-
-  return (
-    <div
-      className={cn('calendar', className, {
-        'calendar_list-top': isListTop,
-      })}
-    >
-      <div className="calendar-header">
-        <div className="calendar-header__prev">
-          {isShovPrevArrow && (
-            <div onClick={handlePrev}>
-              <ChevronLeft />
-            </div>
-          )}
-        </div>
-        <div className={cn('calendar-header__title')} ref={yearInputRef}>
-          <span className="calendar-header__title-month">{`${showMonth} `}</span>
-          <span
-            className={cn('calendar-header__title-year', {
-              'calendar-header__title-year_change-mode': isChangeYear,
-            })}
-            onClick={() => setIsChangeYear(true)}
-          >
-            {isChangeYear ? (
-              <InputMask
-                className="calendar-header__title-year-change-input"
-                value={inputYearValue}
-                mask="9999"
-                onBlur={(e) => closeYearInput()}
-                onKeyUp={(e) => {
-                  if (e.key === 'Escape') setIsChangeYear(false);
-                  if (e.key === 'Enter') closeYearInput();
-                }}
-                onChange={(e) => setInputYearValue(e.target.value)}
-              />
-            ) : (
-              `${showYear}`
-            )}
-          </span>
-        </div>
-        <div className="calendar-header__next">
-          {isShovNextArrow && (
-            <div onClick={handleNext}>
-              <ChevronRight />
-            </div>
-          )}
-        </div>
-      </div>
-      <div className="calendar__week">
-        {[...Array(7).keys()].map((dayOfWeek) => {
-          return (
-            <div key={`day-of-week_${dayOfWeek}`} className="calendar__day calendar__day--title">
-              {moment().weekday(dayOfWeek).format('dd')}
-            </div>
-          );
-        })}
-      </div>
-      {Object.keys(days).map((week, index) => (
-        <div key={`week_${index}`} className="calendar__week">
-          {[...Array(7).keys()].map((dayOfWeek) => (
-            <React.Fragment key={`calendar-day--${dayOfWeek}`}>{renderDay(week, dayOfWeek)}</React.Fragment>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-}