Sha256: edd24aa28354bb75fbe80e3f40ac74e5e82069cba0491f11b59dafcdc928d129

Contents?: true

Size: 1.51 KB

Versions: 1

Compression:

Stored size: 1.51 KB

Contents

/* @flow */

import React, { useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
import classnames from 'classnames'

import { buildCss, noop } from '../utilities/props'
import { globalProps } from '../utilities/globalProps'
import type { Callback } from '../types'

import Body from '../pb_body/_body'
import Card from '../pb_card/_card'

type FileUploadProps = {
  accept?: array<string>,
  className?: string,
  onFilesAccepted: Callback,
}

const FileUpload = (props: FileUploadProps) => {
  const {
    accept = ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'],
    className,
    onFilesAccepted = noop,
  } = props
  const onDrop = useCallback((files) => {
    onFilesAccepted(files)
  })

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept,
    onDrop,
  })

  const acceptedFileTypes = accept.map((fileType) => {
    if (fileType.startsWith('image/')) {
      return fileType.replace('image/', ' ')
    } else {
      return fileType
    }
  })

  return (
    <div
        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
        {...getRootProps()}
    >
      <Card>
        <input {...getInputProps()} />
        <Body color="light">
          <If condition={isDragActive}>
            <p>{'Drop the files here ...'}</p>
            <Else />
            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFileTypes}`}</p>
          </If>
        </Body>
      </Card>
    </div>
  )
}

export default FileUpload

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
playbook_ui-10.5.0 app/pb_kits/playbook/pb_file_upload/_file_upload.jsx