Sha256: 713f315a6875891ab90314e578c8e15372d820c49f7b618848235b32914a43d7
Contents?: true
Size: 1.1 KB
Versions: 3
Compression:
Stored size: 1.1 KB
Contents
/* @flow */
import React, { useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
import {
buildCss,
noop,
} from '../utilities/props'
import type { Callback } from '../types.js'
import {
Body,
Card,
} from '..'
type FileUploadProps = {
acceptedFiles?: FileList,
className?: String,
onFilesAccepted: Callback,
}
const FileUpload = ({
acceptedFiles = [],
className,
onFilesAccepted = noop,
}: FileUploadProps) => {
const onDrop = useCallback((files) => {
onFilesAccepted(files)
})
const {
getRootProps,
getInputProps,
isDragActive,
} = useDropzone({ onDrop })
return (
<div
className={buildCss('pb_file_upload_kit', className)}
{...getRootProps()}
>
<Card>
<input {...getInputProps()} />
<Body
color="light"
>
<If condition={isDragActive}>
<p>{'Drop the files here ...'}</p>
<Else />
<p>{'Drag & drop some files here, or click to select files'}</p>
</If>
</Body>
</Card>
</div>
)
}
export default FileUpload
Version data entries
3 entries across 3 versions & 1 rubygems