mimir-ui-kit 1.24.3 → 1.25.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/Drawer.css +1 -1
- package/dist/assets/ListFiles.css +1 -0
- package/dist/assets/ListPhotos.css +1 -1
- package/dist/assets/Uploader.css +1 -1
- package/dist/assets/UploaderPhotos.css +1 -1
- package/dist/components/Accordion/Accordion.d.ts +17 -0
- package/dist/components/Accordion/Accordion.js +40 -19
- package/dist/components/Drawer/Drawer.d.ts +5 -1
- package/dist/components/Drawer/Drawer.js +37 -22
- package/dist/components/ListFiles/ListFiles.d.ts +26 -0
- package/dist/components/ListFiles/ListFiles.js +47 -0
- package/dist/components/ListFiles/constants.d.ts +3 -0
- package/dist/components/ListFiles/constants.js +33 -0
- package/dist/components/ListFiles/index.d.ts +2 -0
- package/dist/components/ListFiles/index.js +4 -0
- package/dist/components/ListPhotos/ListPhotos.js +7 -3
- package/dist/components/Uploader/Uploader.js +4 -4
- package/dist/components/UploaderFiles/UploaderFiles.d.ts +38 -0
- package/dist/components/UploaderFiles/UploaderFiles.js +68 -0
- package/dist/components/UploaderFiles/index.d.ts +2 -0
- package/dist/components/UploaderFiles/index.js +4 -0
- package/dist/components/UploaderPhotos/UploaderPhotos.js +2 -2
- package/dist/utils/formating/FileSize.d.ts +1 -0
- package/dist/utils/formating/FileSize.js +15 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.js +3 -1
- package/package.json +1 -1
package/dist/assets/Drawer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._drawer_91s5k_3{--drawer-width: 808px;--drawer-z-index: 10000;position:fixed;z-index:10000;z-index:var(--drawer-z-index);display:flex;flex-direction:column;width:808px;width:var(--drawer-width);height:100%;overflow:auto;background-color:var(--black-5);transition:all .3s ease;pointer-events:none}._drawer_91s5k_3::-webkit-scrollbar{width:3px}._drawer_91s5k_3::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._drawer_91s5k_3::-webkit-scrollbar-track{background-color:var(--white)}._drawer_91s5k_3 ._content_91s5k_27{position:relative;display:flex;flex:1;flex-direction:column;padding:var(--space-m) var(--space-4xl) var(--space-4xl);transition:all .3s ease}@media (max-width: 600px){._drawer_91s5k_3 ._content_91s5k_27{--drawer-width: 100%;padding:var(--space-m)}}._drawer_91s5k_3 ._content_91s5k_27._is-loading_91s5k_41{align-items:center;justify-content:center}._drawer_91s5k_3 ._header_91s5k_45{display:flex;gap:var(--space-xs);min-height:68px}._drawer_91s5k_3 ._header_91s5k_45:not(:last-child){margin-bottom:var(--space-2xl)}._drawer_91s5k_3 ._header_91s5k_45._sticky-header_91s5k_53{position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--black-5)}._drawer_91s5k_3 ._header_91s5k_45 ._title_91s5k_59{flex:1;align-self:flex-end;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-xl3);line-height:var(--line-height-text-s1);letter-spacing:.7px}@media (max-width: 600px){._drawer_91s5k_3 ._header_91s5k_45 ._title_91s5k_59{font-size:var(--size-text-xl2);line-height:var(--line-height-text-xs)}}._drawer_91s5k_3 ._header_91s5k_45 ._space_91s5k_73{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_91s5k_3 ._header_91s5k_45{min-height:55px}._drawer_91s5k_3 ._header_91s5k_45:not(:last-child){margin-bottom:var(--space-m)}}._drawer_91s5k_3 ._inner_91s5k_84{flex:1}._drawer_91s5k_3 ._button_91s5k_87{position:absolute;top:var(--space-m);right:var(--space-m)}._drawer_91s5k_3 ._footer_91s5k_92{display:block;padding-top:var(--space-4xl)}@media (max-width: 600px){._drawer_91s5k_3 ._footer_91s5k_92{padding-top:var(--space-m)}}._drawer_91s5k_3 ._footer-button_91s5k_101{display:block;margin-left:auto}._drawer_91s5k_3._left_91s5k_105{top:0;left:-100%}._drawer_91s5k_3._right_91s5k_109{top:0;right:-100%}._drawer_91s5k_3._full_91s5k_113{top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-height:100vh;border-radius:0;transform:scale(.95);opacity:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out}._drawer_91s5k_3._bottom_91s5k_123{--drawer-width: calc(100% - var(--space-m));right:50%;bottom:-100%;left:50%;height:-webkit-max-content;height:-moz-max-content;height:max-content;max-height:calc(100% - var(--space-xs));border-top-left-radius:var(--control-radius);border-top-right-radius:var(--control-radius);transform:translate(-50%)}._drawer_91s5k_3._bottom_91s5k_123._full-bottom-height_91s5k_134{height:calc(100% - var(--space-xs))}._drawer_91s5k_3._bottom_91s5k_123._is-loading_91s5k_41{height:50vh}._drawer_91s5k_3._opened_91s5k_140{transition:all .3s ease;pointer-events:auto}._drawer_91s5k_3._opened_91s5k_140._left_91s5k_105{left:0%;transition:left .3s ease}._drawer_91s5k_3._opened_91s5k_140._right_91s5k_109{right:0%;transition:right .3s ease}._drawer_91s5k_3._opened_91s5k_140._bottom_91s5k_123{bottom:0%}._drawer_91s5k_3._opened_91s5k_140._full_91s5k_113{transform:scale(1);opacity:1}._drawer_91s5k_3._is-closing_91s5k_159._left_91s5k_105{left:-100%}._drawer_91s5k_3._is-closing_91s5k_159._right_91s5k_109{right:-100%}._drawer_91s5k_3._is-closing_91s5k_159._bottom_91s5k_123{bottom:-100%}._drawer_91s5k_3._is-closing_91s5k_159._full_91s5k_113{transform:scale(.95);opacity:0}@media (max-width: 1440px){._drawer_91s5k_3{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_91s5k_3{--drawer-width: 648px}}@media (max-width: 768px){._drawer_91s5k_3{--drawer-width: 584px}}@media (max-width: 600px){._drawer_91s5k_3{--drawer-width: 100%}._drawer_91s5k_3._bottom_91s5k_123{--drawer-width: calc(100% - var(--space-xs))}}._overlay_91s5k_196{--overlay-z-index: 9990;position:fixed;top:0;left:0;z-index:9990;z-index:var(--overlay-z-index);width:100%;height:100%;background-color:#0009;opacity:0;transition:all .3s ease}._overlay_91s5k_196._opened_91s5k_140{opacity:1;transition:all .3s ease}._overlay_91s5k_196._opened_91s5k_140._unmount_91s5k_212{z-index:var(--overlay-z-index);-webkit-appearance:none;-moz-appearance:none;appearance:none}._overlay_91s5k_196._is-closing_91s5k_159{opacity:0;transition:all .3s ease}._overlay_91s5k_196._unmount_91s5k_212{z-index:-1;-webkit-appearance:none;-moz-appearance:none;appearance:none}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._file-info_exvu6_2{display:flex;flex-direction:column;gap:var(--space-xs);overflow:hidden}._file-info_exvu6_2 ._file-info-size_exvu6_8{color:var(--disabled-color);font-weight:var(--font-weight-text-regular);font-size:var(--size-text-m);font-family:var(--font-inter),sans-serif;line-height:var(--line-height-text-xxs);text-align:left}._file-info_exvu6_2 ._file-info-name-wrapper_exvu6_16{display:table;width:100%;table-layout:fixed}._file-info_exvu6_2 ._file-info-name-wrapper_exvu6_16 ._file-info-name_exvu6_16{display:table-cell;overflow:hidden;color:var(--black-100);font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l2);font-family:var(--font-inter),sans-serif;line-height:var(--line-height-text-xl);white-space:nowrap;text-align:left;text-overflow:ellipsis}._file-upload-container_exvu6_34{display:flex;flex-direction:column;gap:var(--space-xs);width:100%;margin-bottom:0;padding-left:0}._file-upload-container_exvu6_34 ._file-upload-container-item_exvu6_42{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs) var(--space-m);background:var(--white);border-radius:var(--control-radius)}._file-upload-container_exvu6_34 ._file-upload-container-item_exvu6_42 ._delete-button_exvu6_51{position:absolute;top:var(--space-2xs);right:var(--space-2xs);background:var(--black-5)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._list-
|
|
1
|
+
._list-photos_1m1u4_2{display:flex;gap:var(--space-m);overflow-x:auto}._list-photos_1m1u4_2::-webkit-scrollbar{display:none}._list-photos_1m1u4_2 ._list-photos-item_1m1u4_10{position:relative;flex-shrink:0;width:var(--space-4xxl);height:var(--space-4xxl);overflow:hidden;border-radius:var(--control-radius);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703}._list-photos_1m1u4_2 ._list-photos-image_1m1u4_19{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}._list-photos_1m1u4_2 ._delete-button_1m1u4_24{position:absolute;top:var(--space-2xs);right:var(--space-2xs)}
|
package/dist/assets/Uploader.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._upload-
|
|
1
|
+
._upload-file-wrapper_n3hxs_2{position:relative;width:100%}._upload-file-wrapper_n3hxs_2 label{display:flex;flex-direction:column;gap:var(--space-m);align-items:center;justify-content:center}._upload-file-wrapper_n3hxs_2 label button{z-index:1}._upload-file-wrapper_n3hxs_2 label b{color:var(--black-100);font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l2);font-family:var(--font-inter);font-style:normal;line-height:130%;text-align:center}._upload-file-wrapper_n3hxs_2 label ._upload-text_n3hxs_25{color:var(--disabled-color);font-weight:var(--font-weight-text-regular);font-size:var(--size-text-m);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-xxs);text-align:center}._upload-file-input_n3hxs_35{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;opacity:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._upload-
|
|
1
|
+
._upload-file-wrapper_2zki8_2{display:flex;flex-direction:column;gap:var(--space-m);overflow:hidden}
|
|
@@ -2,14 +2,31 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
import { EAccordionButtonStyle, EAccordionButtonType, EAccordionIconType, EAccordionSize } from './constants';
|
|
3
3
|
|
|
4
4
|
export type TAccordionProps = {
|
|
5
|
+
/** Заголовок аккордеона */
|
|
5
6
|
title: string;
|
|
7
|
+
/** Содержимое аккордеона */
|
|
6
8
|
children: ReactNode;
|
|
9
|
+
/** Размер аккордеона */
|
|
7
10
|
size?: EAccordionSize;
|
|
11
|
+
/** Преобразование заголовка в верхний регистр */
|
|
8
12
|
titleUppercase?: boolean;
|
|
13
|
+
/** Тип кнопки аккордеона */
|
|
9
14
|
buttonType?: EAccordionButtonType | `${EAccordionButtonType}`;
|
|
15
|
+
/** Стиль кнопки аккордеона */
|
|
10
16
|
buttonStyle?: EAccordionButtonStyle | `${EAccordionButtonStyle}`;
|
|
17
|
+
/** Тип иконки аккордеона */
|
|
11
18
|
iconType?: EAccordionIconType | `${EAccordionIconType}`;
|
|
19
|
+
/** Дополнительный класс для заголовка */
|
|
12
20
|
classNameTitle?: string;
|
|
21
|
+
/** Дополнительный класс для содержимого */
|
|
13
22
|
classNameContent?: string;
|
|
23
|
+
/** Дополнительный класс для всего аккордеона */
|
|
24
|
+
classNameAccordion?: string;
|
|
25
|
+
/** Дополнительный класс для кнопки с иконкой */
|
|
26
|
+
classNameIconButton?: string;
|
|
27
|
+
/** Дополнительный класс для react-ноды для отображения под заголовком */
|
|
28
|
+
classNameSubtitleNode?: string;
|
|
29
|
+
/** React-нода для отображения под заголовком */
|
|
30
|
+
subtitleNode?: ReactNode;
|
|
14
31
|
};
|
|
15
32
|
export declare const Accordion: import('react').ForwardRefExoticComponent<TAccordionProps & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, Fragment as Fragment$1, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import React__default, { createContext, useRef, Fragment, useReducer, useMemo, useId, useEffect, useContext, forwardRef } from "react";
|
|
4
4
|
import { AccordionItem } from "./AccordionItem/AccordionItem.js";
|
|
@@ -155,7 +155,11 @@ const Accordion = forwardRef(
|
|
|
155
155
|
buttonStyle = EAccordionButtonStyle.CIRCLE,
|
|
156
156
|
iconType = EAccordionIconType.ARROW,
|
|
157
157
|
classNameTitle,
|
|
158
|
-
classNameContent
|
|
158
|
+
classNameContent,
|
|
159
|
+
classNameAccordion,
|
|
160
|
+
classNameIconButton,
|
|
161
|
+
classNameSubtitleNode,
|
|
162
|
+
subtitleNode
|
|
159
163
|
}, ref) => {
|
|
160
164
|
const isMobile = useMediaQuery(EMediaQuery.XS1);
|
|
161
165
|
const isLink = buttonType === "link";
|
|
@@ -206,7 +210,8 @@ const Accordion = forwardRef(
|
|
|
206
210
|
className: classNames(
|
|
207
211
|
cls["icon-container"],
|
|
208
212
|
open2 && cls.open,
|
|
209
|
-
cls[buttonStyle]
|
|
213
|
+
cls[buttonStyle],
|
|
214
|
+
classNameIconButton
|
|
210
215
|
),
|
|
211
216
|
children: /* @__PURE__ */ jsx(Icon, { iconName: getIconName(), className: cls.icon })
|
|
212
217
|
}
|
|
@@ -218,27 +223,43 @@ const Accordion = forwardRef(
|
|
|
218
223
|
}
|
|
219
224
|
}
|
|
220
225
|
};
|
|
221
|
-
return /* @__PURE__ */
|
|
226
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
222
227
|
/* @__PURE__ */ jsx(
|
|
223
|
-
|
|
224
|
-
{
|
|
225
|
-
as: isLink ? Fragment : EAccordionButtonType.BUTTON,
|
|
226
|
-
className: classNames({ [cls.header]: !isLink }),
|
|
227
|
-
children: renderButton(open2)
|
|
228
|
-
}
|
|
229
|
-
),
|
|
230
|
-
/* @__PURE__ */ jsx(
|
|
231
|
-
Ie,
|
|
228
|
+
"div",
|
|
232
229
|
{
|
|
233
230
|
className: classNames(
|
|
234
|
-
cls.
|
|
235
|
-
|
|
236
|
-
linkClasses
|
|
231
|
+
cls.accordion,
|
|
232
|
+
cls[size],
|
|
233
|
+
linkClasses,
|
|
234
|
+
classNameAccordion
|
|
237
235
|
),
|
|
238
|
-
children: /* @__PURE__ */ jsx(
|
|
236
|
+
children: /* @__PURE__ */ jsx(We, { ref, children: ({ open: open2 }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
237
|
+
/* @__PURE__ */ jsx(
|
|
238
|
+
Ce,
|
|
239
|
+
{
|
|
240
|
+
as: isLink ? Fragment : EAccordionButtonType.BUTTON,
|
|
241
|
+
className: classNames({
|
|
242
|
+
[cls.header]: !isLink
|
|
243
|
+
}),
|
|
244
|
+
children: renderButton(open2)
|
|
245
|
+
}
|
|
246
|
+
),
|
|
247
|
+
/* @__PURE__ */ jsx(
|
|
248
|
+
Ie,
|
|
249
|
+
{
|
|
250
|
+
className: classNames(
|
|
251
|
+
cls.panel,
|
|
252
|
+
classNameContent,
|
|
253
|
+
linkClasses
|
|
254
|
+
),
|
|
255
|
+
children: /* @__PURE__ */ jsx(AccordionItem, { size, children })
|
|
256
|
+
}
|
|
257
|
+
)
|
|
258
|
+
] }) })
|
|
239
259
|
}
|
|
240
|
-
)
|
|
241
|
-
|
|
260
|
+
),
|
|
261
|
+
subtitleNode && /* @__PURE__ */ jsx("div", { className: classNames(cls.subtitle, classNameSubtitleNode), children: subtitleNode })
|
|
262
|
+
] });
|
|
242
263
|
}
|
|
243
264
|
);
|
|
244
265
|
export {
|
|
@@ -10,6 +10,10 @@ type TProps = {
|
|
|
10
10
|
* Флаг отвечачающий за показ/скрытие.
|
|
11
11
|
*/
|
|
12
12
|
isOpen?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Флаг отвечачающий за то, должен ли компонент полность размонтироваться .
|
|
15
|
+
*/
|
|
16
|
+
unmount?: boolean;
|
|
13
17
|
/**
|
|
14
18
|
* Настраиваемый паддинг для body, что бы избежать скачка контента при overflow: hidden
|
|
15
19
|
*/
|
|
@@ -48,5 +52,5 @@ type TProps = {
|
|
|
48
52
|
/**
|
|
49
53
|
* Компонент шторки, который может выезжать слева, справа или внизу.
|
|
50
54
|
*/
|
|
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;
|
|
55
|
+
export declare const Drawer: ({ isOpen, onClose, title, className, unmount, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
|
|
52
56
|
export {};
|
|
@@ -10,40 +10,42 @@ import { Button } from "../Button/Button.js";
|
|
|
10
10
|
import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
|
|
11
11
|
import { Loader } from "../Loader/Loader.js";
|
|
12
12
|
import { Portal } from "../Portal/Portal.js";
|
|
13
|
-
import '../../assets/Drawer.css';const drawer = "
|
|
14
|
-
const content = "
|
|
15
|
-
const header = "
|
|
16
|
-
const title = "
|
|
17
|
-
const space = "
|
|
18
|
-
const inner = "
|
|
19
|
-
const button = "
|
|
20
|
-
const footer = "
|
|
21
|
-
const left = "
|
|
22
|
-
const right = "
|
|
23
|
-
const full = "
|
|
24
|
-
const bottom = "
|
|
25
|
-
const opened = "
|
|
26
|
-
const overlay = "
|
|
13
|
+
import '../../assets/Drawer.css';const drawer = "_drawer_91s5k_3";
|
|
14
|
+
const content = "_content_91s5k_27";
|
|
15
|
+
const header = "_header_91s5k_45";
|
|
16
|
+
const title = "_title_91s5k_59";
|
|
17
|
+
const space = "_space_91s5k_73";
|
|
18
|
+
const inner = "_inner_91s5k_84";
|
|
19
|
+
const button = "_button_91s5k_87";
|
|
20
|
+
const footer = "_footer_91s5k_92";
|
|
21
|
+
const left = "_left_91s5k_105";
|
|
22
|
+
const right = "_right_91s5k_109";
|
|
23
|
+
const full = "_full_91s5k_113";
|
|
24
|
+
const bottom = "_bottom_91s5k_123";
|
|
25
|
+
const opened = "_opened_91s5k_140";
|
|
26
|
+
const overlay = "_overlay_91s5k_196";
|
|
27
|
+
const unmount = "_unmount_91s5k_212";
|
|
27
28
|
const cls = {
|
|
28
29
|
drawer,
|
|
29
30
|
content,
|
|
30
|
-
"is-loading": "_is-
|
|
31
|
+
"is-loading": "_is-loading_91s5k_41",
|
|
31
32
|
header,
|
|
32
|
-
"sticky-header": "_sticky-
|
|
33
|
+
"sticky-header": "_sticky-header_91s5k_53",
|
|
33
34
|
title,
|
|
34
35
|
space,
|
|
35
36
|
inner,
|
|
36
37
|
button,
|
|
37
38
|
footer,
|
|
38
|
-
"footer-button": "_footer-
|
|
39
|
+
"footer-button": "_footer-button_91s5k_101",
|
|
39
40
|
left,
|
|
40
41
|
right,
|
|
41
42
|
full,
|
|
42
43
|
bottom,
|
|
43
|
-
"full-bottom-height": "_full-bottom-
|
|
44
|
+
"full-bottom-height": "_full-bottom-height_91s5k_134",
|
|
44
45
|
opened,
|
|
45
|
-
"is-closing": "_is-
|
|
46
|
-
overlay
|
|
46
|
+
"is-closing": "_is-closing_91s5k_159",
|
|
47
|
+
overlay,
|
|
48
|
+
unmount
|
|
47
49
|
};
|
|
48
50
|
const ANIMATION_DELAY = 300;
|
|
49
51
|
const Drawer = ({
|
|
@@ -51,6 +53,7 @@ const Drawer = ({
|
|
|
51
53
|
onClose,
|
|
52
54
|
title: title2,
|
|
53
55
|
className,
|
|
56
|
+
unmount: unmount2 = true,
|
|
54
57
|
isLoading = false,
|
|
55
58
|
stickyHeader,
|
|
56
59
|
fullBottomHeight = false,
|
|
@@ -107,7 +110,7 @@ const Drawer = ({
|
|
|
107
110
|
[cls["full-bottom-height"]]: fullBottomHeight,
|
|
108
111
|
[cls["is-loading"]]: isLoading
|
|
109
112
|
};
|
|
110
|
-
if (!isOpen) {
|
|
113
|
+
if (!isOpen && unmount2) {
|
|
111
114
|
return null;
|
|
112
115
|
}
|
|
113
116
|
return /* @__PURE__ */ jsxs(Portal, { children: [
|
|
@@ -163,7 +166,19 @@ const Drawer = ({
|
|
|
163
166
|
)
|
|
164
167
|
}
|
|
165
168
|
),
|
|
166
|
-
/* @__PURE__ */ jsx(
|
|
169
|
+
/* @__PURE__ */ jsx(
|
|
170
|
+
"div",
|
|
171
|
+
{
|
|
172
|
+
className: classNames(
|
|
173
|
+
cls.overlay,
|
|
174
|
+
{
|
|
175
|
+
[cls.unmount]: !unmount2
|
|
176
|
+
},
|
|
177
|
+
mods
|
|
178
|
+
),
|
|
179
|
+
onClick: handleClose
|
|
180
|
+
}
|
|
181
|
+
)
|
|
167
182
|
] });
|
|
168
183
|
};
|
|
169
184
|
export {
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export type TListFiles = {
|
|
2
|
+
/**
|
|
3
|
+
* Массив фото
|
|
4
|
+
*/
|
|
5
|
+
value: TFilesDetail[];
|
|
6
|
+
/**
|
|
7
|
+
* функция -callback, которая вызывается при изменении списка и передает обновленный список и deleteId,
|
|
8
|
+
*/
|
|
9
|
+
onChange?: (e: TFileValue) => void;
|
|
10
|
+
};
|
|
11
|
+
export type TFileItem = {
|
|
12
|
+
id: number;
|
|
13
|
+
url: string;
|
|
14
|
+
};
|
|
15
|
+
export type TFileValue = {
|
|
16
|
+
deleteId?: number;
|
|
17
|
+
list: TFilesDetail[];
|
|
18
|
+
};
|
|
19
|
+
export type TFilesDetail = {
|
|
20
|
+
id: number;
|
|
21
|
+
url: string;
|
|
22
|
+
name: string;
|
|
23
|
+
size?: number;
|
|
24
|
+
type?: string;
|
|
25
|
+
};
|
|
26
|
+
export declare function ListFiles({ value, onChange }: TListFiles): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useEffect } from "react";
|
|
3
|
+
import { formating } from "../../utils/index.js";
|
|
4
|
+
import { Button } from "../Button/Button.js";
|
|
5
|
+
import '../../assets/ListFiles.css';const cls = {
|
|
6
|
+
"file-info": "_file-info_exvu6_2",
|
|
7
|
+
"file-info-size": "_file-info-size_exvu6_8",
|
|
8
|
+
"file-info-name-wrapper": "_file-info-name-wrapper_exvu6_16",
|
|
9
|
+
"file-info-name": "_file-info-name_exvu6_16",
|
|
10
|
+
"file-upload-container": "_file-upload-container_exvu6_34",
|
|
11
|
+
"file-upload-container-item": "_file-upload-container-item_exvu6_42",
|
|
12
|
+
"delete-button": "_delete-button_exvu6_51"
|
|
13
|
+
};
|
|
14
|
+
function ListFiles({ value, onChange }) {
|
|
15
|
+
const [list, setList] = useState(value);
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
setList(value);
|
|
18
|
+
}, [value]);
|
|
19
|
+
const onDelete = async (id) => {
|
|
20
|
+
const newList = [...list.filter((el) => el.id !== id)];
|
|
21
|
+
setList(newList);
|
|
22
|
+
onChange == null ? void 0 : onChange({ deleteId: id, list: newList });
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ jsx("ul", { className: cls["file-upload-container"], children: list.map((el, key) => /* @__PURE__ */ jsxs("li", { className: cls["file-upload-container-item"], children: [
|
|
25
|
+
/* @__PURE__ */ jsxs("div", { className: cls["file-info"], children: [
|
|
26
|
+
(el == null ? void 0 : el.size) && /* @__PURE__ */ jsxs("span", { className: cls["file-info-size"], children: [
|
|
27
|
+
" ",
|
|
28
|
+
formating.Size(el == null ? void 0 : el.size)
|
|
29
|
+
] }),
|
|
30
|
+
/* @__PURE__ */ jsx("div", { className: cls["file-info-name-wrapper"], children: /* @__PURE__ */ jsx("div", { className: cls["file-info-name"], children: el.name }) })
|
|
31
|
+
] }),
|
|
32
|
+
/* @__PURE__ */ jsx(
|
|
33
|
+
Button,
|
|
34
|
+
{
|
|
35
|
+
isIconButton: true,
|
|
36
|
+
iconName: "Close12px",
|
|
37
|
+
size: "m-s",
|
|
38
|
+
variant: "secondary-gray",
|
|
39
|
+
className: cls["delete-button"],
|
|
40
|
+
onClick: () => onDelete(el.id)
|
|
41
|
+
}
|
|
42
|
+
)
|
|
43
|
+
] }, key)) });
|
|
44
|
+
}
|
|
45
|
+
export {
|
|
46
|
+
ListFiles
|
|
47
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
const photos = [
|
|
2
|
+
{
|
|
3
|
+
id: 111,
|
|
4
|
+
name: "ООО “КИЗ-СТРОЙ” - Свидетельство о регистрации (06.12.2003).xls",
|
|
5
|
+
url: "https://i.pinimg.com/736x/5a/e6/12/5ae612a7ecf50870c8f41961fefc332f.jpg",
|
|
6
|
+
size: 1024,
|
|
7
|
+
type: "image/png"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
id: 112,
|
|
11
|
+
name: "ООО “КИЗ-СТРОЙ” - Доверенность (20.10.2005).xls",
|
|
12
|
+
url: "https://i1.sndcdn.com/artworks-rQAPPfrs44UvRwIz-WJkvyQ-t500x500.jpg",
|
|
13
|
+
size: 1024,
|
|
14
|
+
type: "image/png"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
id: 113,
|
|
18
|
+
name: "Скан паспорта.pdf",
|
|
19
|
+
url: "https://i1.sndcdn.com/avatars-000095020320-0pmjnu-t500x500.jpg",
|
|
20
|
+
size: 2064,
|
|
21
|
+
type: "image/png"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
id: 114,
|
|
25
|
+
name: "Прочие документы.xls",
|
|
26
|
+
url: "https://i1.sndcdn.com/avatars-000151937348-27m28p-t500x500.jpg",
|
|
27
|
+
size: 1024,
|
|
28
|
+
type: "image/png"
|
|
29
|
+
}
|
|
30
|
+
];
|
|
31
|
+
export {
|
|
32
|
+
photos
|
|
33
|
+
};
|
|
@@ -2,7 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState, useEffect } from "react";
|
|
3
3
|
import { Button } from "../Button/Button.js";
|
|
4
4
|
import '../../assets/ListPhotos.css';const cls = {
|
|
5
|
-
"list-photos": "_list-
|
|
5
|
+
"list-photos": "_list-photos_1m1u4_2",
|
|
6
|
+
"list-photos-item": "_list-photos-item_1m1u4_10",
|
|
7
|
+
"list-photos-image": "_list-photos-image_1m1u4_19",
|
|
8
|
+
"delete-button": "_delete-button_1m1u4_24"
|
|
6
9
|
};
|
|
7
10
|
function ListPhotos({ value, onChange }) {
|
|
8
11
|
const [list, setList] = useState(value);
|
|
@@ -14,8 +17,8 @@ function ListPhotos({ value, onChange }) {
|
|
|
14
17
|
setList(newList);
|
|
15
18
|
onChange == null ? void 0 : onChange({ deleteId: id, list: newList });
|
|
16
19
|
};
|
|
17
|
-
return /* @__PURE__ */ jsx("ul", { className: cls["list-photos"], children: list.map((el) => /* @__PURE__ */ jsxs("li", { children: [
|
|
18
|
-
/* @__PURE__ */ jsx("img", { src: el.url, alt: "" }),
|
|
20
|
+
return /* @__PURE__ */ jsx("ul", { className: cls["list-photos"], children: list.map((el) => /* @__PURE__ */ jsxs("li", { className: cls["list-photos-item"], children: [
|
|
21
|
+
/* @__PURE__ */ jsx("img", { className: cls["list-photos-image"], src: el.url, alt: "" }),
|
|
19
22
|
onChange && /* @__PURE__ */ jsx(
|
|
20
23
|
Button,
|
|
21
24
|
{
|
|
@@ -23,6 +26,7 @@ function ListPhotos({ value, onChange }) {
|
|
|
23
26
|
iconName: "Close12px",
|
|
24
27
|
size: "m-s",
|
|
25
28
|
variant: "secondary-gray",
|
|
29
|
+
className: cls["delete-button"],
|
|
26
30
|
onClick: () => onDelete(el.id)
|
|
27
31
|
}
|
|
28
32
|
)
|
|
@@ -3,9 +3,9 @@ import { forwardRef, useRef, useId } from "react";
|
|
|
3
3
|
import { Icon } from "../../icons/Icon.js";
|
|
4
4
|
import { Button } from "../Button/Button.js";
|
|
5
5
|
import '../../assets/Uploader.css';const cls = {
|
|
6
|
-
"upload-
|
|
7
|
-
"upload-text": "_upload-
|
|
8
|
-
"upload-file-input": "_upload-file-
|
|
6
|
+
"upload-file-wrapper": "_upload-file-wrapper_n3hxs_2",
|
|
7
|
+
"upload-text": "_upload-text_n3hxs_25",
|
|
8
|
+
"upload-file-input": "_upload-file-input_n3hxs_35"
|
|
9
9
|
};
|
|
10
10
|
const MIME = {
|
|
11
11
|
jpeg: "image/jpeg",
|
|
@@ -52,7 +52,7 @@ const Uploader = forwardRef(
|
|
|
52
52
|
var _a;
|
|
53
53
|
(_a = uploaderRef.current) == null ? void 0 : _a.click();
|
|
54
54
|
};
|
|
55
|
-
return /* @__PURE__ */ jsxs("div", { className: cls["upload-
|
|
55
|
+
return /* @__PURE__ */ jsxs("div", { className: cls["upload-file-wrapper"], ref, children: [
|
|
56
56
|
/* @__PURE__ */ jsx(
|
|
57
57
|
"input",
|
|
58
58
|
{
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { TFilesDetail } from '../ListFiles/ListFiles';
|
|
2
|
+
import { imageTypesArr } from '../Uploader/constants';
|
|
3
|
+
import { TFileItem } from '../Uploader/Uploader';
|
|
4
|
+
|
|
5
|
+
export type TUploaderFiles = {
|
|
6
|
+
/**
|
|
7
|
+
* Массив разрешенных типов файлов для настройки валидации
|
|
8
|
+
* 'jpeg' | 'jpg' | 'png' | 'tiff' | 'gif' | 'doc' | 'xls' | 'pdf' |'docx' | 'txt'
|
|
9
|
+
*/
|
|
10
|
+
filesType: imageTypesArr[];
|
|
11
|
+
/**
|
|
12
|
+
* Наименование передаваемого массива файлов
|
|
13
|
+
*/
|
|
14
|
+
arrayName: string;
|
|
15
|
+
/**
|
|
16
|
+
* Максимальный размер файлов.
|
|
17
|
+
*/
|
|
18
|
+
maxSize: number;
|
|
19
|
+
/**
|
|
20
|
+
* Функция обратного вызова, передает параметры type и data,
|
|
21
|
+
* type 'add' в data передает массив файлов,
|
|
22
|
+
* type:'delete' в data передает id удаленного файла
|
|
23
|
+
*/
|
|
24
|
+
onChange: (j: TOnChangeFilesUpdate) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Передаваемые файлы.
|
|
27
|
+
*/
|
|
28
|
+
value?: TFilesDetail[];
|
|
29
|
+
/**
|
|
30
|
+
* Максимальное количество файлов.
|
|
31
|
+
*/
|
|
32
|
+
maxFiles: number;
|
|
33
|
+
};
|
|
34
|
+
export type TOnChangeFilesUpdate = {
|
|
35
|
+
type: string;
|
|
36
|
+
data: TFileItem[] | number;
|
|
37
|
+
};
|
|
38
|
+
export declare const UploaderFiles: import('react').ForwardRefExoticComponent<TUploaderFiles & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
|
+
import { forwardRef, useState, useEffect } from "react";
|
|
4
|
+
import { ListFiles } from "../ListFiles/ListFiles.js";
|
|
5
|
+
import { Uploader } from "../Uploader/Uploader.js";
|
|
6
|
+
import '../../assets/UploaderPhotos.css';const cls = {
|
|
7
|
+
"upload-file-wrapper": "_upload-file-wrapper_2zki8_2"
|
|
8
|
+
};
|
|
9
|
+
const UploaderFiles = forwardRef(
|
|
10
|
+
(props, ref) => {
|
|
11
|
+
const { filesType, arrayName, maxSize, onChange, value, maxFiles } = props;
|
|
12
|
+
const [files, setFiles] = useState(value || []);
|
|
13
|
+
const isMaxFilesReached = files.length >= maxFiles;
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (value) {
|
|
16
|
+
setFiles(value);
|
|
17
|
+
}
|
|
18
|
+
}, [value]);
|
|
19
|
+
const onChangeValue = (e) => {
|
|
20
|
+
const newFiles = [
|
|
21
|
+
...files,
|
|
22
|
+
...e.value.map((el) => {
|
|
23
|
+
var _a, _b, _c;
|
|
24
|
+
return {
|
|
25
|
+
id: el.id,
|
|
26
|
+
url: "",
|
|
27
|
+
size: (_a = el == null ? void 0 : el.file) == null ? void 0 : _a.size,
|
|
28
|
+
name: (_b = el == null ? void 0 : el.file) == null ? void 0 : _b.name,
|
|
29
|
+
type: (_c = el == null ? void 0 : el.file) == null ? void 0 : _c.type
|
|
30
|
+
};
|
|
31
|
+
})
|
|
32
|
+
];
|
|
33
|
+
setFiles(newFiles);
|
|
34
|
+
onChange == null ? void 0 : onChange({ type: "add", data: e.value });
|
|
35
|
+
};
|
|
36
|
+
const onDelete = (j) => {
|
|
37
|
+
setFiles(j.list);
|
|
38
|
+
if (j.deleteId) onChange == null ? void 0 : onChange({ type: "delete", data: j.deleteId });
|
|
39
|
+
};
|
|
40
|
+
return /* @__PURE__ */ jsxs(
|
|
41
|
+
"div",
|
|
42
|
+
{
|
|
43
|
+
className: classNames(
|
|
44
|
+
cls["upload-file-wrapper"],
|
|
45
|
+
isMaxFilesReached && cls.disabled
|
|
46
|
+
),
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsx(
|
|
49
|
+
Uploader,
|
|
50
|
+
{
|
|
51
|
+
filesType,
|
|
52
|
+
arrayName,
|
|
53
|
+
maxSize,
|
|
54
|
+
onChangeValue,
|
|
55
|
+
ref,
|
|
56
|
+
maxFiles,
|
|
57
|
+
isDisabled: isMaxFilesReached
|
|
58
|
+
}
|
|
59
|
+
),
|
|
60
|
+
/* @__PURE__ */ jsx(ListFiles, { value: files, onChange: onDelete })
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
export {
|
|
67
|
+
UploaderFiles
|
|
68
|
+
};
|
|
@@ -4,7 +4,7 @@ import { forwardRef, useState, useEffect } from "react";
|
|
|
4
4
|
import { ListPhotos } from "../ListPhotos/ListPhotos.js";
|
|
5
5
|
import { Uploader } from "../Uploader/Uploader.js";
|
|
6
6
|
import '../../assets/UploaderPhotos.css';const cls = {
|
|
7
|
-
"upload-
|
|
7
|
+
"upload-file-wrapper": "_upload-file-wrapper_2zki8_2"
|
|
8
8
|
};
|
|
9
9
|
const UploaderPhotos = forwardRef(
|
|
10
10
|
(props, ref) => {
|
|
@@ -43,7 +43,7 @@ const UploaderPhotos = forwardRef(
|
|
|
43
43
|
"div",
|
|
44
44
|
{
|
|
45
45
|
className: classNames(
|
|
46
|
-
cls["upload-
|
|
46
|
+
cls["upload-file-wrapper"],
|
|
47
47
|
isMaxFilesReached && cls.disabled
|
|
48
48
|
),
|
|
49
49
|
children: [
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function Size(size: number): string;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
function Size(size) {
|
|
2
|
+
if (!size) return "";
|
|
3
|
+
let i = -1;
|
|
4
|
+
const b = [" Kb", " Mb", " Gb", " Tb", "Pb", "Eb", "Zb", "Yb"];
|
|
5
|
+
const sistemParams = 1024;
|
|
6
|
+
const maxValue = 0.1;
|
|
7
|
+
do {
|
|
8
|
+
size /= sistemParams;
|
|
9
|
+
i += 1;
|
|
10
|
+
} while (size > sistemParams);
|
|
11
|
+
return Math.max(size, maxValue).toFixed(1) + b[i];
|
|
12
|
+
}
|
|
13
|
+
export {
|
|
14
|
+
Size as default
|
|
15
|
+
};
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as Date } from './formating/Date';
|
|
2
|
+
import { default as Size } from './formating/FileSize';
|
|
2
3
|
import { default as Month } from './formating/Month';
|
|
3
4
|
import { default as Number } from './formating/Numbers';
|
|
4
5
|
import { default as UUIDv4 } from './UUID4';
|
|
@@ -8,4 +9,5 @@ export declare const formating: {
|
|
|
8
9
|
Month: typeof Month;
|
|
9
10
|
Date: typeof Date;
|
|
10
11
|
UUIDv4: typeof UUIDv4;
|
|
12
|
+
Size: typeof Size;
|
|
11
13
|
};
|
package/dist/utils/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _Date from "./formating/Date.js";
|
|
2
|
+
import Size from "./formating/FileSize.js";
|
|
2
3
|
import Month from "./formating/Month.js";
|
|
3
4
|
import Numbers from "./formating/Numbers.js";
|
|
4
5
|
import UUIDv4 from "./UUID4.js";
|
|
@@ -6,7 +7,8 @@ const formating = {
|
|
|
6
7
|
Number: Numbers,
|
|
7
8
|
Month,
|
|
8
9
|
Date: _Date,
|
|
9
|
-
UUIDv4
|
|
10
|
+
UUIDv4,
|
|
11
|
+
Size
|
|
10
12
|
};
|
|
11
13
|
export {
|
|
12
14
|
formating
|