fix: added closeModalOnClickAway to ChatView and UserProfile component

push-protocol · Jun 12, 2024 · 0a9606a · 0a9606a
1 parent d6322c0
commit 0a9606a
Show file tree

Hide file tree

Showing 10 changed files with 23,161 additions and 33,846 deletions.
diff --git a/packages/restapi/yarn.lock b/packages/restapi/yarn.lock
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -56,6 +56,7 @@ export interface IChatProfileUserInfo {
 // Exported Functions
 export const ChatProfile: React.FC<IChatProfile> = ({
   chatId,
+  closeModalOnClickAway,
   groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
   groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
   chatProfileRightHelperComponent = null,
@@ -332,6 +333,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
             <GroupInfoModal
               theme={theme}
               setModal={setModal}
+              closeModalOnClickAway={closeModalOnClickAway}
               groupInfo={initialized.groupInfo!}
               chatProfileInfo={initialized.profile}
               setGroupInfo={(mutatedGroupInfo) =>

diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfileInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfileInfoModal.tsx
@@ -221,6 +221,7 @@ type GroupSectionProps = GroupInfoModalProps & {
 type GroupInfoModalProps = {
   theme: IChatTheme;
   setModal: React.Dispatch<React.SetStateAction<boolean>>;
+  closeModalOnClickAway?: boolean;
   groupInfo: Group;
   setGroupInfo: React.Dispatch<React.SetStateAction<Group | null>>;
   chatProfileInfo?: IChatProfileUserInfo;
@@ -461,6 +462,7 @@ const GroupInformation = ({
 export const GroupInfoModal = ({
   theme,
   setModal,
+  closeModalOnClickAway,
   setGroupInfo,
   groupInfo,
   chatProfileInfo,
@@ -928,7 +930,7 @@ export const GroupInfoModal = ({
     return (
       <Modal
         onClose={onClose}
-        closeonClickAway
+        closeonClickAway={closeModalOnClickAway}
         modalBackground={groupInfoModalBackground}
         modalPositionType={groupInfoModalPositionType}
       >

diff --git a/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx b/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx
@@ -43,6 +43,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (options: IC
     chatProfileRightHelperComponent = null,
     chatProfileLeftHelperComponent = null,
     welcomeComponent = null,
+    closeModalOnClickAway = false
   } = options || {};
 
   const { user } = useChatData();
@@ -109,6 +110,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (options: IC
             >
               <ChatProfile
                 key={chatId}
+                closeModalOnClickAway={closeModalOnClickAway}
                 chatProfileRightHelperComponent={chatProfileRightHelperComponent}
                 chatProfileLeftHelperComponent={chatProfileLeftHelperComponent}
                 chatId={initialized.derivedChatId}
@@ -170,12 +172,12 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (options: IC
 };
 
 //styles
-const Conatiner = styled(Section)<IThemeProps>`
+const Conatiner = styled(Section) <IThemeProps>`
   border: ${(props) => props.theme.border?.chatViewComponent};
   box-sizing: border-box;
 `;
 
-const ChatViewSection = styled(Section)<IThemeProps>`
+const ChatViewSection = styled(Section) <IThemeProps>`
   @media (${device.mobileL}) {
     margin: 0;
   }

diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx
@@ -48,7 +48,7 @@ export interface GroupInputDetailsType {
 
 export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
   onClose,
-  closeonClickAway = false,
+  closeModalOnClickAway = false,
   modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
   modalPositionType = MODAL_POSITION_TYPE.GLOBAL,
   onSuccess,
@@ -259,7 +259,7 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
   return (
     <Modal
       onClose={onClose} // onClose function to close the modal
-      closeonClickAway={closeonClickAway} // boolean to handle the onClick activity of the user
+      closeonClickAway={closeModalOnClickAway} // boolean to handle the onClick activity of the user
       modalBackground={modalBackground}
       modalPositionType={modalPositionType}
     >

diff --git a/packages/uiweb/src/lib/components/chat/UserProfile/UpdateUserProfileModal.tsx b/packages/uiweb/src/lib/components/chat/UserProfile/UpdateUserProfileModal.tsx
@@ -21,6 +21,7 @@ type UpdateUserProfileModalProps = {
   userProfile: IUser;
   setUserProfile: React.Dispatch<React.SetStateAction<IUser | undefined>>;
   setModal: React.Dispatch<React.SetStateAction<boolean>>;
+  closeModalOnClickAway?: boolean;
   updateUserProfileModalBackground?: ModalBackgroundType;
   updateUserProfileModalPositionType?: ModalPositionType;
 };
@@ -33,6 +34,7 @@ export interface UserProfileType {
 export const UpdateUserProfileModal = ({
   theme,
   setModal,
+  closeModalOnClickAway,
   userProfile,
   setUserProfile,
   updateUserProfileModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
@@ -162,7 +164,7 @@ export const UpdateUserProfileModal = ({
   return (
     <Modal
       onClose={onClose}
-      closeonClickAway
+      closeonClickAway={closeModalOnClickAway}
       modalBackground={updateUserProfileModalBackground}
       modalPositionType={updateUserProfileModalPositionType}
     >

diff --git a/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx b/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx
@@ -33,6 +33,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({
   updateUserProfileModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
   updateUserProfileModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
   onUserProfileUpdateModalOpen,
+  closeModalOnClickAway = false
 }) => {
   const { user } = useChatData();
   const [userProfile, setUserProfile] = useState<IUser>();
@@ -143,6 +144,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({
           <UpdateUserProfileModal
             theme={theme}
             setModal={setShowUpdateUserProfileModal}
+            closeModalOnClickAway={closeModalOnClickAway}
             userProfile={userProfile!}
             setUserProfile={setUserProfile}
             updateUserProfileModalBackground={updateUserProfileModalBackground}
@@ -155,7 +157,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({
 };
 
 //styles
-const Conatiner = styled(Section)<IThemeProps>`
+const Conatiner = styled(Section) <IThemeProps>`
   border: ${(props) => props.theme.border?.userProfile};
   box-sizing: border-box;
 `;

diff --git a/packages/uiweb/src/lib/components/chat/exportedTypes.ts b/packages/uiweb/src/lib/components/chat/exportedTypes.ts
@@ -76,10 +76,12 @@ export interface IChatViewComponentProps {
   chatProfileRightHelperComponent?: React.ReactNode;
   chatProfileLeftHelperComponent?: React.ReactNode;
   welcomeComponent?: React.ReactNode;
+  closeModalOnClickAway?: boolean;
 }
 
 export interface IChatProfile {
   chatId: string;
+  closeModalOnClickAway?: boolean;
   groupInfoModalBackground?: ModalBackgroundType;
   groupInfoModalPositionType?: ModalPositionType;
   chatProfileRightHelperComponent?: React.ReactNode;
@@ -172,7 +174,7 @@ export interface User {
 
 export interface CreateGroupModalProps {
   onClose: () => void;
-  closeonClickAway?: boolean;
+  closeModalOnClickAway?: boolean;
   modalBackground?: ModalBackgroundType;
   modalPositionType?: ModalPositionType;
   onSuccess?: (group: GroupInfoDTO | GroupDTO | undefined) => void;
@@ -182,6 +184,7 @@ export interface UserProfileProps {
   updateUserProfileModalBackground?: ModalBackgroundType;
   updateUserProfileModalPositionType?: ModalPositionType;
   onUserProfileUpdateModalOpen?: (open: boolean) => void;
+  closeModalOnClickAway?: boolean;
 }
 
 export interface ModalButtonProps {