From 5ebaa149c95388c248b8317ac88c470fc56053e9 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Thu, 20 Jan 2022 02:19:25 +0100 Subject: [PATCH] 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> --- .../src/components/Chat/ChatInput.tsx | 35 ++++++++++--------- .../src/components/Chat/EmojiPicker.tsx | 6 +++- .../src/components/Members/Member.tsx | 35 ++++--------------- .../src/components/Members/Members.tsx | 1 + .../src/components/Members/MembersList.tsx | 9 +---- .../src/components/Messages/UiMessage.tsx | 2 +- .../components/NarrowMode/NarrowMembers.tsx | 2 +- 7 files changed, 35 insertions(+), 55 deletions(-) diff --git a/packages/react-chat/src/components/Chat/ChatInput.tsx b/packages/react-chat/src/components/Chat/ChatInput.tsx index 3250a2d2..c6da76aa 100644 --- a/packages/react-chat/src/components/Chat/ChatInput.tsx +++ b/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) => { const element = document.getSelection(); const inputElement = inputRef.current; @@ -219,10 +221,6 @@ export function ChatInput({ return ( - - - - )} - + {image && ( @@ -309,14 +307,21 @@ export function ChatInput({ )} - { - if (!disabled) setShowEmoji(!showEmoji); - }} - disabled={disabled} - > - - + + { + if (!disabled) setShowEmoji(!showEmoji); + }} + disabled={disabled} + > + + + + @@ -338,9 +343,7 @@ const InputWrapper = styled.div` `; const EmojiWrapper = styled.div` - position: absolute; - bottom: calc(100% - 6px); - right: 8px; + position: relative; `; const View = styled.div` diff --git a/packages/react-chat/src/components/Chat/EmojiPicker.tsx b/packages/react-chat/src/components/Chat/EmojiPicker.tsx index 46542bf3..3c236d26 100644 --- a/packages/react-chat/src/components/Chat/EmojiPicker.tsx +++ b/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", diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx index a841ebe3..c6a38ab0 100644 --- a/packages/react-chat/src/components/Members/Member.tsx +++ b/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({ - contact, - isOnline, - isYou, - switchShowMembers, - onClick, -}: MemberProps) { - const { setChannel } = useMessengerContext(); +export function Member({ contact, isOnline, isYou, onClick }: MemberProps) { + const identity = useIdentity(); 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 ( - + setShowMenu((e) => !e)} + onClick={() => { + if (identity) setShowMenu((e) => !e); + }} > {showMenu && } theme.sectionBackgroundColor}; padding: 16px; + overflow-y: scroll; `; const MemberHeading = styled.h2` diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx index 9a242679..f546f7d5 100644 --- a/packages/react-chat/src/components/Members/MembersList.tsx +++ b/packages/react-chat/src/components/Members/MembersList.tsx @@ -12,11 +12,7 @@ import { LogoutModalName } from "../Modals/LogoutModal"; import { Member } from "./Member"; -interface MembersListProps { - switchShowMembers?: () => void; -} - -export function MembersList({ switchShowMembers }: MembersListProps) { +export function MembersList() { 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} /> ))} @@ -81,7 +76,6 @@ export function MembersList({ switchShowMembers }: MembersListProps) { key={contact.id} contact={contact} isOnline={contact.online} - switchShowMembers={switchShowMembers} /> ))} @@ -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; diff --git a/packages/react-chat/src/components/Messages/UiMessage.tsx b/packages/react-chat/src/components/Messages/UiMessage.tsx index fd351326..db54480a 100644 --- a/packages/react-chat/src/components/Messages/UiMessage.tsx +++ b/packages/react-chat/src/components/Messages/UiMessage.tsx @@ -113,7 +113,7 @@ export function UiMessage({ { - setShowMenu((e) => !e); + if (identity) setShowMenu((e) => !e); }} > {showMenu && ( diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx index 1b68c6fe..0106d70f 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx @@ -15,7 +15,7 @@ export function NarrowMembers({ switchShowMembersList }: NarrowMembersProps) { list="Community members" onBtnClick={switchShowMembersList} /> - + ); }