Fix showing menu/picker on click (#197)

* Fix closing emoji picker

* Show contact menu only after login

Co-authored-by: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -89,6 +89,8 @@ export function ChatInput({
     setInputHeight(target.scrollHeight);
   }, []);
 
+  const rowHeight = inputHeight + (image ? 73 : 0);
+
   const onInputChange = useCallback((e: React.ChangeEvent<HTMLDivElement>) => {
     const element = document.getSelection();
     const inputElement = inputRef.current;
@@ -219,10 +221,6 @@ export function ChatInput({
   return (
     <View className={`${createChat && "creation"}`}>
       <SizeLimitModal />
-      <EmojiWrapper ref={ref}>
-        <EmojiPicker addEmoji={addEmoji} showEmoji={showEmoji} />
-      </EmojiWrapper>
-
       <AddPictureInputWrapper>
         <PictureIcon />
         <AddPictureInput
@@ -268,7 +266,7 @@ export function ChatInput({
             </CloseButton>
           </ReplyWrapper>
         )}
-        <Row style={{ height: `${inputHeight + (image ? 73 : 0)}px` }}>
+        <Row style={{ height: `${rowHeight}px` }}>
           <InputWrapper>
             {image && (
               <ImageWrapper>
@@ -309,14 +307,21 @@ export function ChatInput({
             )}
           </InputWrapper>
           <InputButtons>
-            <ChatButton
+            <EmojiWrapper ref={ref}>
-              onClick={() => {
+              <ChatButton
-                if (!disabled) setShowEmoji(!showEmoji);
+                onClick={() => {
-              }}
+                  if (!disabled) setShowEmoji(!showEmoji);
-              disabled={disabled}
+                }}
-            >
+                disabled={disabled}
-              <EmojiIcon isActive={showEmoji} />
+              >
-            </ChatButton>
+                <EmojiIcon isActive={showEmoji} />
+              </ChatButton>
+              <EmojiPicker
+                addEmoji={addEmoji}
+                showEmoji={showEmoji}
+                bottom={rowHeight - 24}
+              />
+            </EmojiWrapper>
             <ChatButton disabled={disabled}>
               <StickerIcon />
             </ChatButton>
@@ -338,9 +343,7 @@ const InputWrapper = styled.div`
 `;
 
 const EmojiWrapper = styled.div`
-  position: absolute;
+  position: relative;
-  bottom: calc(100% - 6px);
-  right: 8px;
 `;
 
 const View = styled.div`

packages/react-chat/src/components/Chat/EmojiPicker.tsx

@@ -8,9 +8,10 @@ import { lightTheme, Theme } from "../../styles/themes";
 type EmojiPickerProps = {
   showEmoji: boolean;
   addEmoji: (e: any) => void;
+  bottom: number;
 };
 
-export function EmojiPicker({ showEmoji, addEmoji }: EmojiPickerProps) {
+export function EmojiPicker({ showEmoji, addEmoji, bottom }: EmojiPickerProps) {
   const theme = useTheme() as Theme;
   const low = useLow();
 
@@ -23,6 +24,9 @@ export function EmojiPicker({ showEmoji, addEmoji }: EmojiPickerProps) {
         color={theme.tertiary}
         emojiSize={26}
         style={{
+          position: "absolute",
+          bottom: `calc(100% + ${bottom}px)`,
+          right: "-76px",
           color: theme.secondary,
           height: low ? "200px" : "355px",
           overflow: "auto",

packages/react-chat/src/components/Members/Member.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
-import { useMessengerContext } from "../../contexts/messengerProvider";
+import { useIdentity } from "../../contexts/identityProvider";
 import { Contact } from "../../models/Contact";
 import { ContactMenu } from "../Form/ContactMenu";
 import { Icon } from "../Icons/Icon";
@@ -13,39 +13,16 @@ interface MemberProps {
   contact: Contact;
   isOnline?: boolean;
   isYou?: boolean;
-  switchShowMembers?: () => void;
   onClick?: () => void;
 }
 
-export function Member({
+export function Member({ contact, isOnline, isYou, onClick }: MemberProps) {
-  contact,
+  const identity = useIdentity();
-  isOnline,
-  isYou,
-  switchShowMembers,
-  onClick,
-}: MemberProps) {
-  const { setChannel } = useMessengerContext();
 
   const [showMenu, setShowMenu] = useState(false);
 
-  const onMemberClick = () => {
-    if (!isYou) {
-      switchShowMembers?.();
-      setChannel({
-        id: contact.id,
-        name: contact?.customName ?? contact.trueName,
-        type: "dm",
-        description: `Chatkey: ${contact.id} `,
-        members: [contact],
-      });
-    }
-  };
-
   return (
-    <MemberData
+    <MemberData onClick={onClick} className={`${isYou && "you"}`}>
-      onClick={onClick ? onClick : onMemberClick}
-      className={`${isYou && "you"}`}
-    >
       <MemberIcon
         style={{
           backgroundImage: "unset",
@@ -53,7 +30,9 @@ export function Member({
         className={
           !isYou && isOnline ? "online" : !isYou && !isOnline ? "offline" : ""
         }
-        onClick={() => setShowMenu((e) => !e)}
+        onClick={() => {
+          if (identity) setShowMenu((e) => !e);
+        }}
       >
         {showMenu && <ContactMenu id={contact.id} setShowMenu={setShowMenu} />}
         <UserLogo

packages/react-chat/src/components/Members/Members.tsx

@@ -20,6 +20,7 @@ const MembersWrapper = styled.div`
   flex-direction: column;
   background-color: ${({ theme }) => theme.sectionBackgroundColor};
   padding: 16px;
+  overflow-y: scroll;
 `;
 
 const MemberHeading = styled.h2`

packages/react-chat/src/components/Members/MembersList.tsx

@@ -12,11 +12,7 @@ import { LogoutModalName } from "../Modals/LogoutModal";
 
 import { Member } from "./Member";
 
-interface MembersListProps {
+export function MembersList() {
-  switchShowMembers?: () => void;
-}
-
-export function MembersList({ switchShowMembers }: MembersListProps) {
   const { contacts, nickname } = useMessengerContext();
   const identity = useIdentity();
   const { setModal } = useModal(LogoutModalName);
@@ -68,7 +64,6 @@ export function MembersList({ switchShowMembers }: MembersListProps) {
               key={contact.id}
               contact={contact}
               isOnline={contact.online}
-              switchShowMembers={switchShowMembers}
             />
           ))}
         </MemberCategory>
@@ -81,7 +76,6 @@ export function MembersList({ switchShowMembers }: MembersListProps) {
               key={contact.id}
               contact={contact}
               isOnline={contact.online}
-              switchShowMembers={switchShowMembers}
             />
           ))}
         </MemberCategory>
@@ -93,7 +87,6 @@ export function MembersList({ switchShowMembers }: MembersListProps) {
 const MembersListWrap = styled.div`
   display: flex;
   flex-direction: column;
-  overflow-y: scroll;
 
   &::-webkit-scrollbar {
     width: 0;

packages/react-chat/src/components/Messages/UiMessage.tsx

@@ -113,7 +113,7 @@ export function UiMessage({
         <UserMessageWrapper>
           <Icon
             onClick={() => {
-              setShowMenu((e) => !e);
+              if (identity) setShowMenu((e) => !e);
             }}
           >
             {showMenu && (

packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx

@@ -15,7 +15,7 @@ export function NarrowMembers({ switchShowMembersList }: NarrowMembersProps) {
         list="Community members"
         onBtnClick={switchShowMembersList}
       />
-      <MembersList switchShowMembers={switchShowMembersList} />
+      <MembersList />
     </ListWrapper>
   );
 }