@epam/uui 5.5.1 → 5.5.2

package/components/datePickers/RangeDatePickerBody.tsx

@@ -0,0 +1,263 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import isoWeek from 'dayjs/plugin/isoWeek.js';
+import { arrayToMatrix, cx, IEditable, RangeDatePickerPresets } from '@epam/uui-core';
+import {
+    DatePickerBodyBaseOptions, uuiDatePickerBodyBase, PickerBodyValue, valueFormat, ViewType, uuiDaySelection,
+} from '@epam/uui-components';
+import { FlexCell, FlexRow } from '../layout';
+import { DatePickerBody } from './DatePickerBody';
+import { CalendarPresets } from './CalendarPresets';
+import css from './RangeDatePickerBody.module.scss';
+
+dayjs.extend(isoWeek);
+
+export function weekCount(displayedDate: Dayjs) {
+    let days: Dayjs[] = [];
+    const dayOfLastWeekInPrevMonth = displayedDate.subtract(1, 'month').endOf('month').day();
+    days = days.concat(new Array(dayOfLastWeekInPrevMonth).fill(undefined));
+    // get days of current month
+    days = days.concat(new Array(displayedDate.endOf('month').date()).fill(undefined));
+    return arrayToMatrix(days, 7).length;
+}
+
+const uuiRangeDatePickerBody = {
+    inRange: 'uui-range-datepicker-in-range',
+    firstDayInRangeWrapper: 'uui-range-datepicker-first-day-in-range-wrapper',
+    lastDayInRangeWrapper: 'uui-range-datepicker-last-day-in-range-wrapper',
+    separator: 'uui-range-datepicker-separator',
+};
+
+export type PickerPart = 'from' | 'to' | null;
+
+export const rangeDatePickerPresets: RangeDatePickerPresets = {
+    today: {
+        name: 'Today',
+        getRange: () => ({ from: dayjs().toString(), to: undefined, order: 1 }),
+    },
+    thisWeek: {
+        name: 'This Week',
+        getRange: () => ({ from: dayjs().startOf('isoWeek').toString(), to: dayjs().endOf('isoWeek').toString(), order: 2 }),
+    },
+    lastWeek: {
+        name: 'Last Week',
+        getRange: () => ({ from: dayjs().startOf('isoWeek').subtract(1, 'week').toString(), to: dayjs().endOf('isoWeek').subtract(1, 'week').toString(), order: 3 }),
+    },
+    thisMonth: {
+        name: 'This Month',
+        getRange: () => ({ from: dayjs().startOf('month').toString(), to: dayjs().endOf('month').toString(), order: 4 }),
+    },
+    lastMonth: {
+        name: 'Last Month',
+        getRange: () => ({ from: dayjs().startOf('month').subtract(1, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
+    },
+    last3Month: {
+        name: 'Last 3 Months',
+        getRange: () => ({ from: dayjs().startOf('month').subtract(3, 'month').toString(), to: dayjs().subtract(1, 'month').endOf('month').toString(), order: 5 }),
+    },
+    thisYear: {
+        name: 'This Year',
+        getRange: () => ({ from: dayjs().startOf('year').toString(), to: dayjs().endOf('year').toString(), order: 7 }),
+    },
+    lastYear: {
+        name: 'Last Year',
+        getRange: () => ({ from: dayjs().startOf('year').subtract(1, 'year').toString(), to: dayjs().subtract(1, 'year').endOf('year').toString(), order: 8 }),
+    },
+};
+
+export interface RangeDatePickerValue {
+    /*
+    * Defines DatePicker value 'from'.
+    */
+    from: string | null;
+    /*
+    * Defines DatePicker value 'to'.
+    */
+    to: string | null;
+}
+
+interface RangeDatePickerBodyState {
+    /*
+    * Defines which part is active, 'from' or 'to'.
+    */
+    activePart: PickerPart;
+}
+
+/*
+* Defines DatePicker input type, 'from' or 'to'.
+*/
+type InputType = 'from' | 'to';
+
+export interface RangeDatePickerBodyProps<T> extends DatePickerBodyBaseOptions, IEditable<PickerBodyValue<T>> {
+    focusPart: InputType;
+    renderFooter?(): React.ReactNode;
+    isHoliday?: (day: Dayjs) => boolean;
+    renderHeader?: (props: IEditable<PickerBodyValue<string>>) => React.ReactNode;
+}
+
+export class RangeDatePickerBody extends React.Component<RangeDatePickerBodyProps<RangeDatePickerValue>, RangeDatePickerBodyState> {
+    state: RangeDatePickerBodyState = {
+        activePart: null,
+    };
+
+    getDayCX = (day: Dayjs): string[] => {
+        const dayValue = day.valueOf();
+        const fromValue = this.props.value.selectedDate?.from ? dayjs(this.props.value.selectedDate.from).valueOf() : null;
+        const toValue = this.props.value.selectedDate?.to ? dayjs(this.props.value.selectedDate.to).valueOf() : null;
+
+        const inRange = fromValue && toValue && dayValue >= fromValue && dayValue <= toValue && fromValue !== toValue;
+        const isFirst = dayValue === fromValue;
+        const isLast = dayValue === toValue;
+
+        return [cx(
+            inRange && uuiRangeDatePickerBody.inRange,
+            isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper,
+            !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper,
+            isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper,
+            !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper,
+            (dayValue === fromValue || dayValue === toValue) && uuiDaySelection.selectedDay,
+        )];
+    };
+
+    getRange(selectedDate: string) {
+        const newRange: RangeDatePickerValue = { from: null, to: null };
+        const currentRange = this.props.value.selectedDate || { from: null, to: null };
+
+        if (!this.props.filter || this.props.filter(dayjs(selectedDate))) {
+            if (this.props.focusPart === 'from') {
+                if (dayjs(selectedDate).valueOf() <= dayjs(currentRange.to).valueOf()) {
+                    newRange.from = selectedDate;
+                    newRange.to = currentRange.to;
+                } else {
+                    newRange.from = selectedDate;
+                    newRange.to = null;
+                }
+            }
+
+            if (this.props.focusPart === 'to') {
+                if (!currentRange.from) {
+                    newRange.to = selectedDate;
+                } else if (dayjs(selectedDate).valueOf() >= dayjs(currentRange.from).valueOf()) {
+                    newRange.from = currentRange.from;
+                    newRange.to = selectedDate;
+                } else {
+                    newRange.from = selectedDate;
+                    newRange.to = null;
+                }
+            }
+        }
+
+        return newRange;
+    }
+
+    setSelectedDate(selectedDate: string) {
+        const range = this.getRange(selectedDate);
+
+        this.props.onValueChange({
+            ...this.props.value,
+            selectedDate: range,
+        });
+
+        if (range.from && range.to && this.props.focusPart === 'to') {
+            this.props.changeIsOpen?.(false);
+        }
+    }
+
+    setDisplayedDateAndView(displayedDate: Dayjs, view: ViewType, part: PickerPart) {
+        this.setState({ activePart: part });
+
+        this.props.onValueChange({
+            selectedDate: this.props.value.selectedDate,
+            displayedDate: part === 'from' ? displayedDate : displayedDate.subtract(1, 'month'),
+            view: view,
+        });
+    }
+
+    getFromValue = (): PickerBodyValue<string> => {
+        return {
+            ...this.props.value,
+            view: this.state.activePart === 'from' ? this.props.value.view : 'DAY_SELECTION',
+            selectedDate: this.props.value.selectedDate?.from || null,
+        };
+    };
+
+    getToValue = (): PickerBodyValue<string> => {
+        return {
+            view: this.state.activePart === 'to' ? this.props.value.view : 'DAY_SELECTION',
+            displayedDate: this.props.value.displayedDate.add(1, 'month'),
+            selectedDate: this.props.value.selectedDate?.from || null,
+        };
+    };
+
+    renderPresets = (presets: RangeDatePickerPresets) => {
+        return (
+            <>
+                <div className={ uuiRangeDatePickerBody.separator } />
+                <CalendarPresets
+                    forwardedRef={ this.props.forwardedRef }
+                    onPresetSet={ (presetVal) => {
+                        this.props.onValueChange({
+                            view: 'DAY_SELECTION',
+                            selectedDate: { from: dayjs(presetVal.from).format(valueFormat), to: dayjs(presetVal.to).format(valueFormat) },
+                            displayedDate: dayjs(presetVal.from),
+                        });
+                        this.props.changeIsOpen?.(false);
+                    } }
+                    presets={ presets }
+                />
+            </>
+        );
+    };
+
+    renderDatePicker = () => {
+        return (
+            <FlexRow cx={ [this.props.value.view === 'DAY_SELECTION' && css.daySelection, css.container] } alignItems="top">
+                <FlexCell width="auto">
+                    <FlexRow>
+                        <FlexRow cx={ css.bodesWrapper } alignItems="top">
+                            <DatePickerBody
+                                cx={ cx(css.fromPicker) }
+                                setSelectedDate={ (nv) => this.setSelectedDate(nv) }
+                                value={ this.getFromValue() }
+                                setDisplayedDateAndView={ (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'from') }
+                                getDayCX={ this.getDayCX }
+                                filter={ this.props.filter }
+                                renderDay={ this.props.renderDay }
+                                isHoliday={ this.props.isHoliday }
+                            />
+                            <DatePickerBody
+                                cx={ cx(css.toPicker) }
+                                setSelectedDate={ (nv) => this.setSelectedDate(nv) }
+                                value={ this.getToValue() }
+                                setDisplayedDateAndView={ (displayedDate, view) => this.setDisplayedDateAndView(displayedDate, view, 'to') }
+                                getDayCX={ this.getDayCX }
+                                filter={ this.props.filter }
+                                renderDay={ this.props.renderDay }
+                                isHoliday={ this.props.isHoliday }
+                            />
+                            {this.props.value.view !== 'DAY_SELECTION' && (
+                                <div
+                                    style={ {
+                                        left: this.state.activePart === 'from' ? '50%' : undefined,
+                                        right: this.state.activePart === 'to' ? '50%' : undefined,
+                                    } }
+                                    className={ css.blocker }
+                                />
+                            )}
+                        </FlexRow>
+                        {this.props.presets && this.renderPresets(this.props.presets)}
+                    </FlexRow>
+                    {this.props.renderFooter && this.props.renderFooter()}
+                </FlexCell>
+            </FlexRow>
+        );
+    };
+
+    render() {
+        return (
+            <div className={ cx(css.root, uuiDatePickerBodyBase.container, this.props.cx) } { ...this.props.rawProps }>
+                {this.renderDatePicker()}
+            </div>
+        );
+    }
+}

package/components/datePickers/__tests__/Calendar.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Calendar } from '../Calendar';
+import { renderer } from '@epam/uui-test-utils';
+import dayjs from 'dayjs';
+
+describe('Calendar', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Calendar value={ dayjs('2020-09-03') } onValueChange={ jest.fn } displayedDate={ dayjs('2020-09-03') } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/datePickers/__tests__/CalendarPresets.test.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CalendarPresets } from '../CalendarPresets';
+import { renderer } from '@epam/uui-test-utils';
+import { rangeDatePickerPresets } from '../RangeDatePickerBody';
+
+describe('CalendarPresets', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<CalendarPresets presets={ rangeDatePickerPresets } onPresetSet={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/datePickers/__tests__/DatePicker.test.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import {
+    renderSnapshotWithContextAsync, fireEvent, setupComponentForTest, screen, userEvent,
+} from '@epam/uui-test-utils';
+import { DatePicker, DatePickerProps } from '../DatePicker';
+import dayjs from 'dayjs';
+import { supportedDateFormats } from '@epam/uui-components';
+
+type TestParams = Pick<DatePickerProps, 'value' | 'format' | 'isHoliday'>;
+
+function parentElemContainsClasses(elem: HTMLElement, classesArr: string[]) {
+    // @ts-ignore
+    const actualList = [...elem.parentElement.classList];
+    return classesArr.every((c: string) => actualList.indexOf(c) !== -1);
+}
+
+async function setupDatePicker(params: TestParams) {
+    const { result, mocks, setProps } = await setupComponentForTest<DatePickerProps>(
+        (context) => ({
+            ...params,
+            onValueChange: jest.fn().mockImplementation((newValue) => {
+                context.current?.setProperty('value', newValue);
+            }),
+            size: '48',
+        }),
+        (props) => <DatePicker { ...props } />,
+    );
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+    const dom = { input };
+
+    return {
+        result,
+        setProps,
+        mocks,
+        dom,
+    };
+}
+
+const DATE_FORMAT_DEFAULT = 'MMM D, YYYY';
+const DATE_FORMAT_CUSTOM = 'DD-MM-YYYY';
+
+describe('DatePicker', () => {
+    it('should render with minimum props defined', async () => {
+        const tree = await renderSnapshotWithContextAsync(<DatePicker format={ DATE_FORMAT_DEFAULT } value={ null } onValueChange={ jest.fn } />);
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should render with maximum props defined', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <DatePicker
+                format={ DATE_FORMAT_DEFAULT }
+                value={ null }
+                onValueChange={ jest.fn }
+                placeholder="Test"
+                disableClear={ false }
+                renderFooter={ () => <div>Test footer</div> }
+            />,
+        );
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should open picker on field focus', async () => {
+        const { dom } = await setupDatePicker({ value: null, format: DATE_FORMAT_DEFAULT });
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        fireEvent.focus(dom.input);
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+
+    it('should close picker on field blur', async () => {
+        const { dom } = await setupDatePicker({ value: null, format: DATE_FORMAT_DEFAULT });
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        fireEvent.focus(dom.input);
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+        fireEvent.blur(dom.input);
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    it('should change input value after change props', async () => {
+        const { dom, mocks, setProps } = await setupDatePicker({ value: null, format: DATE_FORMAT_DEFAULT });
+        expect(dom.input.value).toEqual('');
+        setProps({ value: '2017-01-22' });
+        expect(dom.input.value).toEqual('Jan 22, 2017');
+        expect(mocks.onValueChange).not.toHaveBeenCalled();
+    });
+
+    it('should clear input when clear button is clicked', async () => {
+        const { dom, mocks } = await setupDatePicker({ value: '2017-01-22', format: DATE_FORMAT_DEFAULT });
+        const clear = screen.getByRole<HTMLButtonElement>('button');
+        expect(dom.input.value).toEqual('Jan 22, 2017');
+        fireEvent.click(clear);
+        expect(dom.input.value).toEqual('');
+        expect(mocks.onValueChange).toHaveBeenCalledWith(null);
+    });
+
+    it('should reset invalid value onBlur', async () => {
+        const { dom, mocks } = await setupDatePicker({ value: null, format: DATE_FORMAT_DEFAULT });
+        expect(dom.input.value).toEqual('');
+        fireEvent.change(dom.input, { target: { value: '2019-10-47' } });
+        expect(dom.input.value).toEqual('2019-10-47');
+        expect(mocks.onValueChange).not.toHaveBeenCalled();
+        fireEvent.blur(dom.input);
+        expect(dom.input.value).toEqual('');
+        expect(mocks.onValueChange).toHaveBeenCalledWith(null);
+    });
+
+    it('should set new value with custom format', async () => {
+        const { dom, mocks } = await setupDatePicker({ value: null, format: DATE_FORMAT_CUSTOM });
+        expect(dom.input.value).toEqual('');
+        fireEvent.change(dom.input, { target: { value: '31-01-2017' } });
+        expect(mocks.onValueChange).toHaveBeenCalledWith('2017-01-31');
+        expect(dom.input.value).toEqual('31-01-2017');
+    });
+
+    // 'MM/DD/YYYY', 'DD-MM-YYYY', 'DD.MM.YYYY', 'YYYY/MM/DD', 'YYYY-MM-DD', 'YYYY.MM.DD', 'MMM D, YYYY', 'D/M/YYYY', 'YYYY/M/D',
+
+    it('should support entering date from keyboard in default format', async () => {
+        const { dom, mocks } = await setupDatePicker({ value: null });
+        expect(dom.input.value).toEqual('');
+        fireEvent.change(dom.input, { target: { value: '2017-01-22' } });
+        fireEvent.blur(dom.input);
+        expect(mocks.onValueChange).toHaveBeenCalledWith('2017-01-22');
+        expect(dom.input.value).toEqual('Jan 22, 2017');
+    });
+
+    it.each(supportedDateFormats())('should support entering date from keyboard in custom format %s', async (currentFormat) => {
+        const one = await setupDatePicker({ value: null, format: currentFormat });
+        expect(one.dom.input.value).toEqual('');
+        await userEvent.type(one.dom.input, '2017-01-22');
+        await userEvent.click(one.result.container); // emit blur event
+
+        expect(one.mocks.onValueChange).toHaveBeenCalledWith('2017-01-22');
+        expect(one.dom.input.value).toBe(dayjs('2017-01-22').format(currentFormat));
+    });
+
+    it('should render with isHoliday prop', async () => {
+        const { dom } = await setupDatePicker({
+            value: '2019-10-12',
+            format: DATE_FORMAT_DEFAULT,
+            isHoliday: (day) => {
+                return day?.valueOf() === dayjs('2019-10-20').valueOf();
+            },
+        });
+
+        fireEvent.focus(dom.input);
+
+        const holidayDay = screen.getByText('20');
+        const regularDay = screen.getByText('21');
+
+        expect(parentElemContainsClasses(holidayDay, ['uui-calendar-day-holiday'])).toBeTruthy();
+        expect(parentElemContainsClasses(regularDay, ['uui-calendar-day-holiday'])).toBeFalsy();
+    });
+});

package/components/datePickers/__tests__/DatePickerBody.test.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { renderSnapshotWithContextAsync, renderWithContextAsync, fireEvent, screen } from '@epam/uui-test-utils';
+import { DatePickerBody } from '../DatePickerBody';
+import dayjs, { Dayjs } from 'dayjs';
+
+describe('DataPicker', () => {
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <DatePickerBody
+                value={ {
+                    view: 'DAY_SELECTION',
+                    selectedDate: '',
+                    displayedDate: dayjs('2017-01-22').startOf('day'),
+                } }
+                setDisplayedDateAndView={ jest.fn }
+                setSelectedDate={ jest.fn }
+            />,
+        );
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should change selectedDate on day click', async () => {
+        const handleChange = jest.fn();
+        await renderWithContextAsync(
+            <DatePickerBody
+                value={ {
+                    view: 'DAY_SELECTION',
+                    selectedDate: '',
+                    displayedDate: dayjs('2017-01-22').startOf('day'),
+                } }
+                setSelectedDate={ handleChange }
+                setDisplayedDateAndView={ jest.fn() }
+            />,
+        );
+
+        const nextDayElement = screen.getByText('23');
+        fireEvent.click(nextDayElement);
+        expect(handleChange).toBeCalledWith('2017-01-23');
+    });
+
+    it('should not change selected date if there is filter', async () => {
+        const handleChange = jest.fn();
+        await renderWithContextAsync(
+            <DatePickerBody
+                value={ {
+                    view: 'DAY_SELECTION',
+                    selectedDate: '2017-01-22',
+                    displayedDate: dayjs('2017-01-22').startOf('day'),
+                } }
+                setSelectedDate={ handleChange }
+                setDisplayedDateAndView={ jest.fn() }
+                filter={ (day: Dayjs) => {
+                    return day.valueOf() >= dayjs('2017-01-22').subtract(0, 'day').valueOf();
+                } }
+            />,
+        );
+
+        fireEvent.click(screen.getByText('19'));
+        expect(handleChange).not.toHaveBeenCalled();
+
+        fireEvent.click(screen.getByText('25'));
+        expect(handleChange).toHaveBeenCalled();
+    });
+});