import React , { useRef , useState } from 'react' ; import styled from 'styled-components' ; import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline' ; import { observer } from 'mobx-react-lite' ; import { Button } from '../../Button' ; import { Text } from '../../Text' ; import { FileDropperUtil } from '../../../utils/FileDropper' ; import FileItem from './FileItem' ; import WebRTCController from '../../../controllers/WebRTCController' ; import DataStore from '../../../stores/DataStore' ; import { WebRTCConnectionStatus } from '../../../types/WebRTC' ; const Wrapper = styled . div < { isDragging : boolean ; containItems : boolean ; } > `
  box-sizing: border-box;
  height: 100%;
  min-height: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: 0.3s;

  ${ ( { isDragging , containItems } ) => { return containItems ? `
          padding: 0;
          border: none;
          justify-content: space-between;
          align-items: flex-start;
        ` : `
          border: 2px ${ isDragging ? 'solid #E91E63' : 'dashed rgba(74, 74, 79, 1)' };
          padding: 24px;

          &:hover {
            background-color: #111111;
            transition: 0.3s;
          }
        ` ; } }
` ; const InfoText = styled . div `
  margin: 24px 0 8px;
` ; const InfoSubText = styled . div `
  margin-bottom: 40px;
` ; const NoteText = styled . div `
  margin: 24px 48px;
  text-align: center;
  opacity: 0.7;
` ; const File = styled . input `
  display: none;
` ; const DroppedFilesWrapper = styled . div `
  width: 100%;
  background-color: #000;
  padding: 32px;
  border-radius: 5px;
  border: 1px solid rgba(12, 12, 13, 1);
  height: 380px;
  max-height: 380px;
  overflow-y: auto;

  ::-webkit-scrollbar {
    width: 8px;
    height: 3px;
  }
  ::-webkit-scrollbar-button {
    background-color: #666;
  }
  ::-webkit-scrollbar-track {
    background-color: #646464;
  }
  ::-webkit-scrollbar-track-piece {
    background-color: #1e1e1e;
  }
  ::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: #666;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-corner {
    background-color: #646464;
  }
  ::-webkit-resizer {
    background-color: #666;
  }
` ; const FileItemWrapper = styled . div `
  margin-bottom: 8px;
  width: 100%;

  &:last-of-type {
    margin-bottom: 0;
  }
` ; const AddMoreAndSizeWrapper = styled . div `
  display: flex;
  justify-content: space-between;
  padding: 0 32px;
  width: 100%;
` ; const AddMoreSection = styled . div `
  display: flex;
  align-items: center;
  cursor: pointer;
` ; const IconStyles = { color : '#E91E63' , fontSize : '48px' , } ; const FileDropper = ( ) : React . ReactElement => { const [ isDragging , setIsDragging ] = useState ( false ) ; const [ droppedFiles , setDroppedFiles ] = useState < { [ key ] : File ; } > ( { } ) ; const fileInputRef = useRef < HTMLInputElement > ( null ) ; const dragCounter = useRef ( 0 ) ; /**
     * Function to handle the file input selection
     */ const onAddClickHandler = ( ) => { if ( fileInputRef . current ) { fileInputRef . current . click ( ) ; } } ; param e const onFileInputChange = async ( e ) => { e . preventDefault ( ) ; const { files } = e . target ; if ( files ) { const newFilesObject = await FileDropperUtil . getUniqueFiles ( droppedFiles , files ) ; setDroppedFiles ( newFilesObject ) ; } } ; param e const handleDrag = ( e ) => { e . preventDefault ( ) ; e . stopPropagation ( ) ; } ; param e const handleDragEnter = ( e ) => { e . preventDefault ( ) ; e . stopPropagation ( ) ; const draggedItems = e . dataTransfer . items || [ ] ; dragCounter . current += 1 ; if ( draggedItems . length && ! isDragging ) { setIsDragging ( true ) ; } } ; param e const handleDragLeave = ( e ) => { e . preventDefault ( ) ; e . stopPropagation ( ) ; dragCounter . current -= 1 ; if ( ! dragCounter . current ) { setIsDragging ( false ) ; } } ; param e const handleDrop = async ( e ) => { e . preventDefault ( ) ; e . stopPropagation ( ) ; setIsDragging ( false ) ; dragCounter . current = 0 ; const draggedFiles = e . dataTransfer . files ; if ( draggedFiles ) { const newFilesObject = await FileDropperUtil . getUniqueFiles ( droppedFiles , draggedFiles ) ; setDroppedFiles ( newFilesObject ) ; e . dataTransfer . clearData ( ) ; } } ; param fileToRemoveHash const handleFileRemove = ( fileToRemoveHash ) => { const { [ fileToRemoveHash ] : _fileToRemove , ... otherFiles } = droppedFiles ; WebRTCController . cancelSenderSendOperation ( fileToRemoveHash ) ; setDroppedFiles ( otherFiles ) ; } ; return ( < Wrapper onClick = { ( ) => { if ( ! Object . keys ( droppedFiles ) . length ) onAddClickHandler ( ) ; } } onDragOver = { handleDrag } onDragEnter = { handleDragEnter } onDragLeave = { handleDragLeave } onDrop = { handleDrop } isDragging = { isDragging } containItems = { ! ! Object . keys ( droppedFiles ) . length } > < File type = "file" ref = { fileInputRef } onChange = { onFileInputChange } multiple / > { Object . keys ( droppedFiles ) . length > 0 ? ( < > < DroppedFilesWrapper > { Object . keys ( droppedFiles ) . map ( ( fileHash ) => { const file = droppedFiles [ fileHash ] ; const sendProgress = DataStore . filesSendProgress [ fileHash ] ; return ( < FileItemWrapper key = { fileHash } > < FileItem file = { file } progress = { sendProgress } fileHash = { fileHash } onRemove = { handleFileRemove } / > < /FileItemWrapper>); } ) } < /DroppedFilesWrapper> < AddMoreAndSizeWrapper > < AddMoreSection onClick = { onAddClickHandler } > < AddCircleOutlineIcon /> & nbsp ; < Text content = "Click here to add more" / > < /AddMoreSection> < Text content = { FileDropperUtil . formatBytes ( FileDropperUtil . getAllFilesSize ( droppedFiles ) ) } fontWeight = "bold" fontSize = "14px" / > < /AddMoreAndSizeWrapper> < Button width = "100%" onClick = { ( ) => { WebRTCController . sendMetadata ( droppedFiles ) ; WebRTCController . sendFiles ( droppedFiles ) ; } } isDisabled = { ! DataStore . peerConnectionStatus || DataStore . webRTCConnectionStatus !== WebRTCConnectionStatus . CONNECTED || DataStore . isSending } > Send < /Button> < />) : (<> < AddCircleOutlineIcon style = { IconStyles } / > < InfoText > < Text content = "Drag and drop files" fontSize = "18px" fontWeight = "800" letterSpacing = "1px" / > < /InfoText> < InfoSubText > < Text content = "or click to send files" / > < /InfoSubText> < Button > Select files to send < /Button> < NoteText > < Text content = "Make sure you trust your recipient when sharing sensitive data." fontSize = "14px" / > < /NoteText> < />)} < /Wrapper>); } ; export default observer ( FileDropper ) ;