@true-engineering/true-react-common-ui-kit 3.33.2 → 3.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.33.2",
+  "version": "3.34.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Toaster/Toaster.tsx

@@ -2,9 +2,9 @@ import { FC, ReactNode, useEffect } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
+  isEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
-  isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
@@ -13,13 +13,13 @@ import { Icon } from '../Icon';
 import { IconButton } from '../IconButton';
 import { DEFAULT_TIMEOUT } from './constants';
 import { IToasterType } from './types';
-import { useStyles, IToasterStyles } from './Toaster.styles';
+import { IToasterStyles, useStyles } from './Toaster.styles';
 
 export interface IToasterProps extends ICommonProps<IToasterStyles> {
   /** @default 'error' */
   type?: IToasterType;
-  title?: string;
-  text?: string;
+  title?: ReactNode;
+  text?: ReactNode;
   children?: ReactNode;
   /**
    * Время автоматического закрытия тостера в миллисекундах
@@ -35,16 +35,16 @@ export interface IToasterProps extends ICommonProps<IToasterStyles> {
 }
 
 export const Toaster: FC<IToasterProps> = ({
-  title,
   type = 'error',
+  title,
   text,
+  children,
   timeout = DEFAULT_TIMEOUT,
+  hasCloseButton = false,
+  shouldCloseOnClick = false,
   data,
   testId,
   tweakStyles,
-  hasCloseButton = false,
-  shouldCloseOnClick = false,
-  children,
   onClose,
   onTimeEnd,
 }) => {
@@ -56,27 +56,14 @@ export const Toaster: FC<IToasterProps> = ({
     currentComponentName: 'Toaster',
   });
 
-  let timeoutFunction: ReturnType<typeof setTimeout>;
-
   useEffect(() => {
-    if (onTimeEnd === undefined) {
+    if (!Number.isFinite(timeout) || isEmpty(onTimeEnd)) {
       return;
     }
 
-    const disappear = async () => {
-      await new Promise((resolve) => {
-        timeoutFunction = setTimeout(() => {
-          resolve(undefined);
-        }, timeout);
-      });
-
-      onTimeEnd();
-      clearTimeout(timeoutFunction);
-    };
-
-    disappear();
+    const timeoutId = window.setTimeout(() => onTimeEnd(), timeout);
 
-    return () => clearTimeout(timeoutFunction);
+    return () => window.clearTimeout(timeoutId);
   }, []);
 
   return (
@@ -90,8 +77,8 @@ export const Toaster: FC<IToasterProps> = ({
         <Icon type={`status-${type}`} />
       </div>
       <div>
-        {isStringNotEmpty(title) && <div className={classes.title}>{title}</div>}
-        {isStringNotEmpty(text) && <div className={classes.text}>{text}</div>}
+        {isReactNodeNotEmpty(title) && <div className={classes.title}>{title}</div>}
+        {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
         {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
       </div>
       {hasCloseButton && isNotEmpty(onClose) && (