mimir-ui-kit 1.28.0 → 1.29.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/styles.css +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts +28 -0
- package/dist/components/DatePicker/DatePicker.js +37 -19
- package/dist/components/DatePicker/DatePickerModal.js +3 -2
- package/dist/components/DatePicker/MonthPickerModal.js +1 -1
- package/dist/components/DatePicker/YearPickerModal.js +1 -1
- package/dist/components/DatePicker/constants.d.ts +5 -0
- package/dist/components/DatePicker/constants.js +7 -0
- package/dist/styles.module-CLBRb2go.js +38 -0
- package/package.json +1 -1
- package/dist/styles.module-BZXDqssF.js +0 -36
package/dist/assets/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._input_1fczl_2{padding-right:var(--space-3xl)}._input-wrapper_1fczl_6{flex:1}._date-wrapper_1fczl_10{position:relative;width:100%}._date-wrapper_1fczl_10 ._inputBorderControl_1fczl_14{border:transparent}._date-wrapper_1fczl_10:hover ._input-wrapper_1fczl_6{background-color:var(--input-bg-color-hover)}._date-wrapper_1fczl_10:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}[data-disabled=true] ._date-wrapper_1fczl_10:before{cursor:auto}[data-disabled=true] ._date-wrapper_1fczl_10 ._input-wrapper_1fczl_6{background:var(--black-20)}[data-disabled=true] ._date-wrapper_1fczl_10 ._input-wrapper_1fczl_6 label,[data-disabled=true] ._date-wrapper_1fczl_10 ._input-wrapper_1fczl_6 input{color:var(--white)}[data-disabled=true] ._button-wrapper_1fczl_38 svg{color:var(--white);cursor:default;fill:var(--white)}._wrapper_1fczl_44{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_1fczl_44._active_1fczl_50{border-bottom:1px solid var(--citrine-100)}._button-wrapper_1fczl_38{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_1fczl_38{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_1fczl_71{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_1fczl_77{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:var(--white);border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_1fczl_77 ._h_1fczl_100{display:flex;width:100%;color:var(--black-100)}._calendar-block_1fczl_77 ._b_1fczl_38{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_1fczl_77 ._d_1fczl_10{display:flex;flex:1;gap:4px;align-items:center;justify-content:center;color:var(--black-100);cursor:pointer}._calendar-block_1fczl_77 ._m_1fczl_121,._calendar-block_1fczl_77 ._a_1fczl_50,._calendar-block_1fczl_77 ._prev_1fczl_123{width:auto;height:48px;overflow:hidden}._calendar-block_1fczl_77 ._m_1fczl_121{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_1fczl_77 ._m_1fczl_121 b{font-weight:var(--font-weight-text-regular)}._calendar-block_1fczl_77 ._orange_1fczl_139{color:var(--citrine-100)}._calendar-block_1fczl_77 ._a_1fczl_50{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_1fczl_77 ._a_1fczl_50 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_1fczl_77 ._a_1fczl_50 b:hover{background:var(--black-10)}._calendar-block_1fczl_77 ._a_1fczl_50 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_1fczl_77 ._current_1fczl_164{background:var(--sapphire-10);border-radius:var(--control-radius-s)}._calendar-block_1fczl_77 ._monthGrid_1fczl_169{display:grid;grid-template-columns:repeat(3,1fr)}
|
|
@@ -5,6 +5,13 @@ export type DatePicker = {
|
|
|
5
5
|
* функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
|
|
6
6
|
*/
|
|
7
7
|
onChangeValue?: (e: TDatePickerValue) => void;
|
|
8
|
+
/**
|
|
9
|
+
* функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта ошибки,
|
|
10
|
+
*/
|
|
11
|
+
onError?: (e: TDatePickerOnError) => void;
|
|
12
|
+
/** функция=callback, передает новое значение даты,
|
|
13
|
+
*/
|
|
14
|
+
onBlur?: (e: Date) => void;
|
|
8
15
|
/**
|
|
9
16
|
* функция ограничения выбора даты
|
|
10
17
|
(до какой даты выбор не доступен)
|
|
@@ -20,16 +27,32 @@ export type DatePicker = {
|
|
|
20
27
|
type?: 'days' | 'months' | 'years';
|
|
21
28
|
disabled?: boolean;
|
|
22
29
|
error?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* необязательное значение для немедленной валидации
|
|
32
|
+
*/
|
|
33
|
+
validateImmediately?: boolean;
|
|
34
|
+
editable?: boolean;
|
|
23
35
|
} & TInputProps;
|
|
24
36
|
export type TDatePickerValue = {
|
|
25
37
|
value?: Date;
|
|
26
38
|
name?: string;
|
|
27
39
|
};
|
|
40
|
+
export type TDatePickerOnError = {
|
|
41
|
+
name?: string;
|
|
42
|
+
active: boolean;
|
|
43
|
+
};
|
|
28
44
|
export declare const DatePicker: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<{
|
|
29
45
|
/**
|
|
30
46
|
* функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
|
|
31
47
|
*/
|
|
32
48
|
onChangeValue?: (e: TDatePickerValue) => void;
|
|
49
|
+
/**
|
|
50
|
+
* функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта ошибки,
|
|
51
|
+
*/
|
|
52
|
+
onError?: (e: TDatePickerOnError) => void;
|
|
53
|
+
/** функция=callback, передает новое значение даты,
|
|
54
|
+
*/
|
|
55
|
+
onBlur?: (e: Date) => void;
|
|
33
56
|
/**
|
|
34
57
|
* функция ограничения выбора даты
|
|
35
58
|
(до какой даты выбор не доступен)
|
|
@@ -45,4 +68,9 @@ export declare const DatePicker: import('react').MemoExoticComponent<import('rea
|
|
|
45
68
|
type?: "days" | "months" | "years";
|
|
46
69
|
disabled?: boolean;
|
|
47
70
|
error?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* необязательное значение для немедленной валидации
|
|
73
|
+
*/
|
|
74
|
+
validateImmediately?: boolean;
|
|
75
|
+
editable?: boolean;
|
|
48
76
|
} & import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;
|
|
@@ -3,14 +3,13 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
|
3
3
|
import { memo, forwardRef, useState, useEffect } from "react";
|
|
4
4
|
import { DatePickerModal } from "./DatePickerModal.js";
|
|
5
5
|
import { MonthPickerModal } from "./MonthPickerModal.js";
|
|
6
|
-
import { c as cls } from "../../styles.module-
|
|
6
|
+
import { c as cls } from "../../styles.module-CLBRb2go.js";
|
|
7
7
|
import { YearPickerModal } from "./YearPickerModal.js";
|
|
8
8
|
import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
|
|
9
9
|
import { formating } from "../../utils/index.js";
|
|
10
10
|
import { Button } from "../Button/Button.js";
|
|
11
11
|
import { I as Input } from "../../Input-ChCIy5oY.js";
|
|
12
12
|
import { EInputVariant } from "../Input/constants.js";
|
|
13
|
-
import { parseDate } from "../../utils/formating/Date.js";
|
|
14
13
|
const DatePicker = memo(
|
|
15
14
|
forwardRef(
|
|
16
15
|
({
|
|
@@ -21,22 +20,39 @@ const DatePicker = memo(
|
|
|
21
20
|
before,
|
|
22
21
|
type = "days",
|
|
23
22
|
error,
|
|
23
|
+
onError,
|
|
24
|
+
onBlur,
|
|
25
|
+
validateImmediately,
|
|
24
26
|
variant,
|
|
25
27
|
disabled = false,
|
|
26
28
|
...props
|
|
27
29
|
}, ref) => {
|
|
28
30
|
const [isActive, setActive] = useState(false);
|
|
29
31
|
const [pickerType, setType] = useState(type);
|
|
30
|
-
const [date, setDate] = useState(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
return /* @__PURE__ */ new Date();
|
|
35
|
-
});
|
|
32
|
+
const [date, setDate] = useState(
|
|
33
|
+
value && !isNaN(new Date(value).getTime()) ? new Date(value) : void 0
|
|
34
|
+
);
|
|
36
35
|
const [isError, setError] = useState(error);
|
|
37
36
|
useEffect(() => {
|
|
38
37
|
setError(error);
|
|
39
38
|
}, [error]);
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
setDate(
|
|
41
|
+
value && !isNaN(new Date(value).getTime()) ? new Date(value) : void 0
|
|
42
|
+
);
|
|
43
|
+
}, [value]);
|
|
44
|
+
const milliseconds = value && new Date(value).getTime;
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
if (validateImmediately) {
|
|
47
|
+
if (!milliseconds) {
|
|
48
|
+
setError(true);
|
|
49
|
+
onError == null ? void 0 : onError({ name, active: true });
|
|
50
|
+
} else {
|
|
51
|
+
setError(false);
|
|
52
|
+
onError == null ? void 0 : onError({ name, active: false });
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}, [validateImmediately, name, milliseconds]);
|
|
40
56
|
useClickOutside({
|
|
41
57
|
isActive,
|
|
42
58
|
setActive: (e) => {
|
|
@@ -48,10 +64,10 @@ const DatePicker = memo(
|
|
|
48
64
|
const onOpen = () => {
|
|
49
65
|
if (!disabled) setActive(true);
|
|
50
66
|
};
|
|
51
|
-
const onDate = (
|
|
52
|
-
if (!isNaN(
|
|
53
|
-
setDate(
|
|
54
|
-
onChangeValue == null ? void 0 : onChangeValue({ value:
|
|
67
|
+
const onDate = (sendDate) => {
|
|
68
|
+
if (!isNaN(sendDate.getTime())) {
|
|
69
|
+
setDate(sendDate);
|
|
70
|
+
onChangeValue == null ? void 0 : onChangeValue({ value: sendDate, name });
|
|
55
71
|
}
|
|
56
72
|
if (pickerType === "years") {
|
|
57
73
|
if (type === "years") {
|
|
@@ -69,10 +85,12 @@ const DatePicker = memo(
|
|
|
69
85
|
setType("days");
|
|
70
86
|
}
|
|
71
87
|
}
|
|
72
|
-
setDate(
|
|
73
|
-
onChangeValue == null ? void 0 : onChangeValue({ value:
|
|
88
|
+
setDate(sendDate);
|
|
89
|
+
onChangeValue == null ? void 0 : onChangeValue({ value: sendDate, name });
|
|
90
|
+
onBlur == null ? void 0 : onBlur(sendDate);
|
|
74
91
|
};
|
|
75
92
|
const wrapperClassNames = classNames(cls.wrapper, isActive && cls.active);
|
|
93
|
+
const InputClassNames = classNames(cls.input, cls.inputBorderControl);
|
|
76
94
|
return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, "data-disabled": disabled, children: [
|
|
77
95
|
/* @__PURE__ */ jsx(
|
|
78
96
|
"div",
|
|
@@ -84,12 +102,12 @@ const DatePicker = memo(
|
|
|
84
102
|
Input,
|
|
85
103
|
{
|
|
86
104
|
ref,
|
|
87
|
-
className:
|
|
105
|
+
className: InputClassNames,
|
|
88
106
|
wrapperClassName: cls["input-wrapper"],
|
|
89
107
|
size,
|
|
90
108
|
type: "text",
|
|
91
109
|
variant: isError ? EInputVariant.Error : variant,
|
|
92
|
-
value: !isNaN(date.getTime()) ? formating.Date(date, "dd.mm.yy") : "",
|
|
110
|
+
value: date && !(typeof date === "string") && !isNaN(date == null ? void 0 : date.getTime()) ? formating.Date(date, "dd.mm.yy") : "",
|
|
93
111
|
...props
|
|
94
112
|
}
|
|
95
113
|
)
|
|
@@ -110,7 +128,7 @@ const DatePicker = memo(
|
|
|
110
128
|
DatePickerModal,
|
|
111
129
|
{
|
|
112
130
|
onChangeValue: onDate,
|
|
113
|
-
date,
|
|
131
|
+
date: date || /* @__PURE__ */ new Date(),
|
|
114
132
|
setActive,
|
|
115
133
|
before: typeof before === "string" ? new Date(before) : before,
|
|
116
134
|
onType: setType
|
|
@@ -120,7 +138,7 @@ const DatePicker = memo(
|
|
|
120
138
|
MonthPickerModal,
|
|
121
139
|
{
|
|
122
140
|
onChangeValue: onDate,
|
|
123
|
-
date,
|
|
141
|
+
date: date || /* @__PURE__ */ new Date(),
|
|
124
142
|
setActive,
|
|
125
143
|
before: typeof before === "string" ? new Date(before) : before,
|
|
126
144
|
onType: setType
|
|
@@ -130,7 +148,7 @@ const DatePicker = memo(
|
|
|
130
148
|
YearPickerModal,
|
|
131
149
|
{
|
|
132
150
|
onChangeValue: onDate,
|
|
133
|
-
date,
|
|
151
|
+
date: date || /* @__PURE__ */ new Date(),
|
|
134
152
|
setActive,
|
|
135
153
|
before: typeof before === "string" ? new Date(before) : before,
|
|
136
154
|
onType: setType
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useState, useEffect } from "react";
|
|
3
3
|
import { week } from "./constants.js";
|
|
4
|
-
import { c as cls } from "../../styles.module-
|
|
4
|
+
import { c as cls } from "../../styles.module-CLBRb2go.js";
|
|
5
5
|
import { Icon } from "../../icons/Icon.js";
|
|
6
6
|
import { formating } from "../../utils/index.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
|
@@ -15,6 +15,7 @@ function DatePickerModal({
|
|
|
15
15
|
}) {
|
|
16
16
|
var _a;
|
|
17
17
|
const field = useRef(null);
|
|
18
|
+
date = isNaN(new Date(date).getTime()) ? /* @__PURE__ */ new Date() : date;
|
|
18
19
|
const _current = parseDate(date);
|
|
19
20
|
const _selecte = parseDate(date);
|
|
20
21
|
const current = {
|
|
@@ -132,7 +133,7 @@ function DatePickerModal({
|
|
|
132
133
|
}
|
|
133
134
|
),
|
|
134
135
|
/* @__PURE__ */ jsxs("div", { className: cls["d"], onClick: () => onType == null ? void 0 : onType("months"), children: [
|
|
135
|
-
(
|
|
136
|
+
(_a = formating.Month(month.m)) == null ? void 0 : _a.name,
|
|
136
137
|
"’",
|
|
137
138
|
month.y.toString().slice(-2),
|
|
138
139
|
/* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useState, useEffect } from "react";
|
|
3
3
|
import { months } from "./constants.js";
|
|
4
|
-
import { c as cls } from "../../styles.module-
|
|
4
|
+
import { c as cls } from "../../styles.module-CLBRb2go.js";
|
|
5
5
|
import { Icon } from "../../icons/Icon.js";
|
|
6
6
|
import { formating } from "../../utils/index.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useState, useEffect } from "react";
|
|
3
|
-
import { c as cls } from "../../styles.module-
|
|
3
|
+
import { c as cls } from "../../styles.module-CLBRb2go.js";
|
|
4
4
|
import { formating } from "../../utils/index.js";
|
|
5
5
|
import { Button } from "../Button/Button.js";
|
|
6
6
|
function YearPickerModal({
|
|
@@ -19,8 +19,15 @@ const months = [
|
|
|
19
19
|
"Ноябрь",
|
|
20
20
|
"Декабрь"
|
|
21
21
|
];
|
|
22
|
+
var EDatePickerValue = /* @__PURE__ */ ((EDatePickerValue2) => {
|
|
23
|
+
EDatePickerValue2["CurrentDate1"] = "";
|
|
24
|
+
EDatePickerValue2["CurrentDate"] = "20240510";
|
|
25
|
+
EDatePickerValue2["CurrentDate3"] = "2024-09-10";
|
|
26
|
+
return EDatePickerValue2;
|
|
27
|
+
})(EDatePickerValue || {});
|
|
22
28
|
export {
|
|
23
29
|
EDatePickerBeforeDate,
|
|
30
|
+
EDatePickerValue,
|
|
24
31
|
months,
|
|
25
32
|
week
|
|
26
33
|
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import './assets/styles.css';const input = "_input_1fczl_2";
|
|
2
|
+
const inputBorderControl = "_inputBorderControl_1fczl_14";
|
|
3
|
+
const wrapper = "_wrapper_1fczl_44";
|
|
4
|
+
const active = "_active_1fczl_50";
|
|
5
|
+
const button = "_button_1fczl_38";
|
|
6
|
+
const h = "_h_1fczl_100";
|
|
7
|
+
const b = "_b_1fczl_38";
|
|
8
|
+
const d = "_d_1fczl_10";
|
|
9
|
+
const m = "_m_1fczl_121";
|
|
10
|
+
const a = "_a_1fczl_50";
|
|
11
|
+
const prev = "_prev_1fczl_123";
|
|
12
|
+
const orange = "_orange_1fczl_139";
|
|
13
|
+
const current = "_current_1fczl_164";
|
|
14
|
+
const monthGrid = "_monthGrid_1fczl_169";
|
|
15
|
+
const cls = {
|
|
16
|
+
input,
|
|
17
|
+
"input-wrapper": "_input-wrapper_1fczl_6",
|
|
18
|
+
"date-wrapper": "_date-wrapper_1fczl_10",
|
|
19
|
+
inputBorderControl,
|
|
20
|
+
"button-wrapper": "_button-wrapper_1fczl_38",
|
|
21
|
+
wrapper,
|
|
22
|
+
active,
|
|
23
|
+
button,
|
|
24
|
+
"field-overlow": "_field-overlow_1fczl_71",
|
|
25
|
+
"calendar-block": "_calendar-block_1fczl_77",
|
|
26
|
+
h,
|
|
27
|
+
b,
|
|
28
|
+
d,
|
|
29
|
+
m,
|
|
30
|
+
a,
|
|
31
|
+
prev,
|
|
32
|
+
orange,
|
|
33
|
+
current,
|
|
34
|
+
monthGrid
|
|
35
|
+
};
|
|
36
|
+
export {
|
|
37
|
+
cls as c
|
|
38
|
+
};
|
package/package.json
CHANGED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import './assets/styles.css';const input = "_input_3fxwe_2";
|
|
2
|
-
const wrapper = "_wrapper_3fxwe_41";
|
|
3
|
-
const active = "_active_3fxwe_47";
|
|
4
|
-
const button = "_button_3fxwe_35";
|
|
5
|
-
const h = "_h_3fxwe_97";
|
|
6
|
-
const b = "_b_3fxwe_35";
|
|
7
|
-
const d = "_d_3fxwe_10";
|
|
8
|
-
const m = "_m_3fxwe_118";
|
|
9
|
-
const a = "_a_3fxwe_47";
|
|
10
|
-
const prev = "_prev_3fxwe_120";
|
|
11
|
-
const orange = "_orange_3fxwe_136";
|
|
12
|
-
const current = "_current_3fxwe_161";
|
|
13
|
-
const monthGrid = "_monthGrid_3fxwe_166";
|
|
14
|
-
const cls = {
|
|
15
|
-
input,
|
|
16
|
-
"input-wrapper": "_input-wrapper_3fxwe_6",
|
|
17
|
-
"date-wrapper": "_date-wrapper_3fxwe_10",
|
|
18
|
-
"button-wrapper": "_button-wrapper_3fxwe_35",
|
|
19
|
-
wrapper,
|
|
20
|
-
active,
|
|
21
|
-
button,
|
|
22
|
-
"field-overlow": "_field-overlow_3fxwe_68",
|
|
23
|
-
"calendar-block": "_calendar-block_3fxwe_74",
|
|
24
|
-
h,
|
|
25
|
-
b,
|
|
26
|
-
d,
|
|
27
|
-
m,
|
|
28
|
-
a,
|
|
29
|
-
prev,
|
|
30
|
-
orange,
|
|
31
|
-
current,
|
|
32
|
-
monthGrid
|
|
33
|
-
};
|
|
34
|
-
export {
|
|
35
|
-
cls as c
|
|
36
|
-
};
|