Disable input without identity (#168)

This commit is contained in:
Szymon Szlachtowicz 2022-01-04 10:06:01 +01:00 committed by GitHub
parent 64d2dec3f9
commit e39bcd6bda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 6 deletions

View File

@ -1,6 +1,7 @@
import React, { useCallback, useEffect, useMemo, useState } from "react"; import React, { useCallback, useEffect, useMemo, useState } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { useIdentity } from "../../contexts/identityProvider";
import { useMessengerContext } from "../../contexts/messengerProvider"; import { useMessengerContext } from "../../contexts/messengerProvider";
import { useNarrow } from "../../contexts/narrowProvider"; import { useNarrow } from "../../contexts/narrowProvider";
import { Reply } from "../../hooks/useReply"; import { Reply } from "../../hooks/useReply";
@ -29,7 +30,7 @@ interface ChatBodyProps {
export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) { export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) {
const { messenger, activeChannel, communityData } = useMessengerContext(); const { messenger, activeChannel, communityData } = useMessengerContext();
const narrow = useNarrow(); const narrow = useNarrow();
const identity = useIdentity();
const [editGroup, setEditGroup] = useState(false); const [editGroup, setEditGroup] = useState(false);
const className = useMemo(() => (narrow ? "narrow" : ""), [narrow]); const className = useMemo(() => (narrow ? "narrow" : ""), [narrow]);
@ -78,7 +79,11 @@ export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) {
) : ( ) : (
<LoadingSkeleton /> <LoadingSkeleton />
)} )}
<ChatInput reply={reply} setReply={setReply} /> <ChatInput
reply={reply}
setReply={setReply}
disabled={!identity}
/>
</> </>
)} )}
@ -98,7 +103,7 @@ export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) {
) : ( ) : (
<> <>
<LoadingSkeleton /> <LoadingSkeleton />
<ChatInput reply={reply} setReply={setReply} /> <ChatInput reply={reply} setReply={setReply} disabled={!identity} />
</> </>
)} )}
</ChatBodyWrapper> </ChatBodyWrapper>

View File

@ -28,9 +28,10 @@ import { textMediumStyles, textSmallStyles } from "../Text";
interface ChatInputProps { interface ChatInputProps {
reply: Reply | undefined; reply: Reply | undefined;
setReply: (val: Reply | undefined) => void; setReply: (val: Reply | undefined) => void;
disabled: boolean;
} }
export function ChatInput({ reply, setReply }: ChatInputProps) { export function ChatInput({ reply, setReply, disabled }: ChatInputProps) {
const { sendMessage, contacts } = useMessengerContext(); const { sendMessage, contacts } = useMessengerContext();
const theme = useTheme() as Theme; const theme = useTheme() as Theme;
const [content, setContent] = useState(""); const [content, setContent] = useState("");
@ -228,6 +229,7 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
<AddPictureInputWrapper> <AddPictureInputWrapper>
<PictureIcon /> <PictureIcon />
<AddPictureInput <AddPictureInput
disabled={disabled}
type="file" type="file"
multiple={true} multiple={true}
accept="image/png, image/jpeg" accept="image/png, image/jpeg"
@ -274,7 +276,8 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
/> />
)} )}
<Input <Input
contentEditable aria-disabled={disabled}
contentEditable={!disabled}
onInput={onInputChange} onInput={onInputChange}
onKeyDown={onInputKeyPress} onKeyDown={onInputKeyPress}
onKeyUp={handleCursorChange} onKeyUp={handleCursorChange}
@ -295,7 +298,9 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
<ChatButton <ChatButton
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setShowEmoji(!showEmoji); if (!disabled) {
setShowEmoji(!showEmoji);
}
}} }}
> >
<EmojiIcon isActive={showEmoji} /> <EmojiIcon isActive={showEmoji} />