quickblox-react-ui-kit 0.4.5 → 0.5.0-beta.10

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

@@ -18,6 +18,7 @@ import { OpenDialogArcheType, TypeOpenDialog } from '../EditDialog/EditDialog';
 import { Loader, UserListItem } from '../../ui-components';
 import { SearchSvg } from '../../icons';
 import TextField from '../../ui-components/TextField/TextField';
+import cn from 'classnames';
 
 type SelectedItemInfo = { isChecked: boolean; userid: number };
 
@@ -35,14 +36,14 @@ type InviteMembersProps = {
   cancelInviteMembersHandler?: FunctionTypeVoidToVoid;
 };
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const InviteMembers: React.FC<InviteMembersProps> = ({
+const InviteMembers = ({
   typeDialog,
   idOwnerDialog,
   typeAddEditDialog,
   applyInviteUsersHandler,
   participants,
   cancelInviteMembersHandler,
-}) => {
+}: InviteMembersProps) => {
   const userPerPage = 12;
   const userViewModel: InviteMembersViewModel = useInviteMembersViewModel();
 
@@ -64,6 +65,10 @@ const InviteMembers: React.FC<InviteMembersProps> = ({
     userViewModel.getUsers(new Pagination(0, userPerPage));
   }, []);
 
+  useEffect( () => {
+    setCountSelected(getUsersForIncludeInDialog().length);
+  }, [Object.entries(selectedItems).length])
+
   const fetchMoreData = () => {
     if (userViewModel.pagination.hasNextPage()) {
       const newPagination = userViewModel.pagination;
@@ -133,13 +138,16 @@ const InviteMembers: React.FC<InviteMembersProps> = ({
 
   const handleUserListItemChange = (userId: number, value: boolean) => {
     setSelectedItems((prevState) => {
-      return {
-        ...prevState,
-        [userId]: { isChecked: value, userid: userId },
-      };
-    });
+      const updatedState = { ...prevState, [userId]: { isChecked: value, userid: userId } };
 
-    setCountSelected(getUsersForIncludeInDialog().length);
+      Object.keys(updatedState).forEach((key) => {
+        if (!updatedState[Number(key)].isChecked) {
+          delete updatedState[Number(key)];
+        }
+      });
+
+      return updatedState;
+    });
   };
 
   const [userNameForFilter, setUserNameForFilter] = useState<string>('');
@@ -187,7 +195,9 @@ const InviteMembers: React.FC<InviteMembersProps> = ({
                 setUserNameForFilter(value);
               }}
             />
-            <div className="container-invite-members--add-members-container--wrapper__inf">
+            <div className= {cn("container-invite-members--add-members-container--wrapper__inf", {
+              "disabled" : countSelectedItems < 1
+            })}>
               {countSelectedItems} selected
             </div>
             <div className="container-invite-members--add-members-container--wrapper__members">

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

@@ -19,13 +19,13 @@ type SingleUserWithCheckBoxProps = {
   keyValue?: number;
 };
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const SingleUserWithCheckBox: React.FC<SingleUserWithCheckBoxProps> = ({
+const SingleUserWithCheckBox = ({
   user,
   checkedHandler,
   isElementChecked,
   keyValue,
   isDisabled = false,
-}) => {
+}:SingleUserWithCheckBoxProps) => {
   const [isMobile] = useMobileLayout();
 
   function getChecked(index: number | undefined) {

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

@@ -6,7 +6,7 @@ type NotFoundContentProps = {
   message: string;
 };
 // eslint-disable-next-line react/function-component-definition
-const NotFoundContent: React.FC<NotFoundContentProps> = ({
+const NotFoundContent = ({
   message,
 }: NotFoundContentProps) => {
   return (

package/src/Presentation/Views/PreviewDialog/PreviewDialog.scss

@@ -206,6 +206,14 @@
   border-width: 0 0 1px 0;
 }
 
+.dialog-preview-container-context-menu {
+  svg {
+    fill: var(--tertiary-elements);
+    width: 24px;
+    height: 24px;
+  }
+}
+
 
 
 

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

@@ -57,7 +57,7 @@ type PreviewDialogsProps = {
   disableActions?: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
-const PreviewDialog: React.FC<PreviewDialogsProps> = ({
+const PreviewDialog = ({
   typeDialog,
   dialogViewModel,
   dialogAvatar,
@@ -177,7 +177,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
 
     if (
       messageParts &&
-      messageParts.length > 0 &&
+      messageParts.length > 0 && messageParts[3] &&
       messageParts[3].includes('image')
     ) {
       const fileUid: string = messageParts[2];
@@ -256,22 +256,22 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
     if (messageContentParts && messageContentParts.length > 0) {
       const [, fileName, , type] = messageContentParts;
 
-      if (type.includes('audio')) {
+      if (type && type.includes('audio')) {
         return (
           <PreviewFileMessage type="audio" name={trimFileName(fileName)} />
         );
       }
-      if (type.includes('video')) {
+      if (type && type.includes('video')) {
         return (
           <PreviewFileMessage type="video" name={trimFileName(fileName)} />
         );
       }
-      if (type.includes('image')) {
+      if (type && type.includes('image')) {
         return (
           <PreviewFileMessage name={trimFileName(fileName)} src={fileUrl} />
         );
       }
-      if (fileName.length > 0 && fileName.includes('.')) {
+      if (fileName && fileName.length > 0 && fileName.includes('.')) {
         return <PreviewFileMessage name={trimFileName(fileName)} />;
       }
 
@@ -318,7 +318,9 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
           }}
           placement="left"
         >
-          <MoreSvg />
+          <div className="dialog-preview-container-context-menu">
+            <MoreSvg className="" />
+          </div>
         </Dropdown>
       }
       onClick={() => {

package/src/Presentation/Views/YesNoQuestion/YesNoQuestion.tsx

@@ -12,7 +12,7 @@ type YesNoQuestionProps = {
   noActionCaption?: string;
 };
 // eslint-disable-next-line react/function-component-definition
-const YesNoQuestionComponent: React.FC<YesNoQuestionProps> = ({
+const YesNoQuestionComponent = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   messageText,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/Presentation/components/UI/Buttons/ActiveButton/ActiveButton.tsx

@@ -7,7 +7,7 @@ type ActiveButtonContainerProps = {
   clickAction?: FunctionTypeVoidToVoid;
 };
 // eslint-disable-next-line react/function-component-definition
-const ActiveButton: React.FC<ActiveButtonContainerProps> = ({
+const ActiveButton = ({
   content,
   touchAction,
   clickAction,

package/src/Presentation/components/UI/Buttons/MainBoundedButton/MainBoundedButton.tsx

@@ -9,12 +9,12 @@ type MainBoundedButtonProps = {
   touchHandler?: FunctionTypeVoidToVoid;
 };
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const MainBoundedButton: React.FC<MainBoundedButtonProps> = ({
+const MainBoundedButton = ({
   title,
   styleBox,
   clickHandler,
   touchHandler,
-}) => {
+}:MainBoundedButtonProps) => {
   return (
     <button
       type="button"

package/src/Presentation/components/UI/Buttons/MainButton/MainButton.css

@@ -13,15 +13,13 @@
   flex: none;
   order: 1;
   flex-grow: 0;
-
-  font-family: 'Roboto';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 0.4px;
 
-  color: var(--main-background);
+  color: var(--system);
 
   border: none;
   outline: none;
@@ -41,9 +39,8 @@
   flex: none;
   order: 1;
   flex-grow: 0;
-  font-family: 'Roboto';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 0.4px;
@@ -69,9 +66,8 @@
   order: 0;
   flex-grow: 0;
 
-  font-family: 'Roboto';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 0.4px;
@@ -90,9 +86,8 @@
   flex: none;
   order: 1;
   flex-grow: 0;
-  font-family: 'Roboto';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 500;
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 0.4px;

package/src/Presentation/components/UI/Buttons/MainButton/MainButton.tsx

@@ -23,7 +23,7 @@ type MainButtonProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const MainButton: React.FC<MainButtonProps> = ({
+const MainButton = ({
   title,
   typeButton = TypeButton.default,
   disabled = false,
@@ -31,7 +31,7 @@ const MainButton: React.FC<MainButtonProps> = ({
   styleBox,
   clickHandler,
   touchHandler,
-}) => {
+}:MainButtonProps) => {
   const StyleButton: Record<string, string> = {};
 
   StyleButton[TypeButton.default] = 'main-button';

package/src/Presentation/components/UI/Elements/SwitchButton/SwitchButton.tsx

@@ -10,13 +10,13 @@ type SwitchButtonProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const SwitchButton: React.FC<SwitchButtonProps> = ({
+const SwitchButton = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   disabled = false,
   styleBox,
   clickHandler,
   touchHandler,
-}) => {
+}:SwitchButtonProps) => {
   return (
     <div
       style={styleBox}

package/src/Presentation/components/UI/Placeholders/ErrorComponent/ErrorComponent.scss

@@ -4,8 +4,6 @@ $error-container-error-action-color: var(--main-elements);
 $error-container-divider: var(--divider);
 
 .error-container-wrapper {
-  // padding-top: 9px;
-  // padding-bottom: 12px;
   border: 1px solid $error-container-divider;
 }
 
@@ -17,7 +15,6 @@ $error-container-divider: var(--divider);
   margin: 0 auto;
   justify-content: center;
   align-items: center;
-  // border: 1px solid green;
   gap: 16px;
   background-color: $error-container-background-color;
   &__error-icon {
@@ -35,7 +32,6 @@ $error-container-divider: var(--divider);
   }
   &__error-message {
     min-height: 24px;
-    font-family: 'Roboto';
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
@@ -63,7 +59,6 @@ $error-container-divider: var(--divider);
     }
     &__refresh-text {
       color: $error-container-error-action-color;
-      font-family: 'Roboto';
       font-style: normal;
       font-weight: 700;
       font-size: 14px;

package/src/Presentation/components/UI/Placeholders/ErrorComponent/ErrorComponent.tsx

@@ -12,7 +12,7 @@ type ErrorComponentProps = {
   theme?: IconTheme;
 };
 // eslint-disable-next-line react/function-component-definition
-const ErrorComponent: React.FC<ErrorComponentProps> = ({
+const ErrorComponent = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   title,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss

@@ -2,8 +2,6 @@ $default-background-color: var(--main-elements);
 $default-width-icon: 44;
 $default-height-icon: 44;
 
-// #Loader{fill: $default-background-color};
-
 .loader {
   animation: spin 2s linear infinite;
   svg path {fill: $default-background-color};

package/src/Presentation/components/UI/svgs/ActiveSvg/ActiveSvg.tsx

@@ -9,7 +9,7 @@ type ActiveSvgContainerProps = {
   disabled?: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
-const ActiveSvg: React.FC<ActiveSvgContainerProps> = ({
+const ActiveSvg = ({
   content,
   onTouch,
   onClick,

package/src/Presentation/components/containers/ColumnContainer/ColumnContainer.scss

@@ -1,16 +1,7 @@
 // $column-container-width: 320px;
 $column-container-width: var(--max-width-dialog-list);
 .column-container{
-  width: $column-container-width; // artan changed 12.01.2024
-  // width: 100%;
+  width: $column-container-width;
   display: flex;
   flex-flow: column nowrap;
 }
-// artan changed 12.01.2024
-//@media only screen and (max-width: var(--min-width-screen-desktop)) {
-//  .column-container{
-//    width: 100%;
-//    display: flex;
-//    flex-flow: column nowrap;
-//  }
-//}

package/src/Presentation/components/containers/ColumnContainer/ColumnContainer.tsx

@@ -3,7 +3,7 @@ import './ColumnContainer.scss';
 import { ContainerProps } from '../../../layouts/LayoutCommonTypes';
 
 // eslint-disable-next-line react/function-component-definition
-const ColumnContainer: React.FC<ContainerProps> = ({
+const ColumnContainer = ({
   children,
   gapBetweenItem,
   maxWidth,

package/src/Presentation/components/containers/RowCenterContainer/RowCenterContainer.tsx

@@ -32,7 +32,7 @@ export type RowCenterContainerProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const RowCenterContainer: React.FC<RowCenterContainerProps> = ({
+const RowCenterContainer = ({
   LeftItem,
   CenterItem,
   RightItem,

package/src/Presentation/components/containers/RowLeftContainer/RowLeftContainer.tsx

@@ -32,7 +32,7 @@ export type RowLeftContainerProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const RowLeftContainer: React.FC<RowLeftContainerProps> = ({
+const RowLeftContainer = ({
   LeftItem,
   CenterItem,
   RightItem,

package/src/Presentation/components/containers/RowRightContainer/RowRightContainer.tsx

@@ -32,7 +32,7 @@ export type RowRightContainerProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const RowRightContainer: React.FC<RowRightContainerProps> = ({
+const RowRightContainer = ({
   LeftItem,
   CenterItem,
   RightItem,

package/src/Presentation/icons/actions/index.ts

@@ -1,26 +1,55 @@
-export { ReactComponent as AddContactSvg } from './add-contact.svg';
-export { ReactComponent as AddSvg } from './add.svg';
-export { ReactComponent as ArchiveSvg } from './archive.svg';
-export { ReactComponent as CopySvg } from './copy.svg';
-export { ReactComponent as DeleteSvg } from './delete.svg';
-export { ReactComponent as DownloadSvg } from './download.svg';
-export { ReactComponent as EditSvg } from './edit.svg';
-export { ReactComponent as EmojiSvg } from './emoji.svg';
-export { ReactComponent as ForwardFilledSvg } from './forward-filled.svg';
-export { ReactComponent as HunguplSvg } from './hungup.svg';
-export { ReactComponent as IncomeCallSvg } from './income-call.svg';
-export { ReactComponent as LikeSvg } from './like.svg';
-export { ReactComponent as NewChatSvg } from './new-chat.svg';
-export { ReactComponent as OutcomeCllSvg } from './outcome-call.svg';
-export { ReactComponent as PhoneFilledSvg } from './phone-filled.svg';
-export { ReactComponent as PhoneSvg } from './phone.svg';
-export { ReactComponent as Remove2Svg } from './remove-2.svg';
-export { ReactComponent as RemoveSvg } from './remove.svg';
-export { ReactComponent as RephraseSvg } from './rephrase.svg';
-export { ReactComponent as ReplyFilledSvg } from './reply-filled.svg';
-export { ReactComponent as SendSvg } from './send.svg';
-export { ReactComponent as ShareSvg } from './share.svg';
-export { ReactComponent as SwapCameraSvg } from './swap-camera.svg';
-export { ReactComponent as UnarchiveSvg } from './unarchive.svg';
-export { ReactComponent as VideoSvg } from './video.svg';
-export { ReactComponent as VoiceSvg } from './voice.svg';
+import AddContactSvg from './add-contact.svg?react';
+import AddSvg from './add.svg?react';
+import ArchiveSvg from './archive.svg?react';
+import CopySvg from './copy.svg?react';
+import DeleteSvg from './delete.svg?react';
+import DownloadSvg from './download.svg?react';
+import EditSvg from './edit.svg?react';
+import EmojiSvg from './emoji.svg?react';
+import ForwardFilledSvg from './forward-filled.svg?react';
+import HunguplSvg from './hungup.svg?react';
+import IncomeCallSvg from './income-call.svg?react';
+import LikeSvg from './like.svg?react';
+import NewChatSvg from './new-chat.svg?react';
+import OutcomeCllSvg from './outcome-call.svg?react';
+import PhoneFilledSvg from './phone-filled.svg?react';
+import PhoneSvg from './phone.svg?react';
+import Remove2Svg from './remove-2.svg?react';
+import RemoveSvg from './remove.svg?react';
+import RephraseSvg from './rephrase.svg?react';
+import ReplyFilledSvg from './reply-filled.svg?react';
+import SendSvg from './send.svg?react';
+import ShareSvg from './share.svg?react';
+import SwapCameraSvg from './swap-camera.svg?react';
+import UnarchiveSvg from './unarchive.svg?react';
+import VideoSvg from './video.svg?react';
+import VoiceSvg from './voice.svg?react';
+
+export {
+  AddContactSvg,
+  AddSvg,
+  ArchiveSvg,
+  CopySvg,
+  DeleteSvg,
+  DownloadSvg,
+  EditSvg,
+  EmojiSvg,
+  ForwardFilledSvg,
+  HunguplSvg,
+  IncomeCallSvg,
+  LikeSvg,
+  NewChatSvg,
+  OutcomeCllSvg,
+  PhoneFilledSvg,
+  PhoneSvg,
+  Remove2Svg,
+  RemoveSvg,
+  RephraseSvg,
+  ReplyFilledSvg,
+  SendSvg,
+  ShareSvg,
+  SwapCameraSvg,
+  UnarchiveSvg,
+  VideoSvg,
+  VoiceSvg
+};

package/src/Presentation/icons/contents/index.ts

@@ -1,13 +1,31 @@
-export { ReactComponent as BroadcastSvg } from './broadcast.svg';
-export { ReactComponent as ChatFilledSvg } from './chat-filled.svg';
-export { ReactComponent as ChatSvg } from './chat.svg';
-export { ReactComponent as ConferenceSvg } from './conference.svg';
-export { ReactComponent as ContactFilledSvg } from './contact-filled.svg';
-export { ReactComponent as ContactSvg } from './contact.svg';
-export { ReactComponent as GroupChatSvg } from './group-chat.svg';
-export { ReactComponent as NotificationsSvg } from './notifications.svg';
-export { ReactComponent as PrivateChatSvg } from './private-chat.svg';
-export { ReactComponent as PublicChannelSvg } from './public-channel.svg';
-export { ReactComponent as StreamFilledSvg } from './stream-filled.svg';
-export { ReactComponent as SteamSvg } from './stream.svg';
-export { ReactComponent as UserSvg } from './user.svg';
+import BroadcastSvg from './broadcast.svg?react';
+import ChatFilledSvg from './chat-filled.svg?react';
+import ChatSvg from './chat.svg?react';
+import ConferenceSvg from './conference.svg?react';
+import ContactFilledSvg from './contact-filled.svg?react';
+import ContactSvg from './contact.svg?react';
+import GroupChatSvg from './group-chat.svg?react';
+import NotificationsSvg from './notifications.svg?react';
+import PrivateChatSvg from './private-chat.svg?react';
+import PublicChannelSvg from './public-channel.svg?react';
+import StreamFilledSvg from './stream-filled.svg?react';
+import SteamSvg from './stream.svg?react';
+import UserSvg from './user.svg?react';
+
+console.log('UserSvg in contents/index.ts:', UserSvg); // <-- Добавляем отладку
+
+export {
+  BroadcastSvg,
+  ChatFilledSvg,
+  ChatSvg,
+  ConferenceSvg,
+  ContactFilledSvg,
+  ContactSvg,
+  GroupChatSvg,
+  NotificationsSvg,
+  PrivateChatSvg,
+  PublicChannelSvg,
+  StreamFilledSvg,
+  SteamSvg,
+  UserSvg
+};

package/src/Presentation/icons/index.ts

@@ -1,7 +1,23 @@
 export * from './actions';
-export * from './contents';
+// export * from './contents';
 export * from './media';
 export * from './moderation';
 export * from './navigation';
 export * from './status';
 export * from './toggle';
+
+export {
+  BroadcastSvg,
+  ChatFilledSvg,
+  ChatSvg,
+  ConferenceSvg,
+  ContactFilledSvg,
+  ContactSvg,
+  GroupChatSvg,
+  NotificationsSvg,
+  PrivateChatSvg,
+  PublicChannelSvg,
+  StreamFilledSvg,
+  SteamSvg,
+  UserSvg,
+} from './contents/index';

package/src/Presentation/icons/media/index.ts

@@ -1,12 +1,27 @@
-export { ReactComponent as AttachmentSvg } from './attachment.svg';
-export { ReactComponent as AudioFileSvg } from './audio-file.svg';
-export { ReactComponent as BrokenFileSvg } from './broken-file.svg';
-export { ReactComponent as CameraSvg } from './camera.svg';
-export { ReactComponent as FileSvg } from './file.svg';
-export { ReactComponent as GifFileSvg } from './gif-file.svg';
-export { ReactComponent as ImageFilledSvg } from './image-filled.svg';
-export { ReactComponent as ImageSvg } from './image.svg';
-export { ReactComponent as LinkSvg } from './link.svg';
-export { ReactComponent as LocationSvg } from './location.svg';
-export { ReactComponent as TextDocumentSvg } from './text-document.svg';
-export { ReactComponent as VideoFileSvg } from './video-file.svg';
+import AttachmentSvg from './attachment.svg?react';
+import AudioFileSvg from './audio-file.svg?react';
+import BrokenFileSvg from './broken-file.svg?react';
+import CameraSvg from './camera.svg?react';
+import FileSvg from './file.svg?react';
+import GifFileSvg from './gif-file.svg?react';
+import ImageFilledSvg from './image-filled.svg?react';
+import ImageSvg from './image.svg?react';
+import LinkSvg from './link.svg?react';
+import LocationSvg from './location.svg?react';
+import TextDocumentSvg from './text-document.svg?react';
+import VideoFileSvg from './video-file.svg?react';
+
+export {
+  AttachmentSvg,
+  AudioFileSvg,
+  BrokenFileSvg,
+  CameraSvg,
+  FileSvg,
+  GifFileSvg,
+  ImageFilledSvg,
+  ImageSvg,
+  LinkSvg,
+  LocationSvg,
+  TextDocumentSvg,
+  VideoFileSvg
+};

package/src/Presentation/icons/moderation/index.ts

@@ -1,5 +1,13 @@
-export { ReactComponent as AdminSvg } from './admin.svg';
-export { ReactComponent as BannedSvg } from './banned.svg';
-export { ReactComponent as ModerationsSvg } from './moderations.svg';
-export { ReactComponent as FreezeSvg } from './freeze.svg';
-export { ReactComponent as MutedSvg } from './muted.svg';
+import AdminSvg from './admin.svg?react';
+import BannedSvg from './banned.svg?react';
+import ModerationsSvg from './moderations.svg?react';
+import FreezeSvg from './freeze.svg?react';
+import MutedSvg from './muted.svg?react';
+
+export {
+  AdminSvg,
+  BannedSvg,
+  ModerationsSvg,
+  FreezeSvg,
+  MutedSvg
+};