@alfalab/core-components-date-time-input 4.3.25 → 4.4.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/components/date-time-input/Component.d.ts +3 -1
- package/components/date-time-input/Component.js +1 -1
- package/components/date-time-input/index.css +9 -8
- package/cssm/components/date-time-input/Component.d.ts +3 -1
- package/cssm/components/date-time-input/index.module.css +2 -1
- package/esm/components/date-time-input/Component.d.ts +3 -1
- package/esm/components/date-time-input/Component.js +1 -1
- package/esm/components/date-time-input/index.css +9 -8
- package/modern/components/date-time-input/Component.d.ts +3 -1
- package/modern/components/date-time-input/Component.js +1 -1
- package/modern/components/date-time-input/index.css +9 -8
- package/moderncssm/Component.responsive.d.ts +19 -0
- package/moderncssm/Component.responsive.js +14 -0
- package/moderncssm/components/date-time-input/Component.d.ts +216 -0
- package/moderncssm/components/date-time-input/Component.js +139 -0
- package/moderncssm/components/date-time-input/index.d.ts +1 -0
- package/moderncssm/components/date-time-input/index.js +1 -0
- package/moderncssm/components/date-time-input/index.module.css +54 -0
- package/moderncssm/desktop/Component.desktop.d.ts +10 -0
- package/moderncssm/desktop/Component.desktop.js +12 -0
- package/moderncssm/desktop/index.d.ts +2 -0
- package/moderncssm/desktop/index.js +1 -0
- package/moderncssm/index.d.ts +3 -0
- package/moderncssm/index.js +1 -0
- package/moderncssm/mobile/Component.mobile.d.ts +6 -0
- package/moderncssm/mobile/Component.mobile.js +8 -0
- package/moderncssm/mobile/index.d.ts +2 -0
- package/moderncssm/mobile/index.js +1 -0
- package/moderncssm/utils/format.d.ts +13 -0
- package/moderncssm/utils/format.js +134 -0
- package/moderncssm/utils/index.d.ts +1 -0
- package/moderncssm/utils/index.js +1 -0
- package/package.json +7 -7
- package/src/components/date-time-input/index.module.css +2 -2
|
@@ -143,7 +143,9 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
143
143
|
calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | ({
|
|
144
144
|
title?: string | undefined;
|
|
145
145
|
open: boolean;
|
|
146
|
-
onClose?: (() => void) | undefined;
|
|
146
|
+
onClose?: (() => void) | undefined; /**
|
|
147
|
+
* Дополнительный класс
|
|
148
|
+
*/
|
|
147
149
|
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
148
150
|
hasHeader?: boolean | undefined;
|
|
149
151
|
onApply?: (() => void) | undefined;
|
|
@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
19
19
|
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
20
20
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
21
21
|
|
|
22
|
-
var styles = {"component":"date-time-
|
|
22
|
+
var styles = {"component":"date-time-input__component_phf1d","calendarContainer":"date-time-input__calendarContainer_phf1d","calendarResponsive":"date-time-input__calendarResponsive_phf1d","block":"date-time-input__block_phf1d","calendarIcon":"date-time-input__calendarIcon_phf1d"};
|
|
23
23
|
require('./index.css')
|
|
24
24
|
|
|
25
25
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: fd2zi */
|
|
2
2
|
:root { /* 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 */ /* 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 */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-neutral-300: #e7e8eb; /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
--gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
20
|
|
|
21
21
|
/* новые значения, используйте их */
|
|
22
|
+
--gap-12-neg: var(--gap-s-neg);
|
|
22
23
|
} :root {
|
|
23
24
|
} :root {
|
|
24
25
|
} :root {
|
|
@@ -45,24 +46,24 @@
|
|
|
45
46
|
/* marker */
|
|
46
47
|
} :root {
|
|
47
48
|
--calendar-popover-border-radius: var(--border-radius-m);
|
|
48
|
-
} .date-time-
|
|
49
|
+
} .date-time-input__component_phf1d {
|
|
49
50
|
display: inline-block;
|
|
50
51
|
outline: none;
|
|
51
52
|
position: relative;
|
|
52
|
-
} .date-time-
|
|
53
|
+
} .date-time-input__calendarContainer_phf1d {
|
|
53
54
|
display: inline-block;
|
|
54
55
|
box-sizing: border-box;
|
|
55
56
|
border-radius: var(--calendar-popover-border-radius);
|
|
56
57
|
border: 1px solid var(--color-light-neutral-300)
|
|
57
|
-
} @media (max-width: 374px) { .date-time-
|
|
58
|
+
} @media (max-width: 374px) { .date-time-input__calendarContainer_phf1d {
|
|
58
59
|
width: 100%;
|
|
59
60
|
min-width: 288px
|
|
60
61
|
}
|
|
61
|
-
} .date-time-
|
|
62
|
+
} .date-time-input__calendarResponsive_phf1d {
|
|
62
63
|
width: var(--calendar-width);
|
|
63
|
-
} .date-time-
|
|
64
|
+
} .date-time-input__block_phf1d {
|
|
64
65
|
width: 100%;
|
|
65
|
-
} .date-time-
|
|
66
|
-
margin-right: var(--gap-
|
|
66
|
+
} .date-time-input__calendarIcon_phf1d {
|
|
67
|
+
margin-right: var(--gap-12-neg);
|
|
67
68
|
height: 100%;
|
|
68
69
|
}
|
|
@@ -143,7 +143,9 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
143
143
|
calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | ({
|
|
144
144
|
title?: string | undefined;
|
|
145
145
|
open: boolean;
|
|
146
|
-
onClose?: (() => void) | undefined;
|
|
146
|
+
onClose?: (() => void) | undefined; /**
|
|
147
|
+
* Дополнительный класс
|
|
148
|
+
*/
|
|
147
149
|
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
148
150
|
hasHeader?: boolean | undefined;
|
|
149
151
|
onApply?: (() => void) | undefined;
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
--gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
19
19
|
|
|
20
20
|
/* новые значения, используйте их */
|
|
21
|
+
--gap-12-neg: var(--gap-s-neg);
|
|
21
22
|
} :root {
|
|
22
23
|
} :root {
|
|
23
24
|
} :root {
|
|
@@ -62,6 +63,6 @@
|
|
|
62
63
|
} .block {
|
|
63
64
|
width: 100%;
|
|
64
65
|
} .calendarIcon {
|
|
65
|
-
margin-right: var(--gap-
|
|
66
|
+
margin-right: var(--gap-12-neg);
|
|
66
67
|
height: 100%;
|
|
67
68
|
}
|
|
@@ -143,7 +143,9 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
143
143
|
calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | ({
|
|
144
144
|
title?: string | undefined;
|
|
145
145
|
open: boolean;
|
|
146
|
-
onClose?: (() => void) | undefined;
|
|
146
|
+
onClose?: (() => void) | undefined; /**
|
|
147
|
+
* Дополнительный класс
|
|
148
|
+
*/
|
|
147
149
|
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
148
150
|
hasHeader?: boolean | undefined;
|
|
149
151
|
onApply?: (() => void) | undefined;
|
|
@@ -9,7 +9,7 @@ import { useDidUpdateEffect } from '@alfalab/hooks';
|
|
|
9
9
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
10
10
|
import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isCompleteDateInput, isValid, addTimeToDate, parseTimestampToDate } from '../../utils/format.js';
|
|
11
11
|
|
|
12
|
-
var styles = {"component":"date-time-
|
|
12
|
+
var styles = {"component":"date-time-input__component_phf1d","calendarContainer":"date-time-input__calendarContainer_phf1d","calendarResponsive":"date-time-input__calendarResponsive_phf1d","block":"date-time-input__block_phf1d","calendarIcon":"date-time-input__calendarIcon_phf1d"};
|
|
13
13
|
require('./index.css')
|
|
14
14
|
|
|
15
15
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: fd2zi */
|
|
2
2
|
:root { /* 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 */ /* 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 */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-neutral-300: #e7e8eb; /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
--gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
20
|
|
|
21
21
|
/* новые значения, используйте их */
|
|
22
|
+
--gap-12-neg: var(--gap-s-neg);
|
|
22
23
|
} :root {
|
|
23
24
|
} :root {
|
|
24
25
|
} :root {
|
|
@@ -45,24 +46,24 @@
|
|
|
45
46
|
/* marker */
|
|
46
47
|
} :root {
|
|
47
48
|
--calendar-popover-border-radius: var(--border-radius-m);
|
|
48
|
-
} .date-time-
|
|
49
|
+
} .date-time-input__component_phf1d {
|
|
49
50
|
display: inline-block;
|
|
50
51
|
outline: none;
|
|
51
52
|
position: relative;
|
|
52
|
-
} .date-time-
|
|
53
|
+
} .date-time-input__calendarContainer_phf1d {
|
|
53
54
|
display: inline-block;
|
|
54
55
|
box-sizing: border-box;
|
|
55
56
|
border-radius: var(--calendar-popover-border-radius);
|
|
56
57
|
border: 1px solid var(--color-light-neutral-300)
|
|
57
|
-
} @media (max-width: 374px) { .date-time-
|
|
58
|
+
} @media (max-width: 374px) { .date-time-input__calendarContainer_phf1d {
|
|
58
59
|
width: 100%;
|
|
59
60
|
min-width: 288px
|
|
60
61
|
}
|
|
61
|
-
} .date-time-
|
|
62
|
+
} .date-time-input__calendarResponsive_phf1d {
|
|
62
63
|
width: var(--calendar-width);
|
|
63
|
-
} .date-time-
|
|
64
|
+
} .date-time-input__block_phf1d {
|
|
64
65
|
width: 100%;
|
|
65
|
-
} .date-time-
|
|
66
|
-
margin-right: var(--gap-
|
|
66
|
+
} .date-time-input__calendarIcon_phf1d {
|
|
67
|
+
margin-right: var(--gap-12-neg);
|
|
67
68
|
height: 100%;
|
|
68
69
|
}
|
|
@@ -143,7 +143,9 @@ declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "o
|
|
|
143
143
|
calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | ({
|
|
144
144
|
title?: string | undefined;
|
|
145
145
|
open: boolean;
|
|
146
|
-
onClose?: (() => void) | undefined;
|
|
146
|
+
onClose?: (() => void) | undefined; /**
|
|
147
|
+
* Дополнительный класс
|
|
148
|
+
*/
|
|
147
149
|
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
148
150
|
hasHeader?: boolean | undefined;
|
|
149
151
|
onApply?: (() => void) | undefined;
|
|
@@ -8,7 +8,7 @@ import { useDidUpdateEffect } from '@alfalab/hooks';
|
|
|
8
8
|
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
9
9
|
import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isCompleteDateInput, isValid, addTimeToDate, parseTimestampToDate } from '../../utils/format.js';
|
|
10
10
|
|
|
11
|
-
const styles = {"component":"date-time-
|
|
11
|
+
const styles = {"component":"date-time-input__component_phf1d","calendarContainer":"date-time-input__calendarContainer_phf1d","calendarResponsive":"date-time-input__calendarResponsive_phf1d","block":"date-time-input__block_phf1d","calendarIcon":"date-time-input__calendarIcon_phf1d"};
|
|
12
12
|
require('./index.css')
|
|
13
13
|
|
|
14
14
|
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: fd2zi */
|
|
2
2
|
:root { /* 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 */ /* 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 */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-neutral-300: #e7e8eb; /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ /* 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 */
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
--gap-s-neg: -12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
20
20
|
|
|
21
21
|
/* новые значения, используйте их */
|
|
22
|
+
--gap-12-neg: var(--gap-s-neg);
|
|
22
23
|
} :root {
|
|
23
24
|
} :root {
|
|
24
25
|
} :root {
|
|
@@ -45,24 +46,24 @@
|
|
|
45
46
|
/* marker */
|
|
46
47
|
} :root {
|
|
47
48
|
--calendar-popover-border-radius: var(--border-radius-m);
|
|
48
|
-
} .date-time-
|
|
49
|
+
} .date-time-input__component_phf1d {
|
|
49
50
|
display: inline-block;
|
|
50
51
|
outline: none;
|
|
51
52
|
position: relative;
|
|
52
|
-
} .date-time-
|
|
53
|
+
} .date-time-input__calendarContainer_phf1d {
|
|
53
54
|
display: inline-block;
|
|
54
55
|
box-sizing: border-box;
|
|
55
56
|
border-radius: var(--calendar-popover-border-radius);
|
|
56
57
|
border: 1px solid var(--color-light-neutral-300)
|
|
57
|
-
} @media (max-width: 374px) { .date-time-
|
|
58
|
+
} @media (max-width: 374px) { .date-time-input__calendarContainer_phf1d {
|
|
58
59
|
width: 100%;
|
|
59
60
|
min-width: 288px
|
|
60
61
|
}
|
|
61
|
-
} .date-time-
|
|
62
|
+
} .date-time-input__calendarResponsive_phf1d {
|
|
62
63
|
width: var(--calendar-width);
|
|
63
|
-
} .date-time-
|
|
64
|
+
} .date-time-input__block_phf1d {
|
|
64
65
|
width: 100%;
|
|
65
|
-
} .date-time-
|
|
66
|
-
margin-right: var(--gap-
|
|
66
|
+
} .date-time-input__calendarIcon_phf1d {
|
|
67
|
+
margin-right: var(--gap-12-neg);
|
|
67
68
|
height: 100%;
|
|
68
69
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { DateTimeInputProps } from "./components/date-time-input/Component";
|
|
4
|
+
type DateTimeInputResponsiveProps = Omit<DateTimeInputProps, 'view' | 'InputComponent'> & {
|
|
5
|
+
/**
|
|
6
|
+
* Контрольная точка, с нее начинается desktop версия
|
|
7
|
+
* @default 1024
|
|
8
|
+
*/
|
|
9
|
+
breakpoint?: number;
|
|
10
|
+
};
|
|
11
|
+
type DateTimeInputMedia = 'desktop' | 'mobile';
|
|
12
|
+
declare const DateTimeInputResponsive: React.ForwardRefExoticComponent<Omit<DateTimeInputProps, "view" | "InputComponent"> & {
|
|
13
|
+
/**
|
|
14
|
+
* Контрольная точка, с нее начинается desktop версия
|
|
15
|
+
* @default 1024
|
|
16
|
+
*/
|
|
17
|
+
breakpoint?: number | undefined;
|
|
18
|
+
} & React.RefAttributes<HTMLInputElement>>;
|
|
19
|
+
export { DateTimeInputResponsiveProps, DateTimeInputMedia, DateTimeInputResponsive };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { useMedia } from '@alfalab/hooks';
|
|
3
|
+
import { DateTimeInputDesktop } from './desktop/Component.desktop.js';
|
|
4
|
+
import { DateTimeInputMobile } from './mobile/Component.mobile.js';
|
|
5
|
+
|
|
6
|
+
const DateTimeInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
|
|
7
|
+
const [view] = useMedia([
|
|
8
|
+
['mobile', `(max-width: ${breakpoint - 1}px)`],
|
|
9
|
+
['desktop', `(min-width: ${breakpoint}px)`],
|
|
10
|
+
], 'desktop');
|
|
11
|
+
return view === 'desktop' ? (React.createElement(DateTimeInputDesktop, { ...restProps, ref: ref })) : (React.createElement(DateTimeInputMobile, { ...restProps, ref: ref }));
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export { DateTimeInputResponsive };
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ChangeEvent, ElementType } from "react";
|
|
4
|
+
import { CalendarDesktopProps } from "@alfalab/core-components-calendar/desktop";
|
|
5
|
+
import { CalendarMobileProps } from "@alfalab/core-components-calendar/mobile";
|
|
6
|
+
import { InputProps } from "@alfalab/core-components-input";
|
|
7
|
+
import { PopoverProps } from "@alfalab/core-components-popover";
|
|
8
|
+
type DateTimeInputProps = Omit<InputProps, 'onChange'> & {
|
|
9
|
+
/**
|
|
10
|
+
* Дополнительный класс
|
|
11
|
+
*/
|
|
12
|
+
className?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Дополнительный класс для инпута
|
|
15
|
+
*/
|
|
16
|
+
inputClassName?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Дополнительный класс для поповера
|
|
19
|
+
*/
|
|
20
|
+
popoverClassName?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Обработчик изменения значения
|
|
23
|
+
*/
|
|
24
|
+
picker?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Обработчик изменения значения
|
|
27
|
+
*/
|
|
28
|
+
onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
29
|
+
date: Date;
|
|
30
|
+
value: string;
|
|
31
|
+
}) => void;
|
|
32
|
+
/**
|
|
33
|
+
* Обработчик окончания ввода
|
|
34
|
+
*/
|
|
35
|
+
onComplete?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
36
|
+
date: Date;
|
|
37
|
+
value: string;
|
|
38
|
+
}) => void;
|
|
39
|
+
/**
|
|
40
|
+
* Компонент календаря
|
|
41
|
+
*/
|
|
42
|
+
Calendar?: ElementType;
|
|
43
|
+
/**
|
|
44
|
+
* Доп. пропсы для календаря
|
|
45
|
+
*/
|
|
46
|
+
calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
|
|
47
|
+
/**
|
|
48
|
+
* Месяц в календаре по умолчанию (timestamp)
|
|
49
|
+
*/
|
|
50
|
+
defaultMonth?: number;
|
|
51
|
+
/**
|
|
52
|
+
* Минимальная дата, доступная для выбора (timestamp)
|
|
53
|
+
*/
|
|
54
|
+
minDate?: number;
|
|
55
|
+
/**
|
|
56
|
+
* Максимальная дата, доступная для выбора (timestamp)
|
|
57
|
+
*/
|
|
58
|
+
maxDate?: number;
|
|
59
|
+
/**
|
|
60
|
+
* Список событий
|
|
61
|
+
*/
|
|
62
|
+
events?: Array<Date | number>;
|
|
63
|
+
/**
|
|
64
|
+
* Список выходных
|
|
65
|
+
*/
|
|
66
|
+
offDays?: Array<Date | number>;
|
|
67
|
+
/**
|
|
68
|
+
* Состояние открытия по умолчанию
|
|
69
|
+
*/
|
|
70
|
+
defaultOpen?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Позиционирование поповера с календарем
|
|
73
|
+
*/
|
|
74
|
+
popoverPosition?: PopoverProps['position'];
|
|
75
|
+
/**
|
|
76
|
+
* z-index Popover
|
|
77
|
+
*/
|
|
78
|
+
zIndexPopover?: PopoverProps['zIndex'];
|
|
79
|
+
/**
|
|
80
|
+
* Запрещает поповеру менять свою позицию.
|
|
81
|
+
* Например, если места снизу недостаточно,то он все равно будет показан снизу
|
|
82
|
+
*/
|
|
83
|
+
preventFlip?: boolean;
|
|
84
|
+
/**
|
|
85
|
+
* Календарь будет принимать ширину инпута
|
|
86
|
+
*/
|
|
87
|
+
useAnchorWidth?: boolean;
|
|
88
|
+
/**
|
|
89
|
+
* Растягивает компонент на ширину контейнера
|
|
90
|
+
*/
|
|
91
|
+
block?: boolean;
|
|
92
|
+
/**
|
|
93
|
+
* Отображение компонента в мобильном или десктопном виде
|
|
94
|
+
*/
|
|
95
|
+
view?: 'desktop' | 'mobile';
|
|
96
|
+
/**
|
|
97
|
+
* Компонент инпута
|
|
98
|
+
*/
|
|
99
|
+
InputComponent?: ElementType;
|
|
100
|
+
/**
|
|
101
|
+
* Запретить ввод с клавиатуры
|
|
102
|
+
*/
|
|
103
|
+
disableUserInput?: boolean;
|
|
104
|
+
};
|
|
105
|
+
declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
|
|
106
|
+
/**
|
|
107
|
+
* Дополнительный класс
|
|
108
|
+
*/
|
|
109
|
+
className?: string | undefined;
|
|
110
|
+
/**
|
|
111
|
+
* Дополнительный класс для инпута
|
|
112
|
+
*/
|
|
113
|
+
inputClassName?: string | undefined;
|
|
114
|
+
/**
|
|
115
|
+
* Дополнительный класс для поповера
|
|
116
|
+
*/
|
|
117
|
+
popoverClassName?: string | undefined;
|
|
118
|
+
/**
|
|
119
|
+
* Обработчик изменения значения
|
|
120
|
+
*/
|
|
121
|
+
picker?: boolean | undefined;
|
|
122
|
+
/**
|
|
123
|
+
* Обработчик изменения значения
|
|
124
|
+
*/
|
|
125
|
+
onChange?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
126
|
+
date: Date;
|
|
127
|
+
value: string;
|
|
128
|
+
}) => void) | undefined;
|
|
129
|
+
/**
|
|
130
|
+
* Обработчик окончания ввода
|
|
131
|
+
*/
|
|
132
|
+
onComplete?: ((event: ChangeEvent<HTMLInputElement> | null, payload: {
|
|
133
|
+
date: Date;
|
|
134
|
+
value: string;
|
|
135
|
+
}) => void) | undefined;
|
|
136
|
+
/**
|
|
137
|
+
* Компонент календаря
|
|
138
|
+
*/
|
|
139
|
+
Calendar?: React.ElementType<any> | undefined;
|
|
140
|
+
/**
|
|
141
|
+
* Доп. пропсы для календаря
|
|
142
|
+
*/
|
|
143
|
+
calendarProps?: (CalendarDesktopProps & Record<string, unknown>) | ({
|
|
144
|
+
title?: string | undefined;
|
|
145
|
+
open: boolean;
|
|
146
|
+
onClose?: (() => void) | undefined; /**
|
|
147
|
+
* Дополнительный класс
|
|
148
|
+
*/
|
|
149
|
+
allowSelectionFromEmptyRange?: boolean | undefined;
|
|
150
|
+
hasHeader?: boolean | undefined;
|
|
151
|
+
onApply?: (() => void) | undefined;
|
|
152
|
+
clickableMonth?: boolean | undefined;
|
|
153
|
+
} & {
|
|
154
|
+
onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, globalThis.MouseEvent>) => void) | undefined;
|
|
155
|
+
yearsAmount?: number | undefined;
|
|
156
|
+
scrollableContainer?: HTMLElement | undefined;
|
|
157
|
+
} & Omit<CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "onMonthChange" | "defaultView" | "selectorView" | "rangeComplete" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & Record<string, unknown>) | undefined;
|
|
158
|
+
/**
|
|
159
|
+
* Месяц в календаре по умолчанию (timestamp)
|
|
160
|
+
*/
|
|
161
|
+
defaultMonth?: number | undefined;
|
|
162
|
+
/**
|
|
163
|
+
* Минимальная дата, доступная для выбора (timestamp)
|
|
164
|
+
*/
|
|
165
|
+
minDate?: number | undefined;
|
|
166
|
+
/**
|
|
167
|
+
* Максимальная дата, доступная для выбора (timestamp)
|
|
168
|
+
*/
|
|
169
|
+
maxDate?: number | undefined;
|
|
170
|
+
/**
|
|
171
|
+
* Список событий
|
|
172
|
+
*/
|
|
173
|
+
events?: (number | Date)[] | undefined;
|
|
174
|
+
/**
|
|
175
|
+
* Список выходных
|
|
176
|
+
*/
|
|
177
|
+
offDays?: (number | Date)[] | undefined;
|
|
178
|
+
/**
|
|
179
|
+
* Состояние открытия по умолчанию
|
|
180
|
+
*/
|
|
181
|
+
defaultOpen?: boolean | undefined;
|
|
182
|
+
/**
|
|
183
|
+
* Позиционирование поповера с календарем
|
|
184
|
+
*/
|
|
185
|
+
popoverPosition?: PopoverProps['position'];
|
|
186
|
+
/**
|
|
187
|
+
* z-index Popover
|
|
188
|
+
*/
|
|
189
|
+
zIndexPopover?: PopoverProps['zIndex'];
|
|
190
|
+
/**
|
|
191
|
+
* Запрещает поповеру менять свою позицию.
|
|
192
|
+
* Например, если места снизу недостаточно,то он все равно будет показан снизу
|
|
193
|
+
*/
|
|
194
|
+
preventFlip?: boolean | undefined;
|
|
195
|
+
/**
|
|
196
|
+
* Календарь будет принимать ширину инпута
|
|
197
|
+
*/
|
|
198
|
+
useAnchorWidth?: boolean | undefined;
|
|
199
|
+
/**
|
|
200
|
+
* Растягивает компонент на ширину контейнера
|
|
201
|
+
*/
|
|
202
|
+
block?: boolean | undefined;
|
|
203
|
+
/**
|
|
204
|
+
* Отображение компонента в мобильном или десктопном виде
|
|
205
|
+
*/
|
|
206
|
+
view?: "desktop" | "mobile" | undefined;
|
|
207
|
+
/**
|
|
208
|
+
* Компонент инпута
|
|
209
|
+
*/
|
|
210
|
+
InputComponent?: React.ElementType<any> | undefined;
|
|
211
|
+
/**
|
|
212
|
+
* Запретить ввод с клавиатуры
|
|
213
|
+
*/
|
|
214
|
+
disableUserInput?: boolean | undefined;
|
|
215
|
+
} & React.RefAttributes<HTMLInputElement>>;
|
|
216
|
+
export { DateTimeInputProps, DateTimeInput };
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import React, { useRef, useState, useEffect } from 'react';
|
|
2
|
+
import mergeRefs from 'react-merge-refs';
|
|
3
|
+
import cn from 'classnames';
|
|
4
|
+
import { dateInLimits } from '@alfalab/core-components-calendar/moderncssm/shared';
|
|
5
|
+
import { IconButton } from '@alfalab/core-components-icon-button/moderncssm';
|
|
6
|
+
import { Popover } from '@alfalab/core-components-popover/moderncssm';
|
|
7
|
+
import { useDidUpdateEffect } from '@alfalab/hooks';
|
|
8
|
+
import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
|
|
9
|
+
import { getDateWithoutTime, DATE_WITH_TIME_LENGTH, format, getFullDateTime, isCompleteDateInput, isValid, addTimeToDate, parseTimestampToDate } from '../../utils/format.js';
|
|
10
|
+
import styles from './index.module.css';
|
|
11
|
+
|
|
12
|
+
/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
|
|
13
|
+
const DateTimeInput = React.forwardRef(({ 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) => {
|
|
14
|
+
const inputRef = useRef(null);
|
|
15
|
+
const calendarRef = useRef(null);
|
|
16
|
+
const [value, setValue] = useState(propValue || defaultValue);
|
|
17
|
+
const [open, setOpen] = useState(false);
|
|
18
|
+
const calendarValue = value ? getDateWithoutTime(value).getTime() : undefined;
|
|
19
|
+
const inputDisabled = disabled || readOnly;
|
|
20
|
+
const calendarResponsive = calendarProps?.responsive ?? true;
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
setOpen(defaultOpen);
|
|
23
|
+
}, [defaultOpen]);
|
|
24
|
+
useDidUpdateEffect(() => {
|
|
25
|
+
const newPropValue = propValue || '';
|
|
26
|
+
setValue((prevValue) => (prevValue === propValue ? prevValue : newPropValue));
|
|
27
|
+
}, [propValue]);
|
|
28
|
+
const checkInputValueIsValid = (newInputValue) => {
|
|
29
|
+
if (!newInputValue || error)
|
|
30
|
+
return false;
|
|
31
|
+
const dateValue = getDateWithoutTime(newInputValue).getTime();
|
|
32
|
+
return (dateValue &&
|
|
33
|
+
dateInLimits(dateValue, minDate, maxDate) &&
|
|
34
|
+
!offDays.includes(dateValue));
|
|
35
|
+
};
|
|
36
|
+
const setTimeToDate = () => {
|
|
37
|
+
setValue((prevValue) => {
|
|
38
|
+
const dateWithTime = addTimeToDate(prevValue);
|
|
39
|
+
if (dateWithTime !== prevValue && dateWithTime.length === DATE_WITH_TIME_LENGTH) {
|
|
40
|
+
onComplete?.(null, {
|
|
41
|
+
date: getFullDateTime(dateWithTime),
|
|
42
|
+
value: dateWithTime,
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
return dateWithTime;
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
const handleInputWrapperFocus = (event) => {
|
|
49
|
+
if (view === 'desktop') {
|
|
50
|
+
if (picker) {
|
|
51
|
+
setOpen(true);
|
|
52
|
+
}
|
|
53
|
+
if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
|
|
54
|
+
calendarRef.current.focus();
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
const handleBlur = (event) => {
|
|
59
|
+
if (view === 'desktop') {
|
|
60
|
+
const target = (event.relatedTarget || document.activeElement);
|
|
61
|
+
if (calendarRef.current && calendarRef.current.contains(target) === false) {
|
|
62
|
+
setOpen(false);
|
|
63
|
+
setTimeToDate();
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const handleChange = (event) => {
|
|
68
|
+
const { value: newValue } = event.target;
|
|
69
|
+
if (newValue.length > DATE_WITH_TIME_LENGTH)
|
|
70
|
+
return;
|
|
71
|
+
// Позволяем вводить только цифры, точки, запятую, двоеточие и пробел
|
|
72
|
+
if (/[^\d., :]/.test(newValue)) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
const dots = newValue.match(/\./g);
|
|
76
|
+
const colon = newValue.match(/:/g);
|
|
77
|
+
const comma = newValue.match(/,/g);
|
|
78
|
+
// Не даем вводить больше, чем 2 точки, 1 двоеточие и 1 запятую
|
|
79
|
+
if ((dots && dots.length > 2) ||
|
|
80
|
+
(colon && colon.length > 1) ||
|
|
81
|
+
(comma && comma.length > 1)) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
const formattedValue = format(newValue);
|
|
85
|
+
const date = getFullDateTime(formattedValue);
|
|
86
|
+
setValue(formattedValue);
|
|
87
|
+
if (onChange)
|
|
88
|
+
onChange(event, { date, value: formattedValue });
|
|
89
|
+
if (isCompleteDateInput(formattedValue)) {
|
|
90
|
+
const valid = isValid(formattedValue);
|
|
91
|
+
if (!valid)
|
|
92
|
+
return;
|
|
93
|
+
if (onComplete) {
|
|
94
|
+
onComplete(event, { date, value: formattedValue });
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
const handleMobileCalendarClose = () => {
|
|
99
|
+
setOpen(false);
|
|
100
|
+
setTimeToDate();
|
|
101
|
+
};
|
|
102
|
+
const handleClear = () => {
|
|
103
|
+
setValue('');
|
|
104
|
+
};
|
|
105
|
+
const handleCalendarChange = (date) => {
|
|
106
|
+
if (date) {
|
|
107
|
+
const newValue = parseTimestampToDate(date);
|
|
108
|
+
setValue(newValue);
|
|
109
|
+
onChange?.(null, { date: getFullDateTime(newValue), value: newValue });
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
const handleCalendarWrapperMouseDown = (event) => {
|
|
113
|
+
// Не дает инпуту терять фокус при выборе даты
|
|
114
|
+
event.preventDefault();
|
|
115
|
+
};
|
|
116
|
+
const handleIconButtonClick = () => {
|
|
117
|
+
if (!open)
|
|
118
|
+
setOpen(true);
|
|
119
|
+
if (view === 'desktop' && inputRef.current) {
|
|
120
|
+
inputRef.current.focus();
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
const renderCalendar = () => Calendar ? (
|
|
124
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
125
|
+
React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
|
|
126
|
+
React.createElement(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 }))) : null;
|
|
127
|
+
return (React.createElement("div", { className: cn(styles.component, className, {
|
|
128
|
+
[styles.block]: block,
|
|
129
|
+
}), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
|
|
130
|
+
InputComponent ? (React.createElement(InputComponent, { autoComplete: picker ? 'off' : undefined, ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, disableUserInput: disableUserInput, error: error, rightAddons: React.createElement(React.Fragment, null,
|
|
131
|
+
rightAddons,
|
|
132
|
+
picker && (React.createElement(IconButton, { className: styles.calendarIcon, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 's' }))) })) : null,
|
|
133
|
+
picker &&
|
|
134
|
+
(view === 'desktop' ? (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
|
|
135
|
+
[styles.calendarResponsive]: calendarResponsive,
|
|
136
|
+
}), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar())) : (renderCalendar()))));
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
export { DateTimeInput };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Component";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DateTimeInput } from './Component.js';
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/* */
|
|
2
|
+
:root {
|
|
3
|
+
--calendar-width: 344px;
|
|
4
|
+
|
|
5
|
+
/* Кнопки выбора месяцев и годов */
|
|
6
|
+
|
|
7
|
+
/* Шапка */
|
|
8
|
+
|
|
9
|
+
/* День */
|
|
10
|
+
|
|
11
|
+
/* today */
|
|
12
|
+
|
|
13
|
+
/* highlighted */
|
|
14
|
+
|
|
15
|
+
/* holidays */
|
|
16
|
+
|
|
17
|
+
/* range */
|
|
18
|
+
|
|
19
|
+
/* selected */
|
|
20
|
+
|
|
21
|
+
/* disabled */
|
|
22
|
+
|
|
23
|
+
/* marker */
|
|
24
|
+
}
|
|
25
|
+
:root {
|
|
26
|
+
--calendar-popover-border-radius: var(--border-radius-m);
|
|
27
|
+
}
|
|
28
|
+
.component {
|
|
29
|
+
display: inline-block;
|
|
30
|
+
outline: none;
|
|
31
|
+
position: relative;
|
|
32
|
+
}
|
|
33
|
+
.calendarContainer {
|
|
34
|
+
display: inline-block;
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
border-radius: var(--calendar-popover-border-radius);
|
|
37
|
+
border: 1px solid var(--color-light-neutral-300)
|
|
38
|
+
}
|
|
39
|
+
@media (max-width: 374px) {
|
|
40
|
+
.calendarContainer {
|
|
41
|
+
width: 100%;
|
|
42
|
+
min-width: 288px
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
.calendarResponsive {
|
|
46
|
+
width: var(--calendar-width);
|
|
47
|
+
}
|
|
48
|
+
.block {
|
|
49
|
+
width: 100%;
|
|
50
|
+
}
|
|
51
|
+
.calendarIcon {
|
|
52
|
+
margin-right: var(--gap-12-neg);
|
|
53
|
+
height: 100%;
|
|
54
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { DateTimeInputProps } from "../components/date-time-input/Component";
|
|
4
|
+
type DateTimeInputDesktopProps = Omit<DateTimeInputProps, 'view' | 'InputComponent'>;
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated
|
|
7
|
+
* use UniversalDateInput instead
|
|
8
|
+
*/
|
|
9
|
+
declare const DateTimeInputDesktop: React.ForwardRefExoticComponent<DateTimeInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
|
|
10
|
+
export { DateTimeInputDesktopProps, DateTimeInputDesktop };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { CalendarDesktop } from '@alfalab/core-components-calendar/moderncssm/desktop';
|
|
3
|
+
import { InputDesktop } from '@alfalab/core-components-input/moderncssm/desktop';
|
|
4
|
+
import { DateTimeInput } from '../components/date-time-input/Component.js';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @deprecated
|
|
8
|
+
* use UniversalDateInput instead
|
|
9
|
+
*/
|
|
10
|
+
const DateTimeInputDesktop = forwardRef((props, ref) => (React.createElement(DateTimeInput, { Calendar: CalendarDesktop, InputComponent: InputDesktop, ...props, ref: ref })));
|
|
11
|
+
|
|
12
|
+
export { DateTimeInputDesktop };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DateTimeInputDesktop } from './Component.desktop.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DateTimeInputResponsive as DateTimeInput } from './Component.responsive.js';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { DateTimeInputProps } from "../components/date-time-input/Component";
|
|
4
|
+
type DateTimeInputMobileProps = Omit<DateTimeInputProps, 'view' | 'InputComponent'>;
|
|
5
|
+
declare const DateTimeInputMobile: React.ForwardRefExoticComponent<DateTimeInputMobileProps & React.RefAttributes<HTMLInputElement>>;
|
|
6
|
+
export { DateTimeInputMobileProps, DateTimeInputMobile };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { forwardRef } from 'react';
|
|
2
|
+
import { CalendarMobile } from '@alfalab/core-components-calendar/moderncssm/mobile';
|
|
3
|
+
import { InputMobile } from '@alfalab/core-components-input/moderncssm/mobile';
|
|
4
|
+
import { DateTimeInput } from '../components/date-time-input/Component.js';
|
|
5
|
+
|
|
6
|
+
const DateTimeInputMobile = forwardRef((props, ref) => (React.createElement(DateTimeInput, { InputComponent: InputMobile, Calendar: CalendarMobile, view: 'mobile', ...props, ref: ref })));
|
|
7
|
+
|
|
8
|
+
export { DateTimeInputMobile };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DateTimeInputMobile } from './Component.mobile.js';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare const DATE_FORMAT = "dd.MM.yyyy";
|
|
2
|
+
declare const DATE_MASK: (string | RegExp)[];
|
|
3
|
+
declare const DATE_WITH_TIME_LENGTH: number;
|
|
4
|
+
declare const isCompleteDateInput: (input: string) => boolean;
|
|
5
|
+
declare const parseDateString: (value: string, dateFormat?: string) => Date;
|
|
6
|
+
declare const isValidTimeFormat: (value: string) => boolean;
|
|
7
|
+
declare const isValid: (inputValue: string) => boolean;
|
|
8
|
+
declare const format: (value: string) => string;
|
|
9
|
+
declare const parseTimestampToDate: (timestamp: number) => string;
|
|
10
|
+
declare const getDateWithoutTime: (value: string) => Date;
|
|
11
|
+
declare const getFullDateTime: (value: string) => Date;
|
|
12
|
+
declare const addTimeToDate: (value: string) => string;
|
|
13
|
+
export { DATE_FORMAT, DATE_MASK, DATE_WITH_TIME_LENGTH, isCompleteDateInput, parseDateString, isValidTimeFormat, isValid, format, parseTimestampToDate, getDateWithoutTime, getFullDateTime, addTimeToDate };
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import dateFnsIsValid from 'date-fns/isValid';
|
|
2
|
+
import parse from 'date-fns/parse';
|
|
3
|
+
|
|
4
|
+
/* eslint-disable no-useless-escape */
|
|
5
|
+
const DATE_FORMAT = 'dd.MM.yyyy';
|
|
6
|
+
const DATE_MASK = [
|
|
7
|
+
/\d/,
|
|
8
|
+
/\d/,
|
|
9
|
+
'.',
|
|
10
|
+
/\d/,
|
|
11
|
+
/\d/,
|
|
12
|
+
'.',
|
|
13
|
+
/\d/,
|
|
14
|
+
/\d/,
|
|
15
|
+
/\d/,
|
|
16
|
+
/\d/,
|
|
17
|
+
',',
|
|
18
|
+
' ',
|
|
19
|
+
/\d/,
|
|
20
|
+
/\d/,
|
|
21
|
+
':',
|
|
22
|
+
/\d/,
|
|
23
|
+
/\d/,
|
|
24
|
+
];
|
|
25
|
+
const DATE_WITH_TIME_LENGTH = DATE_MASK.length;
|
|
26
|
+
const isCompleteDateInput = (input) => input.length === DATE_WITH_TIME_LENGTH;
|
|
27
|
+
const parseDateString = (value, dateFormat = DATE_FORMAT) => parse(value, dateFormat, new Date());
|
|
28
|
+
const isValidTimeFormat = (value) => {
|
|
29
|
+
const timeArr = value.split(':');
|
|
30
|
+
const hours = timeArr[0];
|
|
31
|
+
const mins = timeArr[1];
|
|
32
|
+
if (hours.length !== 2 || Number(hours) > 23) {
|
|
33
|
+
return false;
|
|
34
|
+
}
|
|
35
|
+
if (mins.length !== 2 || Number(mins) > 59) {
|
|
36
|
+
return false;
|
|
37
|
+
}
|
|
38
|
+
return true;
|
|
39
|
+
};
|
|
40
|
+
const isValid = (inputValue) => {
|
|
41
|
+
const inputValueArr = inputValue.split(', ');
|
|
42
|
+
const date = inputValueArr[0];
|
|
43
|
+
const time = inputValueArr[1];
|
|
44
|
+
return (!inputValue ||
|
|
45
|
+
(isCompleteDateInput(inputValue) &&
|
|
46
|
+
dateFnsIsValid(parseDateString(date)) &&
|
|
47
|
+
isValidTimeFormat(time)));
|
|
48
|
+
};
|
|
49
|
+
const format = (value) => value
|
|
50
|
+
.replace(/^(\d\d)(\d)$/, '$1.$2') // 121 => 12.1
|
|
51
|
+
.replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3') // 12.122 => 12.12.2
|
|
52
|
+
.replace(/^(\d\d)\d\.(.*)/, '$1.$2') // 123.12.2005 => 12.12.2005
|
|
53
|
+
.replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2') // 12.123.2005 => 12.12.2005
|
|
54
|
+
.replace(/\.$/, '') // 12. => 12
|
|
55
|
+
.replace(/\ $/, '') // 1 2 => 12
|
|
56
|
+
.replace(/\:$/, '') // 1:2 => 12
|
|
57
|
+
.replace(/^(\d\d)(\d.*)/, '$1.$2') // 1212 => 12.12
|
|
58
|
+
.replace(/^(\d\d.\d\d)(\d.*)/, '$1.$2') // 12.122 => 12.12.2
|
|
59
|
+
.replace(/^(\d\d\.\d\d)(\d\d\d\d)/, '$1.$2') // 12.122005 => 12.12.2005
|
|
60
|
+
.replace(/^(\d\d)(\d\d\.\d\d\d\d)/, '$1.$2') // 1212.2005 => 12.12.2005
|
|
61
|
+
.replace(/^(\d\d.\d\d\.\d\d\d\d),/, '$1') // 12.12.2005 => 12.12.2005
|
|
62
|
+
.replace(/^(\d\d.\d\d\.\d\d\d\d)(\d)/, '$1, $2') // 12.12.20050 => 12.12.2005, 0
|
|
63
|
+
.replace(/^(\d\d.\d\d\.\d\d\d\d),(\d.*)/, '$1, $2') // 12.12.2005,00:00 => 12.12.2005, 00:00
|
|
64
|
+
.replace(/^(\d\d.\d\d\.\d\d\d\d) (\d.*)/, '$1, $2') // 12.12.2005 00:00 => 12.12.2005, 00:00
|
|
65
|
+
.replace(/^(\d\d.\d\d\.\d\d\d\d)(\d.*)/, '$1, $2') // 12.12.200500:00=> 12.12.2005, 00:00
|
|
66
|
+
.replace(/^(\d\d.\d\d\.\d\d\d\d), (\d\d):/, '$1, $2') // 12.12.2005, 00: => 12.12.2005, 00
|
|
67
|
+
.replace(/^(\d\d.\d\d\.\d\d\d\d), (\d\d)(\d)/, '$1, $2:$3') // 12.12.2005, 000 => 12.12.2005, 00:0
|
|
68
|
+
.replace(/^(\d\.\d\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.12.2005123123 => 1.12.2005
|
|
69
|
+
.replace(/^(\d\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 01.2.20055125125 => 01.2.2005
|
|
70
|
+
.replace(/^(\d)\.(\d\d)([0-9]*)\.(\d\d\d\d)/, '$1.$2.$4') // 1.123123.2005 => 1.12.2005
|
|
71
|
+
.replace(/^(\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.2.20055125125 => 1.2.2005
|
|
72
|
+
.replace(/^(\d\d)\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // 01..2005123123 => 01..2005
|
|
73
|
+
.replace(/^(\d)\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // 1..2005123123 => 1..2005
|
|
74
|
+
.replace(/^()\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // ..2005123123 => ..2005
|
|
75
|
+
.replace(/^()\.(\d)\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3'); // .2.2005123123 => .2.2005
|
|
76
|
+
const parseTimestampToDate = (timestamp) => {
|
|
77
|
+
const date = new Date(timestamp);
|
|
78
|
+
const year = date.getFullYear();
|
|
79
|
+
let month = date.getMonth() + 1;
|
|
80
|
+
let day = date.getDate();
|
|
81
|
+
if (month < 10) {
|
|
82
|
+
month = `0${month}`;
|
|
83
|
+
}
|
|
84
|
+
if (day < 10) {
|
|
85
|
+
day = `0${day}`;
|
|
86
|
+
}
|
|
87
|
+
return `${day}.${month}.${year}`;
|
|
88
|
+
};
|
|
89
|
+
const getDateWithoutTime = (value) => {
|
|
90
|
+
const valueArr = value.split(', ');
|
|
91
|
+
let day;
|
|
92
|
+
let month;
|
|
93
|
+
let year;
|
|
94
|
+
if (valueArr[0]) {
|
|
95
|
+
const date = valueArr[0].split('.');
|
|
96
|
+
[day, month, year] = date;
|
|
97
|
+
}
|
|
98
|
+
const date = new Date();
|
|
99
|
+
date.setFullYear(Number(year), Number(month) - 1, Number(day));
|
|
100
|
+
date.setHours(0, 0, 0, 0);
|
|
101
|
+
return date;
|
|
102
|
+
};
|
|
103
|
+
const getFullDateTime = (value) => {
|
|
104
|
+
const valueArr = value.split(', ');
|
|
105
|
+
let day;
|
|
106
|
+
let month;
|
|
107
|
+
let year;
|
|
108
|
+
let hours;
|
|
109
|
+
let mins;
|
|
110
|
+
if (valueArr[0]) {
|
|
111
|
+
const date = valueArr[0].split('.');
|
|
112
|
+
[day, month, year] = date;
|
|
113
|
+
}
|
|
114
|
+
if (valueArr[1]) {
|
|
115
|
+
const time = valueArr[1].split(':');
|
|
116
|
+
hours = Number(time[0]);
|
|
117
|
+
mins = Number(time[1]);
|
|
118
|
+
}
|
|
119
|
+
const fullDate = new Date();
|
|
120
|
+
fullDate.setFullYear(Number(year), Number(month) - 1, Number(day));
|
|
121
|
+
fullDate.setHours(Number(hours) || 0);
|
|
122
|
+
fullDate.setMinutes(Number(mins) || 0);
|
|
123
|
+
fullDate.setSeconds(0);
|
|
124
|
+
fullDate.setMilliseconds(0);
|
|
125
|
+
return fullDate;
|
|
126
|
+
};
|
|
127
|
+
const addTimeToDate = (value) => {
|
|
128
|
+
if (value.length === 10 && dateFnsIsValid(parseDateString(value))) {
|
|
129
|
+
return `${value}, 00:00`;
|
|
130
|
+
}
|
|
131
|
+
return value;
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
export { DATE_FORMAT, DATE_MASK, DATE_WITH_TIME_LENGTH, addTimeToDate, format, getDateWithoutTime, getFullDateTime, isCompleteDateInput, isValid, isValidTimeFormat, parseDateString, parseTimestampToDate };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./format";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DATE_FORMAT, DATE_MASK, DATE_WITH_TIME_LENGTH, addTimeToDate, format, getDateWithoutTime, getFullDateTime, isCompleteDateInput, isValid, isValidTimeFormat, parseDateString, parseTimestampToDate } from './format.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-date-time-input",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@alfalab/core-components-calendar": "^7.
|
|
19
|
-
"@alfalab/core-components-input": "^15.0
|
|
20
|
-
"@alfalab/core-components-icon-button": "^6.
|
|
21
|
-
"@alfalab/core-components-popover": "^6.
|
|
18
|
+
"@alfalab/core-components-calendar": "^7.11.0",
|
|
19
|
+
"@alfalab/core-components-input": "^15.1.0",
|
|
20
|
+
"@alfalab/core-components-icon-button": "^6.8.0",
|
|
21
|
+
"@alfalab/core-components-popover": "^6.3.0",
|
|
22
22
|
"@alfalab/hooks": "^1.13.0",
|
|
23
23
|
"@alfalab/icons-glyph": "^2.139.0",
|
|
24
24
|
"classnames": "^2.3.1",
|
|
@@ -26,6 +26,6 @@
|
|
|
26
26
|
"react-merge-refs": "^1.1.0",
|
|
27
27
|
"tslib": "^2.4.0"
|
|
28
28
|
},
|
|
29
|
-
"themesVersion": "13.0
|
|
30
|
-
"varsVersion": "9.
|
|
29
|
+
"themesVersion": "13.1.0",
|
|
30
|
+
"varsVersion": "9.12.0"
|
|
31
31
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import '@alfalab/core-components-
|
|
1
|
+
@import '@alfalab/core-components-vars/src/index.css';
|
|
2
2
|
@import '@alfalab/core-components-calendar/src/vars.css';
|
|
3
3
|
|
|
4
4
|
:root {
|
|
@@ -32,6 +32,6 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.calendarIcon {
|
|
35
|
-
margin-right: var(--gap-
|
|
35
|
+
margin-right: var(--gap-12-neg);
|
|
36
36
|
height: 100%;
|
|
37
37
|
}
|