fix: made Group Chat Modal More Persistent (#1339)

* fix: made Group Chat Modal More Persistent Modal in the group chat has been modified and now it doesn't close on the clickaway triggered. Also, added a boolean prop to make it go away when the clickaway is triggered #1338 * fix: prop issue fixed for UpdateUserProfileModal file as well * fix: added closeModalOnClickAway to ChatView and UserProfile component * fix: changed the name of the Modal ClickAway in Group Info and User Profile * fix: changed the name of modal clickaway prop for user profile and chat profile
push-protocol · Jul 2, 2024 · 7866a3d · 7866a3d
1 parent 484f95d
commit 7866a3d
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 13 deletions.
diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -57,6 +57,7 @@ export interface IChatProfileUserInfo {
 // Exported Functions
 export const ChatProfile: React.FC<IChatProfile> = ({
   chatId,
+  closeChatProfileInfoModalOnClickAway,
   groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
   groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL,
   chatProfileRightHelperComponent = null,
@@ -335,6 +336,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
             <GroupInfoModal
               theme={theme}
               setModal={setModal}
+              closeModalOnClickAway={closeChatProfileInfoModalOnClickAway}
               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,
@@ -927,7 +929,8 @@ export const GroupInfoModal = ({
   if (chatProfileInfo) {
     return (
       <Modal
-        clickawayClose={onClose}
+        onClose={onClose}
+        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,
+    closeChatProfileInfoModalOnClickAway = false
   } = options || {};
 
   const { user } = useChatData();
@@ -109,6 +110,7 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (options: IC
             >
               <ChatProfile
                 key={chatId}
+                closeChatProfileInfoModalOnClickAway={closeChatProfileInfoModalOnClickAway}
                 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,6 +48,7 @@ export interface GroupInputDetailsType {
 
 export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
   onClose,
+  closeModalOnClickAway = false,
   modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
   modalPositionType = MODAL_POSITION_TYPE.GLOBAL,
   onSuccess,
@@ -257,7 +258,8 @@ export const CreateGroupModal: React.FC<CreateGroupModalProps> = ({
 
   return (
     <Modal
-      clickawayClose={onClose}
+      onClose={onClose} // onClose function to close the modal
+      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>>;
+  closeUserProfileModalOnClickAway?: boolean;
   updateUserProfileModalBackground?: ModalBackgroundType;
   updateUserProfileModalPositionType?: ModalPositionType;
 };
@@ -33,6 +34,7 @@ export interface UserProfileType {
 export const UpdateUserProfileModal = ({
   theme,
   setModal,
+  closeUserProfileModalOnClickAway,
   userProfile,
   setUserProfile,
   updateUserProfileModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
@@ -161,7 +163,8 @@ export const UpdateUserProfileModal = ({
 
   return (
     <Modal
-      clickawayClose={onClose}
+      onClose={onClose}
+      closeonClickAway={closeUserProfileModalOnClickAway}
       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,
+  closeUserProfileModalOnClickAway = false
 }) => {
   const { user } = useChatData();
   const [userProfile, setUserProfile] = useState<IUser>();
@@ -143,6 +144,7 @@ export const UserProfile: React.FC<UserProfileProps> = ({
           <UpdateUserProfileModal
             theme={theme}
             setModal={setShowUpdateUserProfileModal}
+            closeUserProfileModalOnClickAway={closeUserProfileModalOnClickAway}
             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;
+  closeChatProfileInfoModalOnClickAway?: boolean;
 }
 
 export interface IChatProfile {
   chatId: string;
+  closeChatProfileInfoModalOnClickAway?: boolean;
   groupInfoModalBackground?: ModalBackgroundType;
   groupInfoModalPositionType?: ModalPositionType;
   chatProfileRightHelperComponent?: React.ReactNode;
@@ -172,6 +174,7 @@ export interface User {
 
 export interface CreateGroupModalProps {
   onClose: () => void;
+  closeModalOnClickAway?: boolean;
   modalBackground?: ModalBackgroundType;
   modalPositionType?: ModalPositionType;
   onSuccess?: (group: GroupInfoDTO | GroupDTO | undefined) => void;
@@ -181,6 +184,7 @@ export interface UserProfileProps {
   updateUserProfileModalBackground?: ModalBackgroundType;
   updateUserProfileModalPositionType?: ModalPositionType;
   onUserProfileUpdateModalOpen?: (open: boolean) => void;
+  closeUserProfileModalOnClickAway?: boolean;
 }
 
 export interface ModalButtonProps {

diff --git a/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx b/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx
@@ -18,7 +18,8 @@ import { device } from '../../../config';
 
 interface IModalProps {
   width?: string;
-  clickawayClose?: () => void;
+  onClose?: () => void;
+  closeonClickAway?: boolean;
   children: any;
   theme?: IChatTheme;
   modalBackground?: ModalBackgroundType;
@@ -31,13 +32,13 @@ interface IModalHeader {
   title: string;
 }
 
-const ClickawayCloseModal = ({ children, clickawayClose, width }: IModalProps) => {
+const ClickawayCloseModal = ({ children, onClose, width, closeonClickAway }: IModalProps) => {
   const modalRef = useRef(null);
   const theme = useContext(ThemeContext);
 
   useClickAway(modalRef, () => {
-    if (clickawayClose) {
-      clickawayClose();
+    if (onClose && closeonClickAway) {
+      onClose();
     }
   });
 
@@ -53,7 +54,8 @@ const ClickawayCloseModal = ({ children, clickawayClose, width }: IModalProps) =
 };
 
 export const Modal = ({
-  clickawayClose,
+  onClose,
+  closeonClickAway,
   children,
   width,
   modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,
@@ -66,10 +68,11 @@ export const Modal = ({
       modalBackground={modalBackground}
       modalPositionType={modalPositionType}
     >
-      {clickawayClose ? (
+      {closeonClickAway ? (
         <ClickawayCloseModal
-          clickawayClose={clickawayClose}
+          onClose={onClose}
           width={width}
+          closeonClickAway={closeonClickAway}
         >
           {children}
         </ClickawayCloseModal>