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

package/src/Presentation/Views/Dialog/DialogHeader/DialogInfoIcon/DialogInfoIcon.tsx

@@ -9,10 +9,7 @@ type RenderRightActionsProps = {
   onClickInfo: FunctionTypeVoidToVoid;
   theme?: UiKitTheme;
 };
-const DialogInfoIcon: React.FC<
-  RenderRightActionsProps
-  // eslint-disable-next-line react/function-component-definition
-> = ({
+const DialogInfoIcon = ({
   onClickInfo,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,

package/src/Presentation/Views/Dialog/DropDownMenu/DropDownMenu.tsx

@@ -67,7 +67,7 @@ type DropDownMenuProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const DropDownMenu: React.FC<DropDownMenuProps> = ({
+export const DropDownMenu = ({
   items,
 }: // itemsAI,
 DropDownMenuProps) => {

package/src/Presentation/Views/Dialog/DropDownMenu/ItemDropDownMenu/ItemDropDownMenu.tsx

@@ -10,7 +10,7 @@ type ItemDropDownMenuProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const ItemDropDownMenu: React.FC<ItemDropDownMenuProps> = ({
+export const ItemDropDownMenu = ({
   item,
   icon,
   touchAction,

package/src/Presentation/Views/Dialog/ErrorToast/ErrorToast.tsx

@@ -7,7 +7,7 @@ type ErrorToastProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const ErrorToast: React.FC<ErrorToastProps> = ({
+export const ErrorToast = ({
   messageText,
 }: // displayTimeout,
 ErrorToastProps) => {

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogListItem/DialogListItem.scss

@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: flex-start;
   flex-shrink: 0;
-  width: 270px;
+  //width: 270px;
   position: relative;
 
 }
@@ -20,22 +20,15 @@
   width: 40px;
   height: 40px;
   position: relative;
-}
-.dialog-item-element-avatar-rectangle {
-  width: 40px;
-  height: 40px;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-}
-.dialog-item-element-avatar-ellipse {
-  background: var(--disabled-elements, #bcc1c5);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
   border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  position: absolute;
-  left: 0px;
-  top: 0px;
+  background-color: var(--disabled-elements);
+  color: var(--secondary-text);
+
 }
 .contents-user {
   position: absolute;
@@ -52,20 +45,15 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 200px;
+  @media (max-width: 767px) {
+    width: 120px;
+  }
 }
-.dialog-item-element-checkbox {
-  border-radius: 4px;
-  padding: 4px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  position: relative;
-}
+
 .toggle-check-on {
   align-self: stretch;
   flex: 1;

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogListItem/DialogListItem.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import './DialogListItem.scss';
 import { FunctionTypeStringToVoid } from '../../../../../../CommonTypes/BaseViewModel';
 import { DialogType } from '../../../../../../Domain/entity/DialogTypes';
 import User from '../../../../../components/UI/svgs/Icons/Contents/User';
@@ -7,6 +6,8 @@ import GroupChat from '../../../../../components/UI/svgs/Icons/Contents/GroupCha
 import PublicChannel from '../../../../../components/UI/svgs/Icons/Contents/PublicChannel';
 import UserAvatar from '../../../../EditDialog/UserAvatar/UserAvatar';
 import { IconTheme } from '../../../../../components/UI/svgs/Icons/IconsCommonTypes';
+import CheckBox from '../../../../../ui-components/CheckBox/CheckBox';
+import './DialogListItem.scss';
 
 type DialogListItemProps = {
   name: string;
@@ -64,7 +65,7 @@ const renderAvatar = (urlAvatar: string, typeDialog: DialogType) => {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const DialogListItem: React.FC<DialogListItemProps> = ({
+const DialogListItem = ({
   name,
   avatar,
   typeDialog,
@@ -74,21 +75,11 @@ const DialogListItem: React.FC<DialogListItemProps> = ({
 }: DialogListItemProps) => {
   return (
     <div className="dialog-item-element">
-      <div className="item-element-avatar">
-        <div className="item-element-avatar-rectangle" />
-        <div className="item-element-avatar-ellipse" />
+      <div className="dialog-item-element-avatar">
         {renderAvatar(avatar, typeDialog)}
       </div>
       <div className="dialog-item-element-subtitle">{name}</div>
-      <div className="dialog-item-element-checkbox">
-        <input
-          type="checkbox"
-          checked={checked}
-          onChange={() => {
-            onSelect(id);
-          }}
-        />
-      </div>
+      <CheckBox onChange={() => onSelect(id)} disabled={false} checked={checked} />
     </div>
   );
 };

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogsWithSearch.tsx

@@ -17,7 +17,7 @@ type DialogsWithSearchProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const DialogsWithSearch: React.FC<DialogsWithSearchProps> = ({
+const DialogsWithSearch = ({
   dialogs,
   currentDialog,
   selectedDialogs,

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.tsx

@@ -9,7 +9,7 @@ type SearchComponentProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const SearchComponent: React.FC<SearchComponentProps> = ({
+const SearchComponent = ({
   onChange,
 }: SearchComponentProps) => {
   const [stringForFilter, setStringForFilter] = useState('');

package/src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessageFlow.scss

@@ -33,7 +33,7 @@
 }
 .active-tab-button {
   border-style: solid;
-  border-color: var(--light-theme-mainelements, #3978fc);
+  border-color: var(--main-elements, #3978fc);
   border-width: 0px 0px 3px 0px;
   padding: 8px 16px 8px 16px;
   display: flex;
@@ -46,7 +46,7 @@
   position: relative;
 }
 .active-tab-button-content {
-  color: var(--light-theme-mainelements, #3978fc);
+  color: var(--main-elements, #3978fc);
   text-align: left;
   font: var(--button-default, 700 14px/16px "Roboto", sans-serif);
   position: relative;
@@ -64,7 +64,7 @@
   cursor: pointer;
 }
 .no-active-tab-button-content {
-  color: var(--light-theme-tertiaryelements, #636d78);
+  color: var(--tertiary-elements, #636d78);
   text-align: left;
   font: var(--button-default, 700 14px/16px "Roboto", sans-serif);
   position: relative;
@@ -76,10 +76,10 @@
   overflow: visible;
 }
 .forward-message-flow-message-input {
-  background: var(--light-theme-mainbackground, #ffffff);
+  background: var(--main-background);
   display: flex;
   flex-direction: column;
-  gap: 0px;
+  gap: 0;
   align-items: flex-start;
   justify-content: center;
   align-self: stretch;
@@ -108,7 +108,7 @@
 .caption {
   display: flex;
   flex-direction: row;
-  gap: 0px;
+  gap: 0;
   align-items: flex-start;
   justify-content: flex-start;
   flex-shrink: 0;
@@ -127,7 +127,7 @@
   border-radius: 4px;
   display: flex;
   flex-direction: row;
-  gap: 0px;
+  gap: 0;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
@@ -142,13 +142,13 @@
   overflow: visible;
 }
 .forwarded-from-name {
-  color: var(--light-theme-tertiaryelements, #636d78);
+  color: var(--tertiary-elements, #636d78);
   text-align: left;
   font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
   position: relative;
 }
 .i-like-you-new-presentation-style-it-s-very {
-  color: var(--light-theme-maintext, #0b1b0f);
+  color: var(--main-text, #0b1b0f);
   text-align: center;
   font: var(--body-body-large, 400 16px/24px "Roboto", sans-serif);
   position: relative;

package/src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessageFlow.tsx

@@ -21,7 +21,7 @@ type ForwardMessageFlowProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const ForwardMessageFlow: React.FC<ForwardMessageFlowProps> = ({
+const ForwardMessageFlow = ({
   messages,
   dialogs,
   currentDialog,

package/src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessagePreview/ForwardMessagePreview.tsx

@@ -17,7 +17,7 @@ function trimMessage(messageText: string) {
 }
 
 // eslint-disable-next-line react/function-component-definition
-const ForwardMessagePreview: React.FC<ForwardMessagePreviewProps> = ({
+const ForwardMessagePreview = ({
   messages,
   userNameSentMessage,
 }: ForwardMessagePreviewProps) => {

package/src/Presentation/Views/Dialog/ForwardMessageFlow/InputForForwarding/InputForForwarding.scss

@@ -25,6 +25,15 @@
   justify-content: flex-start;
   flex: 1;
   position: relative;
+
+  textarea {
+    overflow: auto;
+    scrollbar-width: none;
+  }
+
+  textarea::-webkit-scrollbar {
+    display: none;
+  }
 }
 .forwarding-message-input-input-type-message {
   color: var(--main-text, #636d78);
@@ -43,6 +52,8 @@
   height: 26px;
   min-height: 26px;
   max-height: 26px;
+
+
 }
 
 .forwarding-message-input-icon-send {

package/src/Presentation/Views/Dialog/ForwardMessageFlow/InputForForwarding/InputForForwarding.tsx

@@ -14,7 +14,7 @@ type InputForForwardingProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const InputForForwarding: React.FC<InputForForwardingProps> = ({
+const InputForForwarding = ({
   inputText,
   onChange,
   onSend,

package/src/Presentation/Views/Dialog/InputMessage/InputMessage.tsx

@@ -21,7 +21,7 @@ type MessageInputProps = {
   theme?: UiKitTheme;
 };
 // eslint-disable-next-line react/function-component-definition
-const InputMessage: React.FC<MessageInputProps> = ({
+const InputMessage = ({
   messageText,
   onChangeText,
   sendText,

package/src/Presentation/Views/Dialog/Message/HighLightLink/HighLightLink.tsx

@@ -75,7 +75,7 @@ type HighLightLinkProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const HighLightLink: React.FC<HighLightLinkProps> = ({
+export const HighLightLink = ({
   messageText,
 }: HighLightLinkProps) => {
   /*

package/src/Presentation/Views/Dialog/Message/Message.tsx

@@ -39,7 +39,7 @@ type MessageProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const Message: React.FC<MessageProps> = ({
+const Message = ({
   message,
   userId,
   setWaitAIWidget,

package/src/Presentation/Views/Dialog/Message/MessageAttachment/AudioAttachment/AudioAttachment.tsx

@@ -8,7 +8,7 @@ type AudioAttachmentComponentProps = {
   audioFile: FileEntity;
 };
 // eslint-disable-next-line react/function-component-definition
-const AudioAttachment: React.FC<AudioAttachmentComponentProps> = ({
+const AudioAttachment = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   audioFile,
 }: AudioAttachmentComponentProps) => {

package/src/Presentation/Views/Dialog/Message/MessageAttachment/DefaultAttachment/DefaultAttachment.tsx

@@ -17,7 +17,7 @@ type DefaultAttachmentComponentProps = {
   fileUrl: string;
 };
 // eslint-disable-next-line react/function-component-definition
-const DefaultAttachment: React.FC<DefaultAttachmentComponentProps> = ({
+const DefaultAttachment = ({
   fileName,
   fileUrl,
 }: DefaultAttachmentComponentProps) => {

package/src/Presentation/Views/Dialog/Message/MessageAttachment/ImageAttachment/ImageAttachment.tsx

@@ -7,7 +7,7 @@ type ImageAttachmentComponentProps = {
   imageFile: FileEntity;
 };
 // eslint-disable-next-line react/function-component-definition
-const ImageAttachment: React.FC<ImageAttachmentComponentProps> = ({
+const ImageAttachment = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   imageFile,
 }: ImageAttachmentComponentProps) => {

package/src/Presentation/Views/Dialog/Message/MessageAttachment/VideoAttachment/VideoAttachment.tsx

@@ -7,7 +7,7 @@ type VideoAttachmentComponentProps = {
   videoFile: FileEntity;
 };
 // eslint-disable-next-line react/function-component-definition
-const VideoAttachment: React.FC<VideoAttachmentComponentProps> = ({
+const VideoAttachment = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   videoFile,
 }: VideoAttachmentComponentProps) => {

package/src/Presentation/Views/Dialog/MessageContextMenu/MessageContextMenu.tsx

@@ -1,7 +1,7 @@
 import Dropdown from '../../../ui-components/Dropdown/Dropdown';
 import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
 import { FunctionTypeMessageEntityToVoid } from '../../../../CommonTypes/BaseViewModel';
-import { ReactComponent as MoreSvg } from '../../../icons/navigation/more.svg';
+import MoreSvg from '../../../icons/navigation/more.svg?react';
 import { Option } from '../../../ui-components/Dropdown/DropdownOption';
 import './MessageContextMenu.scss';
 
@@ -57,7 +57,7 @@ export default function MessageContextMenu({
   }
 
   return (
-    <div>
+    <>
       {enableForwarding || enableReplying ? (
         <Dropdown
           options={options}
@@ -73,6 +73,6 @@ export default function MessageContextMenu({
           <MoreSvg className="message-context-menu-actions__icon" />
         </div>
       )}
-    </div>
+    </>
   );
 }

package/src/Presentation/Views/Dialog/MessageItem/MessageItem.tsx

@@ -13,7 +13,7 @@ import Loader from '../../../ui-components/Loader/Loader';
 import MessageSeparator from '../../../ui-components/MessageSeparator/MessageSeparator';
 import { MessageDTOMapper } from '../../../../Data/source/remote/Mapper/MessageDTOMapper';
 import Avatar from '../../../ui-components/Avatar/Avatar';
-import { ReactComponent as UserSvg } from '../../../icons/contents/user.svg';
+import UserSvg from '../../../icons/contents/user.svg?react';
 import './MessageItem.scss';
 
 export type MessageItemProps = {

package/src/Presentation/Views/Dialog/SystemDateBanner/SystemDateBanner.tsx

@@ -6,7 +6,7 @@ type SystemDateBannerProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const SystemDateBanner: React.FC<SystemDateBannerProps> = ({
+export const SystemDateBanner = ({
   text,
 }: SystemDateBannerProps) => {
   return (

package/src/Presentation/Views/Dialog/SystemMessageBanner/SystemMessageBanner.tsx

@@ -6,7 +6,7 @@ type SystemMessageBannerProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const SystemMessageBanner: React.FC<SystemMessageBannerProps> = ({
+export const SystemMessageBanner = ({
   messageText,
 }: SystemMessageBannerProps) => {
   return (

package/src/Presentation/Views/Dialog/VoiceMessage/VoiceMessage.tsx

@@ -7,7 +7,7 @@ type VoiceMessageProps = {
   onClick: FunctionTypeVoidToVoid;
 };
 // eslint-disable-next-line react/function-component-definition
-const VoiceMessage: React.FC<VoiceMessageProps> = ({
+const VoiceMessage = ({
   icon,
   onClick,
 }: VoiceMessageProps) => {

package/src/Presentation/Views/Dialog/useDialogViewModel.ts

@@ -49,9 +49,7 @@ export default function useDialogViewModel(
   const startPagination: Pagination = new Pagination(0, 0);
   const [pagination, setPagination] = useState<Pagination>(startPagination);
   const [messages, setMessages] = useState<MessageEntity[]>([]);
-  // const [users, setUsers] = useState<Record<number, UserEntity>>();
   const [dialog, setDialog] = useState<DialogEntity>(dialogEntity);
-  // const [dialogsParticipants, setDialogsParticipants] = useState<number[]>([]);
 
   const currentContext = useQbInitializedDataContext();
   const remoteDataSourceMock: RemoteDataSource =
@@ -83,10 +81,9 @@ export default function useDialogViewModel(
 
     updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
       console.log(
-        'useDialogViewModel Error updateCurrentDialogInDataSourceUseCase: ',
+        'Error: useDialogViewModel Error updateCurrentDialogInDataSourceUseCase: ',
         stringifyError(e),
       );
-      throw new Error(stringifyError(e));
     });
   }
 
@@ -412,9 +409,7 @@ export default function useDialogViewModel(
     userTypingMessageUseCase.execute().catch((reason) => {
       const errorMessage: string = stringifyError(reason);
 
-      console.log('have exception in sendTypingTextMessage: ', errorMessage);
-
-      throw new Error(errorMessage);
+      console.log('Error: have exception in sendTypingTextMessage: ', errorMessage);
     });
   };
 
@@ -490,11 +485,10 @@ export default function useDialogViewModel(
         const errorMessage: string = stringifyError(reason);
 
         console.log(
-          'exception in sendMessage in useDialogViewModel',
+          'Error: exception in sendMessage in useDialogViewModel',
           errorMessage,
         );
         setLoading(false);
-        throw new Error(errorMessage);
       })
       .finally(() => {
         setLoading(false);
@@ -614,11 +608,10 @@ export default function useDialogViewModel(
         const errorMessage: string = stringifyError(reason);
 
         console.log(
-          'exception in sendMessage in useDialogViewModel',
+          'Error: exception in sendMessage in useDialogViewModel',
           errorMessage,
         );
         setLoading(false);
-        throw new Error(errorMessage);
       })
       .finally(() => {
         setLoading(false);
@@ -707,11 +700,10 @@ export default function useDialogViewModel(
         const errorMessage: string = stringifyError(reason);
 
         console.log(
-          'exception in sendMessage in useDialogViewModel',
+          'Error: exception in sendMessage in useDialogViewModel',
           errorMessage,
         );
         setLoading(false);
-        throw new Error(errorMessage);
       })
       .finally(() => {
         setLoading(false);

package/src/Presentation/Views/DialogInfo/DialogInfo.scss

@@ -1,18 +1,11 @@
 $dialog-information-container-height: 800px;
 $dialog-information-container-dialog-information-height: 64px;
 
-.dialog-information-container {
-  // min-height: $dialog-information-container-height;
-  // max-height: $dialog-information-container-height;
-  // height: $dialog-information-container-height;
-  // border: 1px solid var(--divider);
-}
 .header-dialog-info,
 .header-dialog-info * {
   box-sizing: border-box;
 }
 .header-dialog-info {
-  background: var(--color-background, #ffffff);
   padding: 16px 16px 16px 24px;
   display: flex;
   flex-direction: row;
@@ -20,28 +13,38 @@ $dialog-information-container-dialog-information-height: 64px;
   justify-content: space-between;
   align-self: stretch;
   flex-shrink: 0;
+  font: var(--title-title-large);
   position: relative;
   border-bottom: 1px solid var(--divider);
   height: $dialog-information-container-dialog-information-height;
+
+  .dialog-header__icon {
+      svg {
+        width: 24px;
+        height: 24px;
+        fill: var(--secondary-elements);
+      }
+    }
 }
+.header-dialog-info-icon {
+  width: 24px;
+  height: 24px;
+  fill: var(--secondary-elements);
+}
+
 .header-dialog-info-headline {
   color: var(--main-text, #0b1b0f);
   text-align: left;
   font: var(--title-title-large);
   position: relative;
 }
-.header-dialog-info-icon {
-  width: 24px;
-  height: 24px;
-  fill: var(--secondary-elements);
-}
+
 
 .dialog-information-profile,
 .dialog-information-profile * {
   box-sizing: border-box;
 }
 .dialog-information-profile {
-  background: var(--color-background, #ffffff);
   padding: 24px 0px 24px 0px;
   align-self: stretch;
   flex-flow: column;
@@ -51,9 +54,7 @@ $dialog-information-container-dialog-information-height: 64px;
   border-bottom: 1px solid var(--divider);
 }
 .dialog-information-profile-avatar {
-  // width: 80px;
   height: 80px;
-  // position: absolute;
   left: 140px;
   top: 24px;
 }
@@ -62,7 +63,6 @@ $dialog-information-container-dialog-information-height: 64px;
   justify-content: center;
 }
 .dialog-info-profile-avatar-ellipse {
-  background: var(--disabled-elements, #bcc1c5);
   border-radius: 50%;
   position: absolute;
   height: 81px;
@@ -70,7 +70,6 @@ $dialog-information-container-dialog-information-height: 64px;
   top: 24px;
 }
 .dialog-info-profile-avatar-contents {
-  height: auto;
   position: absolute;
   right: 17.86%;
   left: 17.86%;
@@ -85,7 +84,6 @@ $dialog-information-container-dialog-information-height: 64px;
   color: var(--main-text, #0b1b0f);
   text-align: center;
   font: var(--title-title-medium);
-  // position: absolute;
   left: 134.5px;
   top: 112px;
   display: flex;
@@ -93,18 +91,15 @@ $dialog-information-container-dialog-information-height: 64px;
   justify-content: center;
 }
 .dialog-information-profile-edit {
-  position: relative;
   right: -10px;
-  //top: 30px;
   border-radius: 4px;
   padding: 8px 56px 0px 0px;
   display: flex;
   flex-direction: row;
-  gap: 0px;
+  gap: 0;
   align-items: center;
   justify-content: center;
   position: absolute;
-  //left: 294px;
   top: 8px;
 }
 .dialog-information-profile-edit-button {
@@ -124,7 +119,6 @@ $dialog-information-container-dialog-information-height: 64px;
   box-sizing: border-box;
 }
 .dialog-info-action-wrapper-settings {
-  background: var(--color-background, #ffffff);
   padding: 16px;
   display: flex;
   flex-direction: row;
@@ -149,7 +143,7 @@ $dialog-information-container-dialog-information-height: 64px;
   padding: 4px;
   display: flex;
   flex-direction: row;
-  gap: 0px;
+  gap: 0;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
@@ -202,7 +196,7 @@ $dialog-information-container-dialog-information-height: 64px;
   text-align: center;
   font: var(--label-label-medium);
   position: relative;
-  padding: 0px 5px 0px 5px;
+  padding: 0 5px 0 5px;
 }
 
 .dialog-info-leave {