intelicoreact 0.0.2 → 0.0.6

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

@@ -0,0 +1,230 @@
+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 OpenedPart from './OpenedPart';
+import Arrow from '../../../UI/Arrow/Arrow';
+
+import './InputDateRange.scss'
+
+const InputDateRange = props => {
+    const {
+        txt,
+        id,
+        label,
+        className,
+        value,
+        onChange = () => {},
+        error,
+        disabled,
+        isHoverable,
+        short,
+        isCompact = false,
+        // isFocused = false,
+        isIntervalsHidden = false,
+        isCompareHidden = false,
+        hideArrows = false,
+        isOptionsRight,
+        limitRange,
+        isUseAbs,
+        absTooltip,
+    } = props;
+
+    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 isEndDateNearFuture = moment(actualValues?.end).isSameOrAfter(moment());
+
+    const Range = () => {
+        const  SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
+        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');
+        console.log(intervalHoursCount);
+        let newEnd, 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');
+        onChange({
+            ...value,
+            intervalKey: getActualDateRange({
+                start: newStart,
+                end: newEnd,
+            })?.intervalKey,
+            start: newStart,
+            end: newEnd,
+            startPrevDate,
+            endPrevDate,
+        });
+    };
+
+    const handleArrowClick = type => {
+        slideInterval(type === 'right' ? 'forward' : 'back');
+        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]);
+
+    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}
+                onMouseLeave={isHoverable && toggleOff}
+            >
+                <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')}
+                            // 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}
+                        >
+                            <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} 
+                                />
+                                <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())
+                                    }
+                                />
+                            </div>
+                        )}
+                    </div>
+                    {isToggled && !isUseAbs && (
+                        <OpenedPart
+                            {...props}
+                            ref={internalContainerRef}
+                            actualValues={actualValues}
+                            current={current}
+                            setCurrent={setCurrent}
+                            isCompare={isCompare}
+                            setIsCompare={setIsCompare}
+                            toggleOff={toggleOff}
+                            onChange={onChange}
+                        />
+                    )}
+                </div>
+            </div>
+            {error && <span className="date-range-input__error-block">{error}</span>}
+        </div>
+    );
+};
+
+export default React.memo(InputDateRange);