Proyectos de Subversion LeadersLinked - Backend

/* eslint-disable react/prop-types */
import React, { Suspense, useRef, useState } from "react";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import SentimentVerySatisfiedRoundedIcon from "@mui/icons-material/SentimentVerySatisfiedRounded";
import Emojione from "../personal-chat/emojione/Emojione";
const SendFileModal = React.lazy(() =>
  import("../personal-chat/send-file-modal/SendFileModal")
);

const TextBox = ({
  uploadUrl = "",
  isNotSeen = false,
  markRead = () => false,
  onSend,
}) => {
  const [showEmojiTab, setShowEmojiTab] = useState(false);
  const [showFileModal, setShowFileModal] = useState(false);
  const textAreaEl = useRef(null);

  const handleshowFileModal = () => setShowFileModal(!showFileModal);

  const handleShowEmojiTab = () => setShowEmojiTab(!showEmojiTab);

  const handleClickEmoji = (e) => {
    const shortname = e.currentTarget.dataset.shortname;
    const currentText = textAreaEl.current.value;
    const cursorPosition = textAreaEl.current.selectionStart;
    const textBehind = currentText.substring(0, cursorPosition);
    const textForward = currentText.substring(cursorPosition);
    const unicode = emojione.shortnameToUnicode(shortname);
    textAreaEl.current.value = `${textBehind}${unicode}${textForward}`;
    textAreaEl.current.focus();
    textAreaEl.current.setSelectionRange(
      cursorPosition + unicode.length,
      cursorPosition + unicode.length
    );
  };

  const onKeyDown = async (e) => {
    if (e.key !== "Enter") return false;
    e.preventDefault();
    const message = e.target.value;
    await onSend(message);
    e.target.value = "";
    setShowEmojiTab(false);
  };

  return (
    <>
      <div className="chat-text_box">
        <AttachFileIcon onClick={handleshowFileModal} />
        <SentimentVerySatisfiedRoundedIcon onClick={handleShowEmojiTab} />
        <textarea
          placeholder={CHAT_LABELS.WRITE_A_MESSAGE}
          onKeyDown={onKeyDown}
          ref={textAreaEl}
          onFocus={() => isNotSeen && markRead()}
        />
        <div
          className="emojione-container"
          style={{ display: showEmojiTab ? "block" : "none" }}
        >
          <Emojione onClickEmoji={handleClickEmoji} />
        </div>
      </div>
      {showFileModal && (
        <Suspense fallback={null}>
          <SendFileModal
            show={true}
            onHide={() => setShowFileModal(false)}
            urlUpload={uploadUrl}
          />
        </Suspense>
      )}
    </>
  );
};

export default TextBox;