You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
2.2 KiB
69 lines
2.2 KiB
import React from 'react';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { MenuIcon, PaperAirplaneIcon } from '@heroicons/react/outline';
|
|
|
|
import { connection } from '../connection';
|
|
import { useAppDispatch, useAppSelector } from '../hooks/redux';
|
|
import { toggleSidebar } from '../slices/appSlice';
|
|
|
|
export const MessageBox = (): JSX.Element => {
|
|
const ready = useAppSelector((state) => state.meshtastic.ready);
|
|
const [currentMessage, setCurrentMessage] = React.useState('');
|
|
const sendMessage = () => {
|
|
if (ready) {
|
|
connection.sendText(currentMessage, undefined, true);
|
|
setCurrentMessage('');
|
|
}
|
|
};
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
|
|
return (
|
|
<div className="flex text-lg font-medium space-x-2 md:space-x-0 w-full">
|
|
<motion.button
|
|
initial={{}}
|
|
whileHover={{
|
|
backgroundColor: 'rgba(229, 231, 235)',
|
|
}}
|
|
className="flex h-14 w-14 text-xl hover:text-gray-500 text-gray-400 rounded-full border shadow-md focus:outline-none cursor-pointer md:hidden"
|
|
onClick={() => {
|
|
dispatch(toggleSidebar());
|
|
}}
|
|
>
|
|
<MenuIcon className="m-auto h-6 w-6" />
|
|
</motion.button>
|
|
<form
|
|
className="flex flex-wrap relative w-full"
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}}
|
|
>
|
|
{ready}
|
|
<input
|
|
type="text"
|
|
placeholder={`${t('placeholder.no_messages')}...`}
|
|
disabled={!ready}
|
|
value={currentMessage}
|
|
onChange={(e) => {
|
|
setCurrentMessage(e.target.value);
|
|
}}
|
|
className={`p-3 placeholder-gray-400 text-gray-700 relative rounded-3xl border shadow-md focus:outline-none w-full pr-10 ${
|
|
ready ? 'cursor-text' : 'cursor-not-allowed'
|
|
}`}
|
|
/>
|
|
<span className="flex z-10 h-full text-gray-400 absolute w-8 right-1">
|
|
<PaperAirplaneIcon
|
|
onClick={sendMessage}
|
|
className={`text-xl hover:text-gray-500 h-6 w-6 my-auto ${
|
|
ready ? 'cursor-pointer' : 'cursor-not-allowed'
|
|
}`}
|
|
/>
|
|
</span>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|