intelicoreact 0.0.5 → 0.0.6

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

@@ -0,0 +1,394 @@
+// 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 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,
+        values = {},
+        onChange,
+        onChangeCompare,
+        onCancel,
+        getSelectedMode,
+        onChangeInterval,
+        isCompareHidden,
+        limitRange,
+    } = 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 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 = val => {
+        setStartHour(+val);
+        setStartDate(
+            moment(startDate)
+                .set('hour', +val)
+                .toDate(),
+        );
+    };
+
+    const handleChangeEndHour = 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 = () => (
+        <>
+            <Btn className="date-picker__button" onClick={() => onCancel()} variant="ellipse-cancel">
+                {txt?.buttons?.cancel || 'cancel'}
+            </Btn>
+            <Btn
+                className="date-picker__button"
+                variant="ellipse-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(startDateInput).set('hour', parseInt(startHour, 10)).toDate();
+            setStartDate(newDate);
+        } else {
+            newDate = startDate;
+            setStartDateInput(newDate);
+        }
+        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(endDateInput).set('hour', parseInt(endHour, 10)).toDate();
+            setEndDate(addDay(newDate));
+        } else {
+            newDate = endDate;
+            setEndDateInput(newDate);
+        }
+        doBlur('end', e);
+        setDate2(newDate);
+        setEndDateInput();
+    };
+
+    const handleKeyPressed = (code, e, type) => {
+        if (code === 13) (type === 'start' ? handleStartDateBlur : handleEndDateBlur)(e);
+        if (code === 27) doBlur(type, e);
+    };
+
+    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', { 'date-picker__date-input_active': hoverStatus === 'start' })}
+                        value={isStartFocused ? startDateInput : moment(startDate).format('ll')}
+                        disabled={!startDate}
+                        onChange={value => setStartDateInput(handleDateInputOnChange(value))}
+                        onFocus={handleStartDateFocus}
+                        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', { 'date-picker__date-input_active': hoverStatus === 'end' })}
+                        value={isEndFocused ? endDateInput : moment(subtractDay(endDate)).format('ll')}
+                        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">
+                <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}
+                />
+                <Calendar
+                    className="date-picker__calendar"
+                    date={date2}
+                    setDate={setDate2}
+                    allowPrev={!isNearby}
+                    startDate={startDate}
+                    endDate={endDate}
+                    startPrevDate={startPrevDate}
+                    endPrevDate={endPrevDate}
+                    onClick={handleClick}
+                    onHover={handleHover}
+                />
+            </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/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);