Proyectos de Subversion LeadersLinked - Antes de SPA

/* 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 '../../chat/chat/personal-chat/emojione/Emojione'

const SendFileModal = React.lazy(() => import('../../chat/chat/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="block-wchat">

                <AttachFileIcon className='btn' onClick={handleshowFileModal} />

                <SentimentVerySatisfiedRoundedIcon className="btn" onClick={handleShowEmojiTab} />

                <textarea

                    placeholder={CHAT_LABELS.WRITE_A_MESSAGE}

                    onKeyDown={onKeyDown}

                    ref={textAreaEl}

                    onFocus={() => isNotSeen && markRead()}

                />

                <div className="wchat-box-items-overlay-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