quickblox-react-ui-kit 0.4.6-beta.4 → 0.4.7

package/src/Presentation/Views/Flow/CreateDialog/CreateDialog.tsx

@@ -3,6 +3,7 @@ import './CreateDialog.scss';
 import ColumnContainer from '../../../components/containers/ColumnContainer/ColumnContainer';
 import Chat from '../../../components/UI/svgs/Icons/Contents/Chat';
 import GroupChat from '../../../components/UI/svgs/Icons/Contents/GroupChat';
+import PublicChannel from '../../../components/UI/svgs/Icons/Contents/PublicChannel';
 import { FunctionTypeVoidToVoid } from '../../../../CommonTypes/BaseViewModel';
 import ActiveButton from '../../../components/UI/Buttons/ActiveButton/ActiveButton';
 
@@ -13,57 +14,62 @@ type CreateDialogProps = {
   createGroupDialogOnTouch: FunctionTypeVoidToVoid;
   createPublicDialogOnClick: FunctionTypeVoidToVoid;
   createPublicDialogOnTouch: FunctionTypeVoidToVoid;
+  allowPublicDialogCreation: boolean;
 };
-// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
+
+// eslint-disable-next-line react/function-component-definition
 const CreateDialog: React.FC<CreateDialogProps> = ({
   createPrivateDialogOnClick,
   createPrivateDialogOnTouch,
   createGroupDialogOnClick,
   createGroupDialogOnTouch,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   createPublicDialogOnClick,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   createPublicDialogOnTouch,
+  allowPublicDialogCreation = false,
 }) => {
   return (
-    <ColumnContainer gapBetweenItem="8px">
-      <ActiveButton
-        content={
-          <div className="item-type-dialog">
-            <div className="item-type-dialog-icon">
-              <Chat width="24" height="24" applyZoom />
+    <div className="create-dialog-container">
+      <ColumnContainer gapBetweenItem="8px">
+        <ActiveButton
+          content={
+            <div className="item-type-dialog">
+              <div className="item-type-dialog-icon">
+                <Chat width="24" height="24" applyZoom />
+              </div>
+              <div className="item-type-dialog-name">Private</div>
             </div>
-            <div className="item-type-dialog-name">Private</div>
-          </div>
-        }
-        clickAction={createPrivateDialogOnClick}
-        touchAction={createPrivateDialogOnTouch}
-      />
-      <ActiveButton
-        content={
-          <div className="item-type-dialog">
-            <div className="item-type-dialog-icon">
-              <GroupChat width="32" height="32" applyZoom />
+          }
+          clickAction={createPrivateDialogOnClick}
+          touchAction={createPrivateDialogOnTouch}
+        />
+        <ActiveButton
+          content={
+            <div className="item-type-dialog">
+              <div className="item-type-dialog-icon">
+                <GroupChat width="32" height="32" applyZoom />
+              </div>
+              <div className="item-type-dialog-name">Group</div>
             </div>
-            <div className="item-type-dialog-name">Group</div>
-          </div>
-        }
-        clickAction={createGroupDialogOnClick}
-        touchAction={createGroupDialogOnTouch}
-      />
-      {/* <ActiveButton */}
-      {/*  content={ */}
-      {/*    <div className="item-type-dialog"> */}
-      {/*      <div className="item-type-dialog-icon"> */}
-      {/*        <PublicChannel width="32" height="32" applyZoom /> */}
-      {/*      </div> */}
-      {/*      <div className="item-type-dialog-name">Public</div> */}
-      {/*    </div> */}
-      {/*  } */}
-      {/*  clickAction={createPublicDialogOnClick} */}
-      {/*  touchAction={createPublicDialogOnTouch} */}
-      {/* /> */}
-    </ColumnContainer>
+          }
+          clickAction={createGroupDialogOnClick}
+          touchAction={createGroupDialogOnTouch}
+        />
+        {allowPublicDialogCreation && (
+          <ActiveButton
+            content={
+              <div className="item-type-dialog">
+                <div className="item-type-dialog-icon">
+                  <PublicChannel width="32" height="32" applyZoom />
+                </div>
+                <div className="item-type-dialog-name">Public</div>
+              </div>
+            }
+            clickAction={createPublicDialogOnClick}
+            touchAction={createPublicDialogOnTouch}
+          />
+        )}
+      </ColumnContainer>
+    </div>
   );
 };
 

package/src/Presentation/Views/Flow/CreateDialogFlow/CreateNewDialogFlow.tsx

@@ -39,6 +39,8 @@ const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
   const [uidAvatar, setUidAvatar] = React.useState<string | undefined>(
     undefined,
   );
+  const { allowPublicDialogCreation } =
+    currentContext.InitParams.qbConfig.appConfig;
 
   useEffect(() => {
     if (
@@ -76,6 +78,7 @@ const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
           });
       } else {
         setUidAvatar('null');
+        setNumStepToCreate(inviteUsers);
       }
     } else {
       setNumStepToCreate(inviteUsers);
@@ -123,7 +126,7 @@ const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
   };
 
   return (
-    <div>
+    <>
       <div
         style={{
           position: 'absolute',
@@ -138,6 +141,7 @@ const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
       />
       {stepToCreate === setUpDialogType && (
         <CreateDialog
+          allowPublicDialogCreation={allowPublicDialogCreation || false}
           createPrivateDialogOnClick={() => {
             setSelectedDialogType(DialogType.private);
           }}
@@ -184,7 +188,7 @@ const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
           idOwnerDialog={remoteDataSourceMock.authInformation!.userId.toString()}
         />
       )}
-    </div>
+    </>
   );
 };
 

package/src/Presentation/Views/InviteMembers/InviteMembers.scss

@@ -15,6 +15,10 @@ $create-dialog-container-height: 412px;
   justify-content: flex-start;
   align-items: flex-start;
 
+  .disabled {
+    color: var(--secondary-text);
+  }
+
   &--add-members-container {
     min-height: $container-height;
     max-height: $container-height;
@@ -37,7 +41,6 @@ $create-dialog-container-height: 412px;
 
       &__inf {
         min-height: 20px;
-        font-family: 'Roboto';
         font-style: normal;
         font-weight: 500;
         font-size: 14px;
@@ -70,7 +73,6 @@ $create-dialog-container-height: 412px;
           padding: 0px;
           gap: 16px;
 
-          //width: 332px;
           width: 100%;
           height: 100px;
         }
@@ -93,7 +95,6 @@ $create-dialog-container-height: 412px;
         text-align: center;
         padding: 8px;
         width: 268px;
-        // width: 100%;
         height: 44px;
 
         border: 1px solid #90979f;
@@ -108,7 +109,6 @@ $create-dialog-container-height: 412px;
           margin-left: 6px;
           margin-right: 6px;
 
-          font-family: 'Roboto';
           font-style: normal;
           font-weight: 400;
           font-size: 16px;
@@ -136,12 +136,8 @@ $create-dialog-container-height: 412px;
   }
 
   &--btn-container {
-    min-height: 32px;
     max-height: 32px;
     height: 32px;
-    //min-width: $container-width;
-    //max-width: $container-width;
-    //width: $container-width;
     width: 100%;
     min-height: 34px;
     margin-top: 24px;
@@ -152,8 +148,6 @@ $create-dialog-container-height: 412px;
     flex-wrap: nowrap;
     justify-content: flex-end;
     align-items: flex-end;
-
-    //border: 2px solid blue;
   }
 
   &-loader {
@@ -162,32 +156,9 @@ $create-dialog-container-height: 412px;
 }
 .filtered-text-field{
   width: 100%;
-  //margin: 16px;
-  //padding: 8px;
-
   background-color: var(--main-background);
   color: var(--secondary-text);
 
-  //input {
-  //  color: var(--secondary-text);
-  //  background-color: var(--main-background);
-  //  margin-left: 6px;
-  //  margin-right: 6px;
-  //
-  //  font-family: 'Roboto';
-  //  font-style: normal;
-  //  font-weight: 400;
-  //  font-size: 16px;
-  //  line-height: 24px;
-  //
-  //  display: flex;
-  //  align-items: center;
-  //  letter-spacing: 0.15px;
-  //
-  //  border: none;
-  //  outline: none;
-  //}
-
   &__icon {
     width: 24px;
     height: 24px;

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './InviteMembers.scss';
+import cn from 'classnames';
 import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
 import RowRightContainer from '../../components/containers/RowRightContainer/RowRightContainer';
 import MainButton, {
@@ -64,6 +65,11 @@ const InviteMembers: React.FC<InviteMembersProps> = ({
     userViewModel.getUsers(new Pagination(0, userPerPage));
   }, []);
 
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define,no-use-before-define
+    setCountSelected(getUsersForIncludeInDialog().length);
+  }, [Object.entries(selectedItems).length]);
+
   const fetchMoreData = () => {
     if (userViewModel.pagination.hasNextPage()) {
       const newPagination = userViewModel.pagination;
@@ -133,13 +139,19 @@ const InviteMembers: React.FC<InviteMembersProps> = ({
 
   const handleUserListItemChange = (userId: number, value: boolean) => {
     setSelectedItems((prevState) => {
-      return {
+      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 +199,14 @@ 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/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

@@ -178,6 +178,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
     if (
       messageParts &&
       messageParts.length > 0 &&
+      messageParts[3] &&
       messageParts[3].includes('image')
     ) {
       const fileUid: string = messageParts[2];
@@ -256,22 +257,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 +319,9 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
           }}
           placement="left"
         >
-          <MoreSvg />
+          <div className="dialog-preview-container-context-menu">
+            <MoreSvg className="" />
+          </div>
         </Dropdown>
       }
       onClick={() => {

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/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/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/layouts/TestStage/LoginView/Login.scss

@@ -15,23 +15,26 @@ strong {
 /* ---------- LOGIN ---------- */
 
 #login {
-  border: 3px solid #6c38cc;
   margin: 50px auto;
   width: 100%;
 }
 
+form {
+  display: flex;
+  flex-flow: column;
+}
+
 form fieldset input[type="text"],
 input[type="password"] {
   appearance: none;
   background: #e5e5e5;
-  border: none;
   border-radius: 3px;
   color: #5a5656;
   font-family: inherit;
   font-size: 14px;
   height: 50px;
   outline: none;
-  padding: 0px 10px;
+  padding: 0;
   width: 100%;
   border: 1px solid #008dde;
   margin: 1px;

package/src/Presentation/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider.tsx

@@ -93,14 +93,6 @@ const initDataContext: QBDataContextType = {
     CONNECTION_REPOSITORY: initialValues.CONNECTION_REPOSITORY,
     EVENT_MESSAGE_REPOSITORY: initialEvent.EVENT_MESSAGE_REPOSITORY,
     SYNC_DIALOGS_USE_CASE: initialSync.SYNC_DIALOGS_USE_CASE,
-    // SYNC_DIALOGS_USE_CASE: new SyncDialogsUseCase(
-    //   new DialogsRepository(
-    //     initialValues.LOCAL_DATA_SOURCE,
-    //     initialValues.REMOTE_DATA_SOURCE,
-    //   ),
-    //   initialValues.CONNECTION_REPOSITORY,
-    //   initialEvent.EVENT_MESSAGE_REPOSITORY,
-    // ),
   },
   InitParams: {
     accountData: DefaultConfigurations.getDefaultQBConfig().credentials,
@@ -161,9 +153,7 @@ const initDataContext: QBDataContextType = {
     initialValues.REMOTE_DATA_SOURCE.setAuthProcessedSuccessed();
     //
     initialValues.REMOTE_DATA_SOURCE.initEventsHandlers();
-    //
-    console.log('UI Kit authorize event handler has initialized');
-    //
+
     await initialValues.CONNECTION_REPOSITORY.initializeStates();
     if (!initialValues.CONNECTION_REPOSITORY.needInit) {
       initialValues.CONNECTION_REPOSITORY.keepALiveChatConnection();
@@ -202,37 +192,15 @@ function QuickBloxUIKitProvider({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxFileSize,
 }: QuickBloxProviderProps) {
-  console.log(
-    'QuickBloxUIKitProvider with account data: ',
-    JSON.stringify(accountData),
-  );
-  console.log(
-    'QuickBloxUIKitProvider with login data: ',
-    JSON.stringify(loginData),
-  );
   const initStorageState = {
     LOCAL_DATA_SOURCE: initialValues.LOCAL_DATA_SOURCE, // localstorage or session storage
     REMOTE_DATA_SOURCE: initialValues.REMOTE_DATA_SOURCE, // QB instances
     CONNECTION_REPOSITORY: initialValues.CONNECTION_REPOSITORY,
     EVENT_MESSAGE_REPOSITORY: initialEvent.EVENT_MESSAGE_REPOSITORY,
     SYNC_DIALOGS_USE_CASE: initialSync.SYNC_DIALOGS_USE_CASE,
-    // SYNC_DIALOGS_USE_CASE: new SyncDialogsUseCase(
-    //   new DialogsRepository(
-    //     initialValues.LOCAL_DATA_SOURCE,
-    //     initialValues.REMOTE_DATA_SOURCE,
-    //   ),
-    //   initialValues.CONNECTION_REPOSITORY,
-    //   initialEvent.EVENT_MESSAGE_REPOSITORY,
-    // ),
   };
-
-  console.log(
-    'QuickBloxUIKitProvider with storage init data: ',
-    JSON.stringify(initStorageState),
-  );
   const [storage, setStorage] = React.useState<QBDataStorage>(initStorageState);
 
-  console.log('have storage useState completed');
   const updateStorage = (dataStorage: QBDataStorage) => {
     // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
     setStorage(dataStorage);

package/src/Presentation/themes/styles/_theme_colors_scheme.scss

@@ -9,7 +9,7 @@ $qb-dark-color-divider: #FFFFFF;
 $qb-dark-color-font: #3978FC;
 
 $background-overlay-light: rgba(19, 29, 40, .80);
-$background-overlay-dark: rgba(144, 151, 159, .80);
+$background-overlay-dark: rgba(19, 29, 40, .80);
 $primary-50: #E7EFFF;
 $primary-100: #C4D7FE;
 $primary-200: #9CBCFE;

package/src/Presentation/themes/styles/_theme_dark.scss

@@ -4,7 +4,7 @@
 html[data-theme='dark'] {
   --primary: #{$primary-500};
   --color-background: #{$secondary-900};
-  --color-background-modal: #{$secondary-800};
+  --color-background-modal: #{$background-overlay-dark};
   --color-background-overlay: #{$secondary-900};
   --color-divider: #{$secondary-400};
   --color-font: #{$primary-a-100};
@@ -15,11 +15,11 @@ html[data-theme='dark'] {
 
   --color-background-info: #{$primary-500};
   --color-border-active: #{$secondary-200};
-  --tertiary-elements: #{$background-overlay-dark};
+  --tertiary-elements: #{$secondary-300};
   --main-elements: #{$primary-300};
   --secondary-elements: #{$primary-a-100};
   --input-elements: #{$secondary-200};
-  --disabled-elements: #{$secondary-300};
+  --disabled-elements: #{$secondary-100};
   --field-border: #{$secondary-200};
   --main-text: #{$primary-a-100};
   --secondary-text: #{$secondary-200};
@@ -29,9 +29,10 @@ html[data-theme='dark'] {
   --incoming-background: #{$secondary-400};
   --outgoing-background: #{$primary-500};
   --dropdown-background: #{$secondary-400};
-  --chat-input: #{$secondary-800};
+  --chat-input: #{$secondary-400};
   --divider: #{$secondary-400};
   --error: #{$error-300};
   --error-secondary: #{$error-100};
   --hightlight: #{$highlight};
+  --system: #{$primary-a-100};
 }

package/src/Presentation/themes/styles/_theme_light.scss

@@ -3,7 +3,7 @@
 :root {
   --primary: #{$primary-500};
   --color-background: #{$primary-a-100};
-  --color-background-modal: #{$primary-100};
+  --color-background-modal: #{$background-overlay-light};
   --color-background-overlay: #{$secondary-900};
   --color-divider: #{$primary-50};
   --color-font: #{$secondary-900};
@@ -30,9 +30,10 @@
   --incoming-background: #{$secondary-50};
   --outgoing-background: #{$primary-50};
   --dropdown-background: #{$primary-a-100};
-  --chat-input: #{$primary-a-200};
+  --chat-input: #{$secondary-50};
   --divider: #{$primary-50};
   --error: #{$error-500};
   --error-secondary: #{$error-200};
   --hightlight: #{$highlight};
+  --system: #{$primary-a-100};
 }

package/src/Presentation/ui-components/Avatar/Avatar.scss

@@ -13,11 +13,9 @@
   color: var(--secondary-text);
 
   svg {
-    height: 100%;
-    width: 100%;
-    
-    fill: var(--secondary-text);
-    padding: 10px;
+    height: 26px;
+    width: 26px;
+    fill: var(--tertiary-elements);
   }
 
   &__image {
@@ -44,6 +42,11 @@
   &--lg {
     width: 56px;
     height: 56px;
+
+    svg {
+      height: 33px;
+      width: 33px;
+    }
   }
 
   &--xl {

package/src/Presentation/ui-components/Avatar/Avatar.tsx

@@ -1,4 +1,5 @@
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
+
 import cn from 'classnames';
 import { UserSvg } from '../../icons';
 import './Avatar.scss';

package/src/Presentation/ui-components/Badge/Badge.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import cn from 'classnames';
 
 import './Badge.scss';