intelicoreact 0.0.6 → 0.0.7

package/src/Atomic/FormElements/InputDateRange/{components/InputDateRange.js → InputDateRange.js}

@@ -2,10 +2,10 @@ import React, { useState, useEffect, useRef, useMemo } from 'react';
 import cn from 'classnames';
 import moment from 'moment-timezone';
 
-import { useClickOutside, useToggle, getActualDateRange, INTERVALS, ALL_TIME_KEY, CUSTOM_INTERVAL_KEY_TEXT } from '..';
+import { useClickOutside, useToggle, getActualDateRange, INTERVALS, ALL_TIME_KEY, CUSTOM_INTERVAL_KEY_TEXT } from './dependencies';
 
-import OpenedPart from './OpenedPart';
-import Arrow from '../../../UI/Arrow/Arrow';
+import OpenedPart from './components/OpenedPart';
+import Arrow from '../../UI/Arrow/Arrow';
 
 import './InputDateRange.scss'
 
@@ -15,6 +15,7 @@ const InputDateRange = props => {
         id,
         label,
         className,
+        buttonsTypes,
         value,
         onChange = () => {},
         error,
@@ -28,6 +29,7 @@ const InputDateRange = props => {
         hideArrows = false,
         isOptionsRight,
         limitRange,
+        isShortWeekNames,
         isUseAbs,
         absTooltip,
     } = props;
@@ -41,6 +43,21 @@ const InputDateRange = props => {
     const internalContainerRef = useRef(null);
     const isEndDateNearFuture = moment(actualValues?.end).isSameOrAfter(moment());
 
+    const handleChange = input => {
+        const newValue = getActualDateRange(input);
+        const formatedValue = {
+            intervalKey: newValue.intervalKey,
+            start: newValue.start ? moment(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
+            end: newValue.end ? moment(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end,
+            ...(newValue.compare ? {compare: newValue.compare} : {}),
+            ...(newValue.startPrevDate ? {startPrevDate: moment(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm')} : {}),
+            ...(newValue.endPrevDate ? {endPrevDate: moment(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm')} : {}),
+        };
+
+        onChange(formatedValue);
+        return formatedValue;
+    };
+
     const Range = () => {
         const  SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
         const { start, end } = actualValues;
@@ -76,7 +93,6 @@ const InputDateRange = props => {
     const slideInterval = (direction = 'forward') => {
         const { start, end } = actualValues;
         const intervalHoursCount = moment(end).diff(start, 'hours');
-        console.log(intervalHoursCount);
         let newEnd, newStart;
         const endHours = moment(end).hours();
         const startHours = moment(start).hours();
@@ -95,7 +111,7 @@ const InputDateRange = props => {
         }
         const startPrevDate = moment(newStart).subtract(intervalHoursCount, 'hours').subtract(1, 'seconds');
         const endPrevDate = moment(newEnd).subtract(1, 'seconds');
-        onChange({
+        handleChange({
             ...value,
             intervalKey: getActualDateRange({
                 start: newStart,
@@ -113,34 +129,34 @@ const InputDateRange = props => {
         toggleOff();
     };
 
-    const absData = useMemo(
-        () => ({
-            body: OpenedPart,
-            props: {
-                ...props,
-                key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
-                actualValues,
-                current,
-                setCurrent,
-                isCompare,
-                setIsCompare,
-                toggleOff,
-                onChange,
-            },
-            clickOutsideCallback: () => toggleOff(),
-            top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
-            left: internalContainerRef.current?.getBoundingClientRect()?.left || 0,
-        }),
-        [isToggled, value, actualValues, current, isCompare],
-    );
-
-    useEffect(() => {
-        if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
-    }, [current]);
-
-    useEffect(() => {
-        if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
-    }, [isToggled]);
+    // const absData = useMemo(
+    //     () => ({
+    //         body: OpenedPart,
+    //         props: {
+    //             ...props,
+    //             key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
+    //             actualValues,
+    //             current,
+    //             setCurrent,
+    //             isCompare,
+    //             setIsCompare,
+    //             toggleOff,
+    //             onChange,
+    //         },
+    //         clickOutsideCallback: () => toggleOff(),
+    //         top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
+    //         left: internalContainerRef.current?.getBoundingClientRect()?.left || 0,
+    //     }),
+    //     [isToggled, value, actualValues, current, isCompare],
+    // );
+
+    // useEffect(() => {
+    //     if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
+    // }, [current]);
+
+    // useEffect(() => {
+    //     if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
+    // }, [isToggled]);
 
     return (
         <div
@@ -167,13 +183,6 @@ const InputDateRange = props => {
                         <button
                             id={id}
                             className={cn('date-range-input__toggle-button')}
-                            // className={cn(
-                            //     'date-range-input__toggle-button',
-                            //     { 'form-select__input--disabled': disabled },
-                            //     { 'form-select__input--opened': isToggled },
-                            //     { 'form-select__input--focused': isToggled },
-                            //     className,
-                            // )}
                             disabled={disabled}
                             onClick={!disabled && !isHoverable ? toggle : undefined}
                         >
@@ -187,21 +196,23 @@ const InputDateRange = props => {
                         </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} 
+                                <Arrow
+                                    type="left"
+                                    className="date-range-input__arrow"
+                                    onClick={() => handleArrowClick("left")}
+                                    disabled={disabled || actualValues?.intervalKey === ALL_TIME_KEY}
                                 />
-                                <Arrow 
-                                    type="right" 
-                                    className="date-range-input__arrow" 
-                                    onClick={() => handleArrowClick("right")} 
+                                <Arrow
+                                    type="right"
+                                    className="date-range-input__arrow"
+                                    onClick={() => handleArrowClick("right")}
                                     disabled={
-                                        disabled || 
-                                        actualValues?.intervalKey === ALL_TIME_KEY || 
-                                        actualValues?.intervalKey === 'today' || 
-                                        moment(actualValues?.end).add(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours').isSameOrAfter(moment())
+                                        disabled ||
+                                        actualValues?.intervalKey === ALL_TIME_KEY ||
+                                        actualValues?.intervalKey === 'today' ||
+                                        moment(actualValues?.end)
+                                            .add(moment(actualValues?.end).diff(actualValues?.start, 'hours'), 'hours')
+                                            .isAfter(moment().add(1, 'day').startOf('day'))
                                     }
                                 />
                             </div>
@@ -217,7 +228,7 @@ const InputDateRange = props => {
                             isCompare={isCompare}
                             setIsCompare={setIsCompare}
                             toggleOff={toggleOff}
-                            onChange={onChange}
+                            onChange={handleChange}
                         />
                     )}
                 </div>