@alfalab/core-components-date-range-input 2.4.1 → 3.0.0

package/modern/useCalendar-5684a67d.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+import { KeyboardEvent, MouseEvent, Ref } from 'react';
+import { Day, DayAddons, Month, View } from "./typings-5684a67d";
+type UseCalendarProps = {
+    /**
+     * Активный вид (выбор дней, месяцев, лет)
+     */
+    view?: View;
+    /**
+     * Выбранный месяц (controlled)
+     */
+    month?: Date;
+    /**
+     * Начальный месяц
+     */
+    defaultMonth: Date;
+    /**
+     * Минимальная дата, доступная для выбора
+     */
+    minDate?: Date;
+    /**
+     * Максимальная дата, доступная для выбора
+     */
+    maxDate?: Date;
+    /**
+     * Выбранная дата
+     */
+    selected?: Date;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список отключенных для выбора дней
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Список выходных дней
+     */
+    holidays?: Array<Date | number>;
+    /**
+     * Обработчик изменения месяца (или года)
+     */
+    onMonthChange?: (month: number) => void;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date: number) => void;
+    /**
+     * Дополнительный контент под числом
+     */
+    dayAddons?: DayAddons[];
+};
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
+    activeMonth: Date;
+    weeks: Day[][];
+    months: Month[];
+    years: Date[];
+    canSetPrevMonth: boolean;
+    canSetNextMonth: boolean;
+    highlighted: number | Date | undefined;
+    setPrevMonth: () => void;
+    setNextMonth: () => void;
+    setMonthByDate: (newMonth: Date) => void;
+    getDayProps: (day: Day) => {
+        'data-date': number;
+        'aria-selected': boolean | undefined;
+        ref: (node: HTMLTableDataCellElement) => void;
+        tabIndex: number;
+        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+        onMouseLeave: () => void;
+        onClick: (event: MouseEvent<HTMLTableDataCellElement>) => void;
+    };
+    getMonthProps: (currMonth: Month) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        disabled: boolean | undefined;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getYearProps: (year: Date) => {
+        'data-date': number;
+        'aria-selected': boolean;
+        ref: (node: HTMLButtonElement) => void;
+        tabIndex: number;
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    };
+    getRootProps: ({ ref }: {
+        ref?: Ref<HTMLDivElement> | undefined;
+    }) => {
+        onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+        ref: (instance: HTMLDivElement | null) => void;
+        tabIndex: number;
+    };
+};
+export { UseCalendarProps, useCalendar };

package/modern/utils-5684a67d.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import { DateShift, Day, DayAddons, Month, SpecialDays, SpecialDaysAddon } from "./typings-5684a67d";
+declare const DAYS_IN_WEEK = 7;
+declare const MONTHS_IN_YEAR = 12;
+declare const SUNDAY_INDEX = 6;
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const WEEKDAYS: string[];
+declare const MONTHS: string[];
+/**
+ * Возвращает «правильный» индекс дня недели, 0 - пн, 1 - вт и так далее.
+ */
+declare function russianWeekDay(date: Date): number;
+/**
+ * Возвращает таблицу-календарь с заполненными датами для переданного месяца
+ */
+declare function generateWeeks(month: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
+}): Day[][];
+/**
+ * Возвращает массив с месяцами для переданного года
+ */
+declare function generateMonths(year: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month[];
+/**
+ * Возвращает массив лет от minYear до maxYear
+ */
+declare function generateYears(minYear: Date, maxYear: Date): Date[];
+/**
+ * Добавляет метаданные для переданного дня
+ */
+declare function buildDay(day: Date, options: {
+    minDate?: Date;
+    maxDate?: Date;
+    selected?: Date;
+    eventsMap?: SpecialDays;
+    offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
+    dayAddonsMap?: SpecialDaysAddon;
+}): Day;
+/**
+ * Добавляет метаданные для переданного месяца
+ */
+declare function buildMonth(month: Date, options: {
+    minMonth?: Date;
+    maxMonth?: Date;
+}): Month;
+/**
+ * Ограничивает дату на отрезке [minDate, maxDate]
+ */
+declare function limitDate(date: Date | number, minDate?: Date | number, maxDate?: Date | number): Date;
+/**
+ * Проверяет, находится ли переданная дата в указанных границах
+ */
+declare function dateInLimits(date?: Date | number | null, minDate?: Date | number, maxDate?: Date | number): boolean | 0 | null | undefined;
+/**
+ * Возвращает русское название месяца с большой буквы
+ */
+declare function monthName(month: Date): string;
+/**
+ * Превращает массив в объект, у которого ключи составляются из элементов массива
+ */
+declare function dateArrayToHashTable(arr: Array<Date | number>): Record<number, boolean>;
+declare function addonArrayToHashTable(arr: DayAddons[]): Record<number, ReactNode>;
+/**
+ * Возвращает корректный отрезок дат для выделения
+ */
+declare function getSelectionRange(from?: Date | number, to?: Date | number, highlighted?: Date | number): {
+    start: Date;
+    end: Date;
+} | null;
+declare function modifyDateByShift(shift: DateShift, date: Date, minDate?: Date, maxDate?: Date, offDaysMap?: Record<number, boolean>): Date;
+/**
+ * Если дата была выбрана мышкой — фокусную обводку не видно
+ * TODO: добавить в useFocus возможность переключать метод ввода программно
+ */
+declare function simulateTab(node: HTMLElement): void;
+declare const formatDate: (date: Date | number, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString };

package/package.json

@@ -1,11 +1,31 @@
 {
     "name": "@alfalab/core-components-date-range-input",
-    "version": "2.4.1",
+    "version": "3.0.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
+    "exports": {
+        ".": {
+            "import": "./esm/index.js",
+            "require": "./index.js"
+        },
+        "./mobile": {
+            "import": "./esm/mobile.js",
+            "require": "./mobile.js"
+        },
+        "./desktop": {
+            "import": "./esm/desktop.js",
+            "require": "./desktop.js"
+        },
+        "./esm": "./esm/index.js",
+        "./cssm": "./cssm/index.js",
+        "./modern": "./modern/index.js",
+        "./esm/*": "./esm/*",
+        "./cssm/*": "./cssm/*",
+        "./modern/*": "./modern/*"
+    },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
@@ -15,10 +35,10 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^11.1.18",
-        "@alfalab/core-components-icon-button": "^6.1.3",
-        "@alfalab/core-components-calendar": "^6.6.2",
-        "@alfalab/core-components-popover": "^6.0.9",
+        "@alfalab/core-components-input": "^12.0.0",
+        "@alfalab/core-components-icon-button": "^6.2.0",
+        "@alfalab/core-components-calendar": "^7.0.0",
+        "@alfalab/core-components-popover": "^6.1.0",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
         "tslib": "^2.4.0"

package/src/Component.desktop.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react';
+
+import { CalendarDesktop } from '@alfalab/core-components-calendar/desktop';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { InputProps } from '@alfalab/core-components-input';
+import { InputDesktop } from '@alfalab/core-components-input/desktop';
+
+import {
+    ConditionalProps,
+    DateRangeInput,
+    DateRangeInputProps,
+} from './components/date-range-input';
+
+export type DateRangeInputDesktopProps = Omit<
+    DateRangeInputProps,
+    'view' | 'picker' | 'onClose' | 'InputComponent'
+> &
+    ConditionalProps;
+
+export const DateRangeInputDesktop = forwardRef<HTMLInputElement, DateRangeInputDesktopProps>(
+    (props, ref) => (
+        <DateRangeInput
+            InputComponent={InputDesktop}
+            Calendar={CalendarDesktop}
+            {...props}
+            ref={ref}
+        />
+    ),
+);

package/src/Component.mobile.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react';
+
+import { CalendarMobile } from '@alfalab/core-components-calendar/mobile';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { InputProps } from '@alfalab/core-components-input';
+import { InputMobile } from '@alfalab/core-components-input/mobile';
+
+import {
+    ConditionalProps,
+    DateRangeInput,
+    DateRangeInputProps,
+} from './components/date-range-input';
+
+export type DateRangeInputMobileProps = Omit<
+    DateRangeInputProps,
+    'view' | 'picker' | 'onClose' | 'InputComponent'
+> &
+    ConditionalProps;
+
+export const DateRangeInputMobile = forwardRef<HTMLInputElement, DateRangeInputMobileProps>(
+    (props, ref) => (
+        <DateRangeInput
+            InputComponent={InputMobile}
+            Calendar={CalendarMobile}
+            view='mobile'
+            {...props}
+            ref={ref}
+        />
+    ),
+);

package/src/Component.responsive.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { InputProps } from '@alfalab/core-components-input';
+import { useMedia } from '@alfalab/hooks';
+
+import { ConditionalProps, DateRangeInputProps } from './components/date-range-input';
+import { DateRangeInputDesktop } from './Component.desktop';
+import { DateRangeInputMobile } from './Component.mobile';
+
+export type DateRangeInputResponsiveProps = Omit<
+    DateRangeInputProps,
+    'view' | 'picker' | 'onClose' | 'InputComponent'
+> &
+    ConditionalProps & {
+        /**
+         * Контрольная точка, с нее начинается desktop версия
+         * @default 1024
+         */
+        breakpoint?: number;
+    };
+
+export type DateRangeInputMedia = 'desktop' | 'mobile';
+
+export const DateRangeInputResponsive = forwardRef<HTMLInputElement, DateRangeInputResponsiveProps>(
+    ({ breakpoint = 1024, ...restProps }, ref) => {
+        const [view] = useMedia<DateRangeInputMedia>(
+            [
+                ['mobile', `(max-width: ${breakpoint - 1}px)`],
+                ['desktop', `(min-width: ${breakpoint}px)`],
+            ],
+            'desktop',
+        );
+
+        return view === 'desktop' ? (
+            <DateRangeInputDesktop {...restProps} ref={ref} />
+        ) : (
+            <DateRangeInputMobile {...restProps} ref={ref} />
+        );
+    },
+);