intelicoreact 0.0.2 → 0.0.6

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

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import InputDateRange from '.';
+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' }]
+    }));
+
+    // 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: {},
+    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,
+    // limitRange,
+    // isUseAbs,
+    // absTooltip
+};

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;