@alfalab/core-components-date-range-input 2.4.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Component-63dec22f.d.ts +167 -0
- package/Component-89a3cf4c.d.ts +6 -0
- package/Component-8b5756fe.d.ts +380 -0
- package/Component.desktop-2e2b2125.d.ts +6 -0
- package/Component.desktop-8b5756fe.d.ts +197 -0
- package/Component.desktop.d.ts +1 -1
- package/Component.desktop.js +4 -3
- package/Component.mobile-755fbaa3.d.ts +6 -0
- package/Component.mobile-ebda875c.d.ts +6 -0
- package/Component.mobile.d.ts +1 -1
- package/Component.mobile.js +4 -3
- package/Component.responsive-2e2b2125.d.ts +66 -0
- package/Component.responsive.d.ts +1 -1
- package/Component.responsive.js +5 -2
- package/components/date-range-input/Component.d.ts +7 -2
- package/components/date-range-input/Component.js +10 -11
- package/components/date-range-input/index.css +7 -7
- package/components/date-range-input/index.js +1 -2
- package/cssm/Component-63dec22f.d.ts +167 -0
- package/cssm/Component-89a3cf4c.d.ts +6 -0
- package/cssm/Component-8b5756fe.d.ts +380 -0
- package/cssm/Component.desktop-2e2b2125.d.ts +6 -0
- package/cssm/Component.desktop-8b5756fe.d.ts +197 -0
- package/cssm/Component.desktop.d.ts +1 -1
- package/cssm/Component.desktop.js +4 -3
- package/cssm/Component.mobile-755fbaa3.d.ts +6 -0
- package/cssm/Component.mobile-ebda875c.d.ts +6 -0
- package/cssm/Component.mobile.d.ts +1 -1
- package/cssm/Component.mobile.js +4 -3
- package/cssm/Component.responsive-2e2b2125.d.ts +66 -0
- package/cssm/Component.responsive.d.ts +1 -1
- package/cssm/Component.responsive.js +5 -2
- package/cssm/components/date-range-input/Component.d.ts +7 -2
- package/cssm/components/date-range-input/Component.js +9 -10
- package/cssm/components/date-range-input/index.js +1 -2
- package/cssm/desktop-63dec22f.d.ts +2 -0
- package/cssm/desktop.js +3 -2
- package/cssm/index-89a3cf4c.d.ts +3 -0
- package/cssm/index-9211a437.d.ts +2 -0
- package/cssm/index-ebda875c.d.ts +35 -0
- package/cssm/index-f034f741.d.ts +80 -0
- package/cssm/index.d.ts +3 -2
- package/cssm/index.js +5 -2
- package/cssm/mobile-c219f8ca.d.ts +1 -0
- package/cssm/mobile.js +3 -2
- package/cssm/types-ebda875c.d.ts +113 -0
- package/cssm/typings-5684a67d.d.ts +23 -0
- package/cssm/typings-9211a437.d.ts +95 -0
- package/cssm/useCalendar-5684a67d.d.ts +97 -0
- package/cssm/utils-5684a67d.d.ts +88 -0
- package/desktop-63dec22f.d.ts +2 -0
- package/desktop.js +3 -2
- package/esm/Component-63dec22f.d.ts +167 -0
- package/esm/Component-89a3cf4c.d.ts +6 -0
- package/esm/Component-8b5756fe.d.ts +380 -0
- package/esm/Component.desktop-2e2b2125.d.ts +6 -0
- package/esm/Component.desktop-8b5756fe.d.ts +197 -0
- package/esm/Component.desktop.d.ts +1 -1
- package/esm/Component.desktop.js +4 -3
- package/esm/Component.mobile-755fbaa3.d.ts +6 -0
- package/esm/Component.mobile-ebda875c.d.ts +6 -0
- package/esm/Component.mobile.d.ts +1 -1
- package/esm/Component.mobile.js +4 -3
- package/esm/Component.responsive-2e2b2125.d.ts +66 -0
- package/esm/Component.responsive.d.ts +1 -1
- package/esm/Component.responsive.js +5 -2
- package/esm/components/date-range-input/Component.d.ts +7 -2
- package/esm/components/date-range-input/Component.js +10 -11
- package/esm/components/date-range-input/index.css +7 -7
- package/esm/components/date-range-input/index.js +1 -2
- package/esm/desktop-63dec22f.d.ts +2 -0
- package/esm/desktop.js +3 -2
- package/esm/index-89a3cf4c.d.ts +3 -0
- package/esm/index-9211a437.d.ts +2 -0
- package/esm/index-ebda875c.d.ts +35 -0
- package/esm/index-f034f741.d.ts +80 -0
- package/esm/index.d.ts +3 -2
- package/esm/index.js +5 -2
- package/esm/mobile-c219f8ca.d.ts +1 -0
- package/esm/mobile.js +3 -2
- package/esm/types-ebda875c.d.ts +113 -0
- package/esm/typings-5684a67d.d.ts +23 -0
- package/esm/typings-9211a437.d.ts +95 -0
- package/esm/useCalendar-5684a67d.d.ts +97 -0
- package/esm/utils-5684a67d.d.ts +88 -0
- package/index-89a3cf4c.d.ts +3 -0
- package/index-9211a437.d.ts +2 -0
- package/index-ebda875c.d.ts +35 -0
- package/index-f034f741.d.ts +80 -0
- package/index.d.ts +3 -2
- package/index.js +5 -2
- package/mobile-c219f8ca.d.ts +1 -0
- package/mobile.js +3 -2
- package/modern/Component-63dec22f.d.ts +167 -0
- package/modern/Component-89a3cf4c.d.ts +6 -0
- package/modern/Component-8b5756fe.d.ts +380 -0
- package/modern/Component.desktop-2e2b2125.d.ts +6 -0
- package/modern/Component.desktop-8b5756fe.d.ts +197 -0
- package/modern/Component.desktop.d.ts +1 -1
- package/modern/Component.desktop.js +4 -3
- package/modern/Component.mobile-755fbaa3.d.ts +6 -0
- package/modern/Component.mobile-ebda875c.d.ts +6 -0
- package/modern/Component.mobile.d.ts +1 -1
- package/modern/Component.mobile.js +4 -3
- package/modern/Component.responsive-2e2b2125.d.ts +66 -0
- package/modern/Component.responsive.d.ts +1 -1
- package/modern/Component.responsive.js +5 -2
- package/modern/components/date-range-input/Component.d.ts +7 -2
- package/modern/components/date-range-input/Component.js +7 -8
- package/modern/components/date-range-input/index.css +7 -7
- package/modern/components/date-range-input/index.js +1 -2
- package/modern/desktop-63dec22f.d.ts +2 -0
- package/modern/desktop.js +3 -2
- package/modern/index-89a3cf4c.d.ts +3 -0
- package/modern/index-9211a437.d.ts +2 -0
- package/modern/index-ebda875c.d.ts +35 -0
- package/modern/index-f034f741.d.ts +80 -0
- package/modern/index.d.ts +3 -2
- package/modern/index.js +5 -2
- package/modern/mobile-c219f8ca.d.ts +1 -0
- package/modern/mobile.js +3 -2
- package/modern/types-ebda875c.d.ts +113 -0
- package/modern/typings-5684a67d.d.ts +23 -0
- package/modern/typings-9211a437.d.ts +95 -0
- package/modern/useCalendar-5684a67d.d.ts +97 -0
- package/modern/utils-5684a67d.d.ts +88 -0
- package/package.json +25 -5
- package/src/Component.desktop.tsx +29 -0
- package/src/Component.mobile.tsx +30 -0
- package/src/Component.responsive.tsx +41 -0
- package/src/components/date-range-input/Component.tsx +519 -0
- package/src/components/date-range-input/index.module.css +37 -0
- package/src/components/date-range-input/index.ts +1 -0
- package/src/desktop.ts +1 -0
- package/src/index.ts +2 -0
- package/src/mobile.ts +1 -0
- package/src/utils/format.ts +91 -0
- package/src/utils/index.ts +1 -0
- package/types-ebda875c.d.ts +113 -0
- package/typings-5684a67d.d.ts +23 -0
- package/typings-9211a437.d.ts +95 -0
- package/useCalendar-5684a67d.d.ts +97 -0
- package/utils-5684a67d.d.ts +88 -0
- package/cssm/responsive.d.ts +0 -2
- package/cssm/responsive.js +0 -27
- package/esm/responsive.d.ts +0 -2
- package/esm/responsive.js +0 -18
- package/modern/responsive.d.ts +0 -2
- package/modern/responsive.js +0 -17
- package/responsive.d.ts +0 -2
- package/responsive.js +0 -26
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { FC, ReactNode } from "react";
|
|
4
|
+
import { ButtonProps } from "./typings-9211a437";
|
|
5
|
+
type MqProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
8
|
+
*/
|
|
9
|
+
query?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Запрос на поддержку тач-событий
|
|
12
|
+
*/
|
|
13
|
+
touch?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Дочерние элементы.
|
|
16
|
+
*/
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
/**
|
|
19
|
+
* Обработчик изменений в совпадении запросов
|
|
20
|
+
*/
|
|
21
|
+
onMatchChange?: (isMatched: boolean) => void;
|
|
22
|
+
};
|
|
23
|
+
declare const Mq: FC<MqProps>;
|
|
24
|
+
/**
|
|
25
|
+
* Хук для медиа запросов.
|
|
26
|
+
* @param query media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
27
|
+
* @param defaultValue Значение по-умолчанию.
|
|
28
|
+
*/
|
|
29
|
+
declare const useMatchMedia: (query: string, defaultValue?: boolean | (() => boolean)) => boolean[];
|
|
30
|
+
/**
|
|
31
|
+
* Возвращает MediaQueryList для заданного media-выражения.
|
|
32
|
+
*
|
|
33
|
+
* @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
34
|
+
*/
|
|
35
|
+
declare function getMatchMedia(queryProp: string): MediaQueryList;
|
|
36
|
+
/**
|
|
37
|
+
* Удаляет MediaQueryList.
|
|
38
|
+
*
|
|
39
|
+
* @param queryProp media выражение или кастомный запрос из `mq.json`, например `--mobile`.
|
|
40
|
+
*/
|
|
41
|
+
declare function releaseMatchMedia(queryProp: string): void;
|
|
42
|
+
/**
|
|
43
|
+
* Возвращает `true`, если есть поддержка `Pointer Events`
|
|
44
|
+
*/
|
|
45
|
+
declare function isPointerEventsSupported(): boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Возвращает `true`, если есть поддержка `Touch Events`
|
|
48
|
+
*/
|
|
49
|
+
declare function isTouchSupported(): boolean;
|
|
50
|
+
declare const _exports: {
|
|
51
|
+
"--mobile-xs": string;
|
|
52
|
+
"--mobile-s": string;
|
|
53
|
+
"--mobile-m": string;
|
|
54
|
+
"--mobile-l": string;
|
|
55
|
+
"--mobile": string;
|
|
56
|
+
"--tablet-s": string;
|
|
57
|
+
"--tablet-m": string;
|
|
58
|
+
"--tablet": string;
|
|
59
|
+
"--desktop-s": string;
|
|
60
|
+
"--desktop-m": string;
|
|
61
|
+
"--desktop-l": string;
|
|
62
|
+
"--desktop-xl": string;
|
|
63
|
+
"--desktop": string;
|
|
64
|
+
};
|
|
65
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
66
|
+
export { _exports as default, MqProps, Mq, useMatchMedia, getMatchMedia, releaseMatchMedia, isPointerEventsSupported, isTouchSupported, Button };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ConditionalProps, DateRangeInputProps } from "./components/date-range-input/index";
|
|
4
|
-
type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose'> & ConditionalProps & {
|
|
4
|
+
type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose' | 'InputComponent'> & ConditionalProps & {
|
|
5
5
|
/**
|
|
6
6
|
* Контрольная точка, с нее начинается desktop версия
|
|
7
7
|
* @default 1024
|
|
@@ -2,18 +2,21 @@ import React, { forwardRef } from 'react';
|
|
|
2
2
|
import { useMedia } from '@alfalab/hooks';
|
|
3
3
|
import { DateRangeInputDesktop } from './Component.desktop.js';
|
|
4
4
|
import { DateRangeInputMobile } from './Component.mobile.js';
|
|
5
|
+
import '@alfalab/core-components-calendar/modern/desktop';
|
|
6
|
+
import '@alfalab/core-components-input/modern/desktop';
|
|
5
7
|
import './components/date-range-input/Component.js';
|
|
6
8
|
import 'react-merge-refs';
|
|
7
9
|
import 'classnames';
|
|
8
10
|
import 'date-fns';
|
|
9
11
|
import 'date-fns/isValid';
|
|
10
|
-
import '@alfalab/core-components-calendar/modern';
|
|
12
|
+
import '@alfalab/core-components-calendar/modern/shared';
|
|
11
13
|
import '@alfalab/core-components-icon-button/modern';
|
|
12
|
-
import '@alfalab/core-components-input/modern';
|
|
13
14
|
import '@alfalab/core-components-popover/modern';
|
|
14
15
|
import '@alfalab/icons-glyph/CalendarMIcon';
|
|
15
16
|
import './utils/format.js';
|
|
16
17
|
import 'date-fns/parse';
|
|
18
|
+
import '@alfalab/core-components-calendar/modern/mobile';
|
|
19
|
+
import '@alfalab/core-components-input/modern/mobile';
|
|
17
20
|
|
|
18
21
|
const DateRangeInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
|
|
19
22
|
const [view] = useMedia([
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ChangeEvent, ElementType } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { CalendarDesktopProps } from "../../desktop-63dec22f";
|
|
5
|
+
import { CalendarMobileProps } from "../../mobile-c219f8ca";
|
|
5
6
|
import { InputProps } from "@alfalab/core-components-input";
|
|
6
7
|
import { PopoverProps } from "@alfalab/core-components-popover";
|
|
7
8
|
type ConditionalProps = {
|
|
@@ -53,7 +54,7 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
|
|
|
53
54
|
/**
|
|
54
55
|
* Доп. пропсы для календаря
|
|
55
56
|
*/
|
|
56
|
-
calendarProps?: (
|
|
57
|
+
calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
|
|
57
58
|
/**
|
|
58
59
|
* Месяц в календаре по умолчанию (timestamp)
|
|
59
60
|
*/
|
|
@@ -103,6 +104,10 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
|
|
|
103
104
|
* Отображение компонента в мобильном или десктопном виде
|
|
104
105
|
*/
|
|
105
106
|
view?: 'desktop' | 'mobile';
|
|
107
|
+
/**
|
|
108
|
+
* Компонент инпута
|
|
109
|
+
*/
|
|
110
|
+
InputComponent?: ElementType;
|
|
106
111
|
/**
|
|
107
112
|
* Запретить ввод с клавиатуры
|
|
108
113
|
*/
|
|
@@ -3,20 +3,19 @@ import mergeRefs from 'react-merge-refs';
|
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { startOfMonth } from 'date-fns';
|
|
5
5
|
import dateFnsIsValid from 'date-fns/isValid';
|
|
6
|
-
import { usePeriod
|
|
6
|
+
import { usePeriod } from '@alfalab/core-components-calendar/modern/shared';
|
|
7
7
|
import { IconButton } from '@alfalab/core-components-icon-button/modern';
|
|
8
|
-
import { Input } from '@alfalab/core-components-input/modern';
|
|
9
8
|
import { Popover } from '@alfalab/core-components-popover/modern';
|
|
10
9
|
import { useDidUpdateEffect } from '@alfalab/hooks';
|
|
11
10
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
12
11
|
import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
|
|
13
12
|
import 'date-fns/parse';
|
|
14
13
|
|
|
15
|
-
const styles = {"component":"date-range-
|
|
14
|
+
const styles = {"component":"date-range-input__component_1cfrs","calendarContainer":"date-range-input__calendarContainer_1cfrs","calendarResponsive":"date-range-input__calendarResponsive_1cfrs","block":"date-range-input__block_1cfrs","calendarIcon":"date-range-input__calendarIcon_1cfrs"};
|
|
16
15
|
require('./index.css')
|
|
17
16
|
|
|
18
17
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
19
|
-
const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, disableUserInput = false, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip,
|
|
18
|
+
const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, disableUserInput = false, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, 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, view = 'desktop', ...restProps }, ref) => {
|
|
20
19
|
const inputRef = useRef(null);
|
|
21
20
|
const iconRef = useRef(null);
|
|
22
21
|
const calendarRef = useRef(null);
|
|
@@ -198,17 +197,17 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
|
|
|
198
197
|
const renderCalendar = () => {
|
|
199
198
|
const activeMonth = (selectedTo && startOfMonth(selectedTo)) ||
|
|
200
199
|
(selectedFrom && startOfMonth(selectedFrom));
|
|
201
|
-
return (
|
|
200
|
+
return Calendar ? (
|
|
202
201
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
203
202
|
React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
204
|
-
React.createElement(Calendar
|
|
203
|
+
React.createElement(Calendar, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: activeMonth || defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events }))) : null;
|
|
205
204
|
};
|
|
206
205
|
return (React.createElement("div", { className: cn(styles.component, className, {
|
|
207
206
|
[styles.block]: block,
|
|
208
207
|
}), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
209
|
-
React.createElement(
|
|
208
|
+
InputComponent ? (React.createElement(InputComponent, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, onKeyDown: handleInputKeyDown, rightAddons: React.createElement(React.Fragment, null,
|
|
210
209
|
rightAddons,
|
|
211
|
-
picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) }),
|
|
210
|
+
picker && (React.createElement(IconButton, { className: styles.calendarIcon, ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })) : null,
|
|
212
211
|
picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
|
|
213
212
|
[styles.calendarResponsive]: calendarResponsive,
|
|
214
213
|
}), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 5wzse */
|
|
2
2
|
:root {
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -41,24 +41,24 @@
|
|
|
41
41
|
/* marker */
|
|
42
42
|
} :root {
|
|
43
43
|
--calendar-popover-border-radius: var(--border-radius-m);
|
|
44
|
-
} .date-range-
|
|
44
|
+
} .date-range-input__component_1cfrs {
|
|
45
45
|
display: inline-block;
|
|
46
46
|
outline: none;
|
|
47
47
|
position: relative;
|
|
48
|
-
} .date-range-
|
|
48
|
+
} .date-range-input__calendarContainer_1cfrs {
|
|
49
49
|
display: inline-block;
|
|
50
50
|
box-sizing: border-box;
|
|
51
51
|
border-radius: var(--calendar-popover-border-radius);
|
|
52
52
|
border: 1px solid var(--color-light-border-secondary)
|
|
53
|
-
} @media (max-width: 374px) { .date-range-
|
|
53
|
+
} @media (max-width: 374px) { .date-range-input__calendarContainer_1cfrs {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
|
-
} .date-range-
|
|
57
|
+
} .date-range-input__calendarResponsive_1cfrs {
|
|
58
58
|
width: var(--calendar-width);
|
|
59
|
-
} .date-range-
|
|
59
|
+
} .date-range-input__block_1cfrs {
|
|
60
60
|
width: 100%;
|
|
61
|
-
} .date-range-
|
|
61
|
+
} .date-range-input__calendarIcon_1cfrs {
|
|
62
62
|
margin-right: var(--gap-s-neg);
|
|
63
63
|
height: 100%;
|
|
64
64
|
}
|
|
@@ -4,9 +4,8 @@ import 'react-merge-refs';
|
|
|
4
4
|
import 'classnames';
|
|
5
5
|
import 'date-fns';
|
|
6
6
|
import 'date-fns/isValid';
|
|
7
|
-
import '@alfalab/core-components-calendar/modern';
|
|
7
|
+
import '@alfalab/core-components-calendar/modern/shared';
|
|
8
8
|
import '@alfalab/core-components-icon-button/modern';
|
|
9
|
-
import '@alfalab/core-components-input/modern';
|
|
10
9
|
import '@alfalab/core-components-popover/modern';
|
|
11
10
|
import '@alfalab/hooks';
|
|
12
11
|
import '@alfalab/icons-glyph/CalendarMIcon';
|
package/modern/desktop.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
export { DateRangeInputDesktop } from './Component.desktop.js';
|
|
2
2
|
import 'react';
|
|
3
|
+
import '@alfalab/core-components-calendar/modern/desktop';
|
|
4
|
+
import '@alfalab/core-components-input/modern/desktop';
|
|
3
5
|
import './components/date-range-input/Component.js';
|
|
4
6
|
import 'react-merge-refs';
|
|
5
7
|
import 'classnames';
|
|
6
8
|
import 'date-fns';
|
|
7
9
|
import 'date-fns/isValid';
|
|
8
|
-
import '@alfalab/core-components-calendar/modern';
|
|
10
|
+
import '@alfalab/core-components-calendar/modern/shared';
|
|
9
11
|
import '@alfalab/core-components-icon-button/modern';
|
|
10
|
-
import '@alfalab/core-components-input/modern';
|
|
11
12
|
import '@alfalab/core-components-popover/modern';
|
|
12
13
|
import '@alfalab/hooks';
|
|
13
14
|
import '@alfalab/icons-glyph/CalendarMIcon';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { ButtonHTMLAttributes, ElementType, FC } from "react";
|
|
4
|
+
interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
/**
|
|
6
|
+
* Вид компонента
|
|
7
|
+
*/
|
|
8
|
+
view: "desktop" | "mobile";
|
|
9
|
+
/**
|
|
10
|
+
* Дополнительный класс
|
|
11
|
+
*/
|
|
12
|
+
className?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Позиция крестика
|
|
15
|
+
*/
|
|
16
|
+
align?: "left" | "right";
|
|
17
|
+
/**
|
|
18
|
+
* Фиксирует крестик
|
|
19
|
+
*/
|
|
20
|
+
sticky?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Иконка
|
|
23
|
+
*/
|
|
24
|
+
icon?: ElementType;
|
|
25
|
+
/**
|
|
26
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
27
|
+
*/
|
|
28
|
+
dataTestId?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Коллбэк закрытия.
|
|
31
|
+
*/
|
|
32
|
+
onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
|
|
33
|
+
}
|
|
34
|
+
declare const Closer: FC<CloserProps>;
|
|
35
|
+
export { CloserProps, Closer };
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { FC, MouseEvent } from "react";
|
|
2
|
+
type PeriodType = "range" | "day" | "week" | "month" | "quarter" | "year";
|
|
3
|
+
type PeriodSliderProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Активная дата или период
|
|
6
|
+
*/
|
|
7
|
+
value?: Date | [
|
|
8
|
+
Date,
|
|
9
|
+
Date
|
|
10
|
+
];
|
|
11
|
+
/**
|
|
12
|
+
* Тип периода
|
|
13
|
+
*/
|
|
14
|
+
periodType?: PeriodType;
|
|
15
|
+
/**
|
|
16
|
+
* Дополнительный класс
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Отключает кнопку назад
|
|
21
|
+
*/
|
|
22
|
+
prevArrowDisabled?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Отключает кнопку вперед
|
|
25
|
+
*/
|
|
26
|
+
nextArrowDisabled?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Скрывает заблокированные кнопки
|
|
29
|
+
*/
|
|
30
|
+
hideDisabledArrows?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Возможность выбора месяца и года, если periodType 'month'
|
|
33
|
+
*/
|
|
34
|
+
isMonthAndYearSelectable?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Отображать ли текущий год, если isMonthAndYearSelectable true
|
|
37
|
+
*/
|
|
38
|
+
showCurrentYearSelector?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Функция для форматирование выбранного периода
|
|
41
|
+
*/
|
|
42
|
+
periodFormatter?: (valueFrom: Date, valueTo: Date, periodType: PeriodType) => string;
|
|
43
|
+
/**
|
|
44
|
+
* Обработчик нажатия кнопки переключения на назад
|
|
45
|
+
*/
|
|
46
|
+
onPrevArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
|
|
47
|
+
value: Date;
|
|
48
|
+
valueFrom: Date;
|
|
49
|
+
valueTo: Date;
|
|
50
|
+
periodType: PeriodType;
|
|
51
|
+
}) => void;
|
|
52
|
+
/**
|
|
53
|
+
* Обработчик нажатия кнопки переключения на вперед
|
|
54
|
+
*/
|
|
55
|
+
onNextArrowClick?: (event: MouseEvent<HTMLButtonElement>, payload: {
|
|
56
|
+
value: Date;
|
|
57
|
+
valueFrom: Date;
|
|
58
|
+
valueTo: Date;
|
|
59
|
+
periodType: PeriodType;
|
|
60
|
+
}) => void;
|
|
61
|
+
/**
|
|
62
|
+
* Обработчик нажатия на селектор месяца
|
|
63
|
+
*/
|
|
64
|
+
onMonthClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
65
|
+
/**
|
|
66
|
+
* Обработчик нажатия на селектор года
|
|
67
|
+
*/
|
|
68
|
+
onYearClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
69
|
+
/**
|
|
70
|
+
* Обработчик нажатия на период
|
|
71
|
+
*/
|
|
72
|
+
onPeriodClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
73
|
+
/**
|
|
74
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
75
|
+
*/
|
|
76
|
+
dataTestId?: string;
|
|
77
|
+
};
|
|
78
|
+
declare const PeriodSlider: FC<PeriodSliderProps>;
|
|
79
|
+
export { PeriodType, PeriodSliderProps, PeriodSlider };
|
|
80
|
+
export { shiftValues } from "./Component.desktop-8b5756fe";
|
package/modern/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export { DateRangeInputResponsive as DateRangeInput } from "./responsive";
|
|
2
|
-
export type { DateRangeInputResponsiveProps as DateRangeInputProps } from "./responsive";
|
|
1
|
+
export { DateRangeInputResponsive as DateRangeInput } from "./Component.responsive";
|
|
2
|
+
export type { DateRangeInputResponsiveProps as DateRangeInputProps } from "./Component.responsive";
|
|
3
|
+
export {};
|
package/modern/index.js
CHANGED
|
@@ -2,16 +2,19 @@ export { DateRangeInputResponsive as DateRangeInput } from './Component.responsi
|
|
|
2
2
|
import 'react';
|
|
3
3
|
import '@alfalab/hooks';
|
|
4
4
|
import './Component.desktop.js';
|
|
5
|
+
import '@alfalab/core-components-calendar/modern/desktop';
|
|
6
|
+
import '@alfalab/core-components-input/modern/desktop';
|
|
5
7
|
import './components/date-range-input/Component.js';
|
|
6
8
|
import 'react-merge-refs';
|
|
7
9
|
import 'classnames';
|
|
8
10
|
import 'date-fns';
|
|
9
11
|
import 'date-fns/isValid';
|
|
10
|
-
import '@alfalab/core-components-calendar/modern';
|
|
12
|
+
import '@alfalab/core-components-calendar/modern/shared';
|
|
11
13
|
import '@alfalab/core-components-icon-button/modern';
|
|
12
|
-
import '@alfalab/core-components-input/modern';
|
|
13
14
|
import '@alfalab/core-components-popover/modern';
|
|
14
15
|
import '@alfalab/icons-glyph/CalendarMIcon';
|
|
15
16
|
import './utils/format.js';
|
|
16
17
|
import 'date-fns/parse';
|
|
17
18
|
import './Component.mobile.js';
|
|
19
|
+
import '@alfalab/core-components-calendar/modern/mobile';
|
|
20
|
+
import '@alfalab/core-components-input/modern/mobile';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Component-8b5756fe";
|
package/modern/mobile.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
export { DateRangeInputMobile } from './Component.mobile.js';
|
|
2
2
|
import 'react';
|
|
3
|
-
import '@alfalab/core-components-calendar/modern';
|
|
3
|
+
import '@alfalab/core-components-calendar/modern/mobile';
|
|
4
|
+
import '@alfalab/core-components-input/modern/mobile';
|
|
4
5
|
import './components/date-range-input/Component.js';
|
|
5
6
|
import 'react-merge-refs';
|
|
6
7
|
import 'classnames';
|
|
7
8
|
import 'date-fns';
|
|
8
9
|
import 'date-fns/isValid';
|
|
10
|
+
import '@alfalab/core-components-calendar/modern/shared';
|
|
9
11
|
import '@alfalab/core-components-icon-button/modern';
|
|
10
|
-
import '@alfalab/core-components-input/modern';
|
|
11
12
|
import '@alfalab/core-components-popover/modern';
|
|
12
13
|
import '@alfalab/hooks';
|
|
13
14
|
import '@alfalab/icons-glyph/CalendarMIcon';
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
import { CloserProps } from "./index-ebda875c";
|
|
5
|
+
type NavigationBarProps = {
|
|
6
|
+
/**
|
|
7
|
+
* Контент шапки
|
|
8
|
+
*/
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* Заголовок шапки
|
|
12
|
+
*/
|
|
13
|
+
title?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Подзаголовок (доступен только в мобильной версии)
|
|
16
|
+
*/
|
|
17
|
+
subtitle?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Размер заголовка (compact доступен только в мобильной версии)
|
|
20
|
+
*/
|
|
21
|
+
titleSize?: 'default' | 'compact';
|
|
22
|
+
/**
|
|
23
|
+
* Доп. класс для аддонов
|
|
24
|
+
*/
|
|
25
|
+
addonClassName?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Слот слева
|
|
28
|
+
*/
|
|
29
|
+
leftAddons?: ReactNode;
|
|
30
|
+
/**
|
|
31
|
+
* Слот справа
|
|
32
|
+
*/
|
|
33
|
+
rightAddons?: ReactNode;
|
|
34
|
+
/**
|
|
35
|
+
* Дополнительный класс для closer
|
|
36
|
+
*/
|
|
37
|
+
closerClassName?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Слот снизу
|
|
40
|
+
*/
|
|
41
|
+
bottomAddons?: ReactNode;
|
|
42
|
+
/**
|
|
43
|
+
* Наличие компонента крестика
|
|
44
|
+
*/
|
|
45
|
+
hasCloser?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Наличие кнопки "Назад"
|
|
48
|
+
*/
|
|
49
|
+
hasBackButton?: boolean;
|
|
50
|
+
/**
|
|
51
|
+
* Дополнительный класс для правого аддона
|
|
52
|
+
*/
|
|
53
|
+
backButtonClassName?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Дополнительный класс
|
|
56
|
+
*/
|
|
57
|
+
className?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Дополнительный класс для контента
|
|
60
|
+
*/
|
|
61
|
+
contentClassName?: string;
|
|
62
|
+
/**
|
|
63
|
+
* Дополнительный класс для нижнего аддона
|
|
64
|
+
*/
|
|
65
|
+
bottomAddonsClassName?: string;
|
|
66
|
+
/**
|
|
67
|
+
* Выравнивание заголовка
|
|
68
|
+
*/
|
|
69
|
+
align?: 'left' | 'center';
|
|
70
|
+
/**
|
|
71
|
+
* Обрезать ли заголовок
|
|
72
|
+
*/
|
|
73
|
+
trim?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Фиксирует шапку
|
|
76
|
+
*/
|
|
77
|
+
sticky?: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
80
|
+
*/
|
|
81
|
+
dataTestId?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Фоновое изображение
|
|
84
|
+
*/
|
|
85
|
+
imageUrl?: string;
|
|
86
|
+
/**
|
|
87
|
+
* Иконка closer.
|
|
88
|
+
*/
|
|
89
|
+
closerIcon?: React.ElementType;
|
|
90
|
+
/**
|
|
91
|
+
* Обработчик закрытия
|
|
92
|
+
*/
|
|
93
|
+
onClose?: CloserProps['onClose'];
|
|
94
|
+
/**
|
|
95
|
+
* обработчик клика по кнопке "назад"
|
|
96
|
+
*/
|
|
97
|
+
onBack?: () => void;
|
|
98
|
+
/**
|
|
99
|
+
* Вид шапки - мобильный или десктоп
|
|
100
|
+
*/
|
|
101
|
+
view: 'desktop' | 'mobile';
|
|
102
|
+
/**
|
|
103
|
+
* Ссылка на родительскую ноду overflow: auto
|
|
104
|
+
*/
|
|
105
|
+
scrollableParentRef?: React.RefObject<HTMLDivElement>;
|
|
106
|
+
};
|
|
107
|
+
type ContentParams = {
|
|
108
|
+
extraClassName?: string;
|
|
109
|
+
wrapperRef?: React.RefObject<HTMLDivElement>;
|
|
110
|
+
style?: React.CSSProperties;
|
|
111
|
+
hidden?: boolean;
|
|
112
|
+
};
|
|
113
|
+
export { NavigationBarProps, ContentParams };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
type SpecialDays = Record<number, boolean>;
|
|
3
|
+
type DayAddons = {
|
|
4
|
+
date: Date | number;
|
|
5
|
+
addon: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
type SpecialDaysAddon = Record<number, ReactNode>;
|
|
8
|
+
type Day = {
|
|
9
|
+
date: Date;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
event?: boolean;
|
|
12
|
+
selected?: boolean;
|
|
13
|
+
holiday?: boolean;
|
|
14
|
+
dayAddon?: ReactNode;
|
|
15
|
+
};
|
|
16
|
+
type Month = {
|
|
17
|
+
date: Date;
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
};
|
|
20
|
+
type DateShift = 'prev' | 'prevWeek' | 'prevMonth' | 'startOfWeek' | 'next' | 'nextWeek' | 'nextMonth' | 'endOfWeek';
|
|
21
|
+
type View = 'years' | 'months' | 'days';
|
|
22
|
+
type SelectorView = 'month-only' | 'full';
|
|
23
|
+
export { SpecialDays, DayAddons, SpecialDaysAddon, Day, Month, DateShift, View, SelectorView };
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
|
|
2
|
+
type StyleColors = {
|
|
3
|
+
default: {
|
|
4
|
+
[key: string]: string;
|
|
5
|
+
};
|
|
6
|
+
inverted: {
|
|
7
|
+
[key: string]: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
type ComponentProps = {
|
|
11
|
+
/**
|
|
12
|
+
* Тип кнопки
|
|
13
|
+
* @default secondary
|
|
14
|
+
*/
|
|
15
|
+
view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
|
|
16
|
+
/**
|
|
17
|
+
* Слот слева
|
|
18
|
+
*/
|
|
19
|
+
leftAddons?: ReactNode;
|
|
20
|
+
/**
|
|
21
|
+
* Слот справа
|
|
22
|
+
*/
|
|
23
|
+
rightAddons?: ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Размер компонента
|
|
26
|
+
* @default m
|
|
27
|
+
*/
|
|
28
|
+
size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
29
|
+
/**
|
|
30
|
+
* Растягивает компонент на ширину контейнера
|
|
31
|
+
* @default false
|
|
32
|
+
*/
|
|
33
|
+
block?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Дополнительный класс
|
|
36
|
+
*/
|
|
37
|
+
className?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Дополнительный класс для спиннера
|
|
40
|
+
*/
|
|
41
|
+
spinnerClassName?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Выводит ссылку в виде кнопки
|
|
44
|
+
*/
|
|
45
|
+
href?: string;
|
|
46
|
+
/**
|
|
47
|
+
* Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
|
|
48
|
+
*/
|
|
49
|
+
Component?: ElementType;
|
|
50
|
+
/**
|
|
51
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
52
|
+
*/
|
|
53
|
+
dataTestId?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Показать лоадер
|
|
56
|
+
* @default false
|
|
57
|
+
*/
|
|
58
|
+
loading?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Не переносить текст кнопки на новую строку
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
nowrap?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Набор цветов для компонента
|
|
66
|
+
*/
|
|
67
|
+
colors?: 'default' | 'inverted';
|
|
68
|
+
/**
|
|
69
|
+
* Дочерние элементы.
|
|
70
|
+
*/
|
|
71
|
+
children?: ReactNode;
|
|
72
|
+
/**
|
|
73
|
+
* Основные стили компонента.
|
|
74
|
+
*/
|
|
75
|
+
styles: {
|
|
76
|
+
[key: string]: string;
|
|
77
|
+
};
|
|
78
|
+
/**
|
|
79
|
+
* Стили компонента для default и inverted режима.
|
|
80
|
+
*/
|
|
81
|
+
colorStylesMap: StyleColors;
|
|
82
|
+
};
|
|
83
|
+
type AnchorBaseButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
84
|
+
type NativeBaseButtonProps = ComponentProps & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
85
|
+
type BaseButtonProps = Partial<AnchorBaseButtonProps | NativeBaseButtonProps>;
|
|
86
|
+
type AnchorButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
87
|
+
type NativeButtonProps = Omit<BaseButtonProps, 'styles' | 'colorStylesMap'> & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
88
|
+
type ButtonProps = Partial<AnchorButtonProps | NativeButtonProps> & {
|
|
89
|
+
/**
|
|
90
|
+
* Контрольная точка, с нее начинается desktop версия
|
|
91
|
+
* @default 1024
|
|
92
|
+
*/
|
|
93
|
+
breakpoint?: number;
|
|
94
|
+
};
|
|
95
|
+
export { StyleColors, ComponentProps, AnchorBaseButtonProps, NativeBaseButtonProps, BaseButtonProps, AnchorButtonProps, NativeButtonProps, ButtonProps };
|