@alfalab/core-components-date-range-input 1.1.4 → 2.0.1
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.d.ts +7 -7
- package/Component.js +7 -7
- package/cssm/Component.d.ts +7 -7
- package/cssm/Component.js +6 -6
- package/cssm/index.js +4 -4
- package/esm/Component.d.ts +7 -7
- package/esm/Component.js +6 -6
- package/esm/index.css +6 -6
- package/esm/index.js +4 -4
- package/index.css +6 -6
- package/index.js +4 -4
- package/modern/Component.d.ts +7 -7
- package/modern/Component.js +8 -8
- package/modern/index.css +6 -6
- package/modern/index.js +4 -4
- package/package.json +4 -4
package/Component.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ChangeEvent, ElementType } from "react";
|
|
4
|
+
import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
|
|
4
5
|
import { InputProps } from "@alfalab/core-components-input";
|
|
5
|
-
import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
|
|
6
6
|
import { PopoverProps } from "@alfalab/core-components-popover";
|
|
7
7
|
type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
|
|
8
8
|
/**
|
|
@@ -91,7 +91,7 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
|
|
|
91
91
|
*/
|
|
92
92
|
block?: boolean;
|
|
93
93
|
};
|
|
94
|
-
declare const DateRangeInput: React.ForwardRefExoticComponent<
|
|
94
|
+
declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
|
|
95
95
|
/**
|
|
96
96
|
* Дополнительный класс
|
|
97
97
|
*/
|
|
@@ -112,8 +112,8 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
112
112
|
* Обработчик изменения значения
|
|
113
113
|
*/
|
|
114
114
|
onChange?: ((payload: {
|
|
115
|
-
dateFrom?: Date
|
|
116
|
-
dateTo?: Date
|
|
115
|
+
dateFrom?: Date;
|
|
116
|
+
dateTo?: Date;
|
|
117
117
|
value: string;
|
|
118
118
|
}, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
|
|
119
119
|
/**
|
|
@@ -127,7 +127,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
127
127
|
/**
|
|
128
128
|
* Компонент календаря
|
|
129
129
|
*/
|
|
130
|
-
Calendar?: React.
|
|
130
|
+
Calendar?: React.ElementType<CalendarProps> | undefined;
|
|
131
131
|
/**
|
|
132
132
|
* Доп. пропсы для календаря
|
|
133
133
|
*/
|
|
@@ -166,11 +166,11 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
166
166
|
/**
|
|
167
167
|
* Позиционирование поповера с календарем
|
|
168
168
|
*/
|
|
169
|
-
popoverPosition?:
|
|
169
|
+
popoverPosition?: PopoverProps['position'];
|
|
170
170
|
/**
|
|
171
171
|
* z-index Popover
|
|
172
172
|
*/
|
|
173
|
-
zIndexPopover?:
|
|
173
|
+
zIndexPopover?: PopoverProps['zIndex'];
|
|
174
174
|
/**
|
|
175
175
|
* Запрещает поповеру менять свою позицию.
|
|
176
176
|
* Например, если места снизу недостаточно,то он все равно будет показан снизу
|
package/Component.js
CHANGED
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var cn = require('classnames');
|
|
7
6
|
var mergeRefs = require('react-merge-refs');
|
|
7
|
+
var cn = require('classnames');
|
|
8
8
|
var dateFnsIsValid = require('date-fns/isValid');
|
|
9
|
-
var hooks = require('@alfalab/hooks');
|
|
10
|
-
var coreComponentsInput = require('@alfalab/core-components-input');
|
|
11
9
|
var coreComponentsCalendar = require('@alfalab/core-components-calendar');
|
|
12
|
-
var coreComponentsPopover = require('@alfalab/core-components-popover');
|
|
13
10
|
var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
|
|
11
|
+
var coreComponentsInput = require('@alfalab/core-components-input');
|
|
12
|
+
var coreComponentsPopover = require('@alfalab/core-components-popover');
|
|
13
|
+
var hooks = require('@alfalab/hooks');
|
|
14
14
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
15
15
|
require('date-fns/parse');
|
|
16
16
|
var utils_format = require('./utils/format.js');
|
|
@@ -18,11 +18,11 @@ var utils_format = require('./utils/format.js');
|
|
|
18
18
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
19
|
|
|
20
20
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
21
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
22
21
|
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
22
|
+
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
23
23
|
var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsIsValid);
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
/******************************************************************************
|
|
26
26
|
Copyright (c) Microsoft Corporation.
|
|
27
27
|
|
|
28
28
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -61,7 +61,7 @@ function __rest(s, e) {
|
|
|
61
61
|
return t;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
var styles = {"component":"date-range-
|
|
64
|
+
var styles = {"component":"date-range-input__component_124mi","calendarContainer":"date-range-input__calendarContainer_124mi","calendarResponsive":"date-range-input__calendarResponsive_124mi","block":"date-range-input__block_124mi"};
|
|
65
65
|
require('./index.css')
|
|
66
66
|
|
|
67
67
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
package/cssm/Component.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ChangeEvent, ElementType } from "react";
|
|
4
|
+
import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
|
|
4
5
|
import { InputProps } from "@alfalab/core-components-input";
|
|
5
|
-
import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
|
|
6
6
|
import { PopoverProps } from "@alfalab/core-components-popover";
|
|
7
7
|
type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
|
|
8
8
|
/**
|
|
@@ -91,7 +91,7 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
|
|
|
91
91
|
*/
|
|
92
92
|
block?: boolean;
|
|
93
93
|
};
|
|
94
|
-
declare const DateRangeInput: React.ForwardRefExoticComponent<
|
|
94
|
+
declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
|
|
95
95
|
/**
|
|
96
96
|
* Дополнительный класс
|
|
97
97
|
*/
|
|
@@ -112,8 +112,8 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
112
112
|
* Обработчик изменения значения
|
|
113
113
|
*/
|
|
114
114
|
onChange?: ((payload: {
|
|
115
|
-
dateFrom?: Date
|
|
116
|
-
dateTo?: Date
|
|
115
|
+
dateFrom?: Date;
|
|
116
|
+
dateTo?: Date;
|
|
117
117
|
value: string;
|
|
118
118
|
}, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
|
|
119
119
|
/**
|
|
@@ -127,7 +127,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
127
127
|
/**
|
|
128
128
|
* Компонент календаря
|
|
129
129
|
*/
|
|
130
|
-
Calendar?: React.
|
|
130
|
+
Calendar?: React.ElementType<CalendarProps> | undefined;
|
|
131
131
|
/**
|
|
132
132
|
* Доп. пропсы для календаря
|
|
133
133
|
*/
|
|
@@ -166,11 +166,11 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
166
166
|
/**
|
|
167
167
|
* Позиционирование поповера с календарем
|
|
168
168
|
*/
|
|
169
|
-
popoverPosition?:
|
|
169
|
+
popoverPosition?: PopoverProps['position'];
|
|
170
170
|
/**
|
|
171
171
|
* z-index Popover
|
|
172
172
|
*/
|
|
173
|
-
zIndexPopover?:
|
|
173
|
+
zIndexPopover?: PopoverProps['zIndex'];
|
|
174
174
|
/**
|
|
175
175
|
* Запрещает поповеру менять свою позицию.
|
|
176
176
|
* Например, если места снизу недостаточно,то он все равно будет показан снизу
|
package/cssm/Component.js
CHANGED
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var cn = require('classnames');
|
|
7
6
|
var mergeRefs = require('react-merge-refs');
|
|
7
|
+
var cn = require('classnames');
|
|
8
8
|
var dateFnsIsValid = require('date-fns/isValid');
|
|
9
|
-
var hooks = require('@alfalab/hooks');
|
|
10
|
-
var coreComponentsInput = require('@alfalab/core-components-input/cssm');
|
|
11
9
|
var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
|
|
12
|
-
var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
|
|
13
10
|
var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
|
|
11
|
+
var coreComponentsInput = require('@alfalab/core-components-input/cssm');
|
|
12
|
+
var coreComponentsPopover = require('@alfalab/core-components-popover/cssm');
|
|
13
|
+
var hooks = require('@alfalab/hooks');
|
|
14
14
|
var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
|
|
15
15
|
require('date-fns/parse');
|
|
16
16
|
var utils_format = require('./utils/format.js');
|
|
@@ -19,12 +19,12 @@ var styles = require('./index.module.css');
|
|
|
19
19
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
20
|
|
|
21
21
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
23
22
|
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
23
|
+
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
24
24
|
var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsIsValid);
|
|
25
25
|
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
/******************************************************************************
|
|
28
28
|
Copyright (c) Microsoft Corporation.
|
|
29
29
|
|
|
30
30
|
Permission to use, copy, modify, and/or distribute this software for any
|
package/cssm/index.js
CHANGED
|
@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var Component = require('./Component.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('classnames');
|
|
8
7
|
require('react-merge-refs');
|
|
8
|
+
require('classnames');
|
|
9
9
|
require('date-fns/isValid');
|
|
10
|
-
require('@alfalab/hooks');
|
|
11
|
-
require('@alfalab/core-components-input/cssm');
|
|
12
10
|
require('@alfalab/core-components-calendar/cssm');
|
|
13
|
-
require('@alfalab/core-components-popover/cssm');
|
|
14
11
|
require('@alfalab/core-components-icon-button/cssm');
|
|
12
|
+
require('@alfalab/core-components-input/cssm');
|
|
13
|
+
require('@alfalab/core-components-popover/cssm');
|
|
14
|
+
require('@alfalab/hooks');
|
|
15
15
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
16
16
|
require('date-fns/parse');
|
|
17
17
|
require('./utils/format.js');
|
package/esm/Component.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ChangeEvent, ElementType } from "react";
|
|
4
|
+
import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
|
|
4
5
|
import { InputProps } from "@alfalab/core-components-input";
|
|
5
|
-
import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
|
|
6
6
|
import { PopoverProps } from "@alfalab/core-components-popover";
|
|
7
7
|
type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
|
|
8
8
|
/**
|
|
@@ -91,7 +91,7 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
|
|
|
91
91
|
*/
|
|
92
92
|
block?: boolean;
|
|
93
93
|
};
|
|
94
|
-
declare const DateRangeInput: React.ForwardRefExoticComponent<
|
|
94
|
+
declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
|
|
95
95
|
/**
|
|
96
96
|
* Дополнительный класс
|
|
97
97
|
*/
|
|
@@ -112,8 +112,8 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
112
112
|
* Обработчик изменения значения
|
|
113
113
|
*/
|
|
114
114
|
onChange?: ((payload: {
|
|
115
|
-
dateFrom?: Date
|
|
116
|
-
dateTo?: Date
|
|
115
|
+
dateFrom?: Date;
|
|
116
|
+
dateTo?: Date;
|
|
117
117
|
value: string;
|
|
118
118
|
}, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
|
|
119
119
|
/**
|
|
@@ -127,7 +127,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
127
127
|
/**
|
|
128
128
|
* Компонент календаря
|
|
129
129
|
*/
|
|
130
|
-
Calendar?: React.
|
|
130
|
+
Calendar?: React.ElementType<CalendarProps> | undefined;
|
|
131
131
|
/**
|
|
132
132
|
* Доп. пропсы для календаря
|
|
133
133
|
*/
|
|
@@ -166,11 +166,11 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
166
166
|
/**
|
|
167
167
|
* Позиционирование поповера с календарем
|
|
168
168
|
*/
|
|
169
|
-
popoverPosition?:
|
|
169
|
+
popoverPosition?: PopoverProps['position'];
|
|
170
170
|
/**
|
|
171
171
|
* z-index Popover
|
|
172
172
|
*/
|
|
173
|
-
zIndexPopover?:
|
|
173
|
+
zIndexPopover?: PopoverProps['zIndex'];
|
|
174
174
|
/**
|
|
175
175
|
* Запрещает поповеру менять свою позицию.
|
|
176
176
|
* Например, если места снизу недостаточно,то он все равно будет показан снизу
|
package/esm/Component.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import React, { useRef, useState, useEffect } from 'react';
|
|
2
|
-
import cn from 'classnames';
|
|
3
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
|
+
import cn from 'classnames';
|
|
4
4
|
import dateFnsIsValid from 'date-fns/isValid';
|
|
5
|
-
import { useMedia } from '@alfalab/hooks';
|
|
6
|
-
import { Input } from '@alfalab/core-components-input/esm';
|
|
7
5
|
import { usePeriod, CalendarMobile, Calendar } from '@alfalab/core-components-calendar/esm';
|
|
8
|
-
import { Popover } from '@alfalab/core-components-popover/esm';
|
|
9
6
|
import { IconButton } from '@alfalab/core-components-icon-button/esm';
|
|
7
|
+
import { Input } from '@alfalab/core-components-input/esm';
|
|
8
|
+
import { Popover } from '@alfalab/core-components-popover/esm';
|
|
9
|
+
import { useMedia } from '@alfalab/hooks';
|
|
10
10
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
11
11
|
import 'date-fns/parse';
|
|
12
12
|
import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from './utils/format.js';
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
/******************************************************************************
|
|
15
15
|
Copyright (c) Microsoft Corporation.
|
|
16
16
|
|
|
17
17
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -50,7 +50,7 @@ function __rest(s, e) {
|
|
|
50
50
|
return t;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
var styles = {"component":"date-range-
|
|
53
|
+
var styles = {"component":"date-range-input__component_124mi","calendarContainer":"date-range-input__calendarContainer_124mi","calendarResponsive":"date-range-input__calendarResponsive_124mi","block":"date-range-input__block_124mi"};
|
|
54
54
|
require('./index.css')
|
|
55
55
|
|
|
56
56
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: iz5jr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -39,26 +39,26 @@
|
|
|
39
39
|
:root {
|
|
40
40
|
--calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
|
|
41
41
|
}
|
|
42
|
-
.date-range-
|
|
42
|
+
.date-range-input__component_124mi {
|
|
43
43
|
display: inline-block;
|
|
44
44
|
outline: none;
|
|
45
45
|
position: relative;
|
|
46
46
|
}
|
|
47
|
-
.date-range-
|
|
47
|
+
.date-range-input__calendarContainer_124mi {
|
|
48
48
|
display: inline-block;
|
|
49
49
|
box-sizing: border-box;
|
|
50
50
|
border-radius: var(--calendar-popover-border-radius)
|
|
51
51
|
}
|
|
52
52
|
@media (max-width: 374px) {
|
|
53
|
-
.date-range-
|
|
53
|
+
.date-range-input__calendarContainer_124mi {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
.date-range-
|
|
58
|
+
.date-range-input__calendarResponsive_124mi {
|
|
59
59
|
width: var(--calendar-width);
|
|
60
60
|
padding: 0 var(--gap-m);
|
|
61
61
|
}
|
|
62
|
-
.date-range-
|
|
62
|
+
.date-range-input__block_124mi {
|
|
63
63
|
width: 100%;
|
|
64
64
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
export { DateRangeInput } from './Component.js';
|
|
2
2
|
import 'react';
|
|
3
|
-
import 'classnames';
|
|
4
3
|
import 'react-merge-refs';
|
|
4
|
+
import 'classnames';
|
|
5
5
|
import 'date-fns/isValid';
|
|
6
|
-
import '@alfalab/hooks';
|
|
7
|
-
import '@alfalab/core-components-input/esm';
|
|
8
6
|
import '@alfalab/core-components-calendar/esm';
|
|
9
|
-
import '@alfalab/core-components-popover/esm';
|
|
10
7
|
import '@alfalab/core-components-icon-button/esm';
|
|
8
|
+
import '@alfalab/core-components-input/esm';
|
|
9
|
+
import '@alfalab/core-components-popover/esm';
|
|
10
|
+
import '@alfalab/hooks';
|
|
11
11
|
import '@alfalab/icons-glyph/CalendarMIcon';
|
|
12
12
|
import 'date-fns/parse';
|
|
13
13
|
import './utils/format.js';
|
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: iz5jr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -39,26 +39,26 @@
|
|
|
39
39
|
:root {
|
|
40
40
|
--calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
|
|
41
41
|
}
|
|
42
|
-
.date-range-
|
|
42
|
+
.date-range-input__component_124mi {
|
|
43
43
|
display: inline-block;
|
|
44
44
|
outline: none;
|
|
45
45
|
position: relative;
|
|
46
46
|
}
|
|
47
|
-
.date-range-
|
|
47
|
+
.date-range-input__calendarContainer_124mi {
|
|
48
48
|
display: inline-block;
|
|
49
49
|
box-sizing: border-box;
|
|
50
50
|
border-radius: var(--calendar-popover-border-radius)
|
|
51
51
|
}
|
|
52
52
|
@media (max-width: 374px) {
|
|
53
|
-
.date-range-
|
|
53
|
+
.date-range-input__calendarContainer_124mi {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
.date-range-
|
|
58
|
+
.date-range-input__calendarResponsive_124mi {
|
|
59
59
|
width: var(--calendar-width);
|
|
60
60
|
padding: 0 var(--gap-m);
|
|
61
61
|
}
|
|
62
|
-
.date-range-
|
|
62
|
+
.date-range-input__block_124mi {
|
|
63
63
|
width: 100%;
|
|
64
64
|
}
|
package/index.js
CHANGED
|
@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var Component = require('./Component.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('classnames');
|
|
8
7
|
require('react-merge-refs');
|
|
8
|
+
require('classnames');
|
|
9
9
|
require('date-fns/isValid');
|
|
10
|
-
require('@alfalab/hooks');
|
|
11
|
-
require('@alfalab/core-components-input');
|
|
12
10
|
require('@alfalab/core-components-calendar');
|
|
13
|
-
require('@alfalab/core-components-popover');
|
|
14
11
|
require('@alfalab/core-components-icon-button');
|
|
12
|
+
require('@alfalab/core-components-input');
|
|
13
|
+
require('@alfalab/core-components-popover');
|
|
14
|
+
require('@alfalab/hooks');
|
|
15
15
|
require('@alfalab/icons-glyph/CalendarMIcon');
|
|
16
16
|
require('date-fns/parse');
|
|
17
17
|
require('./utils/format.js');
|
package/modern/Component.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ChangeEvent, ElementType } from "react";
|
|
4
|
+
import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
|
|
4
5
|
import { InputProps } from "@alfalab/core-components-input";
|
|
5
|
-
import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
|
|
6
6
|
import { PopoverProps } from "@alfalab/core-components-popover";
|
|
7
7
|
type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
|
|
8
8
|
/**
|
|
@@ -91,7 +91,7 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
|
|
|
91
91
|
*/
|
|
92
92
|
block?: boolean;
|
|
93
93
|
};
|
|
94
|
-
declare const DateRangeInput: React.ForwardRefExoticComponent<
|
|
94
|
+
declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
|
|
95
95
|
/**
|
|
96
96
|
* Дополнительный класс
|
|
97
97
|
*/
|
|
@@ -112,8 +112,8 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
112
112
|
* Обработчик изменения значения
|
|
113
113
|
*/
|
|
114
114
|
onChange?: ((payload: {
|
|
115
|
-
dateFrom?: Date
|
|
116
|
-
dateTo?: Date
|
|
115
|
+
dateFrom?: Date;
|
|
116
|
+
dateTo?: Date;
|
|
117
117
|
value: string;
|
|
118
118
|
}, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
|
|
119
119
|
/**
|
|
@@ -127,7 +127,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
127
127
|
/**
|
|
128
128
|
* Компонент календаря
|
|
129
129
|
*/
|
|
130
|
-
Calendar?: React.
|
|
130
|
+
Calendar?: React.ElementType<CalendarProps> | undefined;
|
|
131
131
|
/**
|
|
132
132
|
* Доп. пропсы для календаря
|
|
133
133
|
*/
|
|
@@ -166,11 +166,11 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "
|
|
|
166
166
|
/**
|
|
167
167
|
* Позиционирование поповера с календарем
|
|
168
168
|
*/
|
|
169
|
-
popoverPosition?:
|
|
169
|
+
popoverPosition?: PopoverProps['position'];
|
|
170
170
|
/**
|
|
171
171
|
* z-index Popover
|
|
172
172
|
*/
|
|
173
|
-
zIndexPopover?:
|
|
173
|
+
zIndexPopover?: PopoverProps['zIndex'];
|
|
174
174
|
/**
|
|
175
175
|
* Запрещает поповеру менять свою позицию.
|
|
176
176
|
* Например, если места снизу недостаточно,то он все равно будет показан снизу
|
package/modern/Component.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import React, { useRef, useState, useEffect } from 'react';
|
|
2
|
-
import cn from 'classnames';
|
|
3
2
|
import mergeRefs from 'react-merge-refs';
|
|
3
|
+
import cn from 'classnames';
|
|
4
4
|
import dateFnsIsValid from 'date-fns/isValid';
|
|
5
|
-
import { useMedia } from '@alfalab/hooks';
|
|
6
|
-
import { Input } from '@alfalab/core-components-input/modern';
|
|
7
5
|
import { Calendar, usePeriod, CalendarMobile } from '@alfalab/core-components-calendar/modern';
|
|
8
|
-
import { Popover } from '@alfalab/core-components-popover/modern';
|
|
9
6
|
import { IconButton } from '@alfalab/core-components-icon-button/modern';
|
|
7
|
+
import { Input } from '@alfalab/core-components-input/modern';
|
|
8
|
+
import { Popover } from '@alfalab/core-components-popover/modern';
|
|
9
|
+
import { useMedia } from '@alfalab/hooks';
|
|
10
10
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
11
11
|
import 'date-fns/parse';
|
|
12
12
|
import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from './utils/format.js';
|
|
13
13
|
|
|
14
|
-
var styles = {"component":"date-range-
|
|
14
|
+
var styles = {"component":"date-range-input__component_124mi","calendarContainer":"date-range-input__calendarContainer_124mi","calendarResponsive":"date-range-input__calendarResponsive_124mi","block":"date-range-input__block_124mi"};
|
|
15
15
|
require('./index.css')
|
|
16
16
|
|
|
17
17
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
@@ -151,13 +151,13 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
|
|
|
151
151
|
const renderCalendar = () => (
|
|
152
152
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
153
153
|
React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
154
|
-
React.createElement(CalendarComponent,
|
|
154
|
+
React.createElement(CalendarComponent, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })));
|
|
155
155
|
return (React.createElement("div", { className: cn(styles.component, className, {
|
|
156
156
|
[styles.block]: block,
|
|
157
157
|
}), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
158
|
-
React.createElement(Input,
|
|
158
|
+
React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
|
|
159
159
|
rightAddons,
|
|
160
|
-
picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) })
|
|
160
|
+
picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) }),
|
|
161
161
|
picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
|
|
162
162
|
[styles.calendarResponsive]: calendarResponsive,
|
|
163
163
|
}), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
|
package/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: iz5jr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
/* Hard */
|
|
@@ -39,26 +39,26 @@
|
|
|
39
39
|
:root {
|
|
40
40
|
--calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
|
|
41
41
|
}
|
|
42
|
-
.date-range-
|
|
42
|
+
.date-range-input__component_124mi {
|
|
43
43
|
display: inline-block;
|
|
44
44
|
outline: none;
|
|
45
45
|
position: relative;
|
|
46
46
|
}
|
|
47
|
-
.date-range-
|
|
47
|
+
.date-range-input__calendarContainer_124mi {
|
|
48
48
|
display: inline-block;
|
|
49
49
|
box-sizing: border-box;
|
|
50
50
|
border-radius: var(--calendar-popover-border-radius)
|
|
51
51
|
}
|
|
52
52
|
@media (max-width: 374px) {
|
|
53
|
-
.date-range-
|
|
53
|
+
.date-range-input__calendarContainer_124mi {
|
|
54
54
|
width: 100%;
|
|
55
55
|
min-width: 288px
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
|
-
.date-range-
|
|
58
|
+
.date-range-input__calendarResponsive_124mi {
|
|
59
59
|
width: var(--calendar-width);
|
|
60
60
|
padding: 0 var(--gap-m);
|
|
61
61
|
}
|
|
62
|
-
.date-range-
|
|
62
|
+
.date-range-input__block_124mi {
|
|
63
63
|
width: 100%;
|
|
64
64
|
}
|
package/modern/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
import 'classnames';
|
|
3
2
|
import 'react-merge-refs';
|
|
3
|
+
import 'classnames';
|
|
4
4
|
import 'date-fns/isValid';
|
|
5
|
-
import '@alfalab/hooks';
|
|
6
|
-
import '@alfalab/core-components-input/modern';
|
|
7
5
|
import '@alfalab/core-components-calendar/modern';
|
|
8
|
-
import '@alfalab/core-components-popover/modern';
|
|
9
6
|
import '@alfalab/core-components-icon-button/modern';
|
|
7
|
+
import '@alfalab/core-components-input/modern';
|
|
8
|
+
import '@alfalab/core-components-popover/modern';
|
|
9
|
+
import '@alfalab/hooks';
|
|
10
10
|
import '@alfalab/icons-glyph/CalendarMIcon';
|
|
11
11
|
import 'date-fns/parse';
|
|
12
12
|
import './utils/format.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-date-range-input",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@alfalab/core-components-input": "^
|
|
19
|
-
"@alfalab/core-components-icon-button": "^
|
|
20
|
-
"@alfalab/core-components-calendar": "^6.1.
|
|
18
|
+
"@alfalab/core-components-input": "^11.0.1",
|
|
19
|
+
"@alfalab/core-components-icon-button": "^6.0.0",
|
|
20
|
+
"@alfalab/core-components-calendar": "^6.1.10",
|
|
21
21
|
"@alfalab/core-components-popover": "^6.0.2",
|
|
22
22
|
"classnames": "^2.3.1"
|
|
23
23
|
}
|