mimir-ui-kit 1.28.0 → 1.29.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/styles.css +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts +28 -0
- package/dist/components/DatePicker/DatePicker.js +41 -31
- 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-Ugsf0AOb.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_fbbrm_2{padding-right:var(--space-3xl)}._input-wrapper_fbbrm_6{flex:1}._date-wrapper_fbbrm_10{position:relative;width:100%}._date-wrapper_fbbrm_10 ._inputBorderControl_fbbrm_14{border:transparent}._date-wrapper_fbbrm_10:hover ._input-wrapper_fbbrm_6{background-color:var(--input-bg-color-hover)}._date-wrapper_fbbrm_10:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}[data-disabled=true] ._date-wrapper_fbbrm_10:before{cursor:auto}[data-disabled=true] ._date-wrapper_fbbrm_10 ._input-wrapper_fbbrm_6{background:var(--black-20)}[data-disabled=true] ._date-wrapper_fbbrm_10 ._input-wrapper_fbbrm_6 label,[data-disabled=true] ._date-wrapper_fbbrm_10 ._input-wrapper_fbbrm_6 input{color:var(--white)}[data-disabled=true] ._button-wrapper_fbbrm_38 svg{color:var(--white);cursor:default;fill:var(--white)}._wrapper_fbbrm_44{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_fbbrm_44._active_fbbrm_50{border-bottom:1px solid var(--citrine-100)}._button-wrapper_fbbrm_38{position:absolute;top:0;right:0;z-index:2;display:flex;justify-content:center;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_fbbrm_38{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_fbbrm_72{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_fbbrm_78{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_fbbrm_78 ._h_fbbrm_101{display:flex;width:100%;color:var(--black-100)}._calendar-block_fbbrm_78 ._b_fbbrm_38{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_fbbrm_78 ._d_fbbrm_10{display:flex;flex:1;gap:4px;align-items:center;justify-content:center;color:var(--black-100);cursor:pointer}._calendar-block_fbbrm_78 ._m_fbbrm_122,._calendar-block_fbbrm_78 ._a_fbbrm_50,._calendar-block_fbbrm_78 ._prev_fbbrm_124{width:auto;height:48px;overflow:hidden}._calendar-block_fbbrm_78 ._m_fbbrm_122{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_fbbrm_78 ._m_fbbrm_122 b{font-weight:var(--font-weight-text-regular)}._calendar-block_fbbrm_78 ._orange_fbbrm_140{color:var(--citrine-100)}._calendar-block_fbbrm_78 ._a_fbbrm_50{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_fbbrm_78 ._a_fbbrm_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_fbbrm_78 ._a_fbbrm_50 b:hover{background:var(--black-10)}._calendar-block_fbbrm_78 ._a_fbbrm_50 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_fbbrm_78 ._current_fbbrm_165{background:var(--sapphire-10);border-radius:var(--control-radius-s)}._calendar-block_fbbrm_78 ._monthGrid_fbbrm_170{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,12 @@ 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-Ugsf0AOb.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
|
-
import { Button } from "../Button/Button.js";
|
|
11
10
|
import { I as Input } from "../../Input-ChCIy5oY.js";
|
|
12
11
|
import { EInputVariant } from "../Input/constants.js";
|
|
13
|
-
import { parseDate } from "../../utils/formating/Date.js";
|
|
14
12
|
const DatePicker = memo(
|
|
15
13
|
forwardRef(
|
|
16
14
|
({
|
|
@@ -21,22 +19,39 @@ const DatePicker = memo(
|
|
|
21
19
|
before,
|
|
22
20
|
type = "days",
|
|
23
21
|
error,
|
|
22
|
+
onError,
|
|
23
|
+
onBlur,
|
|
24
|
+
validateImmediately,
|
|
24
25
|
variant,
|
|
25
26
|
disabled = false,
|
|
26
27
|
...props
|
|
27
28
|
}, ref) => {
|
|
28
29
|
const [isActive, setActive] = useState(false);
|
|
29
30
|
const [pickerType, setType] = useState(type);
|
|
30
|
-
const [date, setDate] = useState(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
return /* @__PURE__ */ new Date();
|
|
35
|
-
});
|
|
31
|
+
const [date, setDate] = useState(
|
|
32
|
+
value && !isNaN(new Date(value).getTime()) ? new Date(value) : void 0
|
|
33
|
+
);
|
|
36
34
|
const [isError, setError] = useState(error);
|
|
37
35
|
useEffect(() => {
|
|
38
36
|
setError(error);
|
|
39
37
|
}, [error]);
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
setDate(
|
|
40
|
+
value && !isNaN(new Date(value).getTime()) ? new Date(value) : void 0
|
|
41
|
+
);
|
|
42
|
+
}, [value]);
|
|
43
|
+
const milliseconds = value && new Date(value).getTime;
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (validateImmediately) {
|
|
46
|
+
if (!milliseconds) {
|
|
47
|
+
setError(true);
|
|
48
|
+
onError == null ? void 0 : onError({ name, active: true });
|
|
49
|
+
} else {
|
|
50
|
+
setError(false);
|
|
51
|
+
onError == null ? void 0 : onError({ name, active: false });
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}, [validateImmediately, name, milliseconds]);
|
|
40
55
|
useClickOutside({
|
|
41
56
|
isActive,
|
|
42
57
|
setActive: (e) => {
|
|
@@ -48,10 +63,10 @@ const DatePicker = memo(
|
|
|
48
63
|
const onOpen = () => {
|
|
49
64
|
if (!disabled) setActive(true);
|
|
50
65
|
};
|
|
51
|
-
const onDate = (
|
|
52
|
-
if (!isNaN(
|
|
53
|
-
setDate(
|
|
54
|
-
onChangeValue == null ? void 0 : onChangeValue({ value:
|
|
66
|
+
const onDate = (sendDate) => {
|
|
67
|
+
if (!isNaN(sendDate.getTime())) {
|
|
68
|
+
setDate(sendDate);
|
|
69
|
+
onChangeValue == null ? void 0 : onChangeValue({ value: sendDate, name });
|
|
55
70
|
}
|
|
56
71
|
if (pickerType === "years") {
|
|
57
72
|
if (type === "years") {
|
|
@@ -69,10 +84,12 @@ const DatePicker = memo(
|
|
|
69
84
|
setType("days");
|
|
70
85
|
}
|
|
71
86
|
}
|
|
72
|
-
setDate(
|
|
73
|
-
onChangeValue == null ? void 0 : onChangeValue({ value:
|
|
87
|
+
setDate(sendDate);
|
|
88
|
+
onChangeValue == null ? void 0 : onChangeValue({ value: sendDate, name });
|
|
89
|
+
onBlur == null ? void 0 : onBlur(sendDate);
|
|
74
90
|
};
|
|
75
91
|
const wrapperClassNames = classNames(cls.wrapper, isActive && cls.active);
|
|
92
|
+
const InputClassNames = classNames(cls.input, cls.inputBorderControl);
|
|
76
93
|
return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, "data-disabled": disabled, children: [
|
|
77
94
|
/* @__PURE__ */ jsx(
|
|
78
95
|
"div",
|
|
@@ -84,33 +101,26 @@ const DatePicker = memo(
|
|
|
84
101
|
Input,
|
|
85
102
|
{
|
|
86
103
|
ref,
|
|
87
|
-
className:
|
|
104
|
+
className: InputClassNames,
|
|
88
105
|
wrapperClassName: cls["input-wrapper"],
|
|
89
106
|
size,
|
|
90
107
|
type: "text",
|
|
91
108
|
variant: isError ? EInputVariant.Error : variant,
|
|
92
|
-
value: !isNaN(date.getTime()) ? formating.Date(date, "dd
|
|
109
|
+
value: date && !(typeof date === "string") && !isNaN(date == null ? void 0 : date.getTime()) ? formating.Date(date, "dd/mm/yyyy") : "",
|
|
110
|
+
rightAddon: {
|
|
111
|
+
addonType: "icon",
|
|
112
|
+
addonContent: isActive ? "DropdownArrowUp24px" : "DropdownArrowDown24px"
|
|
113
|
+
},
|
|
93
114
|
...props
|
|
94
115
|
}
|
|
95
116
|
)
|
|
96
117
|
}
|
|
97
118
|
),
|
|
98
|
-
/* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx(
|
|
99
|
-
Button,
|
|
100
|
-
{
|
|
101
|
-
isIconButton: true,
|
|
102
|
-
clear: true,
|
|
103
|
-
type: "button",
|
|
104
|
-
className: cls.button,
|
|
105
|
-
onClick: onOpen,
|
|
106
|
-
iconName: isActive ? "DropdownArrowUp16px" : "DropdownArrowBottom16px"
|
|
107
|
-
}
|
|
108
|
-
) }),
|
|
109
119
|
pickerType === "days" && isActive && /* @__PURE__ */ jsx(
|
|
110
120
|
DatePickerModal,
|
|
111
121
|
{
|
|
112
122
|
onChangeValue: onDate,
|
|
113
|
-
date,
|
|
123
|
+
date: date || /* @__PURE__ */ new Date(),
|
|
114
124
|
setActive,
|
|
115
125
|
before: typeof before === "string" ? new Date(before) : before,
|
|
116
126
|
onType: setType
|
|
@@ -120,7 +130,7 @@ const DatePicker = memo(
|
|
|
120
130
|
MonthPickerModal,
|
|
121
131
|
{
|
|
122
132
|
onChangeValue: onDate,
|
|
123
|
-
date,
|
|
133
|
+
date: date || /* @__PURE__ */ new Date(),
|
|
124
134
|
setActive,
|
|
125
135
|
before: typeof before === "string" ? new Date(before) : before,
|
|
126
136
|
onType: setType
|
|
@@ -130,7 +140,7 @@ const DatePicker = memo(
|
|
|
130
140
|
YearPickerModal,
|
|
131
141
|
{
|
|
132
142
|
onChangeValue: onDate,
|
|
133
|
-
date,
|
|
143
|
+
date: date || /* @__PURE__ */ new Date(),
|
|
134
144
|
setActive,
|
|
135
145
|
before: typeof before === "string" ? new Date(before) : before,
|
|
136
146
|
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-Ugsf0AOb.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-Ugsf0AOb.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-Ugsf0AOb.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_fbbrm_2";
|
|
2
|
+
const inputBorderControl = "_inputBorderControl_fbbrm_14";
|
|
3
|
+
const wrapper = "_wrapper_fbbrm_44";
|
|
4
|
+
const active = "_active_fbbrm_50";
|
|
5
|
+
const button = "_button_fbbrm_38";
|
|
6
|
+
const h = "_h_fbbrm_101";
|
|
7
|
+
const b = "_b_fbbrm_38";
|
|
8
|
+
const d = "_d_fbbrm_10";
|
|
9
|
+
const m = "_m_fbbrm_122";
|
|
10
|
+
const a = "_a_fbbrm_50";
|
|
11
|
+
const prev = "_prev_fbbrm_124";
|
|
12
|
+
const orange = "_orange_fbbrm_140";
|
|
13
|
+
const current = "_current_fbbrm_165";
|
|
14
|
+
const monthGrid = "_monthGrid_fbbrm_170";
|
|
15
|
+
const cls = {
|
|
16
|
+
input,
|
|
17
|
+
"input-wrapper": "_input-wrapper_fbbrm_6",
|
|
18
|
+
"date-wrapper": "_date-wrapper_fbbrm_10",
|
|
19
|
+
inputBorderControl,
|
|
20
|
+
"button-wrapper": "_button-wrapper_fbbrm_38",
|
|
21
|
+
wrapper,
|
|
22
|
+
active,
|
|
23
|
+
button,
|
|
24
|
+
"field-overlow": "_field-overlow_fbbrm_72",
|
|
25
|
+
"calendar-block": "_calendar-block_fbbrm_78",
|
|
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
|
-
};
|