quickblox-react-ui-kit 0.3.0-beta.4 → 0.3.1-beta.1

package/src/Presentation/Views/DialogList/DialogList.tsx

@@ -81,6 +81,8 @@ const DialogList: React.FC<DialogsProps> = ({
   const [showSearchDialogs, setShowSearchDialogs] = React.useState(false);
   const [nameDialogForSearch, setNameDialogForSearch] = React.useState('');
   const [isMobile] = useMobileLayout();
+  const [pointerEventsValue, setPointerEventsValue] =
+    React.useState<string>('auto');
 
   useEffect(() => {
     dialogs.slice(0);
@@ -115,6 +117,27 @@ const DialogList: React.FC<DialogsProps> = ({
 
     setDialogsToView(dialogs);
   }, [dialogListViewModel?.dialogs, selectedDialog]);
+  let timeout: NodeJS.Timeout | number | undefined;
+
+  useEffect(() => {
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    // let timeout: NodeJS.Timeout | number | undefined;
+
+    if (dialogListViewModel && dialogListViewModel.loading) {
+      setPointerEventsValue('none');
+      timeout = setTimeout(() => {
+        setPointerEventsValue('auto');
+      }, 12000); // блокировать нажатие на 12 секунд
+    } else {
+      setPointerEventsValue('auto');
+    }
+  }, [dialogListViewModel.loading]);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const fetchMoreData = () => {
@@ -185,7 +208,7 @@ const DialogList: React.FC<DialogsProps> = ({
       let formattedValue = '';
 
       if (item.entity.lastMessage.dateSent) {
-        dateInt = parseInt(item.entity.lastMessage.dateSent, 10);
+        dateInt = item.entity.lastMessage.dateSent;
         if (Number.isNaN(dateInt)) {
           return formattedValue;
         }
@@ -219,6 +242,43 @@ const DialogList: React.FC<DialogsProps> = ({
       return AvatarComponent;
     };
 
+    /*
+import React, {useState, useEffect} from 'react';
+
+// предполагая, что dialogListViewModel определен в родительском компоненте и передан в этот компонент как проп
+const YourComponent = ({ dialogListViewModel }) => {
+  const [pointerEventsValue, setPointerEvents] = useState('auto');
+  
+  // поведение на 12 секунд
+  useEffect(() => {
+    let timeout;
+    if (dialogListViewModel && dialogListViewModel.loading) {
+      setPointerEvents('none');
+      timeout = setTimeout(() => {
+        setPointerEvents('auto');
+      }, 12000); // блокировать нажатие на 12 секунд
+    } 
+    
+    // поведение на отмену эффекта
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    }
+  }, [dialogListViewModel]);
+  
+  return (
+    <div 
+      style={{
+        pointerEventsValue: pointerEventsValue
+      }}
+    >
+    ... 
+    </div>
+  );
+}
+ */
+
     return (
       <div
         key={index}
@@ -243,7 +303,10 @@ const DialogList: React.FC<DialogsProps> = ({
           });
         }}
         style={{
-          pointerEvents: !dialogListViewModel?.loading ? 'auto' : 'none',
+          // pointerEvents: !dialogListViewModel?.loading ? 'auto' : 'none',
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          pointerEvents: pointerEventsValue || 'auto',
         }}
       >
         <PreviewDialog

package/src/Presentation/Views/EditDialog/EditDialog.tsx

@@ -14,6 +14,7 @@ import GroupChat from '../../components/UI/svgs/Icons/Contents/GroupChat';
 import PublicChannel from '../../components/UI/svgs/Icons/Contents/PublicChannel';
 import useQbInitializedDataContext from '../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { Button, TextField } from '../../ui-components';
+import { formatFileSize } from '../../../utils/formatFileSize';
 import './EditDialog.scss';
 
 export const TypeOpenDialog = {
@@ -47,9 +48,9 @@ const EditDialog: React.FC<EditDialogProps> = ({
   const maxUploadFileSize = currentContext.InitParams.maxFileSize;
   const minLengthNameDialog = 3;
   const maxLengthNameDialog = 60;
-  const errorMessageUploadMaxSize = `file size must be less than ${
-    maxUploadFileSize / 1024 / 1024
-  } Mb`;
+  const errorMessageUploadMaxSize = `The file should not exceed this size: ${formatFileSize(
+    maxUploadFileSize,
+  )}`;
 
   const [dialogName, setDialogName] = useState(nameDialog);
   const [fileUploadAvatar, setFileUploadAvatar] = useState<File | null>(null);

package/src/Presentation/Views/InviteMembers/InviteMembers.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import './InviteMembers.scss';
 import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
 import RowRightContainer from '../../components/containers/RowRightContainer/RowRightContainer';
@@ -143,6 +143,7 @@ const InviteMembers: React.FC<InviteMembersProps> = ({
   };
 
   const [userNameForFilter, setUserNameForFilter] = useState<string>('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (userNameForFilter.length > 2) {
@@ -150,6 +151,9 @@ const InviteMembers: React.FC<InviteMembersProps> = ({
 
       userViewModel.updateFilter(newFilter);
     }
+
+    setTimeout(() => inputRef.current?.focus(), 500);
+
     if (userNameForFilter.length === 0) {
       userViewModel.updateFilter('');
     }
@@ -159,6 +163,9 @@ const InviteMembers: React.FC<InviteMembersProps> = ({
     if (userNameForFilter.length > 2) {
       userViewModel.getUsers(new Pagination(0, userPerPage));
     }
+
+    setTimeout(() => inputRef.current?.focus(), 500);
+
     if (userNameForFilter.length === 0) {
       userViewModel.getUsers(new Pagination(0, userPerPage));
     }
@@ -170,6 +177,7 @@ const InviteMembers: React.FC<InviteMembersProps> = ({
         <div className="container-invite-members--add-members-container">
           <div className="container-invite-members--add-members-container--wrapper">
             <TextField
+              ref={inputRef}
               className="filtered-text-field"
               disabled={userViewModel.loading}
               placeholder="Search"

package/src/Presentation/Views/PreviewDialog/PreviewDialog.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import React, { useEffect } from 'react';
+import QB from 'quickblox/quickblox';
 import './PreviewDialog.scss';
 import { DialogType } from '../../../Domain/entity/DialogTypes';
 import PreviewDialogViewModel from './PreviewDialogViewModel';