From e6f5b6e428b162ff4af6fc413d0e44f7c70883db Mon Sep 17 00:00:00 2001 From: zerosoul Date: Wed, 9 Mar 2022 09:33:23 +0800 Subject: [PATCH] fix: auto focus while reply message --- src/common/component/Send/index.js | 277 ++++++++++++++--------------- 1 file changed, 132 insertions(+), 145 deletions(-) diff --git a/src/common/component/Send/index.js b/src/common/component/Send/index.js index ed62274f..620f47cc 100644 --- a/src/common/component/Send/index.js +++ b/src/common/component/Send/index.js @@ -1,153 +1,140 @@ -import { useState, useEffect, useRef } from "react"; -import { MdAdd, MdClose } from "react-icons/md"; -import TextareaAutosize from "react-textarea-autosize"; -import { useDispatch, useSelector } from "react-redux"; -import { useKey } from "rooks"; +import { useState, useEffect, useRef } from 'react'; +import { MdAdd, MdClose } from 'react-icons/md'; +import TextareaAutosize from 'react-textarea-autosize'; +import { useDispatch, useSelector } from 'react-redux'; +import { useKey } from 'rooks'; -import { removeReplyMessage } from "../../../app/slices/message.pending"; -import { useSendChannelMsgMutation } from "../../../app/services/channel"; -import { useSendMsgMutation } from "../../../app/services/contact"; -import { useReplyMessageMutation } from "../../../app/services/message"; -import StyledSend from "./styled"; -import useFiles from "./useFiles"; -import UploadModal from "./UploadModal"; -import EmojiPicker from "./EmojiPicker"; +import { removeReplyMessage } from '../../../app/slices/message.pending'; +import { useSendChannelMsgMutation } from '../../../app/services/channel'; +import { useSendMsgMutation } from '../../../app/services/contact'; +import { useReplyMessageMutation } from '../../../app/services/message'; +import StyledSend from './styled'; +import useFiles from './useFiles'; +import UploadModal from './UploadModal'; +import EmojiPicker from './EmojiPicker'; const Types = { - channel: "#", - user: "@", + channel: '#', + user: '@' }; export default function Send({ - name, - type = "channel", - // 发给谁，或者是channel，或者是user - id = "", - dragFiles = [], + name, + type = 'channel', + // 发给谁，或者是channel，或者是user + id = '', + dragFiles = [] }) { - const [replyMessage] = useReplyMessageMutation(); - const { files, setFiles, resetFiles } = useFiles([]); - const inputRef = useRef(); - const [shift, setShift] = useState(false); - const [enter, setEnter] = useState(false); - const [msg, setMsg] = useState(""); - const dispatch = useDispatch(); - // 谁发的 - const { from_uid, reply = null, contacts } = useSelector((store) => { - return { - contacts: store.contacts, - from_uid: store.authData.user.uid, - reply: store.pendingMessage.reply[id], - }; - }); - useEffect(() => { - if (dragFiles.length) { - setFiles((prev) => [...prev, ...dragFiles]); - } - }, [dragFiles]); + const [replyMessage] = useReplyMessageMutation(); + const { files, setFiles, resetFiles } = useFiles([]); + const inputRef = useRef(); + const [shift, setShift] = useState(false); + const [enter, setEnter] = useState(false); + const [msg, setMsg] = useState(''); + const dispatch = useDispatch(); + // 谁发的 + const { + from_uid, + reply = null, + contacts + } = useSelector((store) => { + return { + contacts: store.contacts, + from_uid: store.authData.user.uid, + reply: store.pendingMessage.reply[id] + }; + }); + useEffect(() => { + if (dragFiles.length) { + setFiles((prev) => [...prev, ...dragFiles]); + } + }, [dragFiles]); - const [sendMsg, { isLoading: userSending }] = useSendMsgMutation(); - const [ - sendChannelMsg, - { isLoading: channelSending }, - ] = useSendChannelMsgMutation(); - const sendMessage = type == "channel" ? sendChannelMsg : sendMsg; - const sendingMessage = userSending || channelSending; - useKey( - "Shift", - (e) => { - console.log("shift", e.type); - setShift(e.type == "keydown"); - }, - { eventTypes: ["keydown", "keyup"], target: inputRef } - ); - const handleMsgChange = (evt) => { - if (enter && !shift) { - handleSendMessage(); - } else { - setMsg(evt.target.value); - } - }; - const handleInputKeydown = (e) => { - console.log("keydown event", e); - setEnter(e.key === "Enter"); - }; - const selectEmoji = (emoji) => { - setMsg((prev) => `${prev}${emoji}`); - }; - useEffect(() => { - inputRef.current.focus(); - }, [msg]); - const handleUpload = (evt) => { - setFiles([...evt.target.files]); - }; - const handleSendMessage = () => { - if (!msg || !id || sendingMessage) return; - if (reply) { - replyMessage({ mid: reply.mid, content: msg }); - dispatch(removeReplyMessage(id)); - } else { - sendMessage({ id, content: msg, from_uid }); - } - setMsg(""); - }; - const removeReply = () => { - dispatch(removeReplyMessage(id)); - }; - return ( - <> - - {reply && ( -
- - Replying to - {contacts.find((c) => c.uid == reply.from_uid)?.name} - - -
- )} -
- - -
-
- - e.currentTarget.setSelectionRange( - e.currentTarget.value.length, - e.currentTarget.value.length - ) - } - ref={inputRef} - className="content" - maxRows={8} - minRows={1} - onKeyDown={handleInputKeydown} - onChange={handleMsgChange} - value={msg} - placeholder={`给 ${Types[type]}${name} 发消息`} - /> -
-
- -
- - {files.length !== 0 && ( - - )} - - ); + const [sendMsg, { isLoading: userSending }] = useSendMsgMutation(); + const [sendChannelMsg, { isLoading: channelSending }] = useSendChannelMsgMutation(); + const sendMessage = type == 'channel' ? sendChannelMsg : sendMsg; + const sendingMessage = userSending || channelSending; + useKey( + 'Shift', + (e) => { + console.log('shift', e.type); + setShift(e.type == 'keydown'); + }, + { eventTypes: ['keydown', 'keyup'], target: inputRef } + ); + const handleMsgChange = (evt) => { + if (enter && !shift) { + handleSendMessage(); + } else { + setMsg(evt.target.value); + } + }; + const handleInputKeydown = (e) => { + console.log('keydown event', e); + setEnter(e.key === 'Enter'); + }; + const selectEmoji = (emoji) => { + setMsg((prev) => `${prev}${emoji}`); + }; + useEffect(() => { + inputRef.current.focus(); + }, [msg, reply]); + const handleUpload = (evt) => { + setFiles([...evt.target.files]); + }; + const handleSendMessage = () => { + if (!msg || !id || sendingMessage) return; + if (reply) { + replyMessage({ mid: reply.mid, content: msg }); + dispatch(removeReplyMessage(id)); + } else { + sendMessage({ id, content: msg, from_uid }); + } + setMsg(''); + }; + const removeReply = () => { + dispatch(removeReplyMessage(id)); + }; + return ( + <> + + {reply && ( +
+ + Replying to + {contacts.find((c) => c.uid == reply.from_uid)?.name} + + +
+ )} +
+ + +
+
+ + e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length) + } + ref={inputRef} + className="content" + maxRows={8} + minRows={1} + onKeyDown={handleInputKeydown} + onChange={handleMsgChange} + value={msg} + placeholder={`给 ${Types[type]}${name} 发消息`} + /> +
+
+ +
+ + {files.length !== 0 && ( + + )} + + ); }