@snack-uikit/toaster 0.8.19 → 0.9.0
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/CHANGELOG.md +11 -0
- package/README.md +74 -37
- package/dist/cjs/components/ToastSystemEvent/styles.module.css +2 -3
- package/dist/cjs/components/ToastUpload/ToastUpload.d.ts +59 -0
- package/dist/cjs/components/ToastUpload/ToastUpload.js +132 -0
- package/dist/cjs/components/ToastUpload/constants.d.ts +16 -0
- package/dist/cjs/components/ToastUpload/constants.js +26 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.d.ts +3 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.js +32 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonIcon/index.d.ts +1 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonIcon/index.js +25 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonIcon/styles.module.css +32 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonTextNeutral/ButtonTextNeutral.d.ts +7 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonTextNeutral/ButtonTextNeutral.js +28 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonTextNeutral/index.d.ts +1 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonTextNeutral/index.js +25 -0
- package/dist/cjs/components/ToastUpload/helperComponents/ButtonTextNeutral/styles.module.css +33 -0
- package/dist/cjs/components/ToastUpload/helperComponents/FileItem/FileItem.d.ts +5 -0
- package/dist/cjs/components/ToastUpload/helperComponents/FileItem/FileItem.js +90 -0
- package/dist/cjs/components/ToastUpload/helperComponents/FileItem/index.d.ts +1 -0
- package/dist/cjs/components/ToastUpload/helperComponents/FileItem/index.js +25 -0
- package/dist/cjs/components/ToastUpload/helperComponents/FileItem/styles.module.css +87 -0
- package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.d.ts +7 -0
- package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.js +43 -0
- package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/index.d.ts +1 -0
- package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/index.js +25 -0
- package/dist/cjs/components/ToastUpload/helperComponents/LoadingStatus/styles.module.css +3 -0
- package/dist/cjs/components/ToastUpload/index.d.ts +1 -0
- package/dist/cjs/components/ToastUpload/index.js +25 -0
- package/dist/cjs/components/ToastUpload/styles.module.css +111 -0
- package/dist/cjs/components/ToastUpload/types.d.ts +55 -0
- package/dist/cjs/components/ToastUpload/types.js +5 -0
- package/dist/cjs/components/ToastUpload/utils/formatPercent.d.ts +1 -0
- package/dist/cjs/components/ToastUpload/utils/formatPercent.js +8 -0
- package/dist/cjs/components/ToastUpload/utils/index.d.ts +1 -0
- package/dist/cjs/components/ToastUpload/utils/index.js +25 -0
- package/dist/cjs/components/ToasterContainer/styles.module.css +9 -9
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/components/index.js +2 -1
- package/dist/cjs/constants.d.ts +2 -4
- package/dist/cjs/constants.js +10 -2
- package/dist/cjs/helperComponents/ButtonAction/styles.module.css +2 -2
- package/dist/cjs/helpers.d.ts +4 -0
- package/dist/cjs/helpers.js +42 -1
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/index.js +20 -0
- package/dist/cjs/testIds.d.ts +14 -0
- package/dist/cjs/testIds.js +16 -1
- package/dist/cjs/types.d.ts +9 -1
- package/dist/esm/components/ToastSystemEvent/styles.module.css +2 -3
- package/dist/esm/components/ToastUpload/ToastUpload.d.ts +59 -0
- package/dist/esm/components/ToastUpload/ToastUpload.js +45 -0
- package/dist/esm/components/ToastUpload/constants.d.ts +16 -0
- package/dist/esm/components/ToastUpload/constants.js +20 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.d.ts +3 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.js +18 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/index.d.ts +1 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/index.js +1 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/styles.module.css +32 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonTextNeutral/ButtonTextNeutral.d.ts +7 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonTextNeutral/ButtonTextNeutral.js +5 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonTextNeutral/index.d.ts +1 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonTextNeutral/index.js +1 -0
- package/dist/esm/components/ToastUpload/helperComponents/ButtonTextNeutral/styles.module.css +33 -0
- package/dist/esm/components/ToastUpload/helperComponents/FileItem/FileItem.d.ts +5 -0
- package/dist/esm/components/ToastUpload/helperComponents/FileItem/FileItem.js +26 -0
- package/dist/esm/components/ToastUpload/helperComponents/FileItem/index.d.ts +1 -0
- package/dist/esm/components/ToastUpload/helperComponents/FileItem/index.js +1 -0
- package/dist/esm/components/ToastUpload/helperComponents/FileItem/styles.module.css +87 -0
- package/dist/esm/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.d.ts +7 -0
- package/dist/esm/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.js +16 -0
- package/dist/esm/components/ToastUpload/helperComponents/LoadingStatus/index.d.ts +1 -0
- package/dist/esm/components/ToastUpload/helperComponents/LoadingStatus/index.js +1 -0
- package/dist/esm/components/ToastUpload/helperComponents/LoadingStatus/styles.module.css +3 -0
- package/dist/esm/components/ToastUpload/index.d.ts +1 -0
- package/dist/esm/components/ToastUpload/index.js +1 -0
- package/dist/esm/components/ToastUpload/styles.module.css +111 -0
- package/dist/esm/components/ToastUpload/types.d.ts +55 -0
- package/dist/esm/components/ToastUpload/types.js +1 -0
- package/dist/esm/components/ToastUpload/utils/formatPercent.d.ts +1 -0
- package/dist/esm/components/ToastUpload/utils/formatPercent.js +1 -0
- package/dist/esm/components/ToastUpload/utils/index.d.ts +1 -0
- package/dist/esm/components/ToastUpload/utils/index.js +1 -0
- package/dist/esm/components/ToasterContainer/styles.module.css +9 -9
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/constants.d.ts +2 -4
- package/dist/esm/constants.js +8 -0
- package/dist/esm/helperComponents/ButtonAction/styles.module.css +2 -2
- package/dist/esm/helpers.d.ts +4 -0
- package/dist/esm/helpers.js +42 -1
- package/dist/esm/index.d.ts +2 -2
- package/dist/esm/index.js +1 -0
- package/dist/esm/testIds.d.ts +14 -0
- package/dist/esm/testIds.js +15 -0
- package/dist/esm/types.d.ts +9 -1
- package/package.json +10 -6
- package/src/components/ToastSystemEvent/styles.module.scss +2 -2
- package/src/components/ToastUpload/ToastUpload.tsx +182 -0
- package/src/components/ToastUpload/constants.ts +26 -0
- package/src/components/ToastUpload/helperComponents/ButtonIcon/ButtonIcon.tsx +10 -0
- package/src/components/ToastUpload/helperComponents/ButtonIcon/index.ts +1 -0
- package/src/components/ToastUpload/helperComponents/ButtonIcon/styles.module.scss +43 -0
- package/src/components/ToastUpload/helperComponents/ButtonTextNeutral/ButtonTextNeutral.tsx +23 -0
- package/src/components/ToastUpload/helperComponents/ButtonTextNeutral/index.ts +1 -0
- package/src/components/ToastUpload/helperComponents/ButtonTextNeutral/styles.module.scss +38 -0
- package/src/components/ToastUpload/helperComponents/FileItem/FileItem.tsx +83 -0
- package/src/components/ToastUpload/helperComponents/FileItem/index.ts +1 -0
- package/src/components/ToastUpload/helperComponents/FileItem/styles.module.scss +91 -0
- package/src/components/ToastUpload/helperComponents/LoadingStatus/LoadingStatus.tsx +39 -0
- package/src/components/ToastUpload/helperComponents/LoadingStatus/index.ts +1 -0
- package/src/components/ToastUpload/helperComponents/LoadingStatus/styles.module.scss +5 -0
- package/src/components/ToastUpload/index.ts +1 -0
- package/src/components/ToastUpload/styles.module.scss +121 -0
- package/src/components/ToastUpload/types.ts +62 -0
- package/src/components/ToastUpload/utils/formatPercent.ts +1 -0
- package/src/components/ToastUpload/utils/index.ts +1 -0
- package/src/components/ToasterContainer/styles.module.scss +1 -1
- package/src/components/index.ts +1 -0
- package/src/constants.ts +9 -1
- package/src/helpers.tsx +38 -0
- package/src/index.ts +2 -10
- package/src/testIds.ts +17 -0
- package/src/types.ts +7 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 0.9.0 (2025-03-14)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **PDS-441:** toaster upload ([ed22769](https://github.com/cloud-ru-tech/snack-uikit/commit/ed2276990cb89314369a8f1fa9c808a17af04768))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## 0.8.19 (2025-03-13)
|
|
7
18
|
|
|
8
19
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# Toaster
|
|
2
2
|
|
|
3
3
|
## Installation
|
|
4
|
+
|
|
4
5
|
`npm i @snack-uikit/toaster`
|
|
5
6
|
|
|
6
7
|
[Changelog](./CHANGELOG.md)
|
|
@@ -21,8 +22,8 @@ toaster.userAction.update.error(userActionId, { label: 'new text' });
|
|
|
21
22
|
|
|
22
23
|
// update systemEvent toast
|
|
23
24
|
toaster.systemEvent.update.error(systemEventId, {
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
title: 'new text',
|
|
26
|
+
description: 'new description',
|
|
26
27
|
});
|
|
27
28
|
|
|
28
29
|
// dismiss userAction toast
|
|
@@ -30,45 +31,81 @@ toaster.userAction.dismiss(userActionId);
|
|
|
30
31
|
|
|
31
32
|
// dismiss systemEvent toast
|
|
32
33
|
toaster.systemEvent.dismiss(systemEventId);
|
|
33
|
-
```
|
|
34
34
|
|
|
35
|
+
// create or update upload toast
|
|
36
|
+
const uploadToastId = toaster.upload.startOrUpdate(options);
|
|
35
37
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
```typescript jsx
|
|
39
|
-
type ToastUserActionLink = {
|
|
40
|
-
text: string;
|
|
41
|
-
href: string;
|
|
42
|
-
onClick?(e: MouseEvent<HTMLAnchorElement>): void;
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
type ToastUserActionProps = Partial<RtToastContentProps> &
|
|
46
|
-
WithSupportProps<{
|
|
47
|
-
label: string;
|
|
48
|
-
link?: ToastUserActionLink;
|
|
49
|
-
className?: string;
|
|
50
|
-
onClose(id?: string | number): void;
|
|
51
|
-
}>;
|
|
52
|
-
|
|
53
|
-
type ToastSystemEventLink = {
|
|
54
|
-
text: string;
|
|
55
|
-
href: string;
|
|
56
|
-
onClick?(e: MouseEvent<HTMLAnchorElement>): void;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
type ToastSystemEventProps = Partial<RtToastContentProps> &
|
|
60
|
-
WithSupportProps<{
|
|
61
|
-
title: string;
|
|
62
|
-
description?: string;
|
|
63
|
-
link?: ToastSystemEventLink;
|
|
64
|
-
progressBar?: boolean;
|
|
65
|
-
closable?: boolean;
|
|
66
|
-
className?: string;
|
|
67
|
-
onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
|
|
68
|
-
onClose(id?: string | number): void;
|
|
69
|
-
}>;
|
|
38
|
+
// dismiss upload toast
|
|
39
|
+
toaster.upload.dismiss(uploadToastId);
|
|
70
40
|
```
|
|
71
41
|
|
|
42
|
+
[//]: DOCUMENTATION_SECTION_START
|
|
43
|
+
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
|
|
44
|
+
## dismissToast
|
|
45
|
+
``
|
|
46
|
+
|
|
47
|
+
Закрытие тостера
|
|
48
|
+
## ToastSystemEvent
|
|
49
|
+
### Props
|
|
50
|
+
| name | type | default value | description |
|
|
51
|
+
|------|------|---------------|-------------|
|
|
52
|
+
| title* | `string` | - | |
|
|
53
|
+
| closeToast | `() => void` | - | |
|
|
54
|
+
| toastProps | `ToastProps` | - | |
|
|
55
|
+
| data | `unknown` | - | |
|
|
56
|
+
| description | `string` | - | |
|
|
57
|
+
| appearance | enum ToastSystemEventAppearance: `"neutral"`, `"error"`, `"errorCritical"`, `"warning"`, `"success"` | neutral | |
|
|
58
|
+
| link | `ToastSystemEventLink` | - | |
|
|
59
|
+
| progressBar | `boolean` | true | |
|
|
60
|
+
| closable | `boolean` | true | |
|
|
61
|
+
| className | `string` | - | CSS-класс |
|
|
62
|
+
| onCloseClick | `(e: MouseEvent<HTMLButtonElement, MouseEvent>, close?: () => void) => void` | - | |
|
|
63
|
+
| action | `ButtonActionProps[]` | - | |
|
|
64
|
+
| loading | `never` | - | |
|
|
65
|
+
## ToastUserAction
|
|
66
|
+
### Props
|
|
67
|
+
| name | type | default value | description |
|
|
68
|
+
|------|------|---------------|-------------|
|
|
69
|
+
| label* | `string` | - | |
|
|
70
|
+
| closeToast | `() => void` | - | |
|
|
71
|
+
| toastProps | `ToastProps` | - | |
|
|
72
|
+
| data | `unknown` | - | |
|
|
73
|
+
| appearance | enum ToastUserActionAppearance: `"neutral"`, `"error"`, `"warning"`, `"success"` | neutral | |
|
|
74
|
+
| link | `ToastUserActionLink` | - | |
|
|
75
|
+
| className | `string` | - | CSS-класс |
|
|
76
|
+
| loading | `boolean` | - | |
|
|
77
|
+
## ToasterContainer
|
|
78
|
+
### Props
|
|
79
|
+
| name | type | default value | description |
|
|
80
|
+
|------|------|---------------|-------------|
|
|
81
|
+
| position | enum ToastPosition: `"top-right"`, `"top-center"`, `"top-left"`, `"bottom-right"`, `"bottom-center"`, `"bottom-left"` | bottom-right | |
|
|
82
|
+
| limit | `number` | 5 | |
|
|
83
|
+
| containerId | `Id` | - | |
|
|
84
|
+
| displayCloseAllButton | `boolean` | - | |
|
|
85
|
+
| type | enum ToasterType: `"system-event"`, `"user-action"`, `"upload"` | system-event | |
|
|
86
|
+
## ToastUpload
|
|
87
|
+
### Props
|
|
88
|
+
| name | type | default value | description |
|
|
89
|
+
|------|------|---------------|-------------|
|
|
90
|
+
| generalActions* | `Omit<UploadActions, "onCancel">` | - | Экшены для управления загрузкой |
|
|
91
|
+
| files* | `UploadItem[]` | - | Загружаемые элементы |
|
|
92
|
+
| progress* | `{ current: number; total: number; }` | - | Общий прогресс загрузки |
|
|
93
|
+
| description* | `string` | - | Описание статуса загрузки |
|
|
94
|
+
| status* | enum ToastUploadStatus: `"error"`, `"loading"`, `"pause"`, `"uploaded"`, `"errorUploaded"` | - | Общий статус загрузки |
|
|
95
|
+
| closeToast | `() => void` | - | |
|
|
96
|
+
| toastProps | `ToastProps` | - | |
|
|
97
|
+
| data | `unknown` | - | |
|
|
98
|
+
| title | `string` | - | Заголовок тостера |
|
|
99
|
+
| onCloseClick | `(e: MouseEvent<HTMLButtonElement, MouseEvent>, close?: () => void) => void` | - | Закрыть тостер |
|
|
100
|
+
| closable | `boolean` | - | Показывать кнопку закрытия тостера |
|
|
101
|
+
| className | `string` | - | CSS-класс контейнера |
|
|
102
|
+
| collapsed | `boolean` | - | Тостер свернут/развернут |
|
|
103
|
+
| onCollapsed | `(collapsed: boolean) => void` | - | Развернуть/свернуть тостер |
|
|
104
|
+
| cancelButton | `ButtonTextNeutralProps` | - | Отмена всей загрузки |
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
[//]: DOCUMENTATION_SECTION_END
|
|
108
|
+
|
|
72
109
|
### TODO
|
|
73
110
|
|
|
74
111
|
- Translations
|
|
@@ -4,9 +4,8 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.buttonClose{
|
|
7
|
-
width:var(--size-toaster-toast-system-event-button-close, 24px);
|
|
8
|
-
height:var(--size-toaster-toast-system-event-button-close, 24px);
|
|
9
7
|
border-radius:var(--radius-toaster-toast-system-event-button, 8px);
|
|
8
|
+
height:var(--size-toaster-toast-system-event-button-neutral, 24px);
|
|
10
9
|
cursor:pointer;
|
|
11
10
|
display:flex;
|
|
12
11
|
align-items:center;
|
|
@@ -108,7 +107,7 @@
|
|
|
108
107
|
display:flex;
|
|
109
108
|
flex-direction:column;
|
|
110
109
|
box-sizing:border-box;
|
|
111
|
-
width:calc(var(--size-toaster-toast-system-event-container, 320px) - 2 * var(--space-toaster-system-event-padding, 8px));
|
|
110
|
+
width:calc(var(--size-toaster-toast-system-event-container, 320px) - 2 * var(--space-toaster-toast-system-event-padding, 8px));
|
|
112
111
|
max-width:100%;
|
|
113
112
|
}
|
|
114
113
|
.container:hover .progress{
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
import { ToastContentProps as RtToastContentProps } from 'react-toastify';
|
|
3
|
+
import { WithSupportProps } from '@snack-uikit/utils';
|
|
4
|
+
import { ButtonTextNeutralProps } from './helperComponents/ButtonTextNeutral';
|
|
5
|
+
import { ToastUploadStatus, UploadActions, UploadItem } from './types';
|
|
6
|
+
export type ToastUploadProps = Partial<RtToastContentProps> & WithSupportProps<{
|
|
7
|
+
/**
|
|
8
|
+
* Общий статус загрузки
|
|
9
|
+
*/
|
|
10
|
+
status: ToastUploadStatus;
|
|
11
|
+
/**
|
|
12
|
+
* Заголовок тостера
|
|
13
|
+
*/
|
|
14
|
+
title?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Описание статуса загрузки
|
|
17
|
+
*/
|
|
18
|
+
description: string;
|
|
19
|
+
/**
|
|
20
|
+
* Общий прогресс загрузки
|
|
21
|
+
*/
|
|
22
|
+
progress: {
|
|
23
|
+
current: number;
|
|
24
|
+
total: number;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Закрыть тостер
|
|
28
|
+
*/
|
|
29
|
+
onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
|
|
30
|
+
/**
|
|
31
|
+
* Показывать кнопку закрытия тостера
|
|
32
|
+
*/
|
|
33
|
+
closable?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* CSS-класс контейнера
|
|
36
|
+
*/
|
|
37
|
+
className?: string;
|
|
38
|
+
/**
|
|
39
|
+
* Загружаемые элементы
|
|
40
|
+
*/
|
|
41
|
+
files: UploadItem[];
|
|
42
|
+
/**
|
|
43
|
+
* Тостер свернут/развернут
|
|
44
|
+
*/
|
|
45
|
+
collapsed?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Развернуть/свернуть тостер
|
|
48
|
+
*/
|
|
49
|
+
onCollapsed?: (collapsed: boolean) => void;
|
|
50
|
+
/**
|
|
51
|
+
* Экшены для управления загрузкой
|
|
52
|
+
*/
|
|
53
|
+
generalActions: Omit<UploadActions, 'onCancel'>;
|
|
54
|
+
/**
|
|
55
|
+
* Отмена всей загрузки
|
|
56
|
+
*/
|
|
57
|
+
cancelButton?: ButtonTextNeutralProps;
|
|
58
|
+
}>;
|
|
59
|
+
export declare function ToastUpload({ status, title, description, closeToast, onCloseClick, closable, className, files, collapsed, onCollapsed, generalActions, cancelButton, progress, ...rest }: ToastUploadProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
|
|
12
|
+
return mod && mod.__esModule ? mod : {
|
|
13
|
+
"default": mod
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
exports.ToastUpload = ToastUpload;
|
|
20
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
21
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
22
|
+
const uncontrollable_1 = require("uncontrollable");
|
|
23
|
+
const icons_1 = require("@snack-uikit/icons");
|
|
24
|
+
const locale_1 = require("@snack-uikit/locale");
|
|
25
|
+
const progress_bar_1 = require("@snack-uikit/progress-bar");
|
|
26
|
+
const scroll_1 = require("@snack-uikit/scroll");
|
|
27
|
+
const truncate_string_1 = require("@snack-uikit/truncate-string");
|
|
28
|
+
const utils_1 = require("@snack-uikit/utils");
|
|
29
|
+
const testIds_1 = require("../../testIds");
|
|
30
|
+
const constants_1 = require("./constants");
|
|
31
|
+
const ButtonIcon_1 = require("./helperComponents/ButtonIcon");
|
|
32
|
+
const ButtonTextNeutral_1 = require("./helperComponents/ButtonTextNeutral");
|
|
33
|
+
const FileItem_1 = require("./helperComponents/FileItem");
|
|
34
|
+
const LoadingStatus_1 = require("./helperComponents/LoadingStatus");
|
|
35
|
+
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
36
|
+
const utils_2 = require("./utils");
|
|
37
|
+
function ToastUpload(_a) {
|
|
38
|
+
var {
|
|
39
|
+
status,
|
|
40
|
+
title,
|
|
41
|
+
description,
|
|
42
|
+
closeToast,
|
|
43
|
+
onCloseClick,
|
|
44
|
+
closable,
|
|
45
|
+
className,
|
|
46
|
+
files,
|
|
47
|
+
collapsed,
|
|
48
|
+
onCollapsed,
|
|
49
|
+
generalActions,
|
|
50
|
+
cancelButton,
|
|
51
|
+
progress
|
|
52
|
+
} = _a,
|
|
53
|
+
rest = __rest(_a, ["status", "title", "description", "closeToast", "onCloseClick", "closable", "className", "files", "collapsed", "onCollapsed", "generalActions", "cancelButton", "progress"]);
|
|
54
|
+
const [isCollapsed, setIsCollapsed] = (0, uncontrollable_1.useUncontrolledProp)(collapsed, false, onCollapsed);
|
|
55
|
+
const {
|
|
56
|
+
t
|
|
57
|
+
} = (0, locale_1.useLocale)('ToastUpload');
|
|
58
|
+
const showingTitle = title || t(`title.${status}`);
|
|
59
|
+
const handleCloseClick = e => {
|
|
60
|
+
e.stopPropagation();
|
|
61
|
+
onCloseClick ? onCloseClick(e, closeToast) : closeToast === null || closeToast === void 0 ? void 0 : closeToast();
|
|
62
|
+
};
|
|
63
|
+
const handleCollapseClick = e => {
|
|
64
|
+
e.stopPropagation();
|
|
65
|
+
setIsCollapsed(!isCollapsed);
|
|
66
|
+
};
|
|
67
|
+
const progressPercent = Math.round(progress.current / progress.total * 100);
|
|
68
|
+
const isErrorUploaded = status === 'errorUploaded';
|
|
69
|
+
return (0, jsx_runtime_1.jsxs)("div", Object.assign({
|
|
70
|
+
className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
|
|
71
|
+
}, (0, utils_1.extractSupportProps)(rest), {
|
|
72
|
+
"data-collapsed": isCollapsed || undefined,
|
|
73
|
+
children: [(0, jsx_runtime_1.jsxs)("div", {
|
|
74
|
+
className: styles_module_scss_1.default.titleLine,
|
|
75
|
+
children: [(0, jsx_runtime_1.jsxs)("div", {
|
|
76
|
+
className: styles_module_scss_1.default.titleLineBody,
|
|
77
|
+
children: [(0, jsx_runtime_1.jsx)("div", {
|
|
78
|
+
className: styles_module_scss_1.default.title,
|
|
79
|
+
"data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.title,
|
|
80
|
+
children: showingTitle
|
|
81
|
+
}), cancelButton && (0, jsx_runtime_1.jsx)(ButtonTextNeutral_1.ButtonTextNeutral, Object.assign({}, cancelButton)), (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
|
|
82
|
+
onClick: handleCollapseClick,
|
|
83
|
+
"data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.collapseButton,
|
|
84
|
+
children: !isCollapsed ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {})
|
|
85
|
+
}), closable && (0, jsx_runtime_1.jsx)(ButtonIcon_1.ButtonIcon, {
|
|
86
|
+
className: styles_module_scss_1.default.buttonAction,
|
|
87
|
+
onClick: handleCloseClick,
|
|
88
|
+
"data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.close,
|
|
89
|
+
children: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {})
|
|
90
|
+
})]
|
|
91
|
+
}), (0, jsx_runtime_1.jsxs)("div", {
|
|
92
|
+
className: styles_module_scss_1.default.generalProgress,
|
|
93
|
+
children: [(0, jsx_runtime_1.jsxs)("div", {
|
|
94
|
+
className: styles_module_scss_1.default.statusLine,
|
|
95
|
+
children: [(0, jsx_runtime_1.jsxs)("div", {
|
|
96
|
+
className: styles_module_scss_1.default.statusWrap,
|
|
97
|
+
children: [(0, jsx_runtime_1.jsx)(LoadingStatus_1.LoadingStatus, {
|
|
98
|
+
status: status,
|
|
99
|
+
actions: generalActions
|
|
100
|
+
}), (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
|
|
101
|
+
className: styles_module_scss_1.default.description,
|
|
102
|
+
"data-status": status,
|
|
103
|
+
text: description,
|
|
104
|
+
"data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.description
|
|
105
|
+
})]
|
|
106
|
+
}), (0, jsx_runtime_1.jsx)("span", {
|
|
107
|
+
className: styles_module_scss_1.default.totalCounter,
|
|
108
|
+
"data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.counter,
|
|
109
|
+
children: `${progress.current}/${progress.total}`
|
|
110
|
+
}), (0, jsx_runtime_1.jsx)("span", {
|
|
111
|
+
className: styles_module_scss_1.default.totalPercentage,
|
|
112
|
+
"data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.progress,
|
|
113
|
+
children: (0, utils_2.formatPercent)(isErrorUploaded ? 0 : progressPercent)
|
|
114
|
+
})]
|
|
115
|
+
}), isCollapsed && (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, {
|
|
116
|
+
progress: isErrorUploaded ? 100 : progressPercent,
|
|
117
|
+
size: 'xs',
|
|
118
|
+
appearance: constants_1.progressBarAppearanceByStatus[status],
|
|
119
|
+
"data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.progressBar
|
|
120
|
+
})]
|
|
121
|
+
})]
|
|
122
|
+
}), (0, jsx_runtime_1.jsx)(scroll_1.Scroll, {
|
|
123
|
+
className: styles_module_scss_1.default.list,
|
|
124
|
+
size: 's',
|
|
125
|
+
"data-test-id": testIds_1.TOAST_UPLOAD_TEST_IDS.list,
|
|
126
|
+
barHideStrategy: 'never',
|
|
127
|
+
children: files.map(item => (0, jsx_runtime_1.jsx)(FileItem_1.FileItem, {
|
|
128
|
+
item: item
|
|
129
|
+
}, item.id || item.title))
|
|
130
|
+
})]
|
|
131
|
+
}));
|
|
132
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ProgressBarProps } from '@snack-uikit/progress-bar';
|
|
2
|
+
import { ToastUploadStatus } from './types';
|
|
3
|
+
export declare const TOAST_UPLOAD_STATUS: {
|
|
4
|
+
readonly Loading: "loading";
|
|
5
|
+
readonly Pause: "pause";
|
|
6
|
+
readonly Error: "error";
|
|
7
|
+
readonly Uploaded: "uploaded";
|
|
8
|
+
readonly ErrorUploaded: "errorUploaded";
|
|
9
|
+
};
|
|
10
|
+
export declare const TOAST_UPLOAD_ITEM_STATUS: {
|
|
11
|
+
readonly Loading: "loading";
|
|
12
|
+
readonly Pause: "pause";
|
|
13
|
+
readonly Error: "error";
|
|
14
|
+
readonly Uploaded: "uploaded";
|
|
15
|
+
};
|
|
16
|
+
export declare const progressBarAppearanceByStatus: Record<ToastUploadStatus, ProgressBarProps['appearance']>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.progressBarAppearanceByStatus = exports.TOAST_UPLOAD_ITEM_STATUS = exports.TOAST_UPLOAD_STATUS = void 0;
|
|
7
|
+
exports.TOAST_UPLOAD_STATUS = {
|
|
8
|
+
Loading: 'loading',
|
|
9
|
+
Pause: 'pause',
|
|
10
|
+
Error: 'error',
|
|
11
|
+
Uploaded: 'uploaded',
|
|
12
|
+
ErrorUploaded: 'errorUploaded'
|
|
13
|
+
};
|
|
14
|
+
exports.TOAST_UPLOAD_ITEM_STATUS = {
|
|
15
|
+
Loading: 'loading',
|
|
16
|
+
Pause: 'pause',
|
|
17
|
+
Error: 'error',
|
|
18
|
+
Uploaded: 'uploaded'
|
|
19
|
+
};
|
|
20
|
+
exports.progressBarAppearanceByStatus = {
|
|
21
|
+
pause: 'neutral',
|
|
22
|
+
loading: 'green',
|
|
23
|
+
uploaded: 'green',
|
|
24
|
+
errorUploaded: 'red',
|
|
25
|
+
error: 'red'
|
|
26
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
4
|
+
var t = {};
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
|
|
12
|
+
return mod && mod.__esModule ? mod : {
|
|
13
|
+
"default": mod
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
exports.ButtonIcon = ButtonIcon;
|
|
20
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
21
|
+
const classnames_1 = __importDefault(require("classnames"));
|
|
22
|
+
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
23
|
+
function ButtonIcon(_a) {
|
|
24
|
+
var {
|
|
25
|
+
className
|
|
26
|
+
} = _a,
|
|
27
|
+
props = __rest(_a, ["className"]);
|
|
28
|
+
return (0, jsx_runtime_1.jsx)("button", Object.assign({
|
|
29
|
+
type: 'button',
|
|
30
|
+
className: (0, classnames_1.default)(styles_module_scss_1.default.buttonIcon, className)
|
|
31
|
+
}, props));
|
|
32
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ButtonIcon';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return m[k];
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
Object.defineProperty(o, k2, desc);
|
|
15
|
+
} : function (o, m, k, k2) {
|
|
16
|
+
if (k2 === undefined) k2 = k;
|
|
17
|
+
o[k2] = m[k];
|
|
18
|
+
});
|
|
19
|
+
var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
|
|
20
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
+
};
|
|
22
|
+
Object.defineProperty(exports, "__esModule", {
|
|
23
|
+
value: true
|
|
24
|
+
});
|
|
25
|
+
__exportStar(require("./ButtonIcon"), exports);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.buttonIcon{
|
|
2
|
+
border-radius:var(--radius-toaster-toast-system-event-button, 8px);
|
|
3
|
+
height:var(--size-toaster-toast-system-event-button-neutral, 24px);
|
|
4
|
+
cursor:pointer;
|
|
5
|
+
display:flex;
|
|
6
|
+
align-items:center;
|
|
7
|
+
justify-content:center;
|
|
8
|
+
box-sizing:border-box;
|
|
9
|
+
margin:0;
|
|
10
|
+
padding:0;
|
|
11
|
+
color:var(--sys-invert-neutral-text-light, #8b8e9b);
|
|
12
|
+
background-color:transparent;
|
|
13
|
+
border:none;
|
|
14
|
+
}
|
|
15
|
+
.buttonIcon svg{
|
|
16
|
+
width:var(--size-icon-container-s, 24px) !important;
|
|
17
|
+
height:var(--size-icon-container-s, 24px) !important;
|
|
18
|
+
}
|
|
19
|
+
.buttonIcon:hover{
|
|
20
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
21
|
+
}
|
|
22
|
+
.buttonIcon:active{
|
|
23
|
+
color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
|
|
24
|
+
}
|
|
25
|
+
.buttonIcon:focus-visible{
|
|
26
|
+
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
27
|
+
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
28
|
+
outline-color:var(--border-state-focus-s-border-color, );
|
|
29
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
30
|
+
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
31
|
+
outline-offset:var(--spacing-state-focus-offset, 2px);
|
|
32
|
+
}
|
package/dist/cjs/components/ToastUpload/helperComponents/ButtonTextNeutral/ButtonTextNeutral.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
2
|
+
export type ButtonTextNeutralProps = {
|
|
3
|
+
label: string;
|
|
4
|
+
onClick(e: MouseEvent<HTMLButtonElement>): void;
|
|
5
|
+
critical?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare function ButtonTextNeutral({ label, onClick, critical }: ButtonTextNeutralProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/cjs/components/ToastUpload/helperComponents/ButtonTextNeutral/ButtonTextNeutral.js
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
|
|
4
|
+
return mod && mod.__esModule ? mod : {
|
|
5
|
+
"default": mod
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
Object.defineProperty(exports, "__esModule", {
|
|
9
|
+
value: true
|
|
10
|
+
});
|
|
11
|
+
exports.ButtonTextNeutral = ButtonTextNeutral;
|
|
12
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
13
|
+
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
14
|
+
function ButtonTextNeutral(_ref) {
|
|
15
|
+
let {
|
|
16
|
+
label,
|
|
17
|
+
onClick,
|
|
18
|
+
critical
|
|
19
|
+
} = _ref;
|
|
20
|
+
return (0, jsx_runtime_1.jsx)("button", {
|
|
21
|
+
type: 'button',
|
|
22
|
+
className: styles_module_scss_1.default.buttonTextNeutral,
|
|
23
|
+
onClick: onClick,
|
|
24
|
+
"aria-label": 'action',
|
|
25
|
+
"data-critical": critical || undefined,
|
|
26
|
+
children: label
|
|
27
|
+
});
|
|
28
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ButtonTextNeutral';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return m[k];
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
Object.defineProperty(o, k2, desc);
|
|
15
|
+
} : function (o, m, k, k2) {
|
|
16
|
+
if (k2 === undefined) k2 = k;
|
|
17
|
+
o[k2] = m[k];
|
|
18
|
+
});
|
|
19
|
+
var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
|
|
20
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
21
|
+
};
|
|
22
|
+
Object.defineProperty(exports, "__esModule", {
|
|
23
|
+
value: true
|
|
24
|
+
});
|
|
25
|
+
__exportStar(require("./ButtonTextNeutral"), exports);
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
.buttonTextNeutral{
|
|
2
|
+
border-radius:var(--radius-toaster-toast-system-event-button, 8px);
|
|
3
|
+
height:var(--size-toaster-toast-system-event-button-neutral, 24px);
|
|
4
|
+
font-family:var(--sans-body-m-font-family, SB Sans Interface);
|
|
5
|
+
font-weight:var(--sans-body-m-font-weight, Regular);
|
|
6
|
+
line-height:var(--sans-body-m-line-height, 20px);
|
|
7
|
+
font-size:var(--sans-body-m-font-size, 14px);
|
|
8
|
+
letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
|
|
9
|
+
paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
|
|
10
|
+
cursor:pointer;
|
|
11
|
+
display:flex;
|
|
12
|
+
align-items:center;
|
|
13
|
+
justify-content:center;
|
|
14
|
+
box-sizing:border-box;
|
|
15
|
+
margin:0;
|
|
16
|
+
padding:0;
|
|
17
|
+
color:var(--sys-invert-neutral-text-light, #8b8e9b);
|
|
18
|
+
background-color:transparent;
|
|
19
|
+
border:none;
|
|
20
|
+
}
|
|
21
|
+
.buttonTextNeutral:hover{
|
|
22
|
+
color:var(--sys-invert-neutral-text-main, #e6e8ef);
|
|
23
|
+
}
|
|
24
|
+
.buttonTextNeutral:active{
|
|
25
|
+
color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
|
|
26
|
+
}
|
|
27
|
+
.buttonTextNeutral:focus-visible{
|
|
28
|
+
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
29
|
+
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
30
|
+
outline-color:var(--border-state-focus-s-border-color, );
|
|
31
|
+
outline-color:var(--sys-available-on-complementary, #ffffff);
|
|
32
|
+
outline-offset:var(--spacing-state-focus-offset, 2px);
|
|
33
|
+
}
|