intelicoreact 0.0.3 → 0.0.7

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

@@ -0,0 +1,149 @@
+import React, { /*useEffect,*/ useState } from 'react';
+import InputDateRange from './InputDateRange';
+import Table from '../Table/Table';
+
+global.lng = 'en';
+
+export default {
+  title: 'Form Elements/InputDateRange',
+  component: InputDateRange,
+  argTypes: {
+    // status: {
+    //   control: {
+    //     type: 'select',
+    //     options: ['admin', 'user']
+    //   }
+    // }
+  }
+};
+
+const tableData = {
+  header: [
+    { id: 1, label: 'state' },
+    { id: 2, label: 'Tags' },
+    { id: 3, label: 'status' },
+    { id: 4, label: 'loanAmountApproved' },
+    { id: 5, label: 'loanAmountRejected' },
+    { id: 6, label: 'approveRate' },
+    { id: 7, label: 'actions', type: 'actions' }
+  ],
+  rows: [
+    {
+      id: 1,
+      link: { label: 'CA', link: '#s' },
+      tags: [{ label: 'Label 1' }],
+      status: { value: '90', status: 'active' },
+      loanAmountApproved: { value: '$70,000' },
+      loanAmountRejected: { value: '$30,000' },
+      approveRate: { value: '70%' }
+    },
+    {
+      id: 2,
+      link: { label: 'NY', link: '#s' },
+      advancedTags: [
+        {
+          labelLeft: 'home',
+          labelRight: 'hoods',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        },
+        {
+          labelRight: 'jewelry',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        },
+        {
+          labelLeft: 'home',
+          labelRight: 'improvement',
+          active: 0,
+          pause: 0,
+          warnLeft: true,
+          warnLeftMsg: 'landerNotIncluded',
+          warnRightMsg: 'noMerchants'
+        },
+        {
+          labelLeft: 'home',
+          labelRight: 'hoods',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        },
+        {
+          labelRight: 'jewelry',
+          active: 3,
+          pause: 1,
+          merchants: 5
+        }
+      ],
+      status: { label: 'Active', className: 'color--green-haze' },
+      loanAmountApproved: { value: '$3,000' },
+      loanAmountRejected: { value: '$7,000' },
+      approveRate: { value: '30%' }
+    },
+    {
+      id: 3,
+      link: { label: 'NH', link: '#s' },
+      tags: [{ label: 'Label 1' }, { label: 'Label 2' }, { label: 'Label 3' }],
+      status: { status: 'error' },
+      loanAmountApproved: { value: '$70,000' },
+      loanAmountRejected: { value: '$30,000' },
+      approveRate: { value: '70%' }
+    }
+  ]
+};
+
+const Template = args => {
+    const { dateRange, ...restOfProps } = args;
+    const [value, setValue] = useState(dateRange);
+
+    const [state, setState] = useState(tableData);
+
+    const rowsWithActions = state?.rows?.map(row => ({
+      ...row,
+      actions: row.isDeleted ? [{ type: 'undo' }] : [{ type: 'download' }, { type: 'edit' }, { type: 'delete' }]
+    }));
+
+    // useEffect(() => console.log(value), [value]);
+
+    // return <InputDateRange {...restOfProps} value={value} onChange={setValue} />;
+    return (
+      <div>
+        <div className="mb20">
+          <InputDateRange {...restOfProps} value={value} onChange={setValue} />
+        </div>
+        <div>
+          <Table header={state.header} rows={rowsWithActions} onChange={setState} />
+        </div>
+      </div>
+    );
+};
+
+export const InputDateRangeTemplate = Template.bind({});
+
+InputDateRangeTemplate.args = {
+    txt: {},
+    buttonsTypes: {
+      // apply: 'ellipse-apply',
+      cancel: 'bark-outline'
+    },
+    label: 'Date Range',
+    dateRange: { intervalKey: 'today'},
+    id: 'anyToggleButtonId',
+    className: 'anyExternalContainerClassName',
+    error: false,
+    disabled: false,
+    isHoverable: false,
+    // short: true,
+    isCompact: false,
+    // isFocused: true,
+    isIntervalsHidden: false,
+    isCompareHidden: true,
+    hideArrows: false,
+    isOptionsRight: false,
+    isShortWeekNames: false
+    // limitRange,
+    // isUseAbs,
+    // absTooltip
+};

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

@@ -0,0 +1,409 @@
+// 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
+    } = 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)
+                .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={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 = 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">
+                <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

@@ -0,0 +1,114 @@
+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
+    } = 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}
+                    />
+                )}
+            </div>
+        </div>
+    );
+});
+export default OpenedPart;

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

@@ -0,0 +1,24 @@
+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" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+        )}
+        {label}
+    </div>
+);
+export default SelectItem;