1
0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +01:00

first cut: delete functionality

This commit is contained in:
Tim Daubenschütz 2015-06-25 13:46:10 +02:00
parent b7e933c943
commit ae17d2cb03
5 changed files with 16 additions and 10 deletions

View File

@ -99,7 +99,6 @@ var FileDragAndDrop = React.createClass({
}, },
render: function () { render: function () {
console.log(this.props.dropzoneInactive);
let hasFiles = this.props.filesToUpload.length > 0; let hasFiles = this.props.filesToUpload.length > 0;
let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop '; let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone'; className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';

View File

@ -33,18 +33,19 @@ let FileDragAndDropPreview = React.createClass({
// Decide whether an image or a placeholder picture should be displayed // Decide whether an image or a placeholder picture should be displayed
if(this.props.file.type.split('/')[0] === 'image') { if(this.props.file.type.split('/')[0] === 'image') {
previewElement = (<FileDragAndDropPreviewImage previewElement = (<FileDragAndDropPreviewImage
onClick={this.handleDeleteFile}
progress={this.props.file.progress} progress={this.props.file.progress}
url={this.props.file.url}/>); url={this.props.file.url}/>);
} else { } else {
previewElement = (<FileDragAndDropPreviewOther previewElement = (<FileDragAndDropPreviewOther
onClick={this.handleDeleteFile}
progress={this.props.file.progress} progress={this.props.file.progress}
type={this.props.file.type.split('/')[1]}/>); type={this.props.file.type.split('/')[1]}/>);
} }
return ( return (
<div <div
className="file-drag-and-drop-position" className="file-drag-and-drop-position">
onClick={this.handleDeleteFile}>
{previewElement} {previewElement}
</div> </div>
); );

View File

@ -6,7 +6,8 @@ import ProgressBar from 'react-progressbar';
let FileDragAndDropPreviewImage = React.createClass({ let FileDragAndDropPreviewImage = React.createClass({
propTypes: { propTypes: {
progress: React.PropTypes.number, progress: React.PropTypes.number,
url: React.PropTypes.string url: React.PropTypes.string,
onClick: React.PropTypes.func
}, },
render() { render() {
@ -17,6 +18,7 @@ let FileDragAndDropPreviewImage = React.createClass({
return ( return (
<div <div
onClick={this.props.onClick}
className="file-drag-and-drop-preview-image" className="file-drag-and-drop-preview-image"
style={imageStyle}> style={imageStyle}>
<ProgressBar completed={this.props.progress} color="black"/> <ProgressBar completed={this.props.progress} color="black"/>

View File

@ -1,3 +1,5 @@
'use strict';
import React from 'react'; import React from 'react';
import FileDragAndDropPreview from './file_drag_and_drop_preview'; import FileDragAndDropPreview from './file_drag_and_drop_preview';

View File

@ -6,12 +6,14 @@ import ProgressBar from 'react-progressbar';
let FileDragAndDropPreviewOther = React.createClass({ let FileDragAndDropPreviewOther = React.createClass({
propTypes: { propTypes: {
type: React.PropTypes.string, type: React.PropTypes.string,
progress: React.PropTypes.number progress: React.PropTypes.number,
onClick: React.PropTypes.func
}, },
render() { render() {
return ( return (
<div <div
onClick={this.props.onClick}
className="file-drag-and-drop-preview"> className="file-drag-and-drop-preview">
<ProgressBar completed={this.props.progress} color="black"/> <ProgressBar completed={this.props.progress} color="black"/>
<div className="file-drag-and-drop-preview-table-wrapper"> <div className="file-drag-and-drop-preview-table-wrapper">