@snack-uikit/toaster 0.8.13 → 0.8.14-preview-b5e187d5.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.
Files changed (102) hide show
  1. package/dist/cjs/components/ToastSystemEvent/styles.module.css +3 -3
  2. package/dist/cjs/components/ToastUpload/ToastUpload.d.ts +19 -0
  3. package/dist/cjs/components/ToastUpload/ToastUpload.js +109 -0
  4. package/dist/cjs/components/ToastUpload/ToastUploadToaster.d.ts +3 -0
  5. package/dist/cjs/components/ToastUpload/ToastUploadToaster.js +16 -0
  6. package/dist/cjs/components/ToastUpload/components/ButtonAction/ButtonAction.d.ts +3 -0
  7. package/dist/cjs/components/ToastUpload/components/ButtonAction/ButtonAction.js +32 -0
  8. package/dist/cjs/components/ToastUpload/components/ButtonAction/index.d.ts +1 -0
  9. package/dist/cjs/components/ToastUpload/components/ButtonAction/index.js +25 -0
  10. package/dist/cjs/components/ToastUpload/components/ButtonAction/styles.module.css +30 -0
  11. package/dist/cjs/components/ToastUpload/components/FileItem/FileItem.d.ts +5 -0
  12. package/dist/cjs/components/ToastUpload/components/FileItem/FileItem.js +81 -0
  13. package/dist/cjs/components/ToastUpload/components/FileItem/index.d.ts +1 -0
  14. package/dist/cjs/components/ToastUpload/components/FileItem/index.js +25 -0
  15. package/dist/cjs/components/ToastUpload/components/FileItem/styles.module.css +85 -0
  16. package/dist/cjs/components/ToastUpload/components/LoadingStatus/LoadingStatus.d.ts +6 -0
  17. package/dist/cjs/components/ToastUpload/components/LoadingStatus/LoadingStatus.js +42 -0
  18. package/dist/cjs/components/ToastUpload/components/LoadingStatus/index.d.ts +1 -0
  19. package/dist/cjs/components/ToastUpload/components/LoadingStatus/index.js +25 -0
  20. package/dist/cjs/components/ToastUpload/components/LoadingStatus/styles.module.css +3 -0
  21. package/dist/cjs/components/ToastUpload/constants.d.ts +16 -0
  22. package/dist/cjs/components/ToastUpload/constants.js +26 -0
  23. package/dist/cjs/components/ToastUpload/index.d.ts +1 -0
  24. package/dist/cjs/components/ToastUpload/index.js +25 -0
  25. package/dist/cjs/components/ToastUpload/styles.module.css +103 -0
  26. package/dist/cjs/components/ToastUpload/types.d.ts +31 -0
  27. package/dist/cjs/components/ToastUpload/types.js +5 -0
  28. package/dist/cjs/components/ToastUpload/utils/formatPercent.d.ts +1 -0
  29. package/dist/cjs/components/ToastUpload/utils/formatPercent.js +8 -0
  30. package/dist/cjs/components/ToastUpload/utils/index.d.ts +1 -0
  31. package/dist/cjs/components/ToastUpload/utils/index.js +25 -0
  32. package/dist/cjs/components/ToasterContainer/styles.module.css +9 -9
  33. package/dist/cjs/components/index.d.ts +1 -0
  34. package/dist/cjs/components/index.js +2 -1
  35. package/dist/cjs/constants.d.ts +2 -4
  36. package/dist/cjs/constants.js +10 -2
  37. package/dist/cjs/helperComponents/ButtonAction/styles.module.css +2 -2
  38. package/dist/cjs/helpers.js +41 -1
  39. package/dist/cjs/types.d.ts +9 -1
  40. package/dist/esm/components/ToastSystemEvent/styles.module.css +3 -3
  41. package/dist/esm/components/ToastUpload/ToastUpload.d.ts +19 -0
  42. package/dist/esm/components/ToastUpload/ToastUpload.js +34 -0
  43. package/dist/esm/components/ToastUpload/ToastUploadToaster.d.ts +3 -0
  44. package/dist/esm/components/ToastUpload/ToastUploadToaster.js +7 -0
  45. package/dist/esm/components/ToastUpload/components/ButtonAction/ButtonAction.d.ts +3 -0
  46. package/dist/esm/components/ToastUpload/components/ButtonAction/ButtonAction.js +18 -0
  47. package/dist/esm/components/ToastUpload/components/ButtonAction/index.d.ts +1 -0
  48. package/dist/esm/components/ToastUpload/components/ButtonAction/index.js +1 -0
  49. package/dist/esm/components/ToastUpload/components/ButtonAction/styles.module.css +30 -0
  50. package/dist/esm/components/ToastUpload/components/FileItem/FileItem.d.ts +5 -0
  51. package/dist/esm/components/ToastUpload/components/FileItem/FileItem.js +22 -0
  52. package/dist/esm/components/ToastUpload/components/FileItem/index.d.ts +1 -0
  53. package/dist/esm/components/ToastUpload/components/FileItem/index.js +1 -0
  54. package/dist/esm/components/ToastUpload/components/FileItem/styles.module.css +85 -0
  55. package/dist/esm/components/ToastUpload/components/LoadingStatus/LoadingStatus.d.ts +6 -0
  56. package/dist/esm/components/ToastUpload/components/LoadingStatus/LoadingStatus.js +16 -0
  57. package/dist/esm/components/ToastUpload/components/LoadingStatus/index.d.ts +1 -0
  58. package/dist/esm/components/ToastUpload/components/LoadingStatus/index.js +1 -0
  59. package/dist/esm/components/ToastUpload/components/LoadingStatus/styles.module.css +3 -0
  60. package/dist/esm/components/ToastUpload/constants.d.ts +16 -0
  61. package/dist/esm/components/ToastUpload/constants.js +20 -0
  62. package/dist/esm/components/ToastUpload/index.d.ts +1 -0
  63. package/dist/esm/components/ToastUpload/index.js +1 -0
  64. package/dist/esm/components/ToastUpload/styles.module.css +103 -0
  65. package/dist/esm/components/ToastUpload/types.d.ts +31 -0
  66. package/dist/esm/components/ToastUpload/types.js +1 -0
  67. package/dist/esm/components/ToastUpload/utils/formatPercent.d.ts +1 -0
  68. package/dist/esm/components/ToastUpload/utils/formatPercent.js +1 -0
  69. package/dist/esm/components/ToastUpload/utils/index.d.ts +1 -0
  70. package/dist/esm/components/ToastUpload/utils/index.js +1 -0
  71. package/dist/esm/components/ToasterContainer/styles.module.css +9 -9
  72. package/dist/esm/components/index.d.ts +1 -0
  73. package/dist/esm/components/index.js +1 -0
  74. package/dist/esm/constants.d.ts +2 -4
  75. package/dist/esm/constants.js +8 -0
  76. package/dist/esm/helperComponents/ButtonAction/styles.module.css +2 -2
  77. package/dist/esm/helpers.js +38 -0
  78. package/dist/esm/types.d.ts +9 -1
  79. package/package.json +6 -5
  80. package/src/components/ToastSystemEvent/styles.module.scss +2 -2
  81. package/src/components/ToastUpload/ToastUpload.tsx +108 -0
  82. package/src/components/ToastUpload/ToastUploadToaster.tsx +11 -0
  83. package/src/components/ToastUpload/components/ButtonAction/ButtonAction.tsx +10 -0
  84. package/src/components/ToastUpload/components/ButtonAction/index.ts +1 -0
  85. package/src/components/ToastUpload/components/ButtonAction/styles.module.scss +45 -0
  86. package/src/components/ToastUpload/components/FileItem/FileItem.tsx +74 -0
  87. package/src/components/ToastUpload/components/FileItem/index.ts +1 -0
  88. package/src/components/ToastUpload/components/FileItem/styles.module.scss +93 -0
  89. package/src/components/ToastUpload/components/LoadingStatus/LoadingStatus.tsx +38 -0
  90. package/src/components/ToastUpload/components/LoadingStatus/index.ts +1 -0
  91. package/src/components/ToastUpload/components/LoadingStatus/styles.module.scss +8 -0
  92. package/src/components/ToastUpload/constants.ts +26 -0
  93. package/src/components/ToastUpload/index.ts +1 -0
  94. package/src/components/ToastUpload/styles.module.scss +113 -0
  95. package/src/components/ToastUpload/types.ts +39 -0
  96. package/src/components/ToastUpload/utils/formatPercent.ts +1 -0
  97. package/src/components/ToastUpload/utils/index.ts +1 -0
  98. package/src/components/ToasterContainer/styles.module.scss +1 -1
  99. package/src/components/index.ts +1 -0
  100. package/src/constants.ts +9 -1
  101. package/src/helpers.tsx +35 -0
  102. package/src/types.ts +7 -1
@@ -4,8 +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);
7
+ width:var(--size-toaster-toast-system-event-button-neutral, 24px);
8
+ height:var(--size-toaster-toast-system-event-button-neutral, 24px);
9
9
  border-radius:var(--radius-toaster-toast-system-event-button, 8px);
10
10
  cursor:pointer;
11
11
  display:flex;
@@ -108,7 +108,7 @@
108
108
  display:flex;
109
109
  flex-direction:column;
110
110
  box-sizing:border-box;
111
- width:calc(var(--size-toaster-toast-system-event-container, 320px) - 2 * var(--space-toaster-system-event-padding, 8px));
111
+ width:calc(var(--size-toaster-toast-system-event-container, 320px) - 2 * var(--space-toaster-toast-system-event-padding, 8px));
112
112
  max-width:100%;
113
113
  }
114
114
  .container:hover .progress{
@@ -0,0 +1,19 @@
1
+ import { MouseEvent } from 'react';
2
+ import { ToastContentProps as RtToastContentProps } from 'react-toastify';
3
+ import { WithSupportProps } from '@snack-uikit/utils';
4
+ import { ToastUploadStatus, UploadActions, UploadItem } from './types';
5
+ export type ToastUploadProps = Partial<RtToastContentProps> & WithSupportProps<{
6
+ status: ToastUploadStatus;
7
+ title: string;
8
+ description: string;
9
+ totalProgressCounter: string;
10
+ totalProgressPercentage: number;
11
+ onCloseClick?(e: MouseEvent<HTMLButtonElement>, close?: () => void): void;
12
+ closable?: boolean;
13
+ className?: string;
14
+ items: UploadItem[];
15
+ collapsed: boolean;
16
+ onCollapsed: (collapsed: boolean) => void;
17
+ generalActions: UploadActions;
18
+ }>;
19
+ export declare function ToastUpload({ status, title, description, totalProgressCounter, totalProgressPercentage, closeToast, onCloseClick, closable, className, items, collapsed, onCollapsed, generalActions, ...rest }: ToastUploadProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,109 @@
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 icons_1 = require("@snack-uikit/icons");
23
+ const progress_bar_1 = require("@snack-uikit/progress-bar");
24
+ const utils_1 = require("@snack-uikit/utils");
25
+ const ButtonAction_1 = require("./components/ButtonAction");
26
+ const FileItem_1 = require("./components/FileItem");
27
+ const LoadingStatus_1 = require("./components/LoadingStatus");
28
+ const constants_1 = require("./constants");
29
+ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
30
+ const utils_2 = require("./utils");
31
+ function ToastUpload(_a) {
32
+ var {
33
+ status,
34
+ title,
35
+ description,
36
+ totalProgressCounter,
37
+ totalProgressPercentage,
38
+ closeToast,
39
+ onCloseClick,
40
+ closable,
41
+ className,
42
+ items,
43
+ collapsed,
44
+ onCollapsed,
45
+ generalActions
46
+ } = _a,
47
+ rest = __rest(_a, ["status", "title", "description", "totalProgressCounter", "totalProgressPercentage", "closeToast", "onCloseClick", "closable", "className", "items", "collapsed", "onCollapsed", "generalActions"]);
48
+ const handleCloseClick = e => {
49
+ e.stopPropagation();
50
+ onCloseClick ? onCloseClick(e, closeToast) : closeToast === null || closeToast === void 0 ? void 0 : closeToast();
51
+ };
52
+ const handleCollapseClick = e => {
53
+ e.stopPropagation();
54
+ onCollapsed(!collapsed);
55
+ };
56
+ return (0, jsx_runtime_1.jsxs)("div", Object.assign({
57
+ className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
58
+ }, (0, utils_1.extractSupportProps)(rest), {
59
+ children: [(0, jsx_runtime_1.jsxs)("div", {
60
+ className: styles_module_scss_1.default.titleLine,
61
+ children: [(0, jsx_runtime_1.jsxs)("div", {
62
+ className: styles_module_scss_1.default.titleLineBody,
63
+ children: [(0, jsx_runtime_1.jsx)("div", {
64
+ className: styles_module_scss_1.default.title,
65
+ children: title
66
+ }), (0, jsx_runtime_1.jsx)(ButtonAction_1.ButtonAction, {
67
+ onClick: handleCollapseClick,
68
+ children: collapsed ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {})
69
+ }), closable && (0, jsx_runtime_1.jsx)(ButtonAction_1.ButtonAction, {
70
+ type: 'button',
71
+ className: styles_module_scss_1.default.buttonAction,
72
+ onClick: handleCloseClick,
73
+ children: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {})
74
+ })]
75
+ }), (0, jsx_runtime_1.jsxs)("div", {
76
+ className: styles_module_scss_1.default.generalProgress,
77
+ children: [(0, jsx_runtime_1.jsxs)("div", {
78
+ className: styles_module_scss_1.default.statusLine,
79
+ children: [(0, jsx_runtime_1.jsxs)("div", {
80
+ className: styles_module_scss_1.default.statusWrap,
81
+ children: [(0, jsx_runtime_1.jsx)(LoadingStatus_1.LoadingStatus, {
82
+ status: status,
83
+ actions: generalActions
84
+ }), (0, jsx_runtime_1.jsx)("span", {
85
+ className: styles_module_scss_1.default.description,
86
+ "data-status": status,
87
+ children: description
88
+ })]
89
+ }), (0, jsx_runtime_1.jsx)("span", {
90
+ className: styles_module_scss_1.default.totalCounter,
91
+ children: totalProgressCounter
92
+ }), (0, jsx_runtime_1.jsx)("span", {
93
+ className: styles_module_scss_1.default.totalPercentage,
94
+ children: (0, utils_2.formatPercent)(totalProgressPercentage)
95
+ })]
96
+ }), !collapsed && (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, {
97
+ progress: totalProgressPercentage,
98
+ size: 'xs',
99
+ appearance: constants_1.progressBarAppearanceByStatus[status]
100
+ })]
101
+ })]
102
+ }), collapsed && (0, jsx_runtime_1.jsx)("div", {
103
+ className: styles_module_scss_1.default.list,
104
+ children: items.map(item => (0, jsx_runtime_1.jsx)(FileItem_1.FileItem, {
105
+ item: item
106
+ }, item.id))
107
+ })]
108
+ }));
109
+ }
@@ -0,0 +1,3 @@
1
+ import { ToastUploadProps } from './ToastUpload';
2
+ export type ToastUploadToasterProps = Omit<ToastUploadProps, 'collapsed' | 'onCollapsed'>;
3
+ export declare function ToastUploadForToaster(props: ToastUploadToasterProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.ToastUploadForToaster = ToastUploadForToaster;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const react_1 = require("react");
9
+ const ToastUpload_1 = require("./ToastUpload");
10
+ function ToastUploadForToaster(props) {
11
+ const [collapsed, setCollapsed] = (0, react_1.useState)(true);
12
+ return (0, jsx_runtime_1.jsx)(ToastUpload_1.ToastUpload, Object.assign({}, props, {
13
+ collapsed: collapsed,
14
+ onCollapsed: setCollapsed
15
+ }));
16
+ }
@@ -0,0 +1,3 @@
1
+ import { ButtonHTMLAttributes } from 'react';
2
+ export type ButtonActionProps = ButtonHTMLAttributes<HTMLButtonElement>;
3
+ export declare function ButtonAction({ className, ...props }: ButtonActionProps): import("react/jsx-runtime").JSX.Element;
@@ -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.ButtonAction = ButtonAction;
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 ButtonAction(_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.buttonAction, className)
31
+ }, props));
32
+ }
@@ -0,0 +1 @@
1
+ export * from './ButtonAction';
@@ -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("./ButtonAction"), exports);
@@ -0,0 +1,30 @@
1
+ .buttonAction{
2
+ cursor:pointer;
3
+ display:flex;
4
+ align-items:center;
5
+ justify-content:center;
6
+ box-sizing:border-box;
7
+ margin:0;
8
+ padding:0;
9
+ color:var(--sys-invert-neutral-text-light, #8b8e9b);
10
+ background-color:transparent;
11
+ border:none;
12
+ }
13
+ .buttonAction svg{
14
+ width:var(--size-icon-container-s, 24px) !important;
15
+ height:var(--size-icon-container-s, 24px) !important;
16
+ }
17
+ .buttonAction:hover{
18
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
19
+ }
20
+ .buttonAction:focus, .buttonAction:active{
21
+ color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
22
+ }
23
+ .buttonAction:focus-visible{
24
+ outline-width:var(--border-state-focus-s-border-width, 2px);
25
+ outline-style:var(--border-state-focus-s-border-style, solid);
26
+ outline-color:var(--border-state-focus-s-border-color, );
27
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
28
+ outline-color:var(--sys-available-on-complementary, #ffffff);
29
+ outline-offset:var(--spacing-state-focus-offset, 2px);
30
+ }
@@ -0,0 +1,5 @@
1
+ import { UploadItem } from '../../types';
2
+ export type FileItemProps = {
3
+ item: UploadItem;
4
+ };
5
+ export declare function FileItem({ item: initItem }: FileItemProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,81 @@
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.FileItem = FileItem;
12
+ const jsx_runtime_1 = require("react/jsx-runtime");
13
+ const react_1 = require("react");
14
+ const icons_1 = require("@snack-uikit/icons");
15
+ const link_1 = require("@snack-uikit/link");
16
+ const progress_bar_1 = require("@snack-uikit/progress-bar");
17
+ const constants_1 = require("../../constants");
18
+ const utils_1 = require("../../utils");
19
+ const ButtonAction_1 = require("../ButtonAction");
20
+ const LoadingStatus_1 = require("../LoadingStatus");
21
+ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
22
+ function FileItem(_ref) {
23
+ let {
24
+ item: initItem
25
+ } = _ref;
26
+ var _a, _b, _c;
27
+ const [item, setItem] = (0, react_1.useState)(initItem);
28
+ const showLink = item.status === 'uploaded' && item.link;
29
+ (0, react_1.useEffect)(() => {
30
+ if (initItem.subscribeToState) {
31
+ return initItem.subscribeToState(newValue => setItem(prev => Object.assign(Object.assign({}, prev), newValue)));
32
+ }
33
+ return setItem(initItem);
34
+ }, [initItem]);
35
+ return (0, jsx_runtime_1.jsxs)("div", {
36
+ className: styles_module_scss_1.default.fileLine,
37
+ children: [(0, jsx_runtime_1.jsxs)("div", {
38
+ className: styles_module_scss_1.default.fileHeadLine,
39
+ children: [(0, jsx_runtime_1.jsx)("span", {
40
+ className: styles_module_scss_1.default.fileTitle,
41
+ children: item.title
42
+ }), showLink && (0, jsx_runtime_1.jsx)(link_1.Link, {
43
+ text: (_a = item.link) === null || _a === void 0 ? void 0 : _a.text,
44
+ href: (_b = item.link) === null || _b === void 0 ? void 0 : _b.href,
45
+ size: 'm',
46
+ truncateVariant: 'end',
47
+ onClick: (_c = item.link) === null || _c === void 0 ? void 0 : _c.onClick,
48
+ appearance: 'invert-neutral',
49
+ textMode: 'accent'
50
+ }), !showLink && (0, jsx_runtime_1.jsx)(ButtonAction_1.ButtonAction, {
51
+ onClick: item.actions.onCancel,
52
+ children: (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {})
53
+ })]
54
+ }), (0, jsx_runtime_1.jsx)(progress_bar_1.ProgressBar, {
55
+ progress: item.progress,
56
+ size: 'xs',
57
+ appearance: constants_1.progressBarAppearanceByStatus[item.status]
58
+ }), (0, jsx_runtime_1.jsxs)("div", {
59
+ className: styles_module_scss_1.default.fileStatusLine,
60
+ children: [(0, jsx_runtime_1.jsxs)("div", {
61
+ className: styles_module_scss_1.default.fileStatusWrap,
62
+ children: [(0, jsx_runtime_1.jsx)(LoadingStatus_1.LoadingStatus, {
63
+ status: item.status,
64
+ actions: item.actions
65
+ }), (0, jsx_runtime_1.jsx)("span", {
66
+ className: styles_module_scss_1.default.fileStatusDescription,
67
+ "data-status": item.status,
68
+ children: item.statusLabel
69
+ })]
70
+ }), (0, jsx_runtime_1.jsx)("span", {
71
+ className: styles_module_scss_1.default.fileSize,
72
+ "data-status": item.status,
73
+ children: item.size
74
+ }), (0, jsx_runtime_1.jsx)("span", {
75
+ className: styles_module_scss_1.default.fileStatusPercentage,
76
+ "data-status": item.status,
77
+ children: (0, utils_1.formatPercent)(item.progress)
78
+ })]
79
+ })]
80
+ }, item.id);
81
+ }
@@ -0,0 +1 @@
1
+ export * from './FileItem';
@@ -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("./FileItem"), exports);
@@ -0,0 +1,85 @@
1
+ .fileLine{
2
+ padding-top:var(--space-toaster-toast-upload-file-line-vertical-padding, 4px);
3
+ padding-bottom:var(--space-toaster-toast-upload-file-line-vertical-padding, 4px);
4
+ display:flex;
5
+ flex-direction:column;
6
+ }
7
+
8
+ .fileHeadLine{
9
+ gap:var(--space-toaster-toast-upload-headline-gap, 16px);
10
+ min-height:var(--size-toaster-toast-upload-file-line-headline-height, 24px);
11
+ display:flex;
12
+ align-items:center;
13
+ }
14
+
15
+ .fileTitle{
16
+ font-family:var(--sans-body-s-font-family, SB Sans Interface);
17
+ font-weight:var(--sans-body-s-font-weight, Regular);
18
+ line-height:var(--sans-body-s-line-height, 16px);
19
+ font-size:var(--sans-body-s-font-size, 12px);
20
+ letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
21
+ paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
22
+ flex-grow:1;
23
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
24
+ }
25
+
26
+ .fileStatusLine{
27
+ gap:var(--space-toaster-toast-upload-status-line-gap, 8px);
28
+ display:flex;
29
+ align-items:center;
30
+ }
31
+
32
+ .fileStatusWrap{
33
+ gap:var(--space-toaster-toast-upload-status-wrap-gap, 4px);
34
+ display:flex;
35
+ flex-grow:1;
36
+ align-items:center;
37
+ }
38
+
39
+ .fileStatusDescription{
40
+ font-family:var(--sans-body-s-font-family, SB Sans Interface);
41
+ font-weight:var(--sans-body-s-font-weight, Regular);
42
+ line-height:var(--sans-body-s-line-height, 16px);
43
+ font-size:var(--sans-body-s-font-size, 12px);
44
+ letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
45
+ paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
46
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
47
+ }
48
+ .fileStatusDescription[data-status=loading]{
49
+ color:var(--sys-invert-neutral-text-disabled, #656774);
50
+ }
51
+ .fileStatusDescription[data-status=uploaded]{
52
+ color:var(--sys-invert-neutral-text-disabled, #656774);
53
+ }
54
+
55
+ .fileSize{
56
+ font-family:var(--sans-body-s-font-family, SB Sans Interface);
57
+ font-weight:var(--sans-body-s-font-weight, Regular);
58
+ line-height:var(--sans-body-s-line-height, 16px);
59
+ font-size:var(--sans-body-s-font-size, 12px);
60
+ letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
61
+ paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
62
+ color:var(--sys-invert-neutral-text-disabled, #656774);
63
+ }
64
+ .fileSize[data-status=loading]{
65
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
66
+ }
67
+ .fileSize[data-status=uploaded]{
68
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
69
+ }
70
+
71
+ .fileStatusPercentage{
72
+ font-family:var(--sans-body-s-font-family, SB Sans Interface);
73
+ font-weight:var(--sans-body-s-font-weight, Regular);
74
+ line-height:var(--sans-body-s-line-height, 16px);
75
+ font-size:var(--sans-body-s-font-size, 12px);
76
+ letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
77
+ paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
78
+ color:var(--sys-invert-neutral-text-disabled, #656774);
79
+ }
80
+ .fileStatusPercentage[data-status=loading]{
81
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
82
+ }
83
+ .fileStatusPercentage[data-status=uploaded]{
84
+ color:var(--sys-invert-neutral-text-main, #e6e8ef);
85
+ }
@@ -0,0 +1,6 @@
1
+ import { ToastUploadStatus, UploadActions } from '../../types';
2
+ export type LoadingStatusProps = {
3
+ status: ToastUploadStatus;
4
+ actions: UploadActions;
5
+ };
6
+ export declare function LoadingStatus({ status, actions }: LoadingStatusProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,42 @@
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.LoadingStatus = LoadingStatus;
12
+ const jsx_runtime_1 = require("react/jsx-runtime");
13
+ const icons_1 = require("@snack-uikit/icons");
14
+ const ButtonAction_1 = require("../ButtonAction");
15
+ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
16
+ function LoadingStatus(_ref) {
17
+ let {
18
+ status,
19
+ actions
20
+ } = _ref;
21
+ if (status === 'loading') {
22
+ return (0, jsx_runtime_1.jsx)(ButtonAction_1.ButtonAction, {
23
+ onClick: actions.onPause,
24
+ children: (0, jsx_runtime_1.jsx)(icons_1.PauseSVG, {})
25
+ });
26
+ }
27
+ if (status === 'pause') {
28
+ return (0, jsx_runtime_1.jsx)(ButtonAction_1.ButtonAction, {
29
+ onClick: actions.onContinue,
30
+ children: (0, jsx_runtime_1.jsx)(icons_1.PlaySVG, {})
31
+ });
32
+ }
33
+ if (status === 'uploaded') {
34
+ return (0, jsx_runtime_1.jsx)(icons_1.CheckFilledSVG, {
35
+ className: styles_module_scss_1.default.successIcon
36
+ });
37
+ }
38
+ return (0, jsx_runtime_1.jsx)(ButtonAction_1.ButtonAction, {
39
+ onClick: actions.onRetry,
40
+ children: (0, jsx_runtime_1.jsx)(icons_1.UpdateSVG, {})
41
+ });
42
+ }
@@ -0,0 +1 @@
1
+ export * from './LoadingStatus';
@@ -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("./LoadingStatus"), exports);
@@ -0,0 +1,3 @@
1
+ .successIcon{
2
+ color:var(--sys-green-accent-default, #57b762);
3
+ }
@@ -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 @@
1
+ export * from './ToastUpload';
@@ -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("./ToastUpload"), exports);