From 7866a3d0e158ad051e2072da46abb2efcc4f9737 Mon Sep 17 00:00:00 2001 From: Abhishek <77395788+abhishek-01k@users.noreply.github.com> Date: Tue, 2 Jul 2024 12:59:35 +0530 Subject: [PATCH] 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 --- .../components/chat/ChatProfile/ChatProfile.tsx | 2 ++ .../chat/ChatProfile/ChatProfileInfoModal.tsx | 5 ++++- .../chat/ChatView/ChatViewComponent.tsx | 6 ++++-- .../chat/CreateGroup/CreateGroupModal.tsx | 4 +++- .../chat/UserProfile/UpdateUserProfileModal.tsx | 5 ++++- .../components/chat/UserProfile/UserProfile.tsx | 4 +++- .../src/lib/components/chat/exportedTypes.ts | 4 ++++ .../src/lib/components/chat/reusables/Modal.tsx | 17 ++++++++++------- 8 files changed, 34 insertions(+), 13 deletions(-) diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx index 4237895d1..81c00cc9e 100644 --- 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 = ({ chatId, + closeChatProfileInfoModalOnClickAway, groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL, chatProfileRightHelperComponent = null, @@ -335,6 +336,7 @@ export const ChatProfile: React.FC = ({ diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfileInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfileInfoModal.tsx index 42a62b3ff..7afba4466 100644 --- 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>; + closeModalOnClickAway?: boolean; groupInfo: Group; setGroupInfo: React.Dispatch>; 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 ( diff --git a/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx b/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx index 43a59fc24..615e6fd51 100644 --- 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 = (options: IC chatProfileRightHelperComponent = null, chatProfileLeftHelperComponent = null, welcomeComponent = null, + closeChatProfileInfoModalOnClickAway = false } = options || {}; const { user } = useChatData(); @@ -109,6 +110,7 @@ export const ChatViewComponent: React.FC = (options: IC > = (options: IC }; //styles -const Conatiner = styled(Section)` +const Conatiner = styled(Section) ` border: ${(props) => props.theme.border?.chatViewComponent}; box-sizing: border-box; `; -const ChatViewSection = styled(Section)` +const ChatViewSection = styled(Section) ` @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 index 99e39a8fe..9209246e0 100644 --- 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 = ({ onClose, + closeModalOnClickAway = false, modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, modalPositionType = MODAL_POSITION_TYPE.GLOBAL, onSuccess, @@ -257,7 +258,8 @@ export const CreateGroupModal: React.FC = ({ return ( diff --git a/packages/uiweb/src/lib/components/chat/UserProfile/UpdateUserProfileModal.tsx b/packages/uiweb/src/lib/components/chat/UserProfile/UpdateUserProfileModal.tsx index 25b3604c2..62aaf9a53 100644 --- 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>; setModal: React.Dispatch>; + 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 ( diff --git a/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx b/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx index b377cd042..7fa81bc57 100644 --- 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 = ({ updateUserProfileModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, updateUserProfileModalPositionType = MODAL_POSITION_TYPE.GLOBAL, onUserProfileUpdateModalOpen, + closeUserProfileModalOnClickAway = false }) => { const { user } = useChatData(); const [userProfile, setUserProfile] = useState(); @@ -143,6 +144,7 @@ export const UserProfile: React.FC = ({ = ({ }; //styles -const Conatiner = styled(Section)` +const Conatiner = styled(Section) ` 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 index 1dde1cc1e..0b98cb753 100644 --- 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 index 8d7b65b55..67816825f 100644 --- 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 ? ( {children}