forked from rDrama/rDrama
Move emoji and send button outside of textarea
parent
cc33839f56
commit
d4c76391e1
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "chat",
|
"name": "chat",
|
||||||
"version": "0.0.17",
|
"version": "0.0.18",
|
||||||
"main": "./src/index.tsx",
|
"main": "./src/index.tsx",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -1,11 +1,17 @@
|
||||||
.UserInput {
|
.UserInput {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.UserInput-input {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.UserInput-emoji {
|
.UserInput-emoji {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute;
|
|
||||||
top: 12px;
|
|
||||||
right: 12px;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
margin-right: 1rem;
|
||||||
}
|
}
|
|
@ -12,7 +12,7 @@ import { EmojiDrawer, QuickEmojis } from "../emoji";
|
||||||
import "./UserInput.css";
|
import "./UserInput.css";
|
||||||
|
|
||||||
export function UserInput() {
|
export function UserInput() {
|
||||||
const { messages, draft, sendMessage, updateDraft } = useChat();
|
const { draft, sendMessage, updateDraft } = useChat();
|
||||||
const { reveal, hide, open } = useDrawer();
|
const { reveal, hide, open } = useDrawer();
|
||||||
const builtChatInput = useRef<HTMLTextAreaElement>(null);
|
const builtChatInput = useRef<HTMLTextAreaElement>(null);
|
||||||
const { visible, addQuery } = useEmojis();
|
const { visible, addQuery } = useEmojis();
|
||||||
|
@ -53,8 +53,8 @@ export function UserInput() {
|
||||||
},
|
},
|
||||||
[handleSendMessage]
|
[handleSendMessage]
|
||||||
);
|
);
|
||||||
const handleOpenEmojiDrawer = useCallback(
|
const handleToggleEmojiDrawer = useCallback(() => {
|
||||||
() =>
|
if (open) {
|
||||||
reveal({
|
reveal({
|
||||||
title: "Select an emoji",
|
title: "Select an emoji",
|
||||||
content: (
|
content: (
|
||||||
|
@ -63,13 +63,12 @@ export function UserInput() {
|
||||||
onClose={() => builtChatInput.current?.focus()}
|
onClose={() => builtChatInput.current?.focus()}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
}),
|
});
|
||||||
[]
|
} else {
|
||||||
);
|
builtChatInput.current?.focus();
|
||||||
const handleCloseEmojiDrawer = useCallback(() => {
|
hide();
|
||||||
builtChatInput.current?.focus();
|
}
|
||||||
hide();
|
}, [open]);
|
||||||
}, [hide]);
|
|
||||||
const handleSelectEmoji = useCallback((emoji: string) => {
|
const handleSelectEmoji = useCallback((emoji: string) => {
|
||||||
updateDraft((prev) => `${prev} :${emoji}: `);
|
updateDraft((prev) => `${prev} :${emoji}: `);
|
||||||
}, []);
|
}, []);
|
||||||
|
@ -108,7 +107,7 @@ export function UserInput() {
|
||||||
<textarea
|
<textarea
|
||||||
ref={builtChatInput}
|
ref={builtChatInput}
|
||||||
id="builtChatInput"
|
id="builtChatInput"
|
||||||
className="form-control"
|
className="UserInput-input form-control"
|
||||||
style={{
|
style={{
|
||||||
minHeight: 50,
|
minHeight: 50,
|
||||||
height: 50,
|
height: 50,
|
||||||
|
@ -123,22 +122,18 @@ export function UserInput() {
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
value={draft}
|
value={draft}
|
||||||
/>
|
/>
|
||||||
{open ? (
|
<i
|
||||||
<span
|
role="button"
|
||||||
role="button"
|
onClick={handleToggleEmojiDrawer}
|
||||||
onClick={handleCloseEmojiDrawer}
|
className="UserInput-emoji fas fa-smile-beam"
|
||||||
className="UserInput-emoji"
|
/>
|
||||||
style={{ top: 6 }}
|
<button
|
||||||
>
|
className="btn btn-secondary"
|
||||||
X
|
disabled={draft.length === 0}
|
||||||
</span>
|
onClick={sendMessage}
|
||||||
) : (
|
>
|
||||||
<i
|
<i className="UserInput-emoji fas fa-reply" />
|
||||||
role="button"
|
</button>
|
||||||
onClick={handleOpenEmojiDrawer}
|
|
||||||
className="UserInput-emoji fas fa-smile-beam"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue