intelicoreact 0.0.96 → 0.0.97

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

@@ -1,432 +0,0 @@
-// eslint-disable-next-line no-unused-vars
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import moment from 'moment-timezone';
-import cn from 'classnames';
-
-import { getActualDateRange } from '../dependencies';
-
-import SelectInput from '../../Dropdown/Dropdown';
-import TextInput from '../../Input/Input';
-import Btn from '../../../UI/Button/Button';
-// import Switcher from '../../Switcher/Switcher';
-import Calendar from '../../RangeCalendar/RangeCalendar';
-
-const padTime = (time) => {
-  return `${time.toString().padStart(2, '0')}:00`;
-};
-
-const handleDateInputOnChange = (value) => {
-  const replace = (val) => val.replace(/[^0-9\/]/g, '');
-
-  const input = replace(value);
-  const lastSymbol = input ? input.slice(-1) : '';
-  const previousValue = input ? input.slice(0, input.length - 1) : '';
-
-  if (value.length > 10 || lastSymbol === '/') return previousValue;
-  return previousValue.length === 2 || previousValue.length === 5 ? previousValue + '/' + lastSymbol : input;
-};
-
-const Datepicker = (props) => {
-  const {
-    txt,
-    className,
-    buttonsTypes = {},
-    values = {},
-    onChange,
-    onChangeCompare,
-    onCancel,
-    getSelectedMode,
-    onChangeInterval,
-    isCompareHidden,
-    limitRange,
-    handleItemClick,
-    setActiveInterval,
-    isShortWeekNames,
-    minDate,
-    maxDate,
-    momentMinDate,
-    momentMaxDate,
-    isDontLimitFuture,
-    format,
-  } = props;
-  const { start = null, end = null, compare = false } = values;
-  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 setInterval = () => {
-    setActiveInterval(getActualDateRange({ start: startDate, end: endDate }).intervalKey);
-  };
-
-  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));
-    }
-    setInterval();
-  }, [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 = (val) => {
-    setStartHour(+val);
-    setStartDate(
-      moment(startDate || moment())
-        .set('hour', +val)
-        .toDate()
-    );
-  };
-
-  const handleChangeEndHour = (val) => {
-    const newHour = +val;
-    setEndHour(newHour);
-    let newEndDate = moment();
-
-    if (endDate) {
-      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');
-      }
-    }
-
-    prevEndHour.current = newHour;
-    setEndDate(moment(newEndDate).set('hour', newHour).toDate());
-  };
-
-  const renderButtons = () => (
-    <>
-      <Btn className="date-picker__button" onClick={() => onCancel()} variant={buttonsTypes?.cancel}>
-        {txt?.buttons?.cancel || 'cancel'}
-      </Btn>
-      <Btn
-        className="date-picker__button"
-        variant={buttonsTypes?.apply}
-        disabled={!startDate || !endDate}
-        onClick={() =>
-          onChange({
-            start: startDate,
-            end: endDate,
-            startPrevDate,
-            endPrevDate,
-            compare: isCompare,
-          })
-        }
-      >
-        {txt?.buttons?.apply || 'apply'}
-      </Btn>
-    </>
-  );
-
-  const renderPreviousPeriod = () => (
-    <>
-      {txt.labels.previousPeriod}: <span className="date-picker__previous-period-interval">{title}</span>
-    </>
-  );
-
-  const doBlur = (type, e) => {
-    const executor = type === 'start' ? setIsStartFocused : setIsEndFocused;
-    e.target.blur();
-    executor(false);
-  };
-
-  const handleStartDateFocus = (e) => {
-    setIsStartFocused(true);
-    setStartDateInput(moment(startDate).format('L'));
-    setTimeout(() => e.target.select(), 0);
-  };
-
-  const handleStartDateBlur = (e) => {
-    let newDate;
-
-    if (!moment(startDateInput).isValid()) {
-      newDate = moment(startDate);
-    } else {
-      if (minDate && moment(startDateInput).isBefore(minDate)) newDate = momentMinDate;
-      else if (!isDontLimitFuture) {
-        const edge = maxDate ? momentMaxDate : moment().add(1, 'day').startOf('day');
-        if (moment(startDateInput).isAfter(edge)) newDate = edge;
-        else newDate = moment(startDateInput);
-      } else newDate = moment(startDateInput);
-    }
-
-    setStartDateInput(newDate.format(format));
-    setStartDate(newDate.set('hour', parseInt(startHour, 10)).toDate());
-
-    doBlur('start', e);
-    setDate1(moment(newDate).isSameOrAfter(moment(date2), 'month') ? moment(date2).subtract(1, 'month') : moment(newDate));
-  };
-
-  const handleEndDateFocus = (e) => {
-    setIsEndFocused(true);
-    setEndDateInput(moment(subtractDay(endDateInput)).format('L'));
-    setTimeout(() => e.target.select(), 0);
-  };
-
-  const handleEndDateBlur = (e) => {
-    let newDate;
-
-    if (!moment(endDateInput).isValid()) {
-      newDate = moment(endDate);
-    } else {
-      if (minDate && moment(endDateInput).isBefore(minDate)) newDate = momentMinDate;
-      else if (!isDontLimitFuture) {
-        const edge = maxDate ? momentMaxDate : moment().endOf('day');
-        if (moment(endDateInput).isAfter(edge)) newDate = maxDate ? edge : edge.startOf('day');
-        else newDate = moment(startDateInput);
-      } else newDate = moment(startDateInput);
-    }
-
-    setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
-    setEndDateInput(newDate.format(format));
-
-    doBlur('end', e);
-    setDate2(newDate);
-  };
-
-  const handleKeyPressed = (code, e, type) => {
-    if (code === 13) (type === 'start' ? handleStartDateBlur : handleEndDateBlur)(e);
-    if (code === 27) doBlur(type, e);
-  };
-
-  const startDateValue = startDate ? moment(startDate).format('ll') : '';
-  const endDateValue = endDate ? moment(endDate).subtract(1, 'm').format('ll') : '';
-
-  return (
-    <div className={cn('date-picker', className)}>
-      <div className="date-picker__header">
-        <div className="date-picker__inputs-block">
-          <TextInput
-            dataTest="datepicker_start-date-input"
-            className={cn({ 'date-picker__date-input_active': hoverStatus === 'start' })}
-            value={isStartFocused ? startDateInput : startDateValue}
-            onChange={(value) => setStartDateInput(handleDateInputOnChange(value))}
-            onFocus={handleStartDateFocus}
-            disabled={!startDate}
-            onBlur={handleStartDateBlur}
-            onKeyUp={(code, e) => handleKeyPressed(code, e, 'start')}
-            //ref={startDateInputRef}
-            // mask={moment(startDate).format('L').replace(/[0-9]/g, '9')}
-          />
-          <SelectInput
-            dataTest="datepicker_start-hour-select-input"
-            className={cn('date-picker__hour-select-input')}
-            onChange={(value) => handleChangeStartHour(value)}
-            value={startHour}
-            options={getStartHourItems()}
-            disabled={!startDate}
-            short
-          />
-          <div className="date-picker__inputs-separator date-picker__header--gray">—</div>
-          <TextInput
-            dataTest="datepicker_end-date-input"
-            className={cn({ 'date-picker__date-input_active': hoverStatus === 'end' })}
-            value={isEndFocused ? endDateInput : endDateValue}
-            disabled={!endDate}
-            onChange={(value) => setEndDateInput(handleDateInputOnChange(value))}
-            onFocus={handleEndDateFocus}
-            onBlur={handleEndDateBlur}
-            onKeyUp={(code, e) => handleKeyPressed(code, e, 'end')}
-            //ref={endDateInputRef}
-          />
-          <SelectInput
-            dataTest="datepicker_end-hour-select-input"
-            className={cn('date-picker__hour-select-input')}
-            onChange={(value) => handleChangeEndHour(value)}
-            value={endHour}
-            options={getEndHourItems()}
-            disabled={!endDate}
-            short
-          />
-        </div>
-        {isCompare && !isCompareHidden && startDate && endDate && <div className="date-picker__previous-period">{renderPreviousPeriod()}</div>}
-      </div>
-
-      <div className="date-picker__calendars">
-        <div className="date-picker__calendars-wrapper">
-          <Calendar
-            className="date-picker__calendar"
-            date={date1}
-            setDate={setDate1}
-            allowNext={!isNearby}
-            startDate={startDate}
-            endDate={endDate}
-            startPrevDate={startPrevDate}
-            endPrevDate={endPrevDate}
-            onClick={handleClick}
-            onHover={handleHover}
-            limitRange={limitRange}
-            isShortWeekNames={isShortWeekNames}
-            minDate={minDate}
-            maxDate={maxDate}
-            momentMinDate={momentMinDate}
-            momentMaxDate={momentMaxDate}
-          />
-          <Calendar
-            className="date-picker__calendar"
-            date={date2}
-            setDate={setDate2}
-            allowPrev={!isNearby}
-            startDate={startDate}
-            endDate={endDate}
-            startPrevDate={startPrevDate}
-            endPrevDate={endPrevDate}
-            onClick={handleClick}
-            onHover={handleHover}
-            isShortWeekNames={isShortWeekNames}
-            minDate={minDate}
-            maxDate={maxDate}
-            momentMinDate={momentMinDate}
-            momentMaxDate={momentMaxDate}
-            isDontLimitFuture={isDontLimitFuture}
-          />
-        </div>
-      </div>
-      <div
-        className={cn('date-picker__footer', {
-          'date-picker__footer_once-element': isCompareHidden,
-        })}
-      >
-        {/* {!isCompareHidden ? (
-                    <div className="date-picker__compare-block">
-                        <div className="mr5">
-                            <Switcher
-                                dataTest="datepicker_compare"
-                                label={txt.labels.compare}
-                                isSwitchOn={isCompare}
-                                onChange={() => {
-                                    onChangeCompare(!isCompare);
-                                    setIsCompare(state => !state);
-                                }}
-                            />
-                        </div>
-                    </div>
-                ) : (
-                    <div />
-                )} */}
-        <div className="date-picker__buttons-block">{renderButtons()}</div>
-      </div>
-    </div>
-  );
-};
-
-export default Datepicker;

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

@@ -1,126 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import moment from 'moment-timezone';
-import cn from 'classnames';
-
-import {INTERVALS as intervals, CUSTOM_INTERVAL_KEY as customKey, CUSTOM_INTERVAL_KEY_TEXT } from '../dependencies';
-
-import SelectItem from './SelectItem';
-import Datepicker from './Datepicker';
-
-const OpenedPart = React.forwardRef((props, ref) => {
-    const {
-        txt,
-        buttonsTypes,
-        actualValues,
-        onChange = () => {},
-        isHoverable,
-        short,
-        isCompact = false,
-        isIntervalsHidden = false,
-        isCompareHidden = false,
-        limitRange,
-        isOptionsRight,
-        current,
-        setCurrent,
-        isCompare,
-        setIsCompare,
-        toggleOff,
-        isShortWeekNames,
-        minDate,
-        maxDate,
-        format,
-        momentMinDate,
-        momentMaxDate,
-        isDontLimitFuture,
-    } = props;
-
-    const items = isCompact ? [...Object.keys(intervals)] : [...Object.keys(intervals), customKey];
-
-    const [activeInterval, setActiveInterval] = useState(actualValues.intervalKey);
-
-    const handleItemClick = item => {
-        if (item !== customKey) {
-            onChange({
-                intervalKey: item,
-                compare: isCompare,
-            });
-            setTimeout(() => toggleOff(), 0);
-        }
-        setCurrent(item);
-    };
-
-    const getSelectedMode = newValues => {
-        const { start, end } = newValues;
-        if (moment(start).get('hour') !== 0 || moment(end).get('hour') !== 0) {
-            return customKey;
-        }
-        for (const [key, interval] of Object.entries(intervals)) {
-            if (moment(start).isSame(interval.start()) && moment(end).isSame(interval.end())) {
-                return key;
-            }
-        }
-        return customKey;
-    };
-
-    return (
-        <div
-            className={cn('date-range-input__opened-part', 'opened-part')}
-            // style={styles}
-        >
-            <div className={cn('opened-part__wrapper', {
-                'opened-part__wrapper_right-position-once-element': isOptionsRight && (isCompact || isIntervalsHidden),
-            })}>
-                {!isIntervalsHidden && (
-                    <div
-                        className={cn(
-                            'opened-part__intervals-list',
-                            // 'form-select-options',
-                            // { 'form-select-options--short': short },
-                            // { 'form-select-options--hoverable': isHoverable },
-                        )}
-                    >
-                        {items.map((item, index) => (
-                            <SelectItem
-                                key={index}
-                                item={item}
-                                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 || (minDate && intervals[item]?.start?.()?.isBefore?.(momentMinDate))}
-                            />
-                        ))}
-                    </div>
-                )}
-                {!isCompact && (
-                    <Datepicker
-                        className={cn('opened-part__date-picker')}
-                        buttonsTypes={buttonsTypes}
-                        values={actualValues}
-                        onChange={data => {
-                            onChange({
-                                intervalKey: current,
-                                ...data,
-                            });
-                            toggleOff();
-                        }}
-                        getSelectedMode={getSelectedMode}
-                        onChangeInterval={val => setCurrent(val)}
-                        onChangeCompare={data => setIsCompare(data)}
-                        onCancel={toggleOff}
-                        isCompareHidden={isCompareHidden}
-                        limitRange={limitRange}
-                        setActiveInterval={setActiveInterval}
-                        isShortWeekNames={isShortWeekNames}
-                        minDate={minDate}
-                        maxDate={maxDate}
-                        format={format}
-                        momentMinDate={momentMinDate}
-                        momentMaxDate={momentMaxDate}
-                        isDontLimitFuture={isDontLimitFuture}
-                    />
-                )}
-            </div>
-        </div>
-    );
-});
-export default OpenedPart;

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import cn from 'classnames';
-
-const SelectItem = ({ item, label, isActive, onItemClick, onMouseEnter, disabled }) => (
-    <div
-        className={cn(
-            'opened-part__intervals-item', {
-                'opened-part__intervals-item_active': isActive,
-                'opened-part__intervals-item_disabled': disabled,
-            }
-        )}
-        onClick={onItemClick}
-        onMouseEnter={onMouseEnter}
-        data-item={item}
-    >
-        {isActive && (
-            <svg className={cn('opened-part__intervals-item-icon-active')} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M13.3333 4L5.99999 11.3333L2.66666 8" stroke="black" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
-            </svg>
-        )}
-        {label}
-    </div>
-);
-export default SelectItem;