intelicoreact 0.0.94 → 0.0.97

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

@@ -1,433 +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 = null,
-        maxDate = null
-    } = 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 = startDate;
-        } else {
-          if(minDate && !moment(startDateInput).isSameOrAfter(minDate)){
-            newDate = minDate;
-          } else if(maxDate && !moment(startDateInput).isSameOrBefore(maxDate)){
-            newDate = maxDate;
-          } else {
-            newDate = moment(startDateInput);
-          }
-        }
-
-        setStartDateInput(newDate);
-        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 = endDate;
-        } else {
-          if(minDate && !moment(endDateInput).isSameOrAfter(minDate)){
-            newDate = minDate;
-          } else if(maxDate && !moment(endDateInput).isSameOrBefore(maxDate)){
-            newDate = maxDate;
-          } else {
-            newDate = moment(endDateInput);
-          }
-        }
-
-        setEndDate(addDay(newDate.set('hour', parseInt(endHour, 10)).toDate()));
-        setEndDateInput(newDate);
-
-        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}
-                    />
-                    <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}
-                    />
-                </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,118 +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 = null,
-        maxDate = null
-    } = 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}
-                            />
-                        ))}
-                    </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}
-                    />
-                )}
-            </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;