@bigfishtv/cockpit/src/components/asset/AssetAutoCell.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'

import plupload from '../../../lib/plupload'
import uploader from '../../decorators/uploader'
import { extractDataUrlFromNative, getImageUrl, getAssetUrl } from '../../utils/fileUtils'

import AssetUploading from '../asset/AssetUploading'
import AssetCell from '../asset/AssetCell'

// eslint-disable-next-line no-unused-vars
const { QUEUED, UPLOADING, FAILED, DONE } = plupload

// we define this because react-docgen fails when defaultProp directly references an imported component
const DefaultAssetCell = props => <AssetCell {...props} />

/**
 * AssetAutoCell is a smart wrapper for AssetCell.
 * It listens to the global plupload instance to know if its 'asset' prop is currently uploading and reflects that state accordingly.
 */
@uploader()
export default class AssetAutoCell extends Component {
	static propTypes = {
		/** object containing either a temp id (for uploading file), or all details to display asset */
		asset: PropTypes.object.isRequired,
		/** tank image resize string */
		size: PropTypes.string,
	}

	static defaultProps = {
		asset: {},
		size: 'cockpit-150',
		AssetCell: DefaultAssetCell,
	}

	componentDidMount() {
		this.mounted = true
		this.dataUrl = false
		this.fetchingDataUrl = false
	}

	componentWillUpdate(nextProps, nextState) {
		const { uploader, asset } = this.props
		const file = (uploader && uploader.getFile(asset.id)) || false
		if (file && !this.dataUrl && !this.fetchingDataUrl) {
			this.fetchingDataUrl = true
			extractDataUrlFromNative(file.getNative(), data => {
				this.dataUrl = data
				this.fetchingDataUrl = false
				if (this.mounted) this.forceUpdate()
			})
		}
	}

	componentWillUnmount() {
		this.mounted = false
	}

	render() {
		const { AssetCell, uploader, asset, size, ...rest } = this.props
		const file = (uploader && uploader.getFile(asset.id)) || false

		if (file && file.status !== DONE) {
			return <AssetUploading {...rest} asset={asset} url={this.dataUrl || asset.url} percent={file.percent} />
		} else {
			const url = asset
				? asset.kind == 'image'
					? getImageUrl(asset, size)
					: getAssetUrl(asset)
				: this.dataUrl || 'http://placehold.it/300x200'
			return <AssetCell asset={asset} size={size} {...rest} url={url} />
		}
	}
}