mimir-ui-kit 1.36.11 → 1.36.13
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 +8 -0
- package/dist/components/DatePicker/DatePicker.js +109 -92
- package/dist/components/DatePicker/DatePickerModal.js +1 -1
- package/dist/components/DatePicker/MonthPickerModal.js +1 -1
- package/dist/components/DatePicker/YearPickerModal.js +1 -1
- package/dist/components/ListFiles/ListFiles.d.ts +1 -1
- package/dist/components/ListFiles/ListFiles.js +5 -5
- package/dist/components/ListPhotos/ListPhotos.d.ts +1 -1
- package/dist/components/ListPhotos/ListPhotos.js +13 -13
- package/dist/components/MultiSelectSearch/utils.d.ts +1 -1
- package/dist/components/SelectSearch/utils.d.ts +1 -1
- package/dist/components/UniversalUploader/UniversalUploader.js +20 -18
- package/dist/components/Uploader/Uploader.d.ts +5 -0
- package/dist/components/Uploader/Uploader.js +37 -36
- package/dist/styles.module-B3xL6-zc.js +25 -0
- package/package.json +1 -1
- package/dist/styles.module-Chnn6DA-.js +0 -24
package/dist/assets/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._input_hmkm7_2{padding-right:var(--mimir-space-3xl)}._input-wrapper_hmkm7_6{flex:1}._date-wrapper_hmkm7_10{position:relative;width:100%}._date-wrapper_hmkm7_10 ._inputBorderControl_hmkm7_14{border:transparent}._date-wrapper_hmkm7_10:hover ._input-wrapper_hmkm7_6{background-color:var(--input-bg-color-hover)}._date-wrapper_hmkm7_10:before{position:absolute;top:0;right:45px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}._date-wrapper_hmkm7_10._editable_hmkm7_27:before{display:none}._date-wrapper_hmkm7_10 svg{cursor:pointer}[data-disabled=true] ._date-wrapper_hmkm7_10:before{cursor:auto}[data-disabled=true] ._date-wrapper_hmkm7_10 ._input-wrapper_hmkm7_6{background:var(--black-20)}[data-disabled=true] ._date-wrapper_hmkm7_10 ._input-wrapper_hmkm7_6 label,[data-disabled=true] ._date-wrapper_hmkm7_10 ._input-wrapper_hmkm7_6 input{color:var(--white)}[data-disabled=true] ._button-wrapper_hmkm7_44 svg{color:var(--white);cursor:default;fill:var(--white)}._wrapper_hmkm7_50{position:relative;display:flex;align-items:center;border-radius:var(--mimir-control-radius-s)}._wrapper_hmkm7_50._active_hmkm7_56{border-bottom:1px solid var(--citrine-100)}._button-wrapper_hmkm7_44{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_hmkm7_44{align-self:center;background-color:transparent;border-radius:var(--mimir-control-radius-s)}._calendar-block_hmkm7_78{position:absolute;z-index:var(--mimir-zindex-dropdown);display:flex;flex-direction:column;width:368px;max-height:none;padding:var(--mimir-space-m);font-weight:var(--mimir-font-weight-text-regular);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-inter);line-height:var(--mimir-line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:var(--white);border-radius:var(--mimir-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_hmkm7_78 ._h_hmkm7_100{display:flex;width:100%;color:var(--black-100)}._calendar-block_hmkm7_78 ._b_hmkm7_44{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_hmkm7_78 ._d_hmkm7_10{display:flex;flex:1;gap:var(--mimir-space-2xs);align-items:center;justify-content:center;color:var(--black-100);font-size:var(--mimir-size-text-l);cursor:pointer}._calendar-block_hmkm7_78 ._m_hmkm7_122,._calendar-block_hmkm7_78 ._a_hmkm7_56,._calendar-block_hmkm7_78 ._prev_hmkm7_124{width:auto;height:48px;overflow:hidden}._calendar-block_hmkm7_78 ._m_hmkm7_122{display:flex;align-items:center;justify-content:center;color:var(--disabled);font-size:var(--mimir-size-text-l)}._calendar-block_hmkm7_78 ._orange_hmkm7_138{color:var(--citrine-100)}._calendar-block_hmkm7_78 ._a_hmkm7_56{color:var(--black-100);font-size:var(--mimir-size-text-l);border-radius:var(--mimir-control-radius-s)}._calendar-block_hmkm7_78 ._a_hmkm7_56:hover{background:var(--black-10)}._calendar-block_hmkm7_78 ._a_hmkm7_56:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_hmkm7_78 ._current_hmkm7_155{background:var(--sapphire-10);border-radius:var(--mimir-control-radius-s)}._calendar-block_hmkm7_78 ._monthGrid_hmkm7_160{display:grid;grid-template-columns:repeat(3,1fr)}._icon-button_hmkm7_165{display:flex}
|
|
@@ -41,6 +41,10 @@ export type TProps = {
|
|
|
41
41
|
* Флаг разрешения ручного ввода даты
|
|
42
42
|
*/
|
|
43
43
|
editable?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Флаг открытия модального окна календаря при вводе
|
|
46
|
+
*/
|
|
47
|
+
openOnInput?: boolean;
|
|
44
48
|
} & TInputProps;
|
|
45
49
|
export type TDatePickerValue = {
|
|
46
50
|
value?: string;
|
|
@@ -91,4 +95,8 @@ export declare const DatePicker: import('react').MemoExoticComponent<import('rea
|
|
|
91
95
|
* Флаг разрешения ручного ввода даты
|
|
92
96
|
*/
|
|
93
97
|
editable?: boolean;
|
|
98
|
+
/**
|
|
99
|
+
* Флаг открытия модального окна календаря при вводе
|
|
100
|
+
*/
|
|
101
|
+
openOnInput?: boolean;
|
|
94
102
|
} & import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;
|
|
@@ -1,132 +1,149 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as B, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { c as v } from "../../index-DIxK0V-G.js";
|
|
3
|
-
import { memo as
|
|
4
|
-
import { MAX_DAY as
|
|
5
|
-
import { DatePickerModal as
|
|
6
|
-
import { MonthPickerModal as
|
|
7
|
-
import { c as
|
|
8
|
-
import { formatDatePart as
|
|
9
|
-
import { YearPickerModal as
|
|
10
|
-
import { useClickOutside as
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
3
|
+
import { memo as V, forwardRef as tt, useState as y, useEffect as I } from "react";
|
|
4
|
+
import { MAX_DAY as st, MAX_MONTH as et, DATE_LENGTH as ot } from "./constants.js";
|
|
5
|
+
import { DatePickerModal as it } from "./DatePickerModal.js";
|
|
6
|
+
import { MonthPickerModal as at } from "./MonthPickerModal.js";
|
|
7
|
+
import { c as o } from "../../styles.module-B3xL6-zc.js";
|
|
8
|
+
import { formatDatePart as $ } from "./utils.js";
|
|
9
|
+
import { YearPickerModal as rt } from "./YearPickerModal.js";
|
|
10
|
+
import { useClickOutside as ct } from "../../hooks/useClickOutside/useClickOutside.js";
|
|
11
|
+
import { Icon as H } from "../../icons/Icon.js";
|
|
12
|
+
import { formating as f } from "../../utils/index.js";
|
|
13
|
+
import { I as mt } from "../../Input-CbgqYgLo.js";
|
|
14
|
+
import { EInputStatus as pt, EInputSize as L } from "../Input/constants.js";
|
|
15
|
+
const dt = {
|
|
16
|
+
days: it,
|
|
17
|
+
months: at,
|
|
18
|
+
years: rt
|
|
19
|
+
}, nt = V(
|
|
20
|
+
tt(
|
|
20
21
|
({
|
|
21
|
-
size:
|
|
22
|
+
size: T,
|
|
22
23
|
value: s,
|
|
23
24
|
onChangeValue: e,
|
|
24
|
-
name:
|
|
25
|
-
before:
|
|
25
|
+
name: c,
|
|
26
|
+
before: P,
|
|
26
27
|
type: m = "days",
|
|
27
|
-
error:
|
|
28
|
-
onError:
|
|
29
|
-
onBlur:
|
|
30
|
-
validateImmediately:
|
|
31
|
-
variant:
|
|
32
|
-
disabled:
|
|
33
|
-
editable:
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
28
|
+
error: M,
|
|
29
|
+
onError: p,
|
|
30
|
+
onBlur: d,
|
|
31
|
+
validateImmediately: _,
|
|
32
|
+
variant: R,
|
|
33
|
+
disabled: u = !1,
|
|
34
|
+
editable: l = !1,
|
|
35
|
+
openOnInput: b = !0,
|
|
36
|
+
...U
|
|
37
|
+
}, X) => {
|
|
38
|
+
const [w, a] = y(!1), [g, n] = y(m), [i, D] = y(
|
|
37
39
|
() => s && !isNaN(new Date(s).getTime()) ? new Date(s) : void 0
|
|
38
|
-
), [
|
|
39
|
-
|
|
40
|
-
M
|
|
41
|
-
}, [
|
|
40
|
+
), [x, S] = y(M), [F, h] = y("");
|
|
41
|
+
I(() => {
|
|
42
|
+
S(M);
|
|
43
|
+
}, [M]), I(() => {
|
|
42
44
|
D(
|
|
43
45
|
s && !isNaN(new Date(s).getTime()) ? new Date(s) : void 0
|
|
44
46
|
);
|
|
45
|
-
}, [s]),
|
|
46
|
-
i && typeof i != "string" && !isNaN(i == null ? void 0 : i.getTime()) ?
|
|
47
|
+
}, [s]), I(() => {
|
|
48
|
+
i && typeof i != "string" && !isNaN(i == null ? void 0 : i.getTime()) ? h(f.Date(i, "dd/mm/yyyy")) : h("");
|
|
47
49
|
}, [i]);
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}, [
|
|
52
|
-
isActive:
|
|
50
|
+
const j = s && new Date(s).getTime;
|
|
51
|
+
I(() => {
|
|
52
|
+
_ && (j ? (S(!1), p == null || p({ name: c, active: !1 })) : (S(!0), p == null || p({ name: c, active: !0 })));
|
|
53
|
+
}, [_, c, j]), ct({
|
|
54
|
+
isActive: w,
|
|
53
55
|
setActive: (t) => {
|
|
54
|
-
|
|
56
|
+
a(t), n(m);
|
|
55
57
|
},
|
|
56
|
-
className:
|
|
58
|
+
className: o["calendar-block"]
|
|
57
59
|
});
|
|
58
60
|
const G = () => {
|
|
59
|
-
|
|
61
|
+
!u && (b || !l) && a(!0);
|
|
60
62
|
}, K = (t) => {
|
|
61
63
|
isNaN(t.getTime()) || (D(t), e == null || e({
|
|
62
|
-
value:
|
|
63
|
-
name:
|
|
64
|
-
})),
|
|
65
|
-
value:
|
|
66
|
-
name:
|
|
67
|
-
}),
|
|
68
|
-
},
|
|
69
|
-
if (
|
|
70
|
-
const
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
],
|
|
75
|
-
if (
|
|
76
|
-
const
|
|
77
|
-
`${
|
|
64
|
+
value: f.Date(t, "yyyy-mm-dd"),
|
|
65
|
+
name: c
|
|
66
|
+
})), g === "years" && (m === "years" ? (a(!1), n(m)) : n("months")), g === "months" && (m === "months" ? (a(!1), n(m)) : n("days")), D(t), e == null || e({
|
|
67
|
+
value: f.Date(t, "yyyy-mm-dd"),
|
|
68
|
+
name: c
|
|
69
|
+
}), d == null || d(f.Date(t, "yyyy-mm-dd"));
|
|
70
|
+
}, W = (t) => {
|
|
71
|
+
if (l) {
|
|
72
|
+
const N = t.target.value.replace(/[^\d]/g, ""), [k, C, O] = [
|
|
73
|
+
$(N.substring(0, 2), st),
|
|
74
|
+
$(N.substring(2, 4), et),
|
|
75
|
+
N.substring(4, 8)
|
|
76
|
+
], Y = [k, C, O].filter(Boolean).join("/");
|
|
77
|
+
if (h(Y), Y.length === ot) {
|
|
78
|
+
const z = parseInt(O), A = /* @__PURE__ */ new Date(
|
|
79
|
+
`${z}-${C.padStart(2, "0")}-${k.padStart(2, "0")}`
|
|
78
80
|
);
|
|
79
|
-
isNaN(
|
|
80
|
-
value:
|
|
81
|
-
name:
|
|
82
|
-
}),
|
|
81
|
+
isNaN(A.getTime()) || (D(A), e == null || e({
|
|
82
|
+
value: f.Date(A, "yyyy-mm-dd"),
|
|
83
|
+
name: c
|
|
84
|
+
}), d == null || d(f.Date(A, "yyyy-mm-dd")));
|
|
83
85
|
}
|
|
84
86
|
}
|
|
85
|
-
}, q = v(
|
|
87
|
+
}, q = v(o.wrapper, w && o.active), E = v(o.input, o.inputBorderControl), J = {
|
|
86
88
|
onChangeValue: K,
|
|
87
89
|
date: i || /* @__PURE__ */ new Date(),
|
|
88
|
-
before: typeof
|
|
89
|
-
onChangeType:
|
|
90
|
-
setIsActive:
|
|
91
|
-
},
|
|
92
|
-
|
|
93
|
-
|
|
90
|
+
before: typeof P == "string" ? new Date(P) : P,
|
|
91
|
+
onChangeType: n,
|
|
92
|
+
setIsActive: a
|
|
93
|
+
}, Q = dt[g], Z = ({ isActive: t }) => /* @__PURE__ */ r("button", { onClick: (k) => {
|
|
94
|
+
k.stopPropagation(), u || a(!t);
|
|
95
|
+
}, className: o["icon-button"], children: t ? /* @__PURE__ */ r(
|
|
96
|
+
H,
|
|
97
|
+
{
|
|
98
|
+
iconName: T === L.S ? "DropdownArrowUp16px" : "DropdownArrowUp24px"
|
|
99
|
+
}
|
|
100
|
+
) : /* @__PURE__ */ r(
|
|
101
|
+
H,
|
|
102
|
+
{
|
|
103
|
+
iconName: T === L.S ? "DropdownArrowBottom16px" : "DropdownArrowDown24px"
|
|
104
|
+
}
|
|
105
|
+
) });
|
|
106
|
+
return /* @__PURE__ */ B("div", { className: q, "data-disabled": u, children: [
|
|
107
|
+
/* @__PURE__ */ r(
|
|
94
108
|
"div",
|
|
95
109
|
{
|
|
96
110
|
role: "button",
|
|
97
|
-
"data-error":
|
|
98
|
-
className: v(
|
|
99
|
-
[
|
|
111
|
+
"data-error": x,
|
|
112
|
+
className: v(o["date-wrapper"], {
|
|
113
|
+
[o.editable]: l
|
|
100
114
|
}),
|
|
101
115
|
onClick: G,
|
|
102
|
-
children: /* @__PURE__ */
|
|
103
|
-
|
|
116
|
+
children: /* @__PURE__ */ r(
|
|
117
|
+
mt,
|
|
104
118
|
{
|
|
105
|
-
ref:
|
|
106
|
-
className:
|
|
107
|
-
wrapperClassName:
|
|
108
|
-
size:
|
|
119
|
+
ref: X,
|
|
120
|
+
className: E,
|
|
121
|
+
wrapperClassName: o["input-wrapper"],
|
|
122
|
+
size: T,
|
|
109
123
|
type: "text",
|
|
110
|
-
variant:
|
|
111
|
-
status:
|
|
112
|
-
value:
|
|
113
|
-
onChange:
|
|
124
|
+
variant: R,
|
|
125
|
+
status: x ? pt.Error : void 0,
|
|
126
|
+
value: F,
|
|
127
|
+
onChange: W,
|
|
114
128
|
rightAddon: {
|
|
115
|
-
addonType: "
|
|
116
|
-
addonContent:
|
|
129
|
+
addonType: "react-node",
|
|
130
|
+
addonContent: /* @__PURE__ */ r(Z, { isActive: w })
|
|
131
|
+
},
|
|
132
|
+
onFocus: () => {
|
|
133
|
+
b && !l && a(!0);
|
|
117
134
|
},
|
|
118
|
-
"data-error":
|
|
119
|
-
...
|
|
135
|
+
"data-error": x,
|
|
136
|
+
...U
|
|
120
137
|
}
|
|
121
138
|
)
|
|
122
139
|
}
|
|
123
140
|
),
|
|
124
|
-
|
|
141
|
+
w && /* @__PURE__ */ r(Q, { ...J })
|
|
125
142
|
] });
|
|
126
143
|
}
|
|
127
144
|
)
|
|
128
145
|
);
|
|
129
|
-
|
|
146
|
+
nt.displayName = "DatePicker";
|
|
130
147
|
export {
|
|
131
|
-
|
|
148
|
+
nt as DatePicker
|
|
132
149
|
};
|
|
@@ -3,7 +3,7 @@ import { c as x } from "../../index-DIxK0V-G.js";
|
|
|
3
3
|
import { useState as O } from "react";
|
|
4
4
|
import { week as Y, COUNT_WORK_DAYS as j } from "./constants.js";
|
|
5
5
|
import { useDatePickerPosition as z } from "./hooks.js";
|
|
6
|
-
import { c as o } from "../../styles.module-
|
|
6
|
+
import { c as o } from "../../styles.module-B3xL6-zc.js";
|
|
7
7
|
import { getUpdateDate as M } from "./utils.js";
|
|
8
8
|
import { Icon as G } from "../../icons/Icon.js";
|
|
9
9
|
import { formating as s } from "../../utils/index.js";
|
|
@@ -3,7 +3,7 @@ import { c as k } from "../../index-DIxK0V-G.js";
|
|
|
3
3
|
import { useState as $ } from "react";
|
|
4
4
|
import { months as x } from "./constants.js";
|
|
5
5
|
import { useDatePickerPosition as v } from "./hooks.js";
|
|
6
|
-
import { c as e } from "../../styles.module-
|
|
6
|
+
import { c as e } from "../../styles.module-B3xL6-zc.js";
|
|
7
7
|
import { Icon as B } from "../../icons/Icon.js";
|
|
8
8
|
import { formating as a } from "../../utils/index.js";
|
|
9
9
|
import { Button as b } from "../Button/Button.js";
|
|
@@ -2,7 +2,7 @@ import { jsxs as p, jsx as o } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as v } from "../../index-DIxK0V-G.js";
|
|
3
3
|
import { useState as x } from "react";
|
|
4
4
|
import { useDatePickerPosition as Y } from "./hooks.js";
|
|
5
|
-
import { c as t } from "../../styles.module-
|
|
5
|
+
import { c as t } from "../../styles.module-B3xL6-zc.js";
|
|
6
6
|
import { formating as n } from "../../utils/index.js";
|
|
7
7
|
import { Button as y } from "../Button/Button.js";
|
|
8
8
|
const F = ({
|
|
@@ -23,4 +23,4 @@ export type TFilesDetail = {
|
|
|
23
23
|
size?: number;
|
|
24
24
|
type?: string;
|
|
25
25
|
};
|
|
26
|
-
export declare function ListFiles({ value, onChange }: TListFiles): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare function ListFiles({ value, onChange }: TListFiles): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -12,15 +12,15 @@ import '../../assets/ListFiles.css';const e = {
|
|
|
12
12
|
"delete-button": "_delete-button_12h1y_51"
|
|
13
13
|
};
|
|
14
14
|
function z({ value: o, onChange: s }) {
|
|
15
|
-
const [
|
|
15
|
+
const [l, f] = m(o);
|
|
16
16
|
d(() => {
|
|
17
|
-
|
|
17
|
+
f(o);
|
|
18
18
|
}, [o]);
|
|
19
19
|
const r = async (i) => {
|
|
20
|
-
const n = [...
|
|
21
|
-
|
|
20
|
+
const n = [...l.filter((c) => c.id !== i)];
|
|
21
|
+
f(n), s == null || s({ deleteId: i, list: n });
|
|
22
22
|
};
|
|
23
|
-
return /* @__PURE__ */ t("ul", { className: e["file-upload-container"], children:
|
|
23
|
+
return l.length === 0 ? null : /* @__PURE__ */ t("ul", { className: e["file-upload-container"], children: l.map((i, n) => /* @__PURE__ */ a("li", { className: e["file-upload-container-item"], children: [
|
|
24
24
|
/* @__PURE__ */ a("div", { className: e["file-info"], children: [
|
|
25
25
|
(i == null ? void 0 : i.size) && /* @__PURE__ */ a("span", { className: e["file-info-size"], children: [
|
|
26
26
|
" ",
|
|
@@ -21,4 +21,4 @@ export type TPhotosDetail = {
|
|
|
21
21
|
url: string;
|
|
22
22
|
file?: File;
|
|
23
23
|
};
|
|
24
|
-
export declare function ListPhotos({ value, onChange }: TListPhotos): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare function ListPhotos({ value, onChange }: TListPhotos): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Button as
|
|
1
|
+
import { jsx as l, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { useState as a, useEffect as u } from "react";
|
|
3
|
+
import { Button as _ } from "../Button/Button.js";
|
|
4
4
|
import '../../assets/ListPhotos.css';const i = {
|
|
5
5
|
"list-photos": "_list-photos_1tpc1_2",
|
|
6
6
|
"list-photos-item": "_list-photos-item_1tpc1_11",
|
|
@@ -8,16 +8,16 @@ import '../../assets/ListPhotos.css';const i = {
|
|
|
8
8
|
"delete-button": "_delete-button_1tpc1_25"
|
|
9
9
|
};
|
|
10
10
|
function L({ value: o, onChange: s }) {
|
|
11
|
-
const [
|
|
12
|
-
|
|
11
|
+
const [e, c] = a(o);
|
|
12
|
+
u(() => {
|
|
13
13
|
c(o);
|
|
14
14
|
}, [o]);
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
c(
|
|
15
|
+
const m = async (t) => {
|
|
16
|
+
const r = [...e.filter((p) => p.id !== t)];
|
|
17
|
+
c(r), s == null || s({ deleteId: t, list: r });
|
|
18
18
|
};
|
|
19
|
-
return /* @__PURE__ */
|
|
20
|
-
/* @__PURE__ */
|
|
19
|
+
return e.length === 0 ? null : /* @__PURE__ */ l("ul", { className: i["list-photos"], children: e.map((t) => /* @__PURE__ */ n("li", { className: i["list-photos-item"], children: [
|
|
20
|
+
/* @__PURE__ */ l(
|
|
21
21
|
"img",
|
|
22
22
|
{
|
|
23
23
|
className: i["list-photos-image"],
|
|
@@ -25,15 +25,15 @@ function L({ value: o, onChange: s }) {
|
|
|
25
25
|
alt: ""
|
|
26
26
|
}
|
|
27
27
|
),
|
|
28
|
-
s && /* @__PURE__ */
|
|
29
|
-
|
|
28
|
+
s && /* @__PURE__ */ l(
|
|
29
|
+
_,
|
|
30
30
|
{
|
|
31
31
|
isIconButton: !0,
|
|
32
32
|
iconName: "Close12px",
|
|
33
33
|
size: "m-s",
|
|
34
34
|
variant: "secondary-gray",
|
|
35
35
|
className: i["delete-button"],
|
|
36
|
-
onClick: () =>
|
|
36
|
+
onClick: () => m(t.id)
|
|
37
37
|
}
|
|
38
38
|
)
|
|
39
39
|
] }, t.id)) });
|
|
@@ -3,6 +3,6 @@ import { TMultiSelectOption } from './types';
|
|
|
3
3
|
import { EInputSize } from '../Input';
|
|
4
4
|
|
|
5
5
|
export declare const mapSizeToInputSize: (size: EMultiSelectSearchSize) => EInputSize;
|
|
6
|
-
export declare const getDropdownArrowIcon: (isOpen: boolean, size: EMultiSelectSearchSize) => "DropdownArrowBottom16px" | "
|
|
6
|
+
export declare const getDropdownArrowIcon: (isOpen: boolean, size: EMultiSelectSearchSize) => "DropdownArrowBottom16px" | "DropdownArrowUp16px" | "DropdownArrowUp24px" | "DropdownArrowDown24px";
|
|
7
7
|
export declare const getInitialInputValue: (value: TMultiSelectOption[] | undefined | null, displayValue: string) => string;
|
|
8
8
|
export declare const joinSelectedItems: (items: TMultiSelectOption[], displayValue: string) => string;
|
|
@@ -2,4 +2,4 @@ import { ESelectSearchSize } from './constants';
|
|
|
2
2
|
import { EInputSize } from '../Input';
|
|
3
3
|
|
|
4
4
|
export declare const mapSizeToInputSize: (size: ESelectSearchSize) => EInputSize;
|
|
5
|
-
export declare const getDropdownArrowIcon: (isOpen: boolean, size: ESelectSearchSize) => "DropdownArrowBottom16px" | "
|
|
5
|
+
export declare const getDropdownArrowIcon: (isOpen: boolean, size: ESelectSearchSize) => "DropdownArrowBottom16px" | "DropdownArrowUp16px" | "DropdownArrowUp24px" | "DropdownArrowDown24px";
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { jsxs as y, jsx as p, Fragment as j } from "react/jsx-runtime";
|
|
2
2
|
import { c as B } from "../../index-DIxK0V-G.js";
|
|
3
|
-
import { forwardRef as D, useState as N, useEffect as
|
|
3
|
+
import { forwardRef as D, useState as N, useEffect as T, useMemo as V } from "react";
|
|
4
4
|
import { imageTypes as h } from "./constants.js";
|
|
5
5
|
import "../Button/Button.js";
|
|
6
|
-
import { EButtonVariantDefault as
|
|
7
|
-
import { ListFiles as
|
|
8
|
-
import { ListPhotos as
|
|
9
|
-
import { Uploader as
|
|
6
|
+
import { EButtonVariantDefault as _ } from "../Button/constants.js";
|
|
7
|
+
import { ListFiles as E } from "../ListFiles/ListFiles.js";
|
|
8
|
+
import { ListPhotos as M } from "../ListPhotos/ListPhotos.js";
|
|
9
|
+
import { Uploader as O } from "../Uploader/Uploader.js";
|
|
10
10
|
import '../../assets/UploaderPhotos.css';const g = {
|
|
11
11
|
"upload-file-wrapper": "_upload-file-wrapper_1a115_2"
|
|
12
|
-
}, f = (i) => "file" in i && i.file instanceof File ? h.includes(i.file.type) : "type" in i && typeof i.type == "string" ? h.includes(i.type) : !1,
|
|
12
|
+
}, f = (i) => "file" in i && i.file instanceof File ? h.includes(i.file.type) : "type" in i && typeof i.type == "string" ? h.includes(i.type) : !1, Q = D(
|
|
13
13
|
(i, v) => {
|
|
14
14
|
const {
|
|
15
15
|
type: s,
|
|
@@ -22,14 +22,15 @@ import '../../assets/UploaderPhotos.css';const g = {
|
|
|
22
22
|
titleUploader: w,
|
|
23
23
|
buttonText: z = "Выберите файлы",
|
|
24
24
|
showOnlyUploadButton: u = !1,
|
|
25
|
-
uploadButtonVariant: b =
|
|
25
|
+
uploadButtonVariant: b = _.SecondaryAsphalt,
|
|
26
|
+
buttonSize: I = "m"
|
|
26
27
|
} = i, [l, n] = N(
|
|
27
28
|
a || []
|
|
28
29
|
), d = l.length >= m;
|
|
29
|
-
|
|
30
|
+
T(() => {
|
|
30
31
|
a && n(a);
|
|
31
32
|
}, [a]);
|
|
32
|
-
const
|
|
33
|
+
const L = (t) => {
|
|
33
34
|
const r = t.value.map((e) => f(e.file) ? {
|
|
34
35
|
id: e.id,
|
|
35
36
|
url: URL.createObjectURL(e.file),
|
|
@@ -46,7 +47,7 @@ import '../../assets/UploaderPhotos.css';const g = {
|
|
|
46
47
|
n((e) => [...e, ...r]), o == null || o({ type: "add", data: t.value });
|
|
47
48
|
}, c = (t) => {
|
|
48
49
|
n((r) => r.filter((e) => e.id !== t)), o == null || o({ type: "delete", data: t });
|
|
49
|
-
}, { photos:
|
|
50
|
+
}, { photos: R, files: S } = V(() => {
|
|
50
51
|
const t = () => l.filter((e) => !f(e)), r = () => l.filter(f);
|
|
51
52
|
return s === "all" ? { files: t(), photos: r() } : s === "files" ? { photos: [], files: t() } : s === "photos" ? { files: [], photos: r() } : { files: [], photos: [] };
|
|
52
53
|
}, [l, s]);
|
|
@@ -59,33 +60,34 @@ import '../../assets/UploaderPhotos.css';const g = {
|
|
|
59
60
|
),
|
|
60
61
|
children: [
|
|
61
62
|
/* @__PURE__ */ p(
|
|
62
|
-
|
|
63
|
+
O,
|
|
63
64
|
{
|
|
64
65
|
filesType: x,
|
|
65
66
|
arrayName: F,
|
|
66
67
|
maxSize: U,
|
|
67
|
-
onChangeValue:
|
|
68
|
+
onChangeValue: L,
|
|
68
69
|
ref: v,
|
|
69
70
|
maxFiles: m,
|
|
70
71
|
isDisabled: d,
|
|
71
72
|
titleUploader: w,
|
|
72
73
|
showOnlyUploadButton: u,
|
|
73
74
|
buttonText: z,
|
|
74
|
-
uploadButtonVariant: b
|
|
75
|
+
uploadButtonVariant: b,
|
|
76
|
+
buttonSize: I
|
|
75
77
|
}
|
|
76
78
|
),
|
|
77
79
|
!u && /* @__PURE__ */ y(j, { children: [
|
|
78
80
|
(s === "files" || s === "all") && /* @__PURE__ */ p(
|
|
79
|
-
|
|
81
|
+
E,
|
|
80
82
|
{
|
|
81
|
-
value:
|
|
83
|
+
value: S,
|
|
82
84
|
onChange: (t) => c(t.deleteId)
|
|
83
85
|
}
|
|
84
86
|
),
|
|
85
87
|
(s === "photos" || s === "all") && /* @__PURE__ */ p(
|
|
86
|
-
|
|
88
|
+
M,
|
|
87
89
|
{
|
|
88
|
-
value:
|
|
90
|
+
value: R,
|
|
89
91
|
onChange: (t) => c(t.deleteId)
|
|
90
92
|
}
|
|
91
93
|
)
|
|
@@ -96,5 +98,5 @@ import '../../assets/UploaderPhotos.css';const g = {
|
|
|
96
98
|
}
|
|
97
99
|
);
|
|
98
100
|
export {
|
|
99
|
-
|
|
101
|
+
Q as UniversalUploader
|
|
100
102
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { imageTypesArr } from './constants';
|
|
3
|
+
import { EButtonSize } from '../Button';
|
|
3
4
|
import { TButtonDefaultFormProps } from '../Button/types';
|
|
4
5
|
|
|
5
6
|
export type TUploader = {
|
|
@@ -44,6 +45,10 @@ export type TUploader = {
|
|
|
44
45
|
* Вариант кнопки загрузки файла
|
|
45
46
|
*/
|
|
46
47
|
uploadButtonVariant?: TButtonDefaultFormProps['variant'];
|
|
48
|
+
/**
|
|
49
|
+
* Размер кнопки загрузки файла
|
|
50
|
+
*/
|
|
51
|
+
buttonSize?: EButtonSize | `${EButtonSize}`;
|
|
47
52
|
};
|
|
48
53
|
export type TUploadValue = {
|
|
49
54
|
value: TFileItem[];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
1
|
+
import { jsxs as a, jsx as n, Fragment as S } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as U, useRef as u, useId as V } from "react";
|
|
3
3
|
import { Icon as A } from "../../icons/Icon.js";
|
|
4
4
|
import { Button as B } from "../Button/Button.js";
|
|
5
5
|
import { EButtonVariantDefault as C } from "../Button/constants.js";
|
|
@@ -7,7 +7,7 @@ import '../../assets/Uploader.css';const p = {
|
|
|
7
7
|
"upload-file-wrapper": "_upload-file-wrapper_bplvw_2",
|
|
8
8
|
"upload-text": "_upload-text_bplvw_25",
|
|
9
9
|
"upload-file-input": "_upload-file-input_bplvw_35"
|
|
10
|
-
},
|
|
10
|
+
}, g = {
|
|
11
11
|
jpeg: "image/jpeg",
|
|
12
12
|
jpg: "image/jpg",
|
|
13
13
|
png: "image/png",
|
|
@@ -21,46 +21,47 @@ import '../../assets/Uploader.css';const p = {
|
|
|
21
21
|
xls: "application/excel",
|
|
22
22
|
txt: "text/plain",
|
|
23
23
|
xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
|
24
|
-
},
|
|
24
|
+
}, M = [
|
|
25
25
|
"jpeg",
|
|
26
26
|
"jpg",
|
|
27
27
|
"png",
|
|
28
28
|
"tiff",
|
|
29
29
|
"gif",
|
|
30
30
|
"heic"
|
|
31
|
-
],
|
|
31
|
+
], k = () => {
|
|
32
32
|
let i = 0;
|
|
33
33
|
return () => (i = (i + 1) % Number.MAX_SAFE_INTEGER, i);
|
|
34
|
-
},
|
|
35
|
-
(i,
|
|
34
|
+
}, D = k(), H = U(
|
|
35
|
+
(i, x) => {
|
|
36
36
|
const {
|
|
37
|
-
filesType: o =
|
|
38
|
-
onChangeValue:
|
|
39
|
-
arrayName:
|
|
37
|
+
filesType: o = M,
|
|
38
|
+
onChangeValue: h,
|
|
39
|
+
arrayName: b,
|
|
40
40
|
maxSize: r = 15,
|
|
41
|
-
maxFiles:
|
|
41
|
+
maxFiles: w,
|
|
42
42
|
isDisabled: s,
|
|
43
|
-
titleUploader:
|
|
43
|
+
titleUploader: c = "Или перетащите сюда",
|
|
44
44
|
buttonText: y = "Выберите файлы",
|
|
45
45
|
showOnlyUploadButton: _ = !1,
|
|
46
|
-
uploadButtonVariant: j = C.SecondaryAsphalt
|
|
47
|
-
|
|
46
|
+
uploadButtonVariant: j = C.SecondaryAsphalt,
|
|
47
|
+
buttonSize: v = "m"
|
|
48
|
+
} = i, d = u(null), l = u(null), f = V(), I = (e) => {
|
|
48
49
|
var t;
|
|
49
50
|
return e.type ? e.type : ((t = e.name.split(".").pop()) == null ? void 0 : t.toLowerCase()) === "heic" ? "image/heic" : "";
|
|
50
|
-
},
|
|
51
|
+
}, N = (e) => {
|
|
51
52
|
if (e.target.files && e.target.files[0]) {
|
|
52
|
-
const
|
|
53
|
-
const
|
|
53
|
+
const m = Array.from(e.target.files).filter((t) => {
|
|
54
|
+
const z = I(t), E = o.map((R) => g[R]).includes(z), F = t.size / 1024 ** 2 <= r;
|
|
54
55
|
return E && F;
|
|
55
|
-
}).slice(0,
|
|
56
|
-
|
|
56
|
+
}).slice(0, w).map((t) => ({ file: t, id: D() }));
|
|
57
|
+
h({ arrayName: b, value: m }), l.current && (l.current.value = "");
|
|
57
58
|
}
|
|
58
|
-
},
|
|
59
|
+
}, T = () => {
|
|
59
60
|
var e;
|
|
60
|
-
(e =
|
|
61
|
+
(e = d.current) == null || e.click();
|
|
61
62
|
};
|
|
62
|
-
return /* @__PURE__ */
|
|
63
|
-
/* @__PURE__ */
|
|
63
|
+
return /* @__PURE__ */ a("div", { className: p["upload-file-wrapper"], ref: x, children: [
|
|
64
|
+
/* @__PURE__ */ n(
|
|
64
65
|
"input",
|
|
65
66
|
{
|
|
66
67
|
ref: l,
|
|
@@ -69,32 +70,32 @@ import '../../assets/Uploader.css';const p = {
|
|
|
69
70
|
"aria-label": "Upload",
|
|
70
71
|
name: "image[]",
|
|
71
72
|
multiple: !0,
|
|
72
|
-
onChange:
|
|
73
|
+
onChange: N,
|
|
73
74
|
title: "",
|
|
74
|
-
id:
|
|
75
|
-
accept: o.map((e) =>
|
|
75
|
+
id: f,
|
|
76
|
+
accept: o.map((e) => g[e]).join(),
|
|
76
77
|
disabled: s
|
|
77
78
|
}
|
|
78
79
|
),
|
|
79
|
-
/* @__PURE__ */
|
|
80
|
-
/* @__PURE__ */
|
|
80
|
+
/* @__PURE__ */ a("label", { htmlFor: f, ref: d, children: [
|
|
81
|
+
/* @__PURE__ */ n(
|
|
81
82
|
B,
|
|
82
83
|
{
|
|
83
|
-
size:
|
|
84
|
+
size: v,
|
|
84
85
|
variant: j,
|
|
85
|
-
leftIcon: /* @__PURE__ */
|
|
86
|
-
onClick:
|
|
86
|
+
leftIcon: /* @__PURE__ */ n(A, { iconName: "UnionIcon16px" }),
|
|
87
|
+
onClick: T,
|
|
87
88
|
disabled: s,
|
|
88
89
|
children: y
|
|
89
90
|
}
|
|
90
91
|
),
|
|
91
|
-
!_ && /* @__PURE__ */
|
|
92
|
-
/* @__PURE__ */
|
|
93
|
-
/* @__PURE__ */
|
|
92
|
+
!_ && /* @__PURE__ */ a(S, { children: [
|
|
93
|
+
c && /* @__PURE__ */ n("b", { children: c }),
|
|
94
|
+
/* @__PURE__ */ a("span", { className: p["upload-text"], children: [
|
|
94
95
|
"Максимальный размер одного файла – ",
|
|
95
96
|
r,
|
|
96
97
|
" Мб",
|
|
97
|
-
/* @__PURE__ */
|
|
98
|
+
/* @__PURE__ */ n("br", {}),
|
|
98
99
|
"Загрузить можно файлы следующих форматов: ",
|
|
99
100
|
o.join(", ")
|
|
100
101
|
] })
|
|
@@ -104,5 +105,5 @@ import '../../assets/Uploader.css';const p = {
|
|
|
104
105
|
}
|
|
105
106
|
);
|
|
106
107
|
export {
|
|
107
|
-
|
|
108
|
+
H as Uploader
|
|
108
109
|
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import './assets/styles.css';const _ = "_input_hmkm7_2", t = "_inputBorderControl_hmkm7_14", n = "_editable_hmkm7_27", m = "_wrapper_hmkm7_50", r = "_active_hmkm7_56", o = "_button_hmkm7_44", e = "_h_hmkm7_100", c = "_b_hmkm7_44", p = "_d_hmkm7_10", a = "_m_hmkm7_122", h = "_a_hmkm7_56", k = "_prev_hmkm7_124", i = "_orange_hmkm7_138", s = "_current_hmkm7_155", u = "_monthGrid_hmkm7_160", d = {
|
|
2
|
+
input: _,
|
|
3
|
+
"input-wrapper": "_input-wrapper_hmkm7_6",
|
|
4
|
+
"date-wrapper": "_date-wrapper_hmkm7_10",
|
|
5
|
+
inputBorderControl: t,
|
|
6
|
+
editable: n,
|
|
7
|
+
"button-wrapper": "_button-wrapper_hmkm7_44",
|
|
8
|
+
wrapper: m,
|
|
9
|
+
active: r,
|
|
10
|
+
button: o,
|
|
11
|
+
"calendar-block": "_calendar-block_hmkm7_78",
|
|
12
|
+
h: e,
|
|
13
|
+
b: c,
|
|
14
|
+
d: p,
|
|
15
|
+
m: a,
|
|
16
|
+
a: h,
|
|
17
|
+
prev: k,
|
|
18
|
+
orange: i,
|
|
19
|
+
current: s,
|
|
20
|
+
monthGrid: u,
|
|
21
|
+
"icon-button": "_icon-button_hmkm7_165"
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
d as c
|
|
25
|
+
};
|
package/package.json
CHANGED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import './assets/styles.css';const _ = "_input_yyf2c_2", t = "_inputBorderControl_yyf2c_14", c = "_editable_yyf2c_27", r = "_wrapper_yyf2c_50", n = "_active_yyf2c_56", o = "_button_yyf2c_44", y = "_h_yyf2c_100", e = "_b_yyf2c_44", p = "_d_yyf2c_10", a = "_m_yyf2c_122", f = "_a_yyf2c_56", s = "_prev_yyf2c_124", i = "_orange_yyf2c_138", d = "_current_yyf2c_155", u = "_monthGrid_yyf2c_160", b = {
|
|
2
|
-
input: _,
|
|
3
|
-
"input-wrapper": "_input-wrapper_yyf2c_6",
|
|
4
|
-
"date-wrapper": "_date-wrapper_yyf2c_10",
|
|
5
|
-
inputBorderControl: t,
|
|
6
|
-
editable: c,
|
|
7
|
-
"button-wrapper": "_button-wrapper_yyf2c_44",
|
|
8
|
-
wrapper: r,
|
|
9
|
-
active: n,
|
|
10
|
-
button: o,
|
|
11
|
-
"calendar-block": "_calendar-block_yyf2c_78",
|
|
12
|
-
h: y,
|
|
13
|
-
b: e,
|
|
14
|
-
d: p,
|
|
15
|
-
m: a,
|
|
16
|
-
a: f,
|
|
17
|
-
prev: s,
|
|
18
|
-
orange: i,
|
|
19
|
-
current: d,
|
|
20
|
-
monthGrid: u
|
|
21
|
-
};
|
|
22
|
-
export {
|
|
23
|
-
b as c
|
|
24
|
-
};
|