mimir-ui-kit 1.21.0 → 1.21.2
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/DatePickerModal-BM0BgzTb.js +204 -0
- package/dist/assets/Button.css +1 -1
- package/dist/assets/DatePickerModal.css +1 -0
- package/dist/assets/Drawer.css +1 -1
- package/dist/assets/TextArea.css +1 -1
- package/dist/components/Button/Button.d.ts +52 -0
- package/dist/components/Button/Button.js +33 -28
- package/dist/components/Button/constants.d.ts +8 -1
- package/dist/components/Button/constants.js +9 -0
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/Button/index.js +2 -1
- package/dist/components/Button/types.d.ts +7 -2
- package/dist/components/DatePicker/DatePicker.d.ts +0 -12
- package/dist/components/DatePicker/DatePicker.js +18 -87
- package/dist/components/DatePicker/DatePickerModal.d.ts +1 -2
- package/dist/components/DatePicker/DatePickerModal.js +7 -182
- package/dist/components/DatePicker/constants.d.ts +0 -1
- package/dist/components/DatePicker/constants.js +0 -15
- package/dist/components/Drawer/Drawer.d.ts +13 -5
- package/dist/components/Drawer/Drawer.js +75 -51
- package/dist/components/TextArea/TextArea.js +9 -9
- package/dist/components/Uploader/Uploader.js +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +2 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/useResizeObserver/getElement.d.ts +4 -0
- package/dist/hooks/useResizeObserver/getElement.js +18 -0
- package/dist/hooks/useResizeObserver/index.d.ts +1 -0
- package/dist/hooks/useResizeObserver/index.js +4 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.d.ts +17 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.js +49 -0
- package/dist/index.js +4 -1
- package/package.json +1 -1
- package/dist/assets/styles.css +0 -1
- package/dist/components/DatePicker/MonthPickerModal.d.ts +0 -9
- package/dist/components/DatePicker/MonthPickerModal.js +0 -123
- package/dist/components/DatePicker/YearPickerModal.d.ts +0 -9
- package/dist/components/DatePicker/YearPickerModal.js +0 -120
- package/dist/styles.module-BZXDqssF.js +0 -36
@@ -1,92 +1,44 @@
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
3
|
-
import { memo, forwardRef, useState
|
4
|
-
import { DatePickerModal } from "
|
5
|
-
import { MonthPickerModal } from "./MonthPickerModal.js";
|
6
|
-
import { c as cls } from "../../styles.module-BZXDqssF.js";
|
7
|
-
import { YearPickerModal } from "./YearPickerModal.js";
|
3
|
+
import { memo, forwardRef, useState } from "react";
|
4
|
+
import { c as cls, D as DatePickerModal } from "../../DatePickerModal-BM0BgzTb.js";
|
8
5
|
import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
|
9
6
|
import { formating } from "../../utils/index.js";
|
10
7
|
import { Button } from "../Button/Button.js";
|
11
8
|
import { I as Input } from "../../Input-6mudFqTb.js";
|
12
|
-
import { EInputVariant } from "../Input/constants.js";
|
13
9
|
const DatePicker = memo(
|
14
10
|
forwardRef(
|
15
|
-
({
|
16
|
-
size,
|
17
|
-
value,
|
18
|
-
onChangeValue,
|
19
|
-
name,
|
20
|
-
before,
|
21
|
-
type = "days",
|
22
|
-
error,
|
23
|
-
variant,
|
24
|
-
disabled = false,
|
25
|
-
...props
|
26
|
-
}, ref) => {
|
11
|
+
({ size, value, onChangeValue, name, before, ...props }, ref) => {
|
27
12
|
const [isActive, setActive] = useState(false);
|
28
|
-
const [pickerType, setType] = useState(type);
|
29
13
|
const [date, setDate] = useState(
|
30
14
|
value ? new Date(value) : /* @__PURE__ */ new Date()
|
31
15
|
);
|
32
|
-
const [isError, setError] = useState(error);
|
33
|
-
useEffect(() => {
|
34
|
-
setError(error);
|
35
|
-
}, [error]);
|
36
16
|
useClickOutside({
|
37
17
|
isActive,
|
38
|
-
setActive
|
39
|
-
setActive(e);
|
40
|
-
setType(type);
|
41
|
-
},
|
18
|
+
setActive,
|
42
19
|
className: cls["calendar-block"]
|
43
20
|
});
|
44
21
|
const onOpen = () => {
|
45
|
-
|
22
|
+
setActive(true);
|
46
23
|
};
|
47
24
|
const onDate = (d) => {
|
48
|
-
if (pickerType === "years") {
|
49
|
-
if (type === "years") {
|
50
|
-
setActive(false);
|
51
|
-
setType(type);
|
52
|
-
} else {
|
53
|
-
setType("months");
|
54
|
-
}
|
55
|
-
}
|
56
|
-
if (pickerType === "months") {
|
57
|
-
if (type === "months") {
|
58
|
-
setActive(false);
|
59
|
-
setType(type);
|
60
|
-
} else {
|
61
|
-
setType("days");
|
62
|
-
}
|
63
|
-
}
|
64
25
|
setDate(d);
|
65
26
|
onChangeValue == null ? void 0 : onChangeValue({ value: d, name });
|
66
27
|
};
|
67
28
|
const wrapperClassNames = classNames(cls.wrapper, isActive && cls.active);
|
68
|
-
return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames,
|
69
|
-
/* @__PURE__ */ jsx(
|
70
|
-
|
29
|
+
return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, children: [
|
30
|
+
/* @__PURE__ */ jsx("div", { className: cls["date-wrapper"], onClick: onOpen, children: /* @__PURE__ */ jsx(
|
31
|
+
Input,
|
71
32
|
{
|
72
|
-
|
73
|
-
className: cls
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
className: cls.input,
|
80
|
-
wrapperClassName: cls["input-wrapper"],
|
81
|
-
size,
|
82
|
-
type: "text",
|
83
|
-
variant: isError ? EInputVariant.Error : variant,
|
84
|
-
value: formating.Date(date, "dd.mm.yy"),
|
85
|
-
...props
|
86
|
-
}
|
87
|
-
)
|
33
|
+
ref,
|
34
|
+
className: cls.input,
|
35
|
+
wrapperClassName: cls["input-wrapper"],
|
36
|
+
size,
|
37
|
+
type: "text",
|
38
|
+
value: formating.Date(date, "dd.mm.yy"),
|
39
|
+
...props
|
88
40
|
}
|
89
|
-
),
|
41
|
+
) }),
|
90
42
|
/* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx(
|
91
43
|
Button,
|
92
44
|
{
|
@@ -98,34 +50,13 @@ const DatePicker = memo(
|
|
98
50
|
iconName: isActive ? "DropdownArrowUp16px" : "DropdownArrowBottom16px"
|
99
51
|
}
|
100
52
|
) }),
|
101
|
-
|
53
|
+
isActive && /* @__PURE__ */ jsx(
|
102
54
|
DatePickerModal,
|
103
55
|
{
|
104
56
|
onChangeValue: onDate,
|
105
57
|
date,
|
106
58
|
setActive,
|
107
|
-
before: typeof before === "string" ? new Date(before) : before
|
108
|
-
onType: setType
|
109
|
-
}
|
110
|
-
),
|
111
|
-
pickerType === "months" && isActive && /* @__PURE__ */ jsx(
|
112
|
-
MonthPickerModal,
|
113
|
-
{
|
114
|
-
onChangeValue: onDate,
|
115
|
-
date,
|
116
|
-
setActive,
|
117
|
-
before: typeof before === "string" ? new Date(before) : before,
|
118
|
-
onType: setType
|
119
|
-
}
|
120
|
-
),
|
121
|
-
pickerType === "years" && isActive && /* @__PURE__ */ jsx(
|
122
|
-
YearPickerModal,
|
123
|
-
{
|
124
|
-
onChangeValue: onDate,
|
125
|
-
date,
|
126
|
-
setActive,
|
127
|
-
before: typeof before === "string" ? new Date(before) : before,
|
128
|
-
onType: setType
|
59
|
+
before: typeof before === "string" ? new Date(before) : before
|
129
60
|
}
|
130
61
|
)
|
131
62
|
] });
|
@@ -3,7 +3,6 @@ type DatePickerModal = {
|
|
3
3
|
onChangeValue: (d: Date) => void;
|
4
4
|
setActive: (s: boolean) => void;
|
5
5
|
before?: Date;
|
6
|
-
onType?: (s: 'days' | 'months' | 'years') => void;
|
7
6
|
};
|
8
|
-
export declare function DatePickerModal({ date, onChangeValue, setActive, before
|
7
|
+
export declare function DatePickerModal({ date, onChangeValue, setActive, before }: DatePickerModal): import("react/jsx-runtime").JSX.Element;
|
9
8
|
export {};
|
@@ -1,184 +1,9 @@
|
|
1
|
-
import
|
2
|
-
import
|
3
|
-
import
|
4
|
-
import {
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import { Button } from "../Button/Button.js";
|
8
|
-
function DatePickerModal({
|
9
|
-
date,
|
10
|
-
onChangeValue,
|
11
|
-
setActive,
|
12
|
-
before,
|
13
|
-
onType
|
14
|
-
}) {
|
15
|
-
const field = useRef(null);
|
16
|
-
const _current = new Date(date);
|
17
|
-
const _selecte = new Date(date);
|
18
|
-
const current = {
|
19
|
-
y: _current.getFullYear(),
|
20
|
-
d: _current.getDate(),
|
21
|
-
m: _current.getMonth() + 1
|
22
|
-
};
|
23
|
-
const selecte = {
|
24
|
-
y: _selecte.getFullYear(),
|
25
|
-
d: _selecte.getDate(),
|
26
|
-
m: _selecte.getMonth() + 1
|
27
|
-
};
|
28
|
-
const countWorkDays = 4;
|
29
|
-
const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
|
30
|
-
const blockWidth = 368;
|
31
|
-
useEffect(() => {
|
32
|
-
var _a, _b, _c, _d;
|
33
|
-
const windowHeight = window.innerHeight;
|
34
|
-
const windowWidth = window.innerWidth;
|
35
|
-
if (field.current !== null) {
|
36
|
-
const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
|
37
|
-
const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
|
38
|
-
const inputPosition = field.current.getBoundingClientRect();
|
39
|
-
const calendarSize = field.current.offsetHeight;
|
40
|
-
if (windowHeight < inputPosition.y + calendarSize) {
|
41
|
-
field.current.style.top = -calendarSize + "px";
|
42
|
-
} else {
|
43
|
-
field.current.style.top = inputHeight + "px";
|
44
|
-
}
|
45
|
-
if (windowWidth < inputPosition.x + blockWidth) {
|
46
|
-
field.current.style.left = inputWidth - blockWidth + "px";
|
47
|
-
}
|
48
|
-
field.current.style.opacity = "1";
|
49
|
-
}
|
50
|
-
}, [month]);
|
51
|
-
const countPrevDays = (e) => {
|
52
|
-
let dayOfWeek = e.getDay();
|
53
|
-
if (dayOfWeek === 0) dayOfWeek = 7;
|
54
|
-
return dayOfWeek - 1;
|
55
|
-
};
|
56
|
-
const currentMonthIndex = month.m - 1;
|
57
|
-
const currentMonthFull = new Date(month.y, currentMonthIndex);
|
58
|
-
const days = [];
|
59
|
-
const prevDays = () => {
|
60
|
-
const prevMonth = new Date(currentMonthFull);
|
61
|
-
prevMonth.setDate(prevMonth.getDate() - 1);
|
62
|
-
const lastDayPrevMohth = prevMonth.getDate();
|
63
|
-
const prevList = [];
|
64
|
-
for (let i = 0; i < countPrevDays(currentMonthFull); i++) {
|
65
|
-
prevList.push(lastDayPrevMohth - i);
|
66
|
-
}
|
67
|
-
prevList.reverse();
|
68
|
-
return prevList;
|
69
|
-
};
|
70
|
-
const prevDaysArray = prevDays();
|
71
|
-
while (currentMonthFull.getMonth() === currentMonthIndex) {
|
72
|
-
days.push(currentMonthFull.getDate());
|
73
|
-
currentMonthFull.setDate(currentMonthFull.getDate() + 1);
|
74
|
-
}
|
75
|
-
const nextDays = () => {
|
76
|
-
const totalViewDays = 42;
|
77
|
-
const daysCount = totalViewDays - (prevDaysArray.length + days.length);
|
78
|
-
const nextList = [];
|
79
|
-
for (let i = 1; i <= daysCount; i++) {
|
80
|
-
nextList.push(i);
|
81
|
-
}
|
82
|
-
return nextList;
|
83
|
-
};
|
84
|
-
const nextDaysArray = nextDays();
|
85
|
-
const update = (m, y) => {
|
86
|
-
y = m > 12 ? y + 1 : m < 1 ? y - 1 : y;
|
87
|
-
m = m > 12 ? 1 : m < 1 ? 12 : m;
|
88
|
-
return { y, m };
|
89
|
-
};
|
90
|
-
const onExit = () => {
|
91
|
-
setActive(false);
|
92
|
-
};
|
93
|
-
const next = () => {
|
94
|
-
setMonth(update(month.m + 1, month.y));
|
95
|
-
};
|
96
|
-
const prev = () => {
|
97
|
-
setMonth(update(month.m - 1, month.y));
|
98
|
-
};
|
99
|
-
const isBefore = (activeDate) => {
|
100
|
-
if (before) {
|
101
|
-
const beforeDate = before.getTime();
|
102
|
-
if (beforeDate > activeDate) return true;
|
103
|
-
}
|
104
|
-
return false;
|
105
|
-
};
|
106
|
-
const send = (searchDate) => {
|
107
|
-
if (isBefore(
|
108
|
-
(/* @__PURE__ */ new Date(
|
109
|
-
`${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
|
110
|
-
)).getTime()
|
111
|
-
))
|
112
|
-
return;
|
113
|
-
onChangeValue(
|
114
|
-
/* @__PURE__ */ new Date(
|
115
|
-
`${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
|
116
|
-
)
|
117
|
-
);
|
118
|
-
onExit();
|
119
|
-
};
|
120
|
-
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
|
121
|
-
/* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
|
122
|
-
/* @__PURE__ */ jsx(
|
123
|
-
Button,
|
124
|
-
{
|
125
|
-
isIconButton: true,
|
126
|
-
iconName: "DropdownArrowLeft16px",
|
127
|
-
onClick: prev,
|
128
|
-
variant: "secondary-gray",
|
129
|
-
size: "l"
|
130
|
-
}
|
131
|
-
),
|
132
|
-
/* @__PURE__ */ jsxs("div", { className: cls["d"], onClick: () => onType == null ? void 0 : onType("months"), children: [
|
133
|
-
formating.Month(month.m).name,
|
134
|
-
"’",
|
135
|
-
month.y.toString().slice(-2),
|
136
|
-
/* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
|
137
|
-
] }),
|
138
|
-
/* @__PURE__ */ jsx(
|
139
|
-
Button,
|
140
|
-
{
|
141
|
-
isIconButton: true,
|
142
|
-
iconName: "DropdownArrowRight16px",
|
143
|
-
onClick: next,
|
144
|
-
variant: "secondary-gray",
|
145
|
-
size: "l"
|
146
|
-
}
|
147
|
-
)
|
148
|
-
] }),
|
149
|
-
/* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
|
150
|
-
week.map((i, s) => /* @__PURE__ */ jsx(
|
151
|
-
"div",
|
152
|
-
{
|
153
|
-
className: `${s > countWorkDays ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
|
154
|
-
children: i
|
155
|
-
},
|
156
|
-
`v${s}`
|
157
|
-
)),
|
158
|
-
prevDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
|
159
|
-
days.map((i, s) => /* @__PURE__ */ jsx(
|
160
|
-
"div",
|
161
|
-
{
|
162
|
-
className: isBefore(
|
163
|
-
(/* @__PURE__ */ new Date(
|
164
|
-
`${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
|
165
|
-
)).getTime()
|
166
|
-
) ? cls["m"] : cls["a"],
|
167
|
-
children: i !== 0 ? /* @__PURE__ */ jsx(
|
168
|
-
"b",
|
169
|
-
{
|
170
|
-
className: current.y === month.y && current.m === month.m && current.d === i ? cls["current"] : "",
|
171
|
-
onClick: () => send(i),
|
172
|
-
children: i
|
173
|
-
}
|
174
|
-
) : /* @__PURE__ */ jsx("p", {})
|
175
|
-
},
|
176
|
-
s
|
177
|
-
)),
|
178
|
-
nextDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
|
179
|
-
] })
|
180
|
-
] }) });
|
181
|
-
}
|
1
|
+
import "react/jsx-runtime";
|
2
|
+
import "react";
|
3
|
+
import "./constants.js";
|
4
|
+
import { D } from "../../DatePickerModal-BM0BgzTb.js";
|
5
|
+
import "../../utils/index.js";
|
6
|
+
import "../Button/Button.js";
|
182
7
|
export {
|
183
|
-
DatePickerModal
|
8
|
+
D as DatePickerModal
|
184
9
|
};
|
@@ -5,22 +5,7 @@ var EDatePickerBeforeDate = /* @__PURE__ */ ((EDatePickerBeforeDate2) => {
|
|
5
5
|
return EDatePickerBeforeDate2;
|
6
6
|
})(EDatePickerBeforeDate || {});
|
7
7
|
const week = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
|
8
|
-
const months = [
|
9
|
-
"Январь",
|
10
|
-
"Февраль",
|
11
|
-
"Март",
|
12
|
-
"Апрель",
|
13
|
-
"Май",
|
14
|
-
"Июнь",
|
15
|
-
"Июль",
|
16
|
-
"Август",
|
17
|
-
"Сентябрь",
|
18
|
-
"Октябрь",
|
19
|
-
"Ноябрь",
|
20
|
-
"Декабрь"
|
21
|
-
];
|
22
8
|
export {
|
23
9
|
EDatePickerBeforeDate,
|
24
|
-
months,
|
25
10
|
week
|
26
11
|
};
|
@@ -14,10 +14,6 @@ type TProps = {
|
|
14
14
|
* Настраиваемый паддинг для body, что бы избежать скачка контента при overflow: hidden
|
15
15
|
*/
|
16
16
|
paddingRight?: number;
|
17
|
-
/**
|
18
|
-
* Дополнительная высота для учета нижнего сайдбара
|
19
|
-
*/
|
20
|
-
additionalHeight?: number;
|
21
17
|
/**
|
22
18
|
* Функция закрытия шторки
|
23
19
|
*/
|
@@ -26,6 +22,18 @@ type TProps = {
|
|
26
22
|
* Дополнительный класс для родительской обертки.
|
27
23
|
*/
|
28
24
|
className?: string;
|
25
|
+
/**
|
26
|
+
* Флаг отвечающий за загрузку
|
27
|
+
*/
|
28
|
+
isLoading?: boolean;
|
29
|
+
/**
|
30
|
+
* Флаг делающий шапку sticky
|
31
|
+
*/
|
32
|
+
stickyHeader?: boolean;
|
33
|
+
/**
|
34
|
+
* Флаг отвечающий за высоту шторки в положении `bottom`
|
35
|
+
*/
|
36
|
+
fullBottomHeight?: boolean;
|
29
37
|
/**
|
30
38
|
* Позиция шторки.
|
31
39
|
*/
|
@@ -40,5 +48,5 @@ type TProps = {
|
|
40
48
|
/**
|
41
49
|
* Компонент шторки, который может выезжать слева, справа или внизу.
|
42
50
|
*/
|
43
|
-
export declare const Drawer: ({ isOpen, onClose, title, className, position, paddingRight,
|
51
|
+
export declare const Drawer: ({ isOpen, onClose, title, className, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
|
44
52
|
export {};
|
@@ -1,43 +1,48 @@
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
3
3
|
import { useState, useRef, useCallback, useEffect } from "react";
|
4
4
|
import { EDrawerPosition } from "./constants.js";
|
5
5
|
import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
|
6
6
|
import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
|
7
7
|
import { useLockBodyScroll } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
|
8
|
+
import { useResizeObserver } from "../../hooks/useResizeObserver/useResizeObserver.js";
|
8
9
|
import { Button } from "../Button/Button.js";
|
9
10
|
import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
|
11
|
+
import { Loader } from "../Loader/Loader.js";
|
10
12
|
import { Portal } from "../Portal/Portal.js";
|
11
|
-
import '../../assets/Drawer.css';const drawer = "
|
12
|
-
const content = "
|
13
|
-
const header = "
|
14
|
-
const title = "
|
15
|
-
const space = "
|
16
|
-
const inner = "
|
17
|
-
const button = "
|
18
|
-
const footer = "
|
19
|
-
const left = "
|
20
|
-
const right = "
|
21
|
-
const full = "
|
22
|
-
const bottom = "
|
23
|
-
const opened = "
|
24
|
-
const overlay = "
|
13
|
+
import '../../assets/Drawer.css';const drawer = "_drawer_1y1lk_3";
|
14
|
+
const content = "_content_1y1lk_27";
|
15
|
+
const header = "_header_1y1lk_45";
|
16
|
+
const title = "_title_1y1lk_59";
|
17
|
+
const space = "_space_1y1lk_73";
|
18
|
+
const inner = "_inner_1y1lk_84";
|
19
|
+
const button = "_button_1y1lk_87";
|
20
|
+
const footer = "_footer_1y1lk_92";
|
21
|
+
const left = "_left_1y1lk_105";
|
22
|
+
const right = "_right_1y1lk_109";
|
23
|
+
const full = "_full_1y1lk_113";
|
24
|
+
const bottom = "_bottom_1y1lk_123";
|
25
|
+
const opened = "_opened_1y1lk_139";
|
26
|
+
const overlay = "_overlay_1y1lk_195";
|
25
27
|
const cls = {
|
26
28
|
drawer,
|
27
29
|
content,
|
30
|
+
"is-loading": "_is-loading_1y1lk_41",
|
28
31
|
header,
|
32
|
+
"sticky-header": "_sticky-header_1y1lk_53",
|
29
33
|
title,
|
30
34
|
space,
|
31
35
|
inner,
|
32
36
|
button,
|
33
37
|
footer,
|
34
|
-
"footer-button": "_footer-
|
38
|
+
"footer-button": "_footer-button_1y1lk_101",
|
35
39
|
left,
|
36
40
|
right,
|
37
41
|
full,
|
38
42
|
bottom,
|
43
|
+
"full-bottom-height": "_full-bottom-height_1y1lk_133",
|
39
44
|
opened,
|
40
|
-
"is-closing": "_is-
|
45
|
+
"is-closing": "_is-closing_1y1lk_158",
|
41
46
|
overlay
|
42
47
|
};
|
43
48
|
const ANIMATION_DELAY = 300;
|
@@ -46,9 +51,11 @@ const Drawer = ({
|
|
46
51
|
onClose,
|
47
52
|
title: title2,
|
48
53
|
className,
|
54
|
+
isLoading = false,
|
55
|
+
stickyHeader,
|
56
|
+
fullBottomHeight = false,
|
49
57
|
position = EDrawerPosition.RIGHT,
|
50
58
|
paddingRight = 8,
|
51
|
-
additionalHeight = 0,
|
52
59
|
footer: footer2,
|
53
60
|
children
|
54
61
|
}) => {
|
@@ -56,9 +63,10 @@ const Drawer = ({
|
|
56
63
|
const [isMounted, setIsMounted] = useState(false);
|
57
64
|
const [isBodyScrollLocked, setIsBodyScrollLocked] = useState(false);
|
58
65
|
const timerRef = useRef();
|
59
|
-
const contentRef = useRef(null);
|
60
|
-
const isBottomPosition = position === EDrawerPosition.BOTTOM;
|
61
66
|
const isMobile = useMediaQuery(EMediaQuery.XS1);
|
67
|
+
const { ref } = useResizeObserver({
|
68
|
+
enabled: position === EDrawerPosition.BOTTOM
|
69
|
+
});
|
62
70
|
useLockBodyScroll({
|
63
71
|
on: isBodyScrollLocked,
|
64
72
|
paddingRight
|
@@ -95,7 +103,9 @@ const Drawer = ({
|
|
95
103
|
}, [isOpen, handleKeyDown]);
|
96
104
|
const mods = {
|
97
105
|
[cls.opened]: isMounted,
|
98
|
-
[cls["is-closing"]]: isClosing
|
106
|
+
[cls["is-closing"]]: isClosing,
|
107
|
+
[cls["full-bottom-height"]]: fullBottomHeight,
|
108
|
+
[cls["is-loading"]]: isLoading
|
99
109
|
};
|
100
110
|
if (!isOpen) {
|
101
111
|
return null;
|
@@ -106,37 +116,51 @@ const Drawer = ({
|
|
106
116
|
{
|
107
117
|
"aria-hidden": !isOpen,
|
108
118
|
role: "dialog",
|
109
|
-
style: {
|
110
|
-
minHeight: isBottomPosition && contentRef.current ? contentRef.current.offsetHeight + additionalHeight : void 0
|
111
|
-
},
|
112
119
|
className: classNames(cls.drawer, cls[position], mods, className),
|
113
|
-
children: /* @__PURE__ */
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
120
|
+
children: /* @__PURE__ */ jsx(
|
121
|
+
"section",
|
122
|
+
{
|
123
|
+
ref,
|
124
|
+
className: classNames(cls.content, cls[position], {
|
125
|
+
[cls["is-loading"]]: Boolean(isLoading)
|
126
|
+
}),
|
127
|
+
children: isLoading ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
128
|
+
/* @__PURE__ */ jsxs(
|
129
|
+
"header",
|
130
|
+
{
|
131
|
+
className: classNames(cls.header, {
|
132
|
+
[cls["sticky-header"]]: stickyHeader
|
133
|
+
}),
|
134
|
+
children: [
|
135
|
+
/* @__PURE__ */ jsx("h2", { className: cls.title, children: title2 }),
|
136
|
+
/* @__PURE__ */ jsx("div", { className: cls.space, children: /* @__PURE__ */ jsx(
|
137
|
+
Button,
|
138
|
+
{
|
139
|
+
variant: EButtonVariantDefault.SecondaryWhite,
|
140
|
+
isIconButton: true,
|
141
|
+
size: isMobile ? EButtonSize.S : EButtonSize.M,
|
142
|
+
iconName: "Close16px",
|
143
|
+
onClick: handleClose,
|
144
|
+
className: cls.button
|
145
|
+
}
|
146
|
+
) })
|
147
|
+
]
|
148
|
+
}
|
149
|
+
),
|
150
|
+
/* @__PURE__ */ jsx("div", { className: cls.inner, children }),
|
151
|
+
/* @__PURE__ */ jsx("footer", { className: cls.footer, children: typeof footer2 === "function" ? footer2({ handleClose }) : footer2 || /* @__PURE__ */ jsx(
|
152
|
+
Button,
|
153
|
+
{
|
154
|
+
size: isMobile ? EButtonSize.M : EButtonSize.XXL,
|
155
|
+
full: isMobile,
|
156
|
+
onClick: handleClose,
|
157
|
+
className: cls["footer-button"],
|
158
|
+
children: "Закрыть"
|
159
|
+
}
|
160
|
+
) })
|
161
|
+
] })
|
162
|
+
}
|
163
|
+
)
|
140
164
|
}
|
141
165
|
),
|
142
166
|
/* @__PURE__ */ jsx("div", { className: classNames(cls.overlay, mods), onClick: handleClose })
|
@@ -7,18 +7,18 @@ import { Icon } from "../../icons/Icon.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
8
8
|
import { c as cls } from "../../Input-6mudFqTb.js";
|
9
9
|
import { EInputVariant } from "../Input/constants.js";
|
10
|
-
import '../../assets/TextArea.css';const textarea = "
|
11
|
-
const label = "
|
12
|
-
const s = "
|
13
|
-
const m = "
|
14
|
-
const l = "
|
10
|
+
import '../../assets/TextArea.css';const textarea = "_textarea_191db_2";
|
11
|
+
const label = "_label_191db_11";
|
12
|
+
const s = "_s_191db_36";
|
13
|
+
const m = "_m_191db_44";
|
14
|
+
const l = "_l_191db_11";
|
15
15
|
const textareaCls = {
|
16
|
-
"textarea-wrapper": "_textarea-
|
16
|
+
"textarea-wrapper": "_textarea-wrapper_191db_2",
|
17
17
|
textarea,
|
18
|
-
"has-label": "_has-
|
18
|
+
"has-label": "_has-label_191db_8",
|
19
19
|
label,
|
20
|
-
"has-left-slot": "_has-left-
|
21
|
-
"active-label": "_active-
|
20
|
+
"has-left-slot": "_has-left-slot_191db_25",
|
21
|
+
"active-label": "_active-label_191db_28",
|
22
22
|
s,
|
23
23
|
m,
|
24
24
|
l
|
@@ -23,7 +23,7 @@ const MIME = {
|
|
23
23
|
};
|
24
24
|
const filesTyps = ["jpeg", "jpg", "png", "tiff", "gif"];
|
25
25
|
const generateId = (min, max) => {
|
26
|
-
return Math.
|
26
|
+
return Math.random() * (max - min) + min;
|
27
27
|
};
|
28
28
|
const Uploader = forwardRef(
|
29
29
|
(props, ref) => {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
export { Button, EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline, type TButtonProps } from './Button';
|
1
|
+
export { Button, EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline, EButtonVariantBorderless, type TButtonProps } from './Button';
|
2
2
|
export { Input, EInputSize, EInputVariant } from './Input';
|
3
3
|
export type { TInputProps, TSize, TVariant } from './Input';
|
4
4
|
export { TextArea } from './TextArea';
|
package/dist/components/index.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { Button } from "./Button/Button.js";
|
2
|
-
import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./Button/constants.js";
|
2
|
+
import { EButtonForm, EButtonSize, EButtonVariantBorderless, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./Button/constants.js";
|
3
3
|
import { I } from "../Input-6mudFqTb.js";
|
4
4
|
import { EInputSize, EInputVariant } from "./Input/constants.js";
|
5
5
|
import { TextArea } from "./TextArea/TextArea.js";
|
@@ -53,6 +53,7 @@ export {
|
|
53
53
|
EAccordionSize,
|
54
54
|
EButtonForm,
|
55
55
|
EButtonSize,
|
56
|
+
EButtonVariantBorderless,
|
56
57
|
EButtonVariantDefault,
|
57
58
|
EButtonVariantOutline,
|
58
59
|
EButtonVariantRound,
|
package/dist/hooks/index.d.ts
CHANGED