@bigfishtv/cockpit/src/components/upload/FileUploadTray.js

import React, { Component } from 'react'
import classnames from 'classnames'

import plupload from '../../../lib/plupload'
import uploader from '../../decorators/uploader'

import Button from '../button/Button'
import Icon from '../Icon'

const { QUEUED, DONE } = plupload

/**
 * Tray component that sits at the bottom of sidebar and displays upload progress
 */
@uploader()
export default class FileUploadTray extends Component {
	constructor() {
		super()
		this.state = { collapsed: false }
	}

	handleToggle = () => {
		this.setState({ collapsed: !this.state.collapsed })
	}

	render() {
		const { uploader } = this.props
		const { collapsed } = this.state

		const pendingFiles = uploader.files.filter(file => file.status !== DONE).length

		if (pendingFiles === 0) return null

		const completedFiles = uploader.files.filter(file => file.percent >= 100).length
		const totalFiles = uploader.files.length

		const totalBytes = uploader.files.reduce((total, file) => total + file.size, 0)
		const completedBytes = uploader.files.reduce((total, file) => total + (file.percent / 100) * file.size, 0)

		return (
			<div className="upload-progress">
				<div className="upload-progress-header">
					<h4 className="upload-progress-title">{collapsed ? 'Expand' : 'Collapse'} </h4>
					<Button style="icon" size="small" onClick={this.handleToggle}>
						<Icon name={'chevron-' + (collapsed ? 'up' : 'down')} size={18} />
					</Button>
				</div>

				{collapsed ? (
					<div className="upload-progress-meter">
						<span className="upload-progress-meter-label">
							{completedFiles + ' / ' + totalFiles + ' files uploaded'}
						</span>
						<progress
							max={totalBytes}
							value={completedBytes}
							className={classnames({ indeterminate: status === QUEUED })}
						/>
					</div>
				) : (
					uploader.files.map((file, i) => {
						const { name, percent, status } = file
						return (
							<div key={i} className="upload-progress-meter">
								<span className="upload-progress-meter-label">{name}</span>
								<progress max="100" value={percent} className={classnames({ indeterminate: status === QUEUED })} />
							</div>
						)
					})
				)}
			</div>
		)
	}
}