@alfalab/core-components-date-time-input 3.2.0 → 4.0.0

package/src/components/date-time-input/Component.tsx

@@ -0,0 +1,423 @@
+/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
+
+import React, {
+    ChangeEvent,
+    ElementType,
+    FocusEvent,
+    KeyboardEvent,
+    MouseEvent,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+
+import type { CalendarDesktopProps } from '@alfalab/core-components-calendar/desktop';
+import type { CalendarMobileProps } from '@alfalab/core-components-calendar/mobile';
+import { dateInLimits } from '@alfalab/core-components-calendar/shared';
+import { IconButton } from '@alfalab/core-components-icon-button';
+import { InputProps } from '@alfalab/core-components-input';
+import { Popover, PopoverProps } from '@alfalab/core-components-popover';
+import { useDidUpdateEffect } from '@alfalab/hooks';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+
+import {
+    addTimeToDate,
+    DATE_WITH_TIME_LENGTH,
+    format,
+    getDateWithoutTime,
+    getFullDateTime,
+    isCompleteDateInput,
+    isValid,
+    parseTimestampToDate,
+} from '../../utils';
+
+import styles from './index.module.css';
+
+export type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean;
+
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (
+        event: ChangeEvent<HTMLInputElement> | null,
+        payload: { date: Date; value: string },
+    ) => void;
+
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (
+        event: ChangeEvent<HTMLInputElement> | null,
+        payload: { date: Date; value: string },
+    ) => void;
+
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType;
+
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?:
+        | (CalendarDesktopProps & Record<string, unknown>)
+        | (CalendarMobileProps & Record<string, unknown>);
+
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: 'desktop' | 'mobile';
+
+    /**
+     * Компонент инпута
+     */
+    InputComponent?: ElementType;
+
+    /**
+     * Запретить ввод с клавиатуры
+     */
+    disableUserInput?: boolean;
+};
+
+export const DateTimeInput = React.forwardRef<HTMLInputElement, DateTimeInputProps>(
+    (
+        {
+            className,
+            inputClassName,
+            popoverClassName,
+            disabled,
+            readOnly,
+            disableUserInput = false,
+            picker,
+            defaultValue = '',
+            value: propValue,
+            onChange,
+            onComplete,
+            rightAddons,
+            useAnchorWidth,
+            block,
+            popoverPosition = 'bottom-start',
+            zIndexPopover,
+            preventFlip,
+            InputComponent,
+            Calendar,
+            calendarProps = {},
+            defaultMonth,
+            minDate = calendarProps.minDate,
+            maxDate = calendarProps.maxDate,
+            offDays = calendarProps.offDays || [],
+            events = calendarProps.events || [],
+            defaultOpen = false,
+            error,
+            view = 'desktop',
+            ...restProps
+        },
+        ref,
+    ) => {
+        const inputRef = useRef<HTMLInputElement>(null);
+        const calendarRef = useRef<HTMLDivElement>(null);
+
+        const [value, setValue] = useState(propValue || defaultValue);
+        const [open, setOpen] = useState(false);
+
+        const calendarValue = value ? getDateWithoutTime(value).getTime() : undefined;
+
+        const inputDisabled = disabled || readOnly;
+
+        const calendarResponsive = calendarProps?.responsive ?? true;
+
+        useEffect(() => {
+            setOpen(defaultOpen);
+        }, [defaultOpen]);
+
+        useDidUpdateEffect(() => {
+            const newPropValue = propValue || '';
+
+            setValue((prevValue) => (prevValue === propValue ? prevValue : newPropValue));
+        }, [propValue]);
+
+        const checkInputValueIsValid = (newInputValue?: string) => {
+            if (!newInputValue || error) return false;
+
+            const dateValue = getDateWithoutTime(newInputValue).getTime();
+
+            return (
+                dateValue &&
+                dateInLimits(dateValue, minDate, maxDate) &&
+                !offDays.includes(dateValue)
+            );
+        };
+
+        const setTimeToDate = () => {
+            setValue((prevValue) => {
+                const dateWithTime = addTimeToDate(prevValue);
+
+                if (dateWithTime !== prevValue && dateWithTime.length === DATE_WITH_TIME_LENGTH) {
+                    onComplete?.(null, {
+                        date: getFullDateTime(dateWithTime),
+                        value: dateWithTime,
+                    });
+                }
+
+                return dateWithTime;
+            });
+        };
+
+        const handleInputWrapperFocus = (event: FocusEvent<HTMLDivElement>) => {
+            if (view === 'desktop') {
+                if (picker) {
+                    setOpen(true);
+                }
+                if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                    calendarRef.current.focus();
+                }
+            }
+        };
+
+        const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+            if (view === 'desktop') {
+                const target = (event.relatedTarget || document.activeElement) as HTMLElement;
+
+                if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                    setOpen(false);
+                    setTimeToDate();
+                }
+            }
+        };
+
+        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+            const { value: newValue } = event.target;
+
+            if (newValue.length > DATE_WITH_TIME_LENGTH) return;
+
+            // Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
+            if (/[^\d., :]/.test(newValue)) {
+                return;
+            }
+
+            const dots = newValue.match(/\./g);
+            const colon = newValue.match(/:/g);
+            const comma = newValue.match(/,/g);
+
+            // Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
+            if (
+                (dots && dots.length > 2) ||
+                (colon && colon.length > 1) ||
+                (comma && comma.length > 1)
+            ) {
+                return;
+            }
+
+            const formattedValue = format(newValue);
+            const date = getFullDateTime(formattedValue);
+
+            setValue(formattedValue);
+
+            if (onChange) onChange(event, { date, value: formattedValue });
+
+            if (isCompleteDateInput(formattedValue)) {
+                const valid = isValid(formattedValue);
+
+                if (!valid) return;
+
+                if (onComplete) {
+                    onComplete(event, { date, value: formattedValue });
+                }
+            }
+        };
+
+        const handleMobileCalendarClose = () => {
+            setOpen(false);
+            setTimeToDate();
+        };
+
+        const handleClear = () => {
+            setValue('');
+        };
+
+        const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+            const isCopy = (event.metaKey || event.ctrlKey) && event.key === 'c';
+
+            if (disableUserInput && !isCopy) {
+                event.preventDefault();
+            }
+        };
+
+        const handleCalendarChange = (date?: number) => {
+            if (date) {
+                const newValue = parseTimestampToDate(date);
+
+                setValue(newValue);
+                onChange?.(null, { date: getFullDateTime(newValue), value: newValue });
+            }
+        };
+
+        const handleCalendarWrapperMouseDown = (event: MouseEvent<HTMLDivElement>) => {
+            // Не дает инпуту терять фокус при выборе даты
+            event.preventDefault();
+        };
+
+        const handleIconButtonClick = () => {
+            if (!open) setOpen(true);
+
+            if (view === 'desktop' && inputRef.current) {
+                inputRef.current.focus();
+            }
+        };
+
+        const renderCalendar = () =>
+            Calendar ? (
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                <div onMouseDown={handleCalendarWrapperMouseDown}>
+                    <Calendar
+                        {...calendarProps}
+                        responsive={calendarResponsive}
+                        open={open}
+                        onClose={handleMobileCalendarClose}
+                        ref={calendarRef}
+                        defaultMonth={defaultMonth}
+                        value={checkInputValueIsValid(value) ? calendarValue : undefined}
+                        onChange={handleCalendarChange}
+                        minDate={minDate}
+                        maxDate={maxDate}
+                        offDays={offDays}
+                        events={events}
+                    />
+                </div>
+            ) : null;
+
+        return (
+            <div
+                className={cn(styles.component, className, {
+                    [styles.block]: block,
+                })}
+                onFocus={inputDisabled ? undefined : handleInputWrapperFocus}
+                onBlur={handleBlur}
+            >
+                {InputComponent ? (
+                    <InputComponent
+                        {...restProps}
+                        block={block}
+                        ref={mergeRefs([ref, inputRef])}
+                        value={value}
+                        onChange={handleChange}
+                        disabled={disabled}
+                        readOnly={readOnly}
+                        className={inputClassName}
+                        onClear={handleClear}
+                        onKeyDown={handleInputKeyDown}
+                        error={error}
+                        rightAddons={
+                            <React.Fragment>
+                                {rightAddons}
+                                {picker && (
+                                    <IconButton
+                                        className={styles.calendarIcon}
+                                        onClick={inputDisabled ? undefined : handleIconButtonClick}
+                                        icon={CalendarMIcon}
+                                        size='s'
+                                    />
+                                )}
+                            </React.Fragment>
+                        }
+                    />
+                ) : null}
+                {picker && (
+                    <Popover
+                        open={open}
+                        useAnchorWidth={useAnchorWidth}
+                        anchorElement={inputRef.current as HTMLElement}
+                        popperClassName={cn(styles.calendarContainer, {
+                            [styles.calendarResponsive]: calendarResponsive,
+                        })}
+                        className={popoverClassName}
+                        position={popoverPosition}
+                        offset={[0, 8]}
+                        withTransition={false}
+                        preventFlip={preventFlip}
+                        zIndex={zIndexPopover}
+                    >
+                        {renderCalendar()}
+                    </Popover>
+                )}
+            </div>
+        );
+    },
+);

package/src/components/date-time-input/index.module.css

@@ -0,0 +1,37 @@
+@import '@alfalab/core-components-themes/src/default.css';
+@import '@alfalab/core-components-calendar/src/vars.css';
+
+:root {
+    --calendar-popover-border-radius: var(--border-radius-m);
+}
+
+.component {
+    display: inline-block;
+    outline: none;
+    position: relative;
+}
+
+.calendarContainer {
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: var(--calendar-popover-border-radius);
+    border: 1px solid var(--color-light-border-secondary);
+
+    @media (max-width: 374px) {
+        width: 100%;
+        min-width: 288px;
+    }
+}
+
+.calendarResponsive {
+    width: var(--calendar-width);
+}
+
+.block {
+    width: 100%;
+}
+
+.calendarIcon {
+    margin-right: var(--gap-s-neg);
+    height: 100%;
+}

package/src/components/date-time-input/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/desktop.ts

@@ -0,0 +1 @@
+export * from './Component.desktop';

package/src/index.ts

@@ -0,0 +1,2 @@
+export { DateTimeInputResponsive as DateTimeInput } from './Component.responsive';
+export type { DateTimeInputResponsiveProps as DateTimeInputProps } from './Component.responsive';

package/src/mobile.ts

@@ -0,0 +1 @@
+export * from './Component.mobile';

package/src/utils/format.ts

@@ -0,0 +1,165 @@
+/* eslint-disable no-useless-escape */
+
+import dateFnsIsValid from 'date-fns/isValid';
+import parse from 'date-fns/parse';
+
+export const DATE_FORMAT = 'dd.MM.yyyy';
+export const DATE_MASK = [
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    '.',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    ',',
+    ' ',
+    /\d/,
+    /\d/,
+    ':',
+    /\d/,
+    /\d/,
+];
+
+export const DATE_WITH_TIME_LENGTH = DATE_MASK.length;
+export const isCompleteDateInput = (input: string) => input.length === DATE_WITH_TIME_LENGTH;
+export const parseDateString = (value: string, dateFormat = DATE_FORMAT) =>
+    parse(value, dateFormat, new Date());
+export const isValidTimeFormat = (value: string): boolean => {
+    const timeArr = value.split(':');
+    const hours = timeArr[0];
+    const mins = timeArr[1];
+
+    if (hours.length !== 2 || Number(hours) > 23) {
+        return false;
+    }
+
+    if (mins.length !== 2 || Number(mins) > 59) {
+        return false;
+    }
+
+    return true;
+};
+
+export const isValid = (inputValue: string) => {
+    const inputValueArr = inputValue.split(', ');
+    const date = inputValueArr[0];
+    const time = inputValueArr[1];
+
+    return (
+        !inputValue ||
+        (isCompleteDateInput(inputValue) &&
+            dateFnsIsValid(parseDateString(date)) &&
+            isValidTimeFormat(time))
+    );
+};
+
+export const format = (value: string): string =>
+    value
+        .replace(/^(\d\d)(\d)$/, '$1.$2') // 121 => 12.1
+        .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3') // 12.122 => 12.12.2
+        .replace(/^(\d\d)\d\.(.*)/, '$1.$2') // 123.12.2005 => 12.12.2005
+        .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2') // 12.123.2005 => 12.12.2005
+        .replace(/\.$/, '') // 12. => 12
+        .replace(/\ $/, '') // 1 2 => 12
+        .replace(/\:$/, '') // 1:2 => 12
+        .replace(/^(\d\d)(\d.*)/, '$1.$2') // 1212 => 12.12
+        .replace(/^(\d\d.\d\d)(\d.*)/, '$1.$2') // 12.122 => 12.12.2
+        .replace(/^(\d\d\.\d\d)(\d\d\d\d)/, '$1.$2') // 12.122005 => 12.12.2005
+        .replace(/^(\d\d)(\d\d\.\d\d\d\d)/, '$1.$2') // 1212.2005 => 12.12.2005
+        .replace(/^(\d\d.\d\d\.\d\d\d\d),/, '$1') // 12.12.2005 => 12.12.2005
+        .replace(/^(\d\d.\d\d\.\d\d\d\d)(\d)/, '$1, $2') // 12.12.20050 => 12.12.2005, 0
+        .replace(/^(\d\d.\d\d\.\d\d\d\d),(\d.*)/, '$1, $2') // 12.12.2005,00:00 => 12.12.2005, 00:00
+        .replace(/^(\d\d.\d\d\.\d\d\d\d) (\d.*)/, '$1, $2') // 12.12.2005 00:00 => 12.12.2005, 00:00
+        .replace(/^(\d\d.\d\d\.\d\d\d\d)(\d.*)/, '$1, $2') // 12.12.200500:00=> 12.12.2005, 00:00
+        .replace(/^(\d\d.\d\d\.\d\d\d\d), (\d\d):/, '$1, $2') // 12.12.2005, 00: => 12.12.2005, 00
+        .replace(/^(\d\d.\d\d\.\d\d\d\d), (\d\d)(\d)/, '$1, $2:$3') // 12.12.2005, 000 => 12.12.2005, 00:0
+        .replace(/^(\d\.\d\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.12.2005123123 => 1.12.2005
+        .replace(/^(\d\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 01.2.20055125125 => 01.2.2005
+        .replace(/^(\d)\.(\d\d)([0-9]*)\.(\d\d\d\d)/, '$1.$2.$4') // 1.123123.2005 => 1.12.2005
+        .replace(/^(\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.2.20055125125 => 1.2.2005
+        .replace(/^(\d\d)\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // 01..2005123123 => 01..2005
+        .replace(/^(\d)\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // 1..2005123123 => 1..2005
+        .replace(/^()\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // ..2005123123 => ..2005
+        .replace(/^()\.(\d)\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3'); // .2.2005123123 => .2.2005
+
+export const parseTimestampToDate = (timestamp: number): string => {
+    const date = new Date(timestamp);
+    const year = date.getFullYear();
+
+    let month: number | string = date.getMonth() + 1;
+    let day: number | string = date.getDate();
+
+    if (month < 10) {
+        month = `0${month}`;
+    }
+    if (day < 10) {
+        day = `0${day}`;
+    }
+
+    return `${day}.${month}.${year}`;
+};
+
+export const getDateWithoutTime = (value: string): Date => {
+    const valueArr = value.split(', ');
+
+    let day;
+    let month;
+    let year;
+
+    if (valueArr[0]) {
+        const date = valueArr[0].split('.');
+
+        [day, month, year] = date;
+    }
+
+    const date = new Date();
+
+    date.setFullYear(Number(year), Number(month) - 1, Number(day));
+    date.setHours(0, 0, 0, 0);
+
+    return date;
+};
+
+export const getFullDateTime = (value: string): Date => {
+    const valueArr = value.split(', ');
+
+    let day;
+    let month;
+    let year;
+    let hours;
+    let mins;
+
+    if (valueArr[0]) {
+        const date = valueArr[0].split('.');
+
+        [day, month, year] = date;
+    }
+    if (valueArr[1]) {
+        const time = valueArr[1].split(':');
+
+        hours = Number(time[0]);
+        mins = Number(time[1]);
+    }
+
+    const fullDate = new Date();
+
+    fullDate.setFullYear(Number(year), Number(month) - 1, Number(day));
+    fullDate.setHours(Number(hours) || 0);
+    fullDate.setMinutes(Number(mins) || 0);
+    fullDate.setSeconds(0);
+    fullDate.setMilliseconds(0);
+
+    return fullDate;
+};
+
+export const addTimeToDate = (value: string): string => {
+    if (value.length === 10 && dateFnsIsValid(parseDateString(value))) {
+        return `${value}, 00:00`;
+    }
+
+    return value;
+};

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './format';