Sha256: b73841258c368b09dabe396b3b78019f665bb1e3335514c63d4e66c6cbfa2e32

Contents?: true

Size: 1.27 KB

Versions: 7

Compression:

Stored size: 1.27 KB

Contents

/* @flow */

import React, { useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
import { buildCss, noop } from '../utilities/props'
import classnames from 'classnames'
import { globalProps } from '../utilities/globalProps.js'

import type { Callback } from '../types.js'

import { Body, Card } from '..'

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,
  })

  return (
    <div
        className={classnames(buildCss('pb_file_upload_kit', className), globalProps(props))}
        {...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

7 entries across 7 versions & 1 rubygems

Version Path
playbook_ui-6.1.0.pre.alpha5 app/pb_kits/playbook/pb_file_upload/_file_upload.jsx
playbook_ui-6.1.0.pre.alpha4 app/pb_kits/playbook/pb_file_upload/_file_upload.jsx
playbook_ui-6.1.0.pre.alpha3 app/pb_kits/playbook/pb_file_upload/_file_upload.jsx
playbook_ui-6.1.0.pre.alpha2 app/pb_kits/playbook/pb_file_upload/_file_upload.jsx
playbook_ui-6.1.0.pre.alpha1 app/pb_kits/playbook/pb_file_upload/_file_upload.jsx
playbook_ui-6.1.0 app/pb_kits/playbook/pb_file_upload/_file_upload.jsx
playbook_ui-6.0.1.pre.alpha6 app/pb_kits/playbook/pb_file_upload/_file_upload.jsx