intelicoreact 0.0.96 → 0.0.97

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

@@ -1,254 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import cn from 'classnames';
-import moment from 'moment-timezone';
-
-import { useClickOutside, useToggle, getActualDateRange, INTERVALS, ALL_TIME_KEY, CUSTOM_INTERVAL_KEY_TEXT } from './dependencies';
-
-import OpenedPart from './components/OpenedPart';
-import Arrow from '../../UI/Arrow/Arrow';
-
-import './InputDateRange.scss';
-
-const InputDateRange = (props) => {
-  const {
-    txt,
-    id,
-    label,
-    className,
-    value,
-    onChange = () => {},
-    error,
-    disabled,
-    isHoverable,
-    isCompact = false,
-    hideArrows = false,
-    isOptionsRight,
-    isUseAbs,
-    minDate = null,
-    maxDate = null,
-    format = 'MM/DD/YYYY',
-    isDontLimitFuture,
-  } = props;
-
-  const formatedMinDate = moment(minDate).format(format) !== 'Invalid date' 
-    ? moment(minDate).format(format) 
-    : null;
-
-  const formatedMaxDate = moment(maxDate).format(format) !== 'Invalid date' 
-    ? moment(maxDate).format(format) 
-    : null;
-
-  const momentMinDate =  moment(formatedMinDate, format).startOf('day');
-  const momentMaxDate =  moment(formatedMaxDate, format).startOf('day');
-
-  const actualValues = getActualDateRange(value);
-  const { isToggled, toggle, toggleOn, toggleOff } = useToggle(false);
-  const [current, setCurrent] = useState(actualValues?.intervalKey);
-  const [isCompare, setIsCompare] = useState(actualValues?.compare);
-
-  const ref = !isUseAbs ? useClickOutside(toggleOff) : useRef(null);
-  const internalContainerRef = useRef(null);
-
-  const handleChange = (input) => {
-    const newValue = getActualDateRange(input);
-    const formatedValue = {
-      intervalKey: newValue.intervalKey,
-      start: newValue.start ? moment(newValue.start).format(format || 'YYYY-MM-DDTHH:mm') : newValue.start,
-      end: newValue.end ? moment(newValue.end).format(format || 'YYYY-MM-DDTHH:mm') : newValue.end,
-      ...(newValue.compare ? { compare: newValue.compare } : {}),
-      ...(newValue.startPrevDate ? { startPrevDate: moment(newValue.startPrevDate).format(format || 'YYYY-MM-DDTHH:mm') } : {}),
-      ...(newValue.endPrevDate ? { endPrevDate: moment(newValue.endPrevDate).format(format || 'YYYY-MM-DDTHH:mm') } : {}),
-    };
-
-    onChange(formatedValue);
-    return formatedValue;
-  };
-
-  const Range = () => {
-    const SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
-    if (!actualValues.start && value.start) {
-      actualValues.start = value.start;
-      actualValues.end = value.end || '';
-    }
-    const { start, end } = actualValues;
-    if (!start || !end) return null;
-
-    const startTime = moment(start).format('HH:mm');
-    const endTime = moment(end).format('HH:mm');
-
-    const firstPart = `${moment(start).format('ll')} ${startTime !== '00:00' ? `(${startTime})` : ''}`;
-    const secondPart = `${(endTime !== '00:00' ? moment(end) : moment(end).subtract(1, 'days')).format('ll')} ${
-      endTime !== '00:00' ? `(${endTime})` : ''
-    }`;
-
-    const getClasses = (base) =>
-      cn('date-range-input__range-text', {
-        'date-range-input__range-text_little': base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED,
-      });
-
-    return (
-      <>
-        <span className={getClasses(firstPart)}>
-          {firstPart}
-          {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day') ? '' : ` - `}
-        </span>
-        {endTime === '00:00' && moment(end).isSame(moment(start).add(1, 'days'), 'day') ? null : (
-          <span className={getClasses(secondPart)}>{secondPart}</span>
-        )}
-      </>
-    );
-  };
-
-  const slideInterval = (direction = 'forward') => {
-    const { start, end } = actualValues;
-    const intervalHoursCount = moment(end).diff(start, 'hours');
-    let newEnd;
-    let newStart;
-    const endHours = moment(end).hours();
-    const startHours = moment(start).hours();
-    if (direction === 'forward') {
-      newStart = moment(end)
-        .add(endHours === 0 ? 0 : 1, 'day')
-        .hours(startHours)
-        .toDate();
-      newEnd = moment(newStart).add(intervalHoursCount, 'hours');
-    } else {
-      newEnd = moment(start)
-        .subtract(endHours === 0 ? 0 : 1, 'day')
-        .hours(endHours)
-        .toDate();
-      newStart = moment(newEnd).subtract(intervalHoursCount, 'hours');
-    }
-    const startPrevDate = moment(newStart).subtract(intervalHoursCount, 'hours').subtract(1, 'seconds');
-    const endPrevDate = moment(newEnd).subtract(1, 'seconds');
-    handleChange({
-      ...value,
-      intervalKey: getActualDateRange({
-        start: newStart,
-        end: newEnd,
-      })?.intervalKey,
-      start: newStart,
-      end: newEnd,
-      startPrevDate,
-      endPrevDate,
-    });
-  };
-
-  const handleArrowClick = (type) => {
-    slideInterval(type === 'right' ? 'forward' : 'back');
-    toggleOff();
-  };
-
-  return (
-    <div
-      ref={internalContainerRef}
-      className={cn('date-range-input', className, {
-        'date-range-input_compact': isCompact,
-        'date-range-input_hide-arrows': hideArrows,
-        'date-range-input_focused': isToggled,
-        'date-range-input_error': error,
-        'date-range-input_disabled': disabled,
-      })}
-    >
-      <span className="date-range-input__label">{label}</span>
-      <div
-        className="date-range-input__wraper"
-        ref={ref}
-        onMouseEnter={isHoverable ? toggleOn : () => null}
-        onMouseLeave={isHoverable ? toggleOff : () => null}
-      >
-        <div
-          className={cn('date-range-input__absolut-wraper', {
-            'date-range-input__absolut-wraper_right-position': isOptionsRight,
-          })}
-        >
-          <div className={cn('date-range-input__static-part')}>
-            <button
-              id={id}
-              className={cn('date-range-input__toggle-button')}
-              disabled={disabled}
-              onClick={!disabled && !isHoverable ? toggle : undefined}
-            >
-              <div className="date-range-input__interval-key">
-                <span>
-                  {(txt?.labels && txt.labels[actualValues?.intervalKey]) ??
-                    (INTERVALS[actualValues?.intervalKey]?.label || CUSTOM_INTERVAL_KEY_TEXT)}
-                </span>
-                {current !== ALL_TIME_KEY && <span>:</span>}
-              </div>
-              {!isCompact && (
-                <div className={cn('date-range-input__range', {})}>
-                  <Range />
-                </div>
-              )}
-            </button>
-            {!isCompact && !hideArrows && (
-              <div className={cn('date-range-input__arrows-block')}>
-                <Arrow
-                  type="left"
-                  className="date-range-input__arrow"
-                  onClick={() => handleArrowClick('left')}
-                  disabled={
-                    disabled ||
-                    actualValues?.intervalKey === ALL_TIME_KEY ||
-                    (formatedMinDate &&
-                      moment(actualValues?.start)
-                        .subtract(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
-                        .isBefore(momentMinDate)
-                    )
-                  }
-                />
-                <Arrow
-                  type="right"
-                  className="date-range-input__arrow"
-                  onClick={() => handleArrowClick('right')}
-                  disabled={
-                    disabled ||
-                    actualValues?.intervalKey === ALL_TIME_KEY ||
-                    (!isDontLimitFuture &&
-                      (formatedMaxDate
-                        ? (
-                            moment(actualValues?.end)
-                              .endOf('day')
-                              .subtract(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
-                              .isAfter(momentMaxDate.startOf('day'))
-                          )
-                        : (
-                            moment(actualValues?.end)
-                              .add(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
-                              .isAfter(moment().add(1, 'day').startOf('day'))
-                          )
-                      )
-                    )
-                  }
-                />
-              </div>
-            )}
-          </div>
-          {isToggled && !isUseAbs && (
-            <OpenedPart
-              {...props}
-              ref={internalContainerRef}
-              actualValues={actualValues}
-              current={current}
-              setCurrent={setCurrent}
-              isCompare={isCompare}
-              setIsCompare={setIsCompare}
-              toggleOff={toggleOff}
-              onChange={handleChange}
-              minDate={formatedMinDate}
-              maxDate={formatedMaxDate}
-              format={format}
-              momentMinDate={momentMinDate}
-              momentMaxDate={momentMaxDate}
-              isDontLimitFuture={isDontLimitFuture}
-            />
-          )}
-        </div>
-      </div>
-      {error && <span className="date-range-input__error-block">{error}</span>}
-    </div>
-  );
-};
-
-export default React.memo(InputDateRange);