From 04d637b304108161e3b83439650a769e223af2ff Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Thu, 9 Nov 2023 00:15:48 +0530 Subject: [PATCH] fix: fixed modal position --- .../src/app/ChatUITest/ChatViewComponent.tsx | 10 +- .../chat/ChatProfile/ChatProfile.tsx | 124 ++++++++++++------ .../chat/ChatProfile/GroupInfoModal.tsx | 5 +- .../ChatViewComponent/ChatViewComponent.tsx | 13 +- .../chat/CreateGroup/CreateGroupModal.tsx | 7 +- .../chat/MessageInput/MessageInput.tsx | 6 +- .../src/lib/components/chat/exportedTypes.ts | 14 ++ .../lib/components/chat/reusables/Modal.tsx | 13 +- 8 files changed, 135 insertions(+), 57 deletions(-) diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx index 48b647cfe..387f902bb 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatViewComponent.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; import { Section } from '../components/StyledComponents'; -import { CreateGroupModal, MODAL_BACKGROUND_TYPE } from "@pushprotocol/uiweb"; +import { CreateGroupModal, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from "@pushprotocol/uiweb"; import { ChatView } from '@pushprotocol/uiweb'; const ChatViewComponentTest = () => { @@ -13,14 +13,17 @@ const ChatViewComponentTest = () => { return (

Chat UI Test page

- {/* {console.log('in close')}} modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY}/> */} + {console.log('in close')}} modalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} modalPositionType={MODAL_POSITION_TYPE.RELATIVE}/> + console.log("BOIIII RETURNNNSSSSS")} chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' limit={10} isConnected={true} groupInfoModalBackground={MODAL_BACKGROUND_TYPE.OVERLAY} + groupInfoModalPositionType={MODAL_POSITION_TYPE.RELATIVE} + verificationFailModalPosition={MODAL_POSITION_TYPE.RELATIVE} />
@@ -30,7 +33,8 @@ const ChatViewComponentTest = () => { export default ChatViewComponentTest; const ChatViewComponentCard = styled(Section)` - height: 60vh; + height: 80vh; + position:relative; `; //c2d544ad9d1efd5c5a593b143bf8232875c926cf28015564e70ad078b95f807e //4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68 diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx index d1271955f..4cb80bc97 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx @@ -24,7 +24,9 @@ import { IChatProfile, IChatTheme, MODAL_BACKGROUND_TYPE, + MODAL_POSITION_TYPE, ModalBackgroundType, + ModalPositionType, } from '../exportedTypes'; import { InfuraAPIKey, allowedNetworks, device } from '../../../config'; import { resolveNewEns, shortenText } from '../../../helpers'; @@ -67,42 +69,40 @@ const Options = ({ if (groupInfo && isGroup) { return ( + setOptions(true)}> + - setOptions(true)}> - - - {options && ( - - - - - Group Info - - - )} - {modal && ( - - )} - + {options && ( + + + + Group Info + + + )} + {modal && ( + + )} + ); } else { return null; @@ -113,6 +113,7 @@ export const ChatProfile: React.FC = ({ chatId, style, groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, + groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL, }) => { const theme = useContext(ThemeContext); const { account, env } = useChatData(); @@ -127,6 +128,16 @@ export const ChatProfile: React.FC = ({ const isMobile = useMediaQuery(device.tablet); const l1ChainId = allowedNetworks[env].includes(1) ? 1 : 5; const provider = new ethers.providers.InfuraProvider(l1ChainId, InfuraAPIKey); + const DropdownRef = useRef(null); + const [modal, setModal] = useState(false); + + useClickAway(DropdownRef, () => { + setOptions(false); + }); + + const ShowModal = () => { + setModal(true); + }; const fetchProfileData = async () => { if (isValidETHAddress(chatId)) { @@ -176,7 +187,7 @@ export const ChatProfile: React.FC = ({ if (chatId && style === 'Info') { return ( - + = ({ gap="10px" margin="0 20px 0 auto" alignSelf="center" - > {(groupInfo?.rules?.chat?.conditions || groupInfo?.rules?.entry?.conditions) && } @@ -201,7 +211,35 @@ export const ChatProfile: React.FC = ({ /> )} - setOptions(true)}> + + + {options && ( + + + + + Group Info + + + )} + + )} + + {/* = ({ setGroupInfo={setGroupInfo} theme={theme} groupInfoModalBackground={groupInfoModalBackground} - /> + /> */} + {modal && ( + + )} {/* {!isGroup && diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx index af4db3ba1..855e1e70b 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx @@ -35,7 +35,7 @@ import { copyToClipboard, shortenText } from '../../../helpers'; import ConditionsComponent from '../CreateGroup/ConditionsComponent'; import { ACCESS_TYPE_TITLE, OPERATOR_OPTIONS_INFO } from '../constants'; import { getRuleInfo } from '../helpers/getRulesToCondtionArray'; -import { MODAL_BACKGROUND_TYPE, ModalBackgroundType } from '../exportedTypes'; +import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, ModalBackgroundType, ModalPositionType } from '../exportedTypes'; import { TokenGatedSvg } from '../../../icons/TokenGatedSvg'; const UPDATE_KEYS = { @@ -315,6 +315,7 @@ type GroupInfoModalProps = { groupInfo: IGroup; setGroupInfo: React.Dispatch>; groupInfoModalBackground?: ModalBackgroundType; + groupInfoModalPositionType?: ModalPositionType; }; export const GROUPINFO_STEPS = { @@ -578,6 +579,7 @@ export const GroupInfoModal = ({ groupInfo, setGroupInfo, groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, + groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL, }: GroupInfoModalProps) => { const [activeComponent, setActiveComponent] = useState( GROUPINFO_STEPS.GROUP_INFO @@ -738,6 +740,7 @@ export const GroupInfoModal = ({ {!showAddMoreWalletModal && (
= ( isConnected = true, autoConnect = false, onVerificationFail, - groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY + groupInfoModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, + groupInfoModalPositionType = MODAL_POSITION_TYPE.GLOBAL, + verificationFailModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, + verificationFailModalPosition = MODAL_POSITION_TYPE.GLOBAL, } = options || {}; const { env, signer, account, pgpPrivateKey } = useChatData(); @@ -59,7 +62,7 @@ export const ChatViewComponent: React.FC = ( padding="13px" theme={theme} > - {chatProfile && } + {chatProfile && }
= (
)} {(messageInput && (!!signer || (!!account && !!pgpPrivateKey) || isConnected )) && ( -
+
= ( emoji={emoji} gif={gif} isConnected={isConnected} + verificationFailModalBackground={verificationFailModalBackground} + verificationFailModalPosition={verificationFailModalPosition} autoConnect = {autoConnect} />
diff --git a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx index 023358f93..5c7252688 100644 --- a/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx +++ b/packages/uiweb/src/lib/components/chat/CreateGroup/CreateGroupModal.tsx @@ -13,7 +13,7 @@ import { Section, Span } from '../../reusables'; import { Button } from '../reusables'; import { CreateGroupType } from './CreateGroupType'; import useToast from '../reusables/NewToast'; -import { CreateGroupModalProps, IChatTheme, MODAL_BACKGROUND_TYPE } from '../exportedTypes'; +import { CreateGroupModalProps, IChatTheme, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../exportedTypes'; import useMediaQuery from '../../../hooks/useMediaQuery'; import { DefineCondtion } from './DefineCondition'; import AddCriteria from './AddCriteria'; @@ -47,7 +47,8 @@ interface GroupInputDetailsType { export const CreateGroupModal: React.FC = ({ onClose, - modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY + modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, + modalPositionType = MODAL_POSITION_TYPE.GLOBAL }) => { const [activeComponent, setActiveComponent] = useState( // replace it with info one @@ -135,7 +136,7 @@ export const CreateGroupModal: React.FC = ({ }; return ( - + {renderComponent()} ); diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx index 58f1b951c..7cde4ab9d 100644 --- a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx +++ b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx @@ -39,7 +39,7 @@ import { } from '../../../hooks'; import type { FileMessageContent, IGroup } from '../../../types'; -import { GIFType, IChatTheme, MessageInputProps } from '../exportedTypes'; +import { GIFType, IChatTheme, MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, MessageInputProps } from '../exportedTypes'; import { PUBLIC_GOOGLE_TOKEN, device } from '../../../config'; import { checkIfAccessVerifiedGroup, checkIfMember } from '../helpers'; import { InfoContainer } from '../reusables'; @@ -84,6 +84,8 @@ export const MessageInput: React.FC = ({ file = true, isConnected = true, autoConnect = false, + verificationFailModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, + verificationFailModalPosition = MODAL_POSITION_TYPE.GLOBAL, onVerificationFail, }) => { const [typedMessage, setTypedMessage] = useState(''); @@ -467,7 +469,7 @@ export const MessageInput: React.FC = ({
)} {!!pgpPrivateKey && !verificationSuccessfull && ( - +
void; } @@ -28,6 +31,7 @@ export interface IChatProfile { chatId: string; style: "Info" | "Preview"; groupInfoModalBackground?: ModalBackgroundType; + groupInfoModalPositionType?: ModalPositionType; } export interface TwitterFeedReturnType { @@ -60,6 +64,8 @@ export interface MessageInputProps { file?: boolean; isConnected?: boolean; autoConnect?:boolean; + verificationFailModalBackground?: ModalBackgroundType; + verificationFailModalPosition?: ModalPositionType; onVerificationFail?: () => void; } @@ -123,9 +129,17 @@ export const MODAL_BACKGROUND_TYPE = { } as const; export type ModalBackgroundType = keyof typeof MODAL_BACKGROUND_TYPE; + + export const MODAL_POSITION_TYPE = { + RELATIVE:'RELATIVE', + GLOBAL: 'GLOBAL', + } as const; + + export type ModalPositionType = keyof typeof MODAL_POSITION_TYPE; export interface CreateGroupModalProps { onClose: ()=>void; modalBackground?: ModalBackgroundType; + modalPositionType?: ModalPositionType; }; diff --git a/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx b/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx index c34d738ca..06cfecce2 100644 --- a/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx +++ b/packages/uiweb/src/lib/components/chat/reusables/Modal.tsx @@ -13,7 +13,7 @@ import { IChatTheme } from '../theme'; import { Section, Span, Image } from '../../reusables'; import { BackIcon } from '../../../icons/Back'; import CloseIcon from '../../../icons/close.svg'; -import { MODAL_BACKGROUND_TYPE, ModalBackgroundType } from '../exportedTypes'; +import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE, ModalBackgroundType, ModalPositionType } from '../exportedTypes'; import { device } from '../../../config'; interface IModalProps { @@ -22,6 +22,7 @@ interface IModalProps { children: any; theme?: IChatTheme; modalBackground?: ModalBackgroundType; + modalPositionType?: ModalPositionType; } interface IModalHeader { @@ -51,10 +52,10 @@ const ClickawayCloseModal = ({ ); }; -export const Modal = ({ clickawayClose, children, width,modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY }: IModalProps) => { +export const Modal = ({ clickawayClose, children, width,modalBackground = MODAL_BACKGROUND_TYPE.OVERLAY,modalPositionType = MODAL_POSITION_TYPE.GLOBAL }: IModalProps) => { const theme = useContext(ThemeContext); return ( - + {clickawayClose ? ( {children} @@ -102,11 +103,11 @@ export const ModalHeader = ({ }; /* styling */ -const ModalOverlay = styled.div` - position: fixed; +const ModalOverlay = styled.div` + position:${(props) => props.modalPositionType === MODAL_POSITION_TYPE.GLOBAL? 'fixed':'absolute'}; top: 0; left: 0; - right: 0; + right: 0; bottom: 0; width: 100%; height: 100%;