@jenesei-software/jenesei-kit-react 1.3.28 → 1.3.30
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/build/area-preview.cjs.js +1 -1
- package/build/area-preview.es.js +1 -1
- package/build/area-skeleton.cjs.js +1 -1
- package/build/area-skeleton.es.js +1 -1
- package/build/build-info.txt +3 -3
- package/build/{component-Dwf2HFot.cjs → component-AtGU3rIh.cjs} +2 -2
- package/build/{component-Dwf2HFot.cjs.map → component-AtGU3rIh.cjs.map} +1 -1
- package/build/{component-BABozkX6.cjs → component-B0KY9CML.cjs} +2 -2
- package/build/{component-BABozkX6.cjs.map → component-B0KY9CML.cjs.map} +1 -1
- package/build/{component-DcAF7Isg.cjs → component-BHINcJGw.cjs} +2 -2
- package/build/{component-DcAF7Isg.cjs.map → component-BHINcJGw.cjs.map} +1 -1
- package/build/{component-DYX1oGKH.js → component-BI6fe9pl.js} +2 -2
- package/build/{component-DYX1oGKH.js.map → component-BI6fe9pl.js.map} +1 -1
- package/build/{component-BT3dejQO.js → component-BJxTgP87.js} +2 -2
- package/build/{component-BT3dejQO.js.map → component-BJxTgP87.js.map} +1 -1
- package/build/{component-OxaRuSX5.cjs → component-BkAJZ9bN.cjs} +2 -2
- package/build/{component-OxaRuSX5.cjs.map → component-BkAJZ9bN.cjs.map} +1 -1
- package/build/{component-BaGCJM5V.js → component-BnqGhIYn.js} +2 -2
- package/build/{component-BaGCJM5V.js.map → component-BnqGhIYn.js.map} +1 -1
- package/build/{component-DJcrW4KX.js → component-CJ_IYmXp.js} +2 -2
- package/build/{component-DJcrW4KX.js.map → component-CJ_IYmXp.js.map} +1 -1
- package/build/{component-TMPesaZf.cjs → component-COVO0g4K.cjs} +2 -2
- package/build/{component-TMPesaZf.cjs.map → component-COVO0g4K.cjs.map} +1 -1
- package/build/{component-DFMjWiWi.cjs → component-CQ4haQho.cjs} +2 -2
- package/build/{component-DFMjWiWi.cjs.map → component-CQ4haQho.cjs.map} +1 -1
- package/build/{component-CjiOOMn9.cjs → component-CQmuGUIt.cjs} +2 -2
- package/build/{component-CjiOOMn9.cjs.map → component-CQmuGUIt.cjs.map} +1 -1
- package/build/{component-BHfH9Gw4.js → component-CVODnsK7.js} +2 -2
- package/build/{component-BHfH9Gw4.js.map → component-CVODnsK7.js.map} +1 -1
- package/build/{component-D2Y1Ky9N.js → component-Ch9eF_4H.js} +4 -4
- package/build/{component-D2Y1Ky9N.js.map → component-Ch9eF_4H.js.map} +1 -1
- package/build/{component-Cp433cAv.js → component-Cy1LF62n.js} +3 -3
- package/build/{component-Cp433cAv.js.map → component-Cy1LF62n.js.map} +1 -1
- package/build/{component-B97JZKUB.cjs → component-D5Bg68Aq.cjs} +2 -2
- package/build/{component-B97JZKUB.cjs.map → component-D5Bg68Aq.cjs.map} +1 -1
- package/build/{component-CsIx8Dgr.cjs → component-DAtaP1gP.cjs} +2 -2
- package/build/{component-CsIx8Dgr.cjs.map → component-DAtaP1gP.cjs.map} +1 -1
- package/build/{component-BzFd5DyJ.js → component-DXZrlFCa.js} +3 -3
- package/build/{component-BzFd5DyJ.js.map → component-DXZrlFCa.js.map} +1 -1
- package/build/{component-BpwTWRxp.js → component-DjIZRLtN.js} +2 -2
- package/build/{component-BpwTWRxp.js.map → component-DjIZRLtN.js.map} +1 -1
- package/build/{component-ClQrDMsC.cjs → component-DxjC5ZDY.cjs} +2 -2
- package/build/{component-ClQrDMsC.cjs.map → component-DxjC5ZDY.cjs.map} +1 -1
- package/build/{component-Br2H7F-p.js → component-JqUoQ-8S.js} +2 -2
- package/build/{component-Br2H7F-p.js.map → component-JqUoQ-8S.js.map} +1 -1
- package/build/{component-yTziSQZ7.js → component-Ud_GRMAS.js} +3 -3
- package/build/{component-yTziSQZ7.js.map → component-Ud_GRMAS.js.map} +1 -1
- package/build/component-accordion.cjs.js +1 -1
- package/build/component-accordion.es.js +2 -2
- package/build/component-button-group.cjs.js +1 -1
- package/build/component-button-group.es.js +2 -2
- package/build/component-button.cjs.js +1 -1
- package/build/component-button.es.js +1 -1
- package/build/component-checkbox-group.cjs.js +1 -1
- package/build/component-checkbox-group.es.js +2 -2
- package/build/component-checkbox.cjs.js +1 -1
- package/build/component-checkbox.es.js +2 -2
- package/build/component-date-picker.cjs.js +1 -1
- package/build/component-date-picker.d.ts +8 -0
- package/build/component-date-picker.es.js +4 -2
- package/build/component-icon.cjs.js +1 -1
- package/build/component-icon.es.js +6 -6
- package/build/component-image-button.cjs.js +1 -1
- package/build/component-image-button.es.js +1 -1
- package/build/component-image-select.cjs.js +1 -1
- package/build/component-image-select.es.js +8 -8
- package/build/component-image-slider.cjs.js +1 -1
- package/build/component-image-slider.es.js +4 -4
- package/build/component-image.cjs.js +1 -1
- package/build/component-image.es.js +3 -3
- package/build/component-input-otp.cjs.js +1 -1
- package/build/component-input-otp.es.js +5 -5
- package/build/component-input.cjs.js +1 -1
- package/build/component-input.es.js +15 -15
- package/build/component-map.cjs.js +1 -1
- package/build/component-map.es.js +8 -8
- package/build/component-pagination.cjs.js +1 -1
- package/build/component-pagination.es.js +1 -1
- package/build/{component-BgFRZSbi.cjs → component-qRPasLxk.cjs} +2 -2
- package/build/{component-BgFRZSbi.cjs.map → component-qRPasLxk.cjs.map} +1 -1
- package/build/component-range.cjs.js +1 -1
- package/build/component-range.es.js +5 -5
- package/build/component-select.cjs.js +1 -1
- package/build/component-select.es.js +18 -18
- package/build/component-textarea.cjs.js +1 -1
- package/build/component-textarea.es.js +5 -5
- package/build/component-toggle.cjs.js +1 -1
- package/build/component-toggle.es.js +4 -4
- package/build/component-tooltip.cjs.js +1 -1
- package/build/component-tooltip.es.js +9 -9
- package/build/component-typography.cjs.js +1 -1
- package/build/component-typography.es.js +6 -6
- package/build/{component.components-CsWG1Rwi.cjs → component.components-0OAiJjsR.cjs} +2 -2
- package/build/{component.components-CsWG1Rwi.cjs.map → component.components-0OAiJjsR.cjs.map} +1 -1
- package/build/{component.components-KcVM2DN2.js → component.components-BJ1nh728.js} +2 -2
- package/build/{component.components-KcVM2DN2.js.map → component.components-BJ1nh728.js.map} +1 -1
- package/build/{component.constants-BkbucsSA.js → component.constants-4Zuzymaj.js} +3 -3
- package/build/{component.constants-BkbucsSA.js.map → component.constants-4Zuzymaj.js.map} +1 -1
- package/build/{component.constants-BmRV80H6.js → component.constants-ASMqRXmH.js} +2 -2
- package/build/{component.constants-BmRV80H6.js.map → component.constants-ASMqRXmH.js.map} +1 -1
- package/build/{component.constants-ECVKYlcl.cjs → component.constants-B1XT0pqP.cjs} +2 -2
- package/build/{component.constants-ECVKYlcl.cjs.map → component.constants-B1XT0pqP.cjs.map} +1 -1
- package/build/{component.constants-B-csc6ih.cjs → component.constants-DLrolRBs.cjs} +2 -2
- package/build/{component.constants-B-csc6ih.cjs.map → component.constants-DLrolRBs.cjs.map} +1 -1
- package/build/{component.types-SveBau90.js → component.types-BXYLxQWv.js} +212 -150
- package/build/component.types-BXYLxQWv.js.map +1 -0
- package/build/component.types-haccSZSq.cjs +2 -0
- package/build/component.types-haccSZSq.cjs.map +1 -0
- package/build/consts.cjs.js +1 -1
- package/build/consts.es.js +1 -1
- package/build/context-app.cjs.js +1 -1
- package/build/context-app.es.js +17 -17
- package/build/context-sonner.cjs.js +1 -1
- package/build/context-sonner.es.js +18 -18
- package/build/{context.constants-ByIVCRij.js → context.constants-Dop398a2.js} +136 -124
- package/build/{context.constants-ByIVCRij.js.map → context.constants-Dop398a2.js.map} +1 -1
- package/build/{context.constants-CHzb-q9a.cjs → context.constants-p2bRkgM3.cjs} +124 -116
- package/build/{context.constants-CHzb-q9a.cjs.map → context.constants-p2bRkgM3.cjs.map} +1 -1
- package/build/{context.hooks-BHOQU6q9.cjs → context.hooks-BFjFm8iR.cjs} +2 -2
- package/build/{context.hooks-BHOQU6q9.cjs.map → context.hooks-BFjFm8iR.cjs.map} +1 -1
- package/build/{context.hooks-BGRydtLx.js → context.hooks-CUlqrzfP.js} +2 -2
- package/build/{context.hooks-BGRydtLx.js.map → context.hooks-CUlqrzfP.js.map} +1 -1
- package/build/{context.hooks-Bjivw-Im.cjs → context.hooks-Spdhsa4j.cjs} +2 -2
- package/build/{context.hooks-Bjivw-Im.cjs.map → context.hooks-Spdhsa4j.cjs.map} +1 -1
- package/build/{context.hooks-BDsIAUYd.js → context.hooks-b1w6_aK9.js} +2 -2
- package/build/{context.hooks-BDsIAUYd.js.map → context.hooks-b1w6_aK9.js.map} +1 -1
- package/build/index.cjs.js +1 -1
- package/build/index.d.ts +8 -0
- package/build/index.es.js +141 -139
- package/build/style-error.cjs.js +1 -1
- package/build/style-error.es.js +4 -4
- package/build/style-theme.cjs.js +1 -1
- package/build/style-theme.es.js +13 -13
- package/build/{use-2JigT9W0.cjs → use-CHyIgo-M.cjs} +2 -2
- package/build/{use-2JigT9W0.cjs.map → use-CHyIgo-M.cjs.map} +1 -1
- package/build/{use-DQXYSmcn.js → use-DLn-Y7_0.js} +3 -3
- package/build/{use-DQXYSmcn.js.map → use-DLn-Y7_0.js.map} +1 -1
- package/package.json +1 -1
- package/build/component.types-DRNn3P5n.cjs +0 -2
- package/build/component.types-DRNn3P5n.cjs.map +0 -1
- package/build/component.types-SveBau90.js.map +0 -1
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
|
|
2
|
-
import {
|
|
2
|
+
import { bv as KEY_SIZE_DATA, bE as usePopover, D as DateWrapper, z as DateInputWrapper, aT as Typography, x as DateInput, F as DateInputButton, H as DateInputButtonClear, bF as Popover, s as DateDropdownList, B as Button, aq as SelectMonth, as as SelectYear, t as DateDropdownDays, w as DateDropdownDayOfWeek, v as DateDropdownDay, br as ErrorMessage } from "./context.constants-Dop398a2.js";
|
|
3
3
|
import "./component.styles-B0L4jbOO.js";
|
|
4
4
|
import { R as Ripple } from "./component-DHM9pbab.js";
|
|
5
5
|
import { b as Stack } from "./component-DEZX8aBs.js";
|
|
6
6
|
import moment from "moment";
|
|
7
|
-
import { useState,
|
|
7
|
+
import { useState, useEffect, useRef, useMemo, useCallback, Fragment } from "react";
|
|
8
8
|
import { useTheme } from "styled-components";
|
|
9
|
-
|
|
10
|
-
const divisor = 7;
|
|
11
|
-
const count = Math.floor(number / divisor);
|
|
12
|
-
const remainder = number % divisor;
|
|
13
|
-
return remainder > 0 ? count + 1 : count;
|
|
14
|
-
}
|
|
9
|
+
const weekOrder = ["mo", "tu", "we", "th", "fr", "sa", "su"];
|
|
15
10
|
const DatePicker = (props) => {
|
|
16
11
|
var _a, _b, _c, _d;
|
|
17
12
|
const { onChange } = props;
|
|
@@ -23,13 +18,13 @@ const DatePicker = (props) => {
|
|
|
23
18
|
[DatePickerVariant.MM]: "",
|
|
24
19
|
[DatePickerVariant.YYYY]: ""
|
|
25
20
|
});
|
|
26
|
-
const refInputValue = useRef(input);
|
|
27
21
|
useEffect(() => {
|
|
28
22
|
refInputValue.current = input;
|
|
29
23
|
}, [input]);
|
|
30
|
-
const isHasInput = useMemo(
|
|
31
|
-
|
|
32
|
-
|
|
24
|
+
const isHasInput = useMemo(
|
|
25
|
+
() => input[DatePickerVariant.DD] !== "" || input[DatePickerVariant.MM] !== "" || input[DatePickerVariant.YYYY] !== "",
|
|
26
|
+
[input]
|
|
27
|
+
);
|
|
33
28
|
const onClearInput = useCallback(() => {
|
|
34
29
|
setInput({
|
|
35
30
|
[DatePickerVariant.DD]: "",
|
|
@@ -49,42 +44,12 @@ const DatePicker = (props) => {
|
|
|
49
44
|
}
|
|
50
45
|
return props.mode;
|
|
51
46
|
}, [props.mode]);
|
|
52
|
-
const
|
|
53
|
-
(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
);
|
|
59
|
-
const getPrevSegment = useCallback(
|
|
60
|
-
(currentSegment) => {
|
|
61
|
-
const currentIndex = mode.indexOf(currentSegment);
|
|
62
|
-
return currentIndex > 0 ? mode[currentIndex - 1] : mode[mode.length - 1];
|
|
63
|
-
},
|
|
64
|
-
[mode]
|
|
65
|
-
);
|
|
66
|
-
const getValidateInput = useCallback(
|
|
67
|
-
(input2, onSuccess, onFailure, onNan) => {
|
|
68
|
-
const dayStr = input2.DD;
|
|
69
|
-
const monthStr = input2.MM;
|
|
70
|
-
const yearStr = input2.YYYY;
|
|
71
|
-
const day = dayStr === "" ? NaN : Number(dayStr);
|
|
72
|
-
const month = monthStr === "" ? NaN : Number(monthStr);
|
|
73
|
-
const year = yearStr === "" ? NaN : Number(yearStr);
|
|
74
|
-
const isHasInput2 = dayStr !== "" || monthStr !== "" || yearStr !== "";
|
|
75
|
-
if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
|
|
76
|
-
const m = moment.utc(`${day}.${month}.${year}`, "D.M.YYYY", true).startOf("day");
|
|
77
|
-
if (m.isValid()) {
|
|
78
|
-
onSuccess == null ? void 0 : onSuccess(m.valueOf());
|
|
79
|
-
} else {
|
|
80
|
-
onFailure == null ? void 0 : onFailure();
|
|
81
|
-
}
|
|
82
|
-
} else {
|
|
83
|
-
onNan == null ? void 0 : onNan(isHasInput2);
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
[]
|
|
87
|
-
);
|
|
47
|
+
const type = useMemo(() => {
|
|
48
|
+
if (!props.type) {
|
|
49
|
+
return "manualAndSelect";
|
|
50
|
+
}
|
|
51
|
+
return props.type;
|
|
52
|
+
}, [props.type]);
|
|
88
53
|
const dataDate = useMemo(() => {
|
|
89
54
|
const segments = [DatePickerVariant.DD, DatePickerVariant.MM, DatePickerVariant.YYYY];
|
|
90
55
|
const result = Object.fromEntries(
|
|
@@ -96,10 +61,10 @@ const DatePicker = (props) => {
|
|
|
96
61
|
placeholder: props.locale.inputs[segment === DatePickerVariant.DD ? "day" : segment === DatePickerVariant.MM ? "month" : "year"],
|
|
97
62
|
isFirst: mode[0] === segment,
|
|
98
63
|
isLast: mode[mode.length - 1] === segment,
|
|
99
|
-
segmentNext: getNextSegment(segment),
|
|
100
|
-
segmentPrev: getPrevSegment(segment),
|
|
101
|
-
onNextSegment: () => setActiveSegment(getNextSegment(segment)),
|
|
102
|
-
onPrevSegment: () => setActiveSegment(getPrevSegment(segment)),
|
|
64
|
+
segmentNext: getNextSegment(segment, mode),
|
|
65
|
+
segmentPrev: getPrevSegment(segment, mode),
|
|
66
|
+
onNextSegment: () => setActiveSegment(getNextSegment(segment, mode)),
|
|
67
|
+
onPrevSegment: () => setActiveSegment(getPrevSegment(segment, mode)),
|
|
103
68
|
setValue: (value) => setInput((prev) => ({ ...prev, [segment]: value })),
|
|
104
69
|
setActive: () => setActiveSegment(segment)
|
|
105
70
|
}
|
|
@@ -107,9 +72,8 @@ const DatePicker = (props) => {
|
|
|
107
72
|
);
|
|
108
73
|
const resultSort = mode.map((segment) => result[segment]).filter(Boolean);
|
|
109
74
|
return { sort: resultSort, default: result };
|
|
110
|
-
}, [props,
|
|
75
|
+
}, [props, mode, input]);
|
|
111
76
|
const daysInWeek = useMemo(() => {
|
|
112
|
-
const weekOrder = ["mo", "tu", "we", "th", "fr", "sa", "su"];
|
|
113
77
|
return weekOrder.map((key, index) => {
|
|
114
78
|
const found = props.locale.weeks.find((w) => w.value === key);
|
|
115
79
|
return {
|
|
@@ -119,47 +83,38 @@ const DatePicker = (props) => {
|
|
|
119
83
|
});
|
|
120
84
|
}, [props.locale.weeks]);
|
|
121
85
|
const daysInMonth = useMemo(() => {
|
|
122
|
-
const
|
|
123
|
-
const
|
|
124
|
-
const
|
|
125
|
-
const
|
|
86
|
+
const dateToday = moment.utc();
|
|
87
|
+
const dateValue = valueMoment ?? dateDefaultMoment;
|
|
88
|
+
const dateStartOfMonth = dateValue.clone().startOf("month");
|
|
89
|
+
const dateEndOfMonth = dateValue.clone().endOf("month");
|
|
126
90
|
const dateMin = props.dateMin ? moment.utc(props.dateMin) : null;
|
|
127
91
|
const dateMax = props.dateMax ? moment.utc(props.dateMax) : null;
|
|
128
|
-
const
|
|
129
|
-
const
|
|
130
|
-
const
|
|
131
|
-
const
|
|
132
|
-
while (
|
|
133
|
-
const isCurrentMonth =
|
|
134
|
-
|
|
135
|
-
value:
|
|
136
|
-
labelString:
|
|
137
|
-
labelNumber:
|
|
138
|
-
dayOfWeek:
|
|
139
|
-
isWeekend: [6, 7].includes(
|
|
140
|
-
weekOfMonth: Math.ceil((
|
|
141
|
-
isToday:
|
|
92
|
+
const dateVisibleDayFirst = dateStartOfMonth.clone().subtract(dateStartOfMonth.isoWeekday() - 1, "days");
|
|
93
|
+
const dateVisibleDayLast = dateEndOfMonth.clone().add(7 - dateEndOfMonth.isoWeekday(), "days");
|
|
94
|
+
const result = [];
|
|
95
|
+
const dateCurrent = dateVisibleDayFirst.clone();
|
|
96
|
+
while (dateCurrent <= dateVisibleDayLast) {
|
|
97
|
+
const isCurrentMonth = dateCurrent.isBetween(dateStartOfMonth, dateEndOfMonth, "day", "[]");
|
|
98
|
+
result.push({
|
|
99
|
+
value: dateCurrent.valueOf(),
|
|
100
|
+
labelString: dateCurrent.format("dd"),
|
|
101
|
+
labelNumber: dateCurrent.date(),
|
|
102
|
+
dayOfWeek: dateCurrent.isoWeekday(),
|
|
103
|
+
isWeekend: [6, 7].includes(dateCurrent.isoWeekday()),
|
|
104
|
+
weekOfMonth: Math.ceil((result.length + 1) / 7),
|
|
105
|
+
isToday: dateCurrent.isSame(dateToday, "day"),
|
|
142
106
|
isCurrentMonth,
|
|
143
|
-
isDisabled: !!(dateMin &&
|
|
107
|
+
isDisabled: !!(dateMin && dateCurrent.isBefore(dateMin, "day") || dateMax && dateCurrent.isAfter(dateMax, "day"))
|
|
144
108
|
});
|
|
145
|
-
|
|
109
|
+
dateCurrent.add(1, "day");
|
|
146
110
|
}
|
|
147
|
-
return
|
|
111
|
+
return result;
|
|
148
112
|
}, [valueMoment, dateDefaultMoment, props.dateMax, props.dateMin]);
|
|
149
|
-
const rows = useMemo(() =>
|
|
150
|
-
const height = useMemo(
|
|
151
|
-
() => 40 + rows * 28 + (rows - 1) * 6 + KEY_SIZE_DATA[props.size].padding * 2,
|
|
152
|
-
[props.size, rows]
|
|
153
|
-
);
|
|
113
|
+
const rows = useMemo(() => getCountSevens(daysInMonth.length) + 1, [daysInMonth]);
|
|
154
114
|
const sizeRadius = useMemo(() => KEY_SIZE_DATA[props.size].radius, [props.size]);
|
|
155
115
|
const sizePadding = useMemo(() => KEY_SIZE_DATA[props.size].padding, [props.size]);
|
|
156
|
-
const
|
|
157
|
-
|
|
158
|
-
}, [valueMoment]);
|
|
159
|
-
const refIsHasValueOnce = useRef(false);
|
|
160
|
-
useEffect(() => {
|
|
161
|
-
if (isHasValue && !refIsHasValueOnce.current) refIsHasValueOnce.current = true;
|
|
162
|
-
}, [isHasValue]);
|
|
116
|
+
const height = useMemo(() => 40 + rows * 28 + (rows - 1) * 6 + sizePadding * 2, [sizePadding, rows]);
|
|
117
|
+
const isHasValue = useMemo(() => valueMoment !== null, [valueMoment]);
|
|
163
118
|
const isBlockNextMonth = useMemo(() => {
|
|
164
119
|
const nextMonth = (valueMoment ?? dateDefaultMoment).clone().add(1, "month").startOf("month");
|
|
165
120
|
const isBeforeEndDate = props.dateMax ? nextMonth.isAfter(moment.utc(props.dateMax), "month") : false;
|
|
@@ -171,6 +126,8 @@ const DatePicker = (props) => {
|
|
|
171
126
|
return isAfterStartDate;
|
|
172
127
|
}, [valueMoment, props.dateMin, dateDefaultMoment]);
|
|
173
128
|
const [isInputFocused, setIsInputFocused] = useState(false);
|
|
129
|
+
const refInputValue = useRef(input);
|
|
130
|
+
const refIsHasValueOnce = useRef(false);
|
|
174
131
|
const refPrevValue = useRef("");
|
|
175
132
|
const refSelectMonth = useRef(null);
|
|
176
133
|
const refSelectYear = useRef(null);
|
|
@@ -198,8 +155,8 @@ const DatePicker = (props) => {
|
|
|
198
155
|
onBlurReference
|
|
199
156
|
});
|
|
200
157
|
const isShowPlaceholder = useMemo(() => {
|
|
201
|
-
return !!(!isInputFocused && !isHasValue && props.labelPlaceholder && !isOpen && !isHasInput && !activeSegment);
|
|
202
|
-
}, [isInputFocused, isHasValue, isOpen, props.labelPlaceholder, isHasInput, activeSegment]);
|
|
158
|
+
return !!(!isInputFocused && !isHasValue && props.labelPlaceholder && (type !== "select" ? !isOpen : true) && !isHasInput && !activeSegment);
|
|
159
|
+
}, [isInputFocused, isHasValue, isOpen, props.labelPlaceholder, isHasInput, activeSegment, type]);
|
|
203
160
|
const onChangeDate = useCallback(
|
|
204
161
|
(timestamp, isAddLeadingZeros, input2) => {
|
|
205
162
|
const momentNewDate = moment(timestamp).utc();
|
|
@@ -241,7 +198,7 @@ const DatePicker = (props) => {
|
|
|
241
198
|
if (activeSegment && dataDate.default[activeSegment]) {
|
|
242
199
|
if (isDigit) {
|
|
243
200
|
const digit = key;
|
|
244
|
-
|
|
201
|
+
getDigitKey(digit, activeSegment, input, dataDate);
|
|
245
202
|
e.preventDefault();
|
|
246
203
|
e.stopPropagation();
|
|
247
204
|
}
|
|
@@ -318,6 +275,59 @@ const DatePicker = (props) => {
|
|
|
318
275
|
const newDate = (valueMoment ?? dateDefaultMoment).clone().subtract(1, "month");
|
|
319
276
|
onChangeDate(newDate.valueOf(), true);
|
|
320
277
|
}, [valueMoment, onChangeDate, dateDefaultMoment]);
|
|
278
|
+
const onFocusInput = useCallback(() => {
|
|
279
|
+
if (type === "select") return;
|
|
280
|
+
setIsInputFocused(true);
|
|
281
|
+
if (!activeSegment) setActiveSegment(DatePickerVariant.DD);
|
|
282
|
+
}, [activeSegment, type]);
|
|
283
|
+
const onBlurInput = useCallback(() => {
|
|
284
|
+
var _a2;
|
|
285
|
+
setIsInputFocused(false);
|
|
286
|
+
if (!isOpen) {
|
|
287
|
+
(_a2 = props.onBlur) == null ? void 0 : _a2.call(props);
|
|
288
|
+
}
|
|
289
|
+
}, [isOpen, props.onBlur]);
|
|
290
|
+
const onChangeInput = useCallback(
|
|
291
|
+
(e) => {
|
|
292
|
+
const value = e.target.value;
|
|
293
|
+
const result = getParseDateString(value);
|
|
294
|
+
if (result) {
|
|
295
|
+
setInput({
|
|
296
|
+
DD: String(result.day).padStart(2, "0"),
|
|
297
|
+
MM: String(result.month).padStart(2, "0"),
|
|
298
|
+
YYYY: String(result.year)
|
|
299
|
+
});
|
|
300
|
+
if (refHiddenInput.current) refHiddenInput.current.value = "";
|
|
301
|
+
return;
|
|
302
|
+
}
|
|
303
|
+
const prevValue = refPrevValue.current;
|
|
304
|
+
const newChar = value.length > prevValue.length ? value.slice(-1) : null;
|
|
305
|
+
refPrevValue.current = value;
|
|
306
|
+
if (newChar && /^\d$/.test(newChar)) {
|
|
307
|
+
onKeyDown({
|
|
308
|
+
key: newChar,
|
|
309
|
+
preventDefault: () => {
|
|
310
|
+
},
|
|
311
|
+
stopPropagation: () => {
|
|
312
|
+
}
|
|
313
|
+
});
|
|
314
|
+
}
|
|
315
|
+
if (value.length < prevValue.length) {
|
|
316
|
+
onKeyDown({
|
|
317
|
+
key: "Backspace",
|
|
318
|
+
preventDefault: () => {
|
|
319
|
+
},
|
|
320
|
+
stopPropagation: () => {
|
|
321
|
+
}
|
|
322
|
+
});
|
|
323
|
+
}
|
|
324
|
+
if (refHiddenInput.current) refHiddenInput.current.value = "";
|
|
325
|
+
},
|
|
326
|
+
[onKeyDown]
|
|
327
|
+
);
|
|
328
|
+
useEffect(() => {
|
|
329
|
+
if (isHasValue && !refIsHasValueOnce.current) refIsHasValueOnce.current = true;
|
|
330
|
+
}, [isHasValue]);
|
|
321
331
|
useEffect(() => {
|
|
322
332
|
setDateDefaultMoment(moment(props.dateDefault).utc());
|
|
323
333
|
}, [props.dateDefault]);
|
|
@@ -354,7 +364,7 @@ const DatePicker = (props) => {
|
|
|
354
364
|
}
|
|
355
365
|
}
|
|
356
366
|
);
|
|
357
|
-
}, [
|
|
367
|
+
}, [onChangeDate, onChange, input, activeSegment]);
|
|
358
368
|
useEffect(() => {
|
|
359
369
|
if (!isOpen && !isInputFocused && isHasInput && !activeSegment)
|
|
360
370
|
getValidateInput(
|
|
@@ -372,7 +382,7 @@ const DatePicker = (props) => {
|
|
|
372
382
|
setIsError(false);
|
|
373
383
|
}
|
|
374
384
|
);
|
|
375
|
-
}, [
|
|
385
|
+
}, [onClearInput, input, isOpen, isInputFocused, onChange, isHasInput, activeSegment]);
|
|
376
386
|
useEffect(() => {
|
|
377
387
|
if (!activeSegment) return;
|
|
378
388
|
getValidateInput(
|
|
@@ -390,7 +400,7 @@ const DatePicker = (props) => {
|
|
|
390
400
|
}
|
|
391
401
|
}
|
|
392
402
|
);
|
|
393
|
-
}, [onChangeDate,
|
|
403
|
+
}, [onChangeDate, activeSegment]);
|
|
394
404
|
useEffect(() => {
|
|
395
405
|
var _a2;
|
|
396
406
|
if (activeSegment) {
|
|
@@ -429,10 +439,14 @@ const DatePicker = (props) => {
|
|
|
429
439
|
} : props.error,
|
|
430
440
|
$isOpen: isOpen || !!activeSegment,
|
|
431
441
|
onClick: () => {
|
|
442
|
+
if (type === "select") {
|
|
443
|
+
toggle();
|
|
444
|
+
return;
|
|
445
|
+
}
|
|
432
446
|
if (!activeSegment && !(props == null ? void 0 : props.isReadOnly)) setActiveSegment(DatePickerVariant.DD);
|
|
433
447
|
},
|
|
434
448
|
children: [
|
|
435
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
449
|
+
type !== "select" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
436
450
|
"input",
|
|
437
451
|
{
|
|
438
452
|
name: props.name,
|
|
@@ -455,52 +469,11 @@ const DatePicker = (props) => {
|
|
|
455
469
|
background: "transparent"
|
|
456
470
|
},
|
|
457
471
|
onKeyDown,
|
|
458
|
-
onChange:
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
const [year, month, day] = value.split("-");
|
|
462
|
-
setInput({
|
|
463
|
-
DD: day,
|
|
464
|
-
MM: month,
|
|
465
|
-
YYYY: year
|
|
466
|
-
});
|
|
467
|
-
return;
|
|
468
|
-
}
|
|
469
|
-
const prevValue = refPrevValue.current;
|
|
470
|
-
const newChar = value.length > prevValue.length ? value.slice(-1) : null;
|
|
471
|
-
refPrevValue.current = value;
|
|
472
|
-
if (newChar && /^\d$/.test(newChar)) {
|
|
473
|
-
onKeyDown({
|
|
474
|
-
key: newChar,
|
|
475
|
-
preventDefault: () => {
|
|
476
|
-
},
|
|
477
|
-
stopPropagation: () => {
|
|
478
|
-
}
|
|
479
|
-
});
|
|
480
|
-
}
|
|
481
|
-
if (value.length < prevValue.length) {
|
|
482
|
-
onKeyDown({
|
|
483
|
-
key: "Backspace",
|
|
484
|
-
preventDefault: () => {
|
|
485
|
-
},
|
|
486
|
-
stopPropagation: () => {
|
|
487
|
-
}
|
|
488
|
-
});
|
|
489
|
-
}
|
|
490
|
-
},
|
|
491
|
-
onFocus: () => {
|
|
492
|
-
setIsInputFocused(true);
|
|
493
|
-
if (!activeSegment) setActiveSegment(DatePickerVariant.DD);
|
|
494
|
-
},
|
|
495
|
-
onBlur: () => {
|
|
496
|
-
var _a2;
|
|
497
|
-
setIsInputFocused(false);
|
|
498
|
-
if (!isOpen) {
|
|
499
|
-
(_a2 = props.onBlur) == null ? void 0 : _a2.call(props);
|
|
500
|
-
}
|
|
501
|
-
}
|
|
472
|
+
onChange: onChangeInput,
|
|
473
|
+
onFocus: onFocusInput,
|
|
474
|
+
onBlur: onBlurInput
|
|
502
475
|
}
|
|
503
|
-
),
|
|
476
|
+
) : null,
|
|
504
477
|
isShowPlaceholder ? /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
505
478
|
Typography,
|
|
506
479
|
{
|
|
@@ -528,6 +501,7 @@ const DatePicker = (props) => {
|
|
|
528
501
|
weight: ((_b2 = props.font) == null ? void 0 : _b2.weight) ?? (props.isBold ? 500 : 400)
|
|
529
502
|
},
|
|
530
503
|
onClick: (e) => {
|
|
504
|
+
if (type === "select") return;
|
|
531
505
|
e.preventDefault();
|
|
532
506
|
e.stopPropagation();
|
|
533
507
|
if ((props == null ? void 0 : props.isDisabled) || (props == null ? void 0 : props.isReadOnly)) return;
|
|
@@ -539,7 +513,7 @@ const DatePicker = (props) => {
|
|
|
539
513
|
index !== dataDate.sort.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { width: "4px", pointerEvents: "none", textAlign: "center" }, children: "." })
|
|
540
514
|
] }, date.type);
|
|
541
515
|
}),
|
|
542
|
-
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
516
|
+
type !== "manual" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
543
517
|
DateInputButton,
|
|
544
518
|
{
|
|
545
519
|
genre: props.genre,
|
|
@@ -552,6 +526,7 @@ const DatePicker = (props) => {
|
|
|
552
526
|
isDisabledRipple: true,
|
|
553
527
|
icons: [{ name: "Calendar", type: "id" }],
|
|
554
528
|
isDisabled: (props == null ? void 0 : props.isDisabled) || (props == null ? void 0 : props.isReadOnly),
|
|
529
|
+
tabIndex: 0,
|
|
555
530
|
onFocus: (e) => {
|
|
556
531
|
e.preventDefault();
|
|
557
532
|
e.stopPropagation();
|
|
@@ -563,7 +538,35 @@ const DatePicker = (props) => {
|
|
|
563
538
|
toggle();
|
|
564
539
|
}
|
|
565
540
|
}
|
|
566
|
-
)
|
|
541
|
+
) : null,
|
|
542
|
+
props.isShowClearButton && (isHasValue || isHasInput) && !(props == null ? void 0 : props.isDisabled) && !(props == null ? void 0 : props.isReadOnly) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
543
|
+
DateInputButtonClear,
|
|
544
|
+
{
|
|
545
|
+
genre: props.genre,
|
|
546
|
+
size: "small",
|
|
547
|
+
isWidthAsHeight: true,
|
|
548
|
+
isFullSize: true,
|
|
549
|
+
isRadius: true,
|
|
550
|
+
isWhileTapEffect: true,
|
|
551
|
+
isOnlyIcon: true,
|
|
552
|
+
isDisabledRipple: true,
|
|
553
|
+
tabIndex: 0,
|
|
554
|
+
icons: [{ name: "Close", type: "id" }],
|
|
555
|
+
isDisabled: (props == null ? void 0 : props.isDisabled) || (props == null ? void 0 : props.isReadOnly),
|
|
556
|
+
onFocus: (e) => {
|
|
557
|
+
e.preventDefault();
|
|
558
|
+
e.stopPropagation();
|
|
559
|
+
setActiveSegment(null);
|
|
560
|
+
},
|
|
561
|
+
onClick: (e) => {
|
|
562
|
+
e.preventDefault();
|
|
563
|
+
e.stopPropagation();
|
|
564
|
+
onChange(null);
|
|
565
|
+
onClearInput();
|
|
566
|
+
setIsError(false);
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
) : null
|
|
567
570
|
]
|
|
568
571
|
}
|
|
569
572
|
)
|
|
@@ -611,7 +614,7 @@ const DatePicker = (props) => {
|
|
|
611
614
|
isWidthAsHeight: true,
|
|
612
615
|
genre: props.genre,
|
|
613
616
|
size: "small",
|
|
614
|
-
onClick: () =>
|
|
617
|
+
onClick: () => onPrevMonth(),
|
|
615
618
|
isDisabledRipple: true,
|
|
616
619
|
isHidden: isBlockPrevMonth,
|
|
617
620
|
isDisabled: isBlockPrevMonth
|
|
@@ -664,7 +667,7 @@ const DatePicker = (props) => {
|
|
|
664
667
|
{
|
|
665
668
|
type: "button",
|
|
666
669
|
isWhileTapEffect: true,
|
|
667
|
-
onClick: () =>
|
|
670
|
+
onClick: () => onNextMonth(),
|
|
668
671
|
isWidthAsHeight: true,
|
|
669
672
|
isRadius: true,
|
|
670
673
|
icons: [
|
|
@@ -767,7 +770,9 @@ const DatePicker = (props) => {
|
|
|
767
770
|
) : null
|
|
768
771
|
] });
|
|
769
772
|
};
|
|
770
|
-
|
|
773
|
+
const ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/;
|
|
774
|
+
const SLASH_DATE_REGEX = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
|
|
775
|
+
function getDigitKey(key, activeSegment, input, dataDate) {
|
|
771
776
|
const digit = key;
|
|
772
777
|
const seg = activeSegment;
|
|
773
778
|
const current = input[seg] ?? "";
|
|
@@ -824,12 +829,69 @@ function handleDigitKey(key, activeSegment, input, dataDate) {
|
|
|
824
829
|
dataDate.default[seg].setValue(nextValue);
|
|
825
830
|
}
|
|
826
831
|
}
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
832
|
+
function getParseDateString(value) {
|
|
833
|
+
if (ISO_DATE_REGEX.test(value)) {
|
|
834
|
+
const [year, month, day] = value.split("-").map(Number);
|
|
835
|
+
return getValidateDate(year, month, day);
|
|
836
|
+
}
|
|
837
|
+
const match = SLASH_DATE_REGEX.exec(value);
|
|
838
|
+
if (match) {
|
|
839
|
+
const [_, p1, p2, p3] = match;
|
|
840
|
+
const num1 = Number(p1);
|
|
841
|
+
const num2 = Number(p2);
|
|
842
|
+
const year = Number(p3);
|
|
843
|
+
let month;
|
|
844
|
+
let day;
|
|
845
|
+
if (num1 > 12) {
|
|
846
|
+
day = num1;
|
|
847
|
+
month = num2;
|
|
848
|
+
} else {
|
|
849
|
+
month = num1;
|
|
850
|
+
day = num2;
|
|
851
|
+
}
|
|
852
|
+
return getValidateDate(year, month, day);
|
|
853
|
+
}
|
|
854
|
+
return null;
|
|
855
|
+
}
|
|
856
|
+
function getValidateDate(year, month, day) {
|
|
831
857
|
const date = new Date(year, month - 1, day);
|
|
832
|
-
|
|
858
|
+
if (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day) {
|
|
859
|
+
return { year, month, day };
|
|
860
|
+
}
|
|
861
|
+
return null;
|
|
862
|
+
}
|
|
863
|
+
function getCountSevens(number) {
|
|
864
|
+
const divisor = 7;
|
|
865
|
+
const count = Math.floor(number / divisor);
|
|
866
|
+
const remainder = number % divisor;
|
|
867
|
+
return remainder > 0 ? count + 1 : count;
|
|
868
|
+
}
|
|
869
|
+
function getNextSegment(currentSegment, mode) {
|
|
870
|
+
const currentIndex = mode.indexOf(currentSegment);
|
|
871
|
+
return currentIndex < mode.length - 1 ? mode[currentIndex + 1] : mode[0];
|
|
872
|
+
}
|
|
873
|
+
function getPrevSegment(currentSegment, mode) {
|
|
874
|
+
const currentIndex = mode.indexOf(currentSegment);
|
|
875
|
+
return currentIndex > 0 ? mode[currentIndex - 1] : mode[mode.length - 1];
|
|
876
|
+
}
|
|
877
|
+
function getValidateInput(input, onSuccess, onFailure, onNan) {
|
|
878
|
+
const dayStr = input.DD;
|
|
879
|
+
const monthStr = input.MM;
|
|
880
|
+
const yearStr = input.YYYY;
|
|
881
|
+
const day = dayStr === "" ? NaN : Number(dayStr);
|
|
882
|
+
const month = monthStr === "" ? NaN : Number(monthStr);
|
|
883
|
+
const year = yearStr === "" ? NaN : Number(yearStr);
|
|
884
|
+
const isHasInput = dayStr !== "" || monthStr !== "" || yearStr !== "";
|
|
885
|
+
if (!Number.isNaN(day) && !Number.isNaN(month) && !Number.isNaN(year)) {
|
|
886
|
+
const m = moment.utc(`${day}.${month}.${year}`, "D.M.YYYY", true).startOf("day");
|
|
887
|
+
if (m.isValid()) {
|
|
888
|
+
onSuccess == null ? void 0 : onSuccess(m.valueOf());
|
|
889
|
+
} else {
|
|
890
|
+
onFailure == null ? void 0 : onFailure();
|
|
891
|
+
}
|
|
892
|
+
} else {
|
|
893
|
+
onNan == null ? void 0 : onNan(isHasInput);
|
|
894
|
+
}
|
|
833
895
|
}
|
|
834
896
|
var DatePickerVariant = /* @__PURE__ */ ((DatePickerVariant2) => {
|
|
835
897
|
DatePickerVariant2["DD"] = "DD";
|
|
@@ -841,4 +903,4 @@ export {
|
|
|
841
903
|
DatePicker as D,
|
|
842
904
|
DatePickerVariant as a
|
|
843
905
|
};
|
|
844
|
-
//# sourceMappingURL=component.types-
|
|
906
|
+
//# sourceMappingURL=component.types-BXYLxQWv.js.map
|