onion/js/components/ascribe_uploader/file_drag_and_drop_dialog.js

'use strict';

import React from 'react';

let FileDragAndDropDialog = React.createClass({
    propTypes: {
        hasFiles: React.PropTypes.bool,
        multipleFiles: React.PropTypes.bool,
        onClick: React.PropTypes.func
    },

    render() {
        if(this.props.hasFiles) {
            return null;
        } else {
            if(this.props.multipleFiles) {
                return (
                    <span className="file-drag-and-drop-dialog">Click or drag to add files</span>
                );
            } else {
                return (
                    <span className="file-drag-and-drop-dialog">
                        <p>Drag a file here</p>
                        <p>or</p>
                        <span
                            className="btn btn-default"
                            onClick={this.props.onClick}>
                                choose a file to upload
                        </span>
                    </span>
                );
            }
        }
    }
});

export default FileDragAndDropDialog;