@snack-uikit/toaster 0.8.19 → 0.9.0

package/src/components/ToastUpload/types.ts

@@ -0,0 +1,62 @@
+import { LinkProps } from '@snack-uikit/link';
+import { ProgressBarProps } from '@snack-uikit/progress-bar';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { TOAST_UPLOAD_ITEM_STATUS, TOAST_UPLOAD_STATUS } from './constants';
+
+export type ToastUploadStatus = ValueOf<typeof TOAST_UPLOAD_STATUS>;
+
+export type ToastUploadItemStatus = ValueOf<typeof TOAST_UPLOAD_ITEM_STATUS>;
+
+export type ToastUploadStateSubscription<T> = (subscription: (newValue: T) => void) => () => void;
+export type WithStateSubscription<T> = {
+  /**Позволяет подписываться на изменения процесса загрузки файла внутри конпонента,
+   * тем самым обновляет элементы не зависимо от всего списка
+   * (можно использовать для улучшения производительности из-за частых обновлений)
+   */
+  subscribeToState?: ToastUploadStateSubscription<Partial<T>>;
+} & T;
+
+export type ToastUploadItemLink = Pick<LinkProps, 'target' | 'href' | 'onClick' | 'text'>;
+
+export type UploadActions = {
+  onCancel?: () => void;
+  onPause?: () => void;
+  onRetry?: () => void;
+  onContinue?: () => void;
+};
+
+export type UploadItem = WithStateSubscription<{
+  /**
+   * Уникальный id элемента
+   */
+  id?: string;
+  /**
+   * Название элемента
+   */
+  title: string;
+  /**
+   * Статус загрузки
+   */
+  status: ToastUploadItemStatus;
+  /**
+   * Описание статуса загрузки
+   */
+  statusLabel: string;
+  /**
+   * Процент прогресса
+   */
+  progress: ProgressBarProps['progress'];
+  /**
+   * Отображаемый размер файла
+   */
+  formattedSize: string;
+  /**
+   * Экшены для управления загрузкой
+   */
+  actions: UploadActions;
+  /**
+   * Ссылка на файл
+   */
+  link?: ToastUploadItemLink;
+}>;

package/src/components/ToastUpload/utils/formatPercent.ts

@@ -0,0 +1 @@
+export const formatPercent = (value: number) => `${value}%`;

package/src/components/ToastUpload/utils/index.ts

@@ -0,0 +1 @@
+export * from './formatPercent';

package/src/components/ToasterContainer/styles.module.scss

@@ -61,7 +61,7 @@
 }
 
 .containerWithCloseAllButton {
-  margin-bottom: calc(styles-theme-variables.$size-toaster-button-close-column + styles-theme-variables.$space-toaster-system-event-gap);
+  margin-bottom: calc(styles-theme-variables.$size-toaster-button-close-column + styles-theme-variables.$space-toaster-toast-system-event-gap);
 }
 
 @media only screen and (max-width: 480px) {

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './ToastSystemEvent';
 export * from './ToastUserAction';
 export * from './ToasterContainer';
+export * from './ToastUpload';

package/src/constants.ts

@@ -4,6 +4,7 @@ import { ToasterType } from './types';
 export const TOASTER_TYPE = {
   SystemEvent: 'system-event',
   UserAction: 'user-action',
+  Upload: 'upload',
 } as const;
 
 export const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContainerProps> = {
@@ -19,11 +20,18 @@ export const TOASTER_CONTAINER_DEFAULT_PROPS: Record<ToasterType, ToasterContain
     displayCloseAllButton: false,
     type: TOASTER_TYPE.UserAction,
   },
+  [TOASTER_TYPE.Upload]: {
+    limit: 5,
+    position: 'bottom-right',
+    displayCloseAllButton: true,
+    type: TOASTER_TYPE.SystemEvent,
+  },
 };
 
-export const AUTO_CLOSE_TIME = {
+export const AUTO_CLOSE_TIME: Record<ToasterType, number | false> = {
   [TOASTER_TYPE.SystemEvent]: 5000,
   [TOASTER_TYPE.UserAction]: 2000,
+  [TOASTER_TYPE.Upload]: false,
 };
 
 export const TOASTER_ROOT_ID = 'toaster-root';

package/src/helpers.tsx

@@ -9,6 +9,8 @@ import {
   ToasterContainerProps,
   ToastSystemEvent,
   ToastSystemEventProps,
+  ToastUpload,
+  ToastUploadProps,
   ToastUserAction,
   ToastUserActionProps,
 } from './components';
@@ -28,6 +30,7 @@ import {
   ToasterType,
   ToastOptions,
   UpdateToast,
+  UploadOptions,
   UserActionOptions,
 } from './types';
 
@@ -97,6 +100,8 @@ function getToastComponent<T extends keyof ToasterPropsMap>({
       return <ToastUserAction {...(toasterProps as ToastUserActionProps)} />;
     case TOASTER_TYPE.SystemEvent:
       return <ToastSystemEvent {...(toasterProps as ToastSystemEventProps)} />;
+    case TOASTER_TYPE.Upload:
+      return <ToastUpload {...(toasterProps as ToastUploadProps)} />;
     default:
       return undefined;
   }
@@ -150,6 +155,10 @@ export const updateToast: UpdateToast = (id, { type, toasterProps, toastOptions,
   });
 };
 
+/**
+ * Закрытие тостера
+ * @function
+ */
 export const dismissToast = (params?: Id) => toast.dismiss(params);
 export const isToastActive = toast.isActive;
 
@@ -331,7 +340,36 @@ const systemEvent = {
   },
 };
 
+const upload = {
+  startOrUpdate({ id, ...options }: UploadOptions) {
+    const toastId = id || TOASTER_TYPE.Upload;
+
+    if (toast.isActive(toastId)) {
+      return updateToast(toastId, {
+        type: TOASTER_TYPE.Upload,
+        toasterProps: { ...options },
+      });
+    }
+
+    return openToast({
+      type: TOASTER_TYPE.Upload,
+      toasterProps: {
+        ...options,
+      },
+      toastOptions: {
+        id: toastId,
+        onClose: options.onClose,
+      },
+    });
+  },
+
+  dismiss(id?: ToasterId) {
+    return toast.dismiss(id);
+  },
+};
+
 export const toaster: Toaster = {
   userAction,
   systemEvent,
+  upload,
 };

package/src/index.ts

@@ -1,12 +1,4 @@
 export { toaster, openToast, updateToast, dismissToast } from './helpers';
-export type { ToastSystemEventProps, ToastUserActionProps, ToasterContainerProps } from './components';
-export type {
-  Toaster,
-  UpdateToast,
-  OpenToast,
-  UserActionOptions,
-  SystemEventOptions,
-  ToasterId,
-  ToastOptions,
-} from './types';
+export * from './components';
+export type * from './types';
 export { TOASTER_TYPE } from './constants';

package/src/testIds.ts

@@ -21,3 +21,20 @@ export const TOAST_USER_ACTION_TEST_IDS = {
   loader: `${TOAST_USER_ACTION_TEST_ID}__loader`,
   link: `${TOAST_USER_ACTION_TEST_ID}__link`,
 };
+
+const TOAST_UPLOAD_TEST_ID = 'toast-upload';
+
+export const TOAST_UPLOAD_TEST_IDS = {
+  main: TOAST_UPLOAD_TEST_ID,
+  close: `${TOAST_UPLOAD_TEST_ID}__close`,
+  title: `${TOAST_UPLOAD_TEST_ID}__title`,
+  description: `${TOAST_UPLOAD_TEST_ID}__description`,
+  counter: `${TOAST_UPLOAD_TEST_ID}__counter`,
+  progress: `${TOAST_UPLOAD_TEST_ID}__progress`,
+  list: `${TOAST_UPLOAD_TEST_ID}__list`,
+  collapseButton: `${TOAST_UPLOAD_TEST_ID}__collapseButton`,
+  progressBar: `${TOAST_UPLOAD_TEST_ID}__progressBar`,
+  uploadItem: `${TOAST_UPLOAD_TEST_ID}__uploadItem`,
+  uploadItemLink: `${TOAST_UPLOAD_TEST_ID}__uploadItemLink`,
+  uploadItemCancel: `${TOAST_UPLOAD_TEST_ID}__uploadItemCancel`,
+};

package/src/types.ts

@@ -2,7 +2,7 @@ import { Id, ToastOptions as RtToastOptions } from 'react-toastify';
 
 import { ValueOf } from '@snack-uikit/utils';
 
-import { ToasterContainerProps, ToastSystemEventProps, ToastUserActionProps } from './components';
+import { ToasterContainerProps, ToastSystemEventProps, ToastUploadProps, ToastUserActionProps } from './components';
 import { TOASTER_TYPE } from './constants';
 
 export type ToasterId = Id;
@@ -19,6 +19,7 @@ export type ToasterType = ValueOf<typeof TOASTER_TYPE>;
 export type ToasterPropsMap = {
   [TOASTER_TYPE.UserAction]: ToastUserActionProps;
   [TOASTER_TYPE.SystemEvent]: ToastSystemEventProps;
+  [TOASTER_TYPE.Upload]: ToastUploadProps & { loading?: boolean };
 };
 
 type OpenNotificationProps<T extends keyof ToasterPropsMap> = {
@@ -49,6 +50,7 @@ export type UpdateToast = <T extends keyof ToasterPropsMap>(
 
 export type UserActionOptions = Omit<ToastUserActionProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
 export type SystemEventOptions = Omit<ToastSystemEventProps, 'appearance'> & Pick<ToastOptions, 'id' | 'onClose'>;
+export type UploadOptions = ToastUploadProps & Pick<ToastOptions, 'id' | 'onClose'>;
 
 export type Toaster = {
   userAction: {
@@ -79,4 +81,8 @@ export type Toaster = {
     };
     dismiss(id?: ToasterId): void;
   };
+  upload: {
+    startOrUpdate(options: UploadOptions): void;
+    dismiss(id?: ToasterId): void;
+  };
 };