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;