quickblox-react-ui-kit 0.3.0-beta.3 → 0.3.0

package/src/Presentation/Views/EditDialog/EditDialog.scss

@@ -50,6 +50,17 @@ $create-dialog-container-height: 180px;
 
   margin-bottom: 24px;
 
+  &--disable {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+    display: block;
+  }
+
   &--wrapper {
     min-height: 180px;
     display: flex;

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import './EditDialog.scss';
+import cn from 'classnames';
 import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
 import User from '../../components/UI/svgs/Icons/Contents/User';
 import RowRightContainer from '../../components/containers/RowRightContainer/RowRightContainer';
@@ -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 './EditDialog.scss';
 
 export const TypeOpenDialog = {
   edit: 'edit',
@@ -29,6 +30,7 @@ type EditDialogProps = {
   typeAddEditDialog: OpenDialogArcheType;
   clickUpdatedHandler?: FunctionTypeEditDialogParamsToVoid;
   clickCancelHandler?: FunctionTypeVoidToVoid;
+  disableActions?: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
@@ -39,6 +41,7 @@ const EditDialog: React.FC<EditDialogProps> = ({
   typeAddEditDialog = TypeOpenDialog.create,
   clickUpdatedHandler,
   clickCancelHandler,
+  disableActions = false,
 }) => {
   const currentContext = useQbInitializedDataContext();
   const maxUploadFileSize = currentContext.InitParams.maxFileSize;
@@ -176,6 +179,11 @@ const EditDialog: React.FC<EditDialogProps> = ({
         }}
         className="edit-container"
       >
+        <div
+          className={cn('', {
+            'edit-dialog-container--disable': disableActions,
+          })}
+        />
         <div className="edit-dialog-container">
           <div className="edit-dialog-container--wrapper">
             <div className="edit-dialog-container--wrapper__inf">

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

@@ -17,6 +17,7 @@ type CreateNewDialogFlowProps = {
   dialogsViewModel: DialogListViewModel;
   onFinished: (newEntity: DialogEntity) => void;
   onCancel?: () => void;
+  isOnline: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition
@@ -24,6 +25,7 @@ const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
   dialogsViewModel,
   onFinished,
   onCancel,
+  isOnline,
 }: CreateNewDialogFlowProps) => {
   const currentContext = React.useContext(qbDataContext);
   const remoteDataSourceMock: RemoteDataSource =
@@ -122,6 +124,18 @@ const CreateNewDialogFlow: React.FC<CreateNewDialogFlowProps> = ({
 
   return (
     <div>
+      <div
+        style={{
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: '100',
+          display: isOnline ? 'none' : 'block',
+        }}
+      />
       {stepToCreate === setUpDialogType && (
         <CreateDialog
           createPrivateDialogOnClick={() => {

package/src/Presentation/Views/InviteMembers/useInviteMembersViewModel.ts

@@ -116,17 +116,7 @@ export default function useInviteMembersViewModel(): InviteMembersViewModel {
 
   return {
     get entity(): UserEntity {
-      return Stubs.createUserEntityWithParams(
-        0,
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-      );
+      return Stubs.createUserEntityWithParams(0, '', '', '', '', '', 0, '', '');
     },
     // id: Date.now(),
     // name: '',

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

@@ -53,6 +53,7 @@ type PreviewDialogsProps = {
   theme?: PreviewDialogsTheme;
   onLeaveDialog: FunctionTypeDialogEntityToVoid;
   additionalSettings?: PreviewDialogSettings;
+  disableActions?: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
 const PreviewDialog: React.FC<PreviewDialogsProps> = ({
@@ -65,6 +66,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
   message_date_time_sent,
   theme = undefined,
   onLeaveDialog,
+  disableActions = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   additionalSettings = undefined,
 }: PreviewDialogsProps) => {
@@ -293,8 +295,10 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
             {
               value: 'Leave',
               label: 'Leave',
+              disabled: disableActions,
             },
           ]}
+          disabled={disableActions}
           onSelect={(value: string) => {
             if (value === 'Leave') {
               onLeaveDialog(dialogViewModel?.entity as DialogEntity);

package/src/Presentation/icons/media/video-file.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.69727 7.33337V16.6667L16.0306 12L8.69727 7.33337Z"/>
+<svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
+    <path d="M33.0001 7.33325L36.6667 14.6666H31.1667L27.5001 7.33325H23.8334L27.5001 14.6666H22.0001L18.3334 7.33325H14.6667L18.3334 14.6666H12.8334L9.16675 7.33325H7.33341C5.31675 7.33325 3.68508 8.98325 3.68508 10.9999L3.66675 32.9999C3.66675 35.0166 5.31675 36.6666 7.33341 36.6666H36.6667C38.6834 36.6666 40.3334 35.0166 40.3334 32.9999V7.33325H33.0001Z"/>
 </svg>