intelicoreact 0.0.6 → 0.0.7

package/src/Molecular/Datepicker/Datepicker.js

@@ -0,0 +1,346 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useClickOutside } from '../../Functions/useClickOutside';
+import InputMask from 'react-input-mask';
+import moment from 'moment';
+import cn from 'classnames';
+
+import Langs from '../../../../Langs';
+import Button from '../../Atomic/UI/Button/Button';
+import Calendar from './components/Calendar';
+
+const padTime = (time) => {
+  return `${time.toString().padStart(2, '0')}:00`;
+};
+
+import './Datepicker.scss';
+import Switcher from '../../Atomic/FormElements/Switcher/Switcher';
+import Dropdown from '../../Atomic/FormElements/Dropdown/Dropdown';
+import Input from '../../Atomic/FormElements/Input/Input';
+
+const Datepicker = (props) => {
+  const { values = {}, onChange, onChangeCompare, onCancel, getSelectedMode = () => {}, onChangeInterval, isCompareHidden, limitRange } = props;
+  const { start = null, end = null, compare = false } = values;
+  const txt = Langs[global.lng];
+  const startDateInputRef = useRef(null);
+  const endDateInputRef = useRef(null);
+
+  const [startDate, setStartDate] = useState(start);
+  const [endDate, setEndDate] = useState(end);
+  const dateInterval = getSelectedMode({ start: startDate, end: endDate });
+
+  const [startDateInput, setStartDateInput] = useState(start);
+  const [endDateInput, setEndDateInput] = useState(end);
+  const [startHour, setStartHour] = useState(start ? moment(start).hour() : 0);
+  const [endHour, setEndHour] = useState(end ? moment(end).hour() : 0);
+  // eslint-disable-next-line no-unused-vars
+  const [isCompare, setIsCompare] = useState(compare);
+  const [date1, setDate1] = useState(start ? moment(start).toDate() : moment().subtract(1, 'month').toDate());
+  const [date2, setDate2] = useState(end ? moment(end).toDate() : moment().toDate());
+  const [isStartFocused, setIsStartFocused] = useState(false);
+  const [isEndFocused, setIsEndFocused] = useState(false);
+  const [hoverStatus, setHoverStatus] = useState(null);
+
+  const isNearby = useMemo(() => moment(date2).subtract(1, 'month').isSame(moment(date1), 'month'), [date1, date2]);
+
+  const isPreviousPeriodShowed = useMemo(() => isCompare && !isCompareHidden && startDate && endDate, [startDate, endDate, isCompare]);
+
+  const prevEndHour = useRef(endHour);
+
+  const getStartHourItems = () =>
+    [...Array(24).keys()].map((hour) => ({
+      label: padTime(hour),
+      value: hour,
+      disabled: moment(startDate).isSame(endDate, 'day') && endHour <= hour,
+    }));
+  const getEndHourItems = () =>
+    [...Array(24).keys()].map((hour) => ({
+      label: padTime(hour + 1),
+      value: hour === 23 ? 0 : hour + 1,
+      disabled:
+        (moment(startDate).isSame(endDate, 'day') || (moment(startDate).isSame(moment(endDate).subtract(1, 'days'), 'day') && endHour === 0)) &&
+        hour < startHour,
+    }));
+
+  const startPrevDate = useMemo(() => {
+    if (isPreviousPeriodShowed) {
+      const intervalHoursCount = moment(endDate).diff(startDate, 'hours');
+      return moment(startDate).subtract(intervalHoursCount, 'hours').toDate();
+    } else return null;
+  }, [startDate, endDate, isCompare]);
+
+  const endPrevDate = useMemo(() => {
+    if (isPreviousPeriodShowed) {
+      return startDate;
+    } else return null;
+  }, [startDate, endDate, isCompare]);
+
+  const title = useMemo(() => {
+    if (isCompare && !isCompareHidden && startDate && endDate) {
+      return `${moment(startPrevDate).format('ll')} (${moment(startPrevDate).format('HH:mm')}) - ${moment(endPrevDate).format('ll')} (${moment(
+        endPrevDate
+      ).format('HH:mm')})`;
+    } else return '';
+  }, [startDate, endDate, isCompare]);
+
+  const subtractDay = (date) => (endHour === 0 ? moment(date).subtract(1, 'days') : date);
+  const addDay = (date) => (endHour === 0 ? moment(date).add(1, 'days') : date);
+
+  useEffect(() => {
+    if (moment(startDate).isSameOrAfter(endDate)) {
+      setStartDate(moment(endDate).subtract(1, 'd').toDate());
+      setDate1(moment(endDate).subtract(1, 'd'));
+    }
+  }, [startDate]);
+
+  useEffect(() => {
+    if (moment(endDate).isSameOrBefore(startDate)) {
+      setEndDate(moment(startDate).add(1, 'd').toDate());
+      setDate2(moment(startDate).add(1, 'd'));
+    }
+  }, [endDate]);
+
+  useEffect(() => {
+    setStartDateInput(startDate);
+    setEndDateInput(endDate);
+    if (moment(startDate).isBefore(moment(endDate), 'month')) {
+      setDate1(moment(startDate));
+      setDate2(moment(endDate));
+    }
+  }, [startDate, endDate]);
+
+  useEffect(() => {
+    if (moment(date1).isSameOrAfter(moment(date2), 'month')) {
+      setDate1(moment(date2).subtract(1, 'month'));
+    }
+  }, [date1, date2]);
+
+  useEffect(() => {
+    onChangeInterval(dateInterval);
+  }, [dateInterval]);
+
+  const handleClick = (date) => {
+    prevEndHour.current = 0;
+    if (!startDate || (startDate && endDate && !(moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0))) {
+      setStartDate(moment(date).startOf('day').toDate());
+      setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
+      setStartHour(0);
+      setEndHour(0);
+    } else if (moment(date).isBefore(moment(startDate), 'day')) {
+      setEndDate(moment(startDate).add(1, 'd').startOf('day').toDate());
+      setStartDate(moment(date).set('hour', parseInt(startHour, 10)).toDate());
+    } else if (moment(date).isAfter(moment(startDate), 'day')) {
+      setEndDate(moment(date).add(1, 'd').startOf('day').toDate());
+    }
+    setHoverStatus(null);
+  };
+
+  let timerId;
+
+  const handleHover = (date) => {
+    if (!date) {
+      timerId = setTimeout(() => {
+        setHoverStatus(null);
+      }, 400);
+      return;
+    }
+    if (timerId) clearTimeout(timerId);
+    if (moment(startDate).add(1, 'd').isSame(endDate, 'day') && endHour === 0) {
+      if (moment(date).isAfter(moment(startDate), 'day')) setHoverStatus('end');
+      else if (moment(date).isBefore(moment(startDate), 'day')) setHoverStatus('start');
+      else setHoverStatus(null);
+    } else {
+      setHoverStatus('start');
+    }
+  };
+
+  const handleChangeStartHour = ({ target: { value: val } }) => {
+    setStartHour(+val);
+    setStartDate(
+      moment(startDate)
+        .set('hour', +val)
+        .toDate()
+    );
+  };
+
+  const handleChangeEndHour = ({ target: { value: val } }) => {
+    const newHour = +val;
+    setEndHour(newHour);
+    let newEndDate;
+    if (prevEndHour.current === 0 && newHour !== 0) {
+      newEndDate = moment(endDate).subtract(1, 'days');
+    } else if (prevEndHour.current !== 0 && newHour === 0) {
+      newEndDate = moment(endDate).add(1, 'days');
+    } else {
+      newEndDate = endDate;
+    }
+    prevEndHour.current = newHour;
+    setEndDate(moment(newEndDate).set('hour', newHour).toDate());
+  };
+
+  const renderButtons = () => (
+    <>
+      <Button className="plr15 mr5" onClick={() => onCancel()}>
+        {txt.buttons.cancel}
+      </Button>
+      <Button
+        className="plr20"
+        type="filled"
+        disabled={!startDate || !endDate}
+        onClick={() =>
+          onChange({
+            start: startDate,
+            end: endDate,
+            startPrevDate,
+            endPrevDate,
+            compare: isCompare,
+          })
+        }
+      >
+        {txt.buttons.apply}
+      </Button>
+    </>
+  );
+
+  const renderPreviousPeriod = () => (
+    <>
+      {txt.labels.previousPeriod}: <span className="date-picker__previous-period-interval">{title}</span>
+    </>
+  );
+
+  const handleStartDateFocus = () => {
+    setIsStartFocused(true);
+    setStartDateInput(moment(startDate).format('L'));
+  };
+
+  const handleStartDateBlur = () => {
+    let newDate;
+    if (moment(startDateInput).isValid()) {
+      newDate = moment(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
+      setStartDate(newDate);
+    } else {
+      newDate = startDate;
+      setStartDateInput(newDate);
+    }
+    setIsStartFocused(false);
+    startDateInputRef.current.blur();
+    setDate1(moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate));
+  };
+
+  const handleEndDateFocus = () => {
+    setIsEndFocused(true);
+    setEndDateInput(moment(subtractDay(endDateInput)).format('L'));
+  };
+
+  const handleEndDateBlur = () => {
+    let newDate;
+    if (moment(endDateInput).isValid()) {
+      newDate = moment(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
+      setEndDate(addDay(newDate));
+    } else {
+      newDate = endDate;
+      setEndDateInput(newDate);
+    }
+    setIsEndFocused(false);
+    endDateInputRef.current.blur();
+    setDate2(newDate);
+    setEndDateInput();
+  };
+
+  const handleKeyPressed = (e, handleDateBlur) => {
+    if (e.key === 'Enter') handleDateBlur();
+  };
+
+  return (
+    <div className="date-picker">
+      <div className="date-picker__header">
+        <Input
+          dataTest="datepicker_start-date-input"
+          className={cn('mr5', { 'date-picker-text-input--active': hoverStatus === 'start' })}
+          value={isStartFocused ? startDateInput : moment(startDate).format('ll')}
+          disabled={!startDate}
+          onChange={(e) => setStartDateInput(e.target.value)}
+          onFocus={handleStartDateFocus}
+          onBlur={handleStartDateBlur}
+          onKeyPress={(e) => handleKeyPressed(e, handleStartDateBlur)}
+          ref={startDateInputRef}
+        />
+        <Dropdown
+          dataTest="datepicker_start-hour-select-input"
+          onChange={handleChangeStartHour}
+          value={startHour}
+          items={getStartHourItems()}
+          disabled={!startDate}
+          short
+        />
+        <div className="pl5 pr5 date-picker__header--gray">—</div>
+        <Input
+          dataTest="datepicker_end-date-input"
+          className={cn('mr5', { 'date-picker-text-input--active': hoverStatus === 'end' })}
+          value={isEndFocused ? endDateInput : moment(subtractDay(endDate)).format('ll')}
+          disabled={!endDate}
+          onChange={(e) => setEndDateInput(e.target.value)}
+          onFocus={handleEndDateFocus}
+          onBlur={handleEndDateBlur}
+          onKeyPress={(e) => handleKeyPressed(e, handleEndDateBlur)}
+          ref={endDateInputRef}
+        />
+        <Dropdown
+          dataTest="datepicker_end-hour-select-input"
+          onChange={handleChangeEndHour}
+          value={endHour}
+          items={getEndHourItems()}
+          disabled={!endDate}
+          short
+        />
+      </div>
+      <div className="date-picker__previous-period">{isCompare && !isCompareHidden && startDate && endDate && renderPreviousPeriod()}</div>
+      <div className="date-picker__calendars">
+        <Calendar
+          date={date1}
+          setDate={setDate1}
+          allowNext={!isNearby}
+          startDate={startDate}
+          endDate={endDate}
+          startPrevDate={startPrevDate}
+          endPrevDate={endPrevDate}
+          onClick={handleClick}
+          onHover={handleHover}
+          limitRange={limitRange}
+        />
+        <Calendar
+          date={date2}
+          setDate={setDate2}
+          allowPrev={!isNearby}
+          startDate={startDate}
+          endDate={endDate}
+          startPrevDate={startPrevDate}
+          endPrevDate={endPrevDate}
+          onClick={handleClick}
+          onHover={handleHover}
+        />
+      </div>
+      <div className="date-picker__footer j46">
+        {!isCompareHidden ? (
+          <div className="j4">
+            <div className="mr5">
+              <Switcher
+                dataTest="datepicker_compare"
+                label={txt.labels.compare}
+                isSwitchOn={isCompare}
+                onChange={() => {
+                  onChangeCompare(!isCompare);
+                  setIsCompare((state) => !state);
+                }}
+              />
+            </div>
+          </div>
+        ) : (
+          <div />
+        )}
+        <div>{renderButtons()}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Datepicker;

package/src/Molecular/Datepicker/Datepicker.scss

@@ -0,0 +1,8 @@
+.test {
+  width: 380px;
+}
+
+.testing {
+  border: none;
+  box-shadow: none;
+}

package/src/Molecular/Datepicker/Datepicker.stories.js

@@ -0,0 +1,27 @@
+import React, { useRef, useState } from 'react';
+import { ref } from 'yup';
+import Datepicker from './Datepicker';
+
+global.lng = 'en';
+
+// export default {
+//   title: 'Form Elements/Datepicker',
+//   component: Datepicker,
+// };
+
+const Template = (args) => {
+  const params = {
+    minDate: args?.minDate,
+    maxDate: args?.maxDate,
+  };
+
+  return <Datepicker data={args.date} params={params} />;
+};
+
+export const DatepickerTemplate = Template.bind({});
+
+DatepickerTemplate.args = {
+  date: '10/14/2021',
+  minDate: '10/11/2021',
+  maxDate: '10/25/2021',
+};

package/src/Molecular/Datepicker/components/Calendar.js

@@ -0,0 +1,118 @@
+import cn from 'classnames';
+import moment from 'moment';
+import React, { useEffect, useMemo, useState } from 'react';
+import * as Icon from 'react-feather';
+
+const Calendar = (props) => {
+  const { date, setDate, startDate, endDate, allowPrev = true, allowNext = true, onClick, onHover, startPrevDate, endPrevDate, limitRange } = props;
+
+  const [days, setDays] = useState({});
+
+  const title = useMemo(() => `${moment(date).format('MMM')} ${moment(date).format('YYYY')}`, [date]);
+
+  useEffect(() => {
+    const result = {};
+    const day = moment(date).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);
+  }, [date]);
+
+  const renderDay = (week, dayOfWeek) => {
+    const day = days[week][dayOfWeek];
+    const isFutureDay = day && moment(day.date).isAfter(moment(), 'day');
+    const isPastDay = limitRange ? day && moment(day.date).isBefore(moment().subtract(limitRange, 'days'), 'day') : null;
+    const isRangeEnd = day && (moment(day.date).isSame(startDate, 'day') || moment(day.date).isSame(moment(endDate).subtract(1, 'hour'), 'day'));
+    const isRangeInside =
+      day &&
+      startDate &&
+      endDate &&
+      moment(day.date).isAfter(startDate, 'day') &&
+      moment(day.date).isBefore(moment(endDate).subtract(1, 'hour'), 'day');
+    const isPrevRangeEnd =
+      day && (moment(day.date).isSame(startPrevDate, 'day') || moment(day.date).isSame(moment(endPrevDate).subtract(1, 'day'), 'day'));
+    const isPrevRangeInside =
+      day &&
+      startPrevDate &&
+      endPrevDate &&
+      moment(day.date).isAfter(startPrevDate, 'day') &&
+      moment(day.date).isBefore(moment(endPrevDate).subtract(1, 'day'), 'day');
+    const classNames = cn(
+      'calendar__day',
+      { 'calendar__day--clickable': day },
+      { 'calendar__day--disabled': isFutureDay },
+      { 'calendar__day--disabled': isPastDay },
+      { 'calendar__day--range-end': isRangeEnd },
+      { 'calendar__day--range-inside': isRangeInside },
+      { 'calendar__day--prev-range-end': isPrevRangeEnd },
+      { 'calendar__day--prev-range-inside': isPrevRangeInside }
+    );
+
+    return (
+      <div
+        key={`${week}_${dayOfWeek}`}
+        className={classNames}
+        onClick={day && !isFutureDay ? () => onClick(day.date) : null}
+        onMouseOver={day && !isFutureDay ? () => onHover(day.date) : null}
+        onMouseLeave={() => onHover(null)}
+      >
+        {day && day.date.getDate()}
+      </div>
+    );
+  };
+
+  const handlePrev = () => {
+    setDate(moment(date).subtract(1, 'month').toDate());
+  };
+
+  const handleNext = () => {
+    setDate(moment(date).add(1, 'month').toDate());
+  };
+
+  return (
+    <div className="calendar">
+      <div className="calendar-header">
+        <div className="calendar-header__prev">
+          {allowPrev && (
+            <div onClick={handlePrev}>
+              <Icon.ChevronLeft size={16} />
+            </div>
+          )}
+        </div>
+        <div className="calendar-header__title">{title}</div>
+        <div className="calendar-header__next">
+          {allowNext && (
+            <div onClick={handleNext}>
+              <Icon.ChevronRight size={16} />
+            </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').charAt(0)}
+            </div>
+          );
+        })}
+      </div>
+      {Object.keys(days).map((week, index) => (
+        <div key={`week_${index}`} className="calendar__week">
+          {[...Array(7).keys()].map((dayOfWeek) => renderDay(week, dayOfWeek))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Calendar;

package/src/scss/_vars.scss

@@ -1,4 +1,6 @@
 /* THEME COLORS*/
+@use "sass:math";
+
 $color--secondary: #f06d8d;
 $color--primary: #6b81dd;
 $color--dark: #1e1e2d;
@@ -43,4 +45,4 @@ $h4-fs: 22px;
 $h4-lh: 1.18;
 
 $txt: 14px;
-$txt--lh: (20 / 14);
+$txt--lh: math.div(20, 14);

package/src/scss/main.scss

@@ -1,5 +1,5 @@
 @import './fonts';
-@import './anme/styles.scss';
+@import '~anme/scss/styles.scss';
 
 body {
     font-family: 'Roboto', sans-serif;