- );
+ );
+ } else {
+ return null;
+ }
}
});
diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index 403100c8..b8ff1539 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -10,6 +10,9 @@ import AlertDismissable from './alert';
let Form = React.createClass({
propTypes: {
+ url: React.PropTypes.string,
+ handleSuccess: React.PropTypes.func,
+ getFormData: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
@@ -47,6 +50,9 @@ let Form = React.createClass({
},
getFormData(){
+ if ('getFormData' in this.props){
+ return this.props.getFormData();
+ }
let data = {};
for (let ref in this.refs){
data[this.refs[ref].props.name] = this.refs[ref].state.value;
@@ -66,7 +72,7 @@ let Form = React.createClass({
this.refs[ref].handleSuccess();
}
}
- this.setState({edited: false});
+ this.setState({edited: false, submitted: false});
},
handleError(err){
if (err.json) {
@@ -102,9 +108,11 @@ let Form = React.createClass({
if (this.state.edited){
buttons = (
-
-
-
+
);
diff --git a/js/components/ascribe_forms/form_piece_extradata.js b/js/components/ascribe_forms/form_piece_extradata.js
index 045c6adb..c2cebeb5 100644
--- a/js/components/ascribe_forms/form_piece_extradata.js
+++ b/js/components/ascribe_forms/form_piece_extradata.js
@@ -5,47 +5,58 @@ import React from 'react';
import requests from '../../utils/requests';
import apiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
+import Form from './form';
+import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable';
-
let PieceExtraDataForm = React.createClass({
- mixins: [FormMixin],
-
- url() {
- return requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.editions[0].bitcoin_id});
+ propTypes: {
+ edition: React.PropTypes.object,
+ handleSuccess: React.PropTypes.func,
+ name: React.PropTypes.string,
+ title: React.PropTypes.string,
+ editable: React.PropTypes.bool
},
-
- getFormData() {
+ getFormData(){
let extradata = {};
- extradata[this.props.name] = this.refs[this.props.name].state.value;
+ extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
return {
- bitcoin_id: this.getBitcoinIds().join(),
+ bitcoin_id: this.props.edition.bitcoin_id,
extradata: extradata
};
},
-
- renderForm() {
- let defaultValue = this.props.editions[0].extra_data[this.props.name] || '';
+ render() {
+ let defaultValue = this.props.edition.extra_data[this.props.name] || '';
if (defaultValue.length === 0 && !this.props.editable){
return null;
}
+ let url = requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.edition.bitcoin_id});
return (
-
+
);
}
});
+
export default PieceExtraDataForm;
diff --git a/js/components/ascribe_forms/form_share_email.js b/js/components/ascribe_forms/form_share_email.js
index 94c2fa51..93cf6e81 100644
--- a/js/components/ascribe_forms/form_share_email.js
+++ b/js/components/ascribe_forms/form_share_email.js
@@ -12,7 +12,7 @@ let ShareForm = React.createClass({
mixins: [FormMixin],
url() {
- return ApiUrls.ownership_shares_mail;
+ return ApiUrls.ownership_shares;
},
getFormData() {
diff --git a/js/components/ascribe_forms/input_textarea_toggable.js b/js/components/ascribe_forms/input_textarea_toggable.js
index 22e95fda..222a6e36 100644
--- a/js/components/ascribe_forms/input_textarea_toggable.js
+++ b/js/components/ascribe_forms/input_textarea_toggable.js
@@ -2,56 +2,29 @@
import React from 'react';
-import AlertMixin from '../../mixins/alert_mixin';
import TextareaAutosize from 'react-textarea-autosize';
-import Button from 'react-bootstrap/lib/Button';
let InputTextAreaToggable = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
- submitted: React.PropTypes.bool,
rows: React.PropTypes.number.isRequired,
- onSubmit: React.PropTypes.func.isRequired,
required: React.PropTypes.string,
defaultValue: React.PropTypes.string
},
- mixins: [AlertMixin],
-
getInitialState() {
return {
- value: this.props.defaultValue,
- edited: false,
- alerts: null // needed in AlertMixin
+ value: this.props.defaultValue
};
},
handleChange(event) {
- this.setState({
- value: event.target.value,
- edited: true
- });
- },
- reset(){
- this.setState(this.getInitialState());
- },
- submit(){
- this.props.onSubmit();
- this.setState({edited: false});
+ this.setState({value: event.target.value});
+ this.props.onChange(event);
},
render() {
let className = 'form-control ascribe-textarea';
- let buttons = null;
let textarea = null;
- if (this.props.editable && this.state.edited){
- buttons = (
-
-
-
-
- );
-
- }
if (this.props.editable){
className = className + ' ascribe-textarea-editable';
textarea = (
@@ -61,21 +34,16 @@ let InputTextAreaToggable = React.createClass({
rows={this.props.rows}
required={this.props.required}
onChange={this.handleChange}
- placeholder='Write something...' />
+ onBlur={this.props.onBlur}
+ placeholder={this.props.placeholder} />
);
}
else{
textarea =
{this.state.value};
}
- let alerts = (this.props.submitted) ? null : this.state.alerts;
- return (
-
- {alerts}
- {textarea}
- {buttons}
-
- );
+ return textarea;
}
});
+
export default InputTextAreaToggable;
\ No newline at end of file
diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index 6181dbc9..f0c445f3 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -8,7 +8,9 @@ import Tooltip from 'react-bootstrap/lib/Tooltip';
let Property = React.createClass({
propTypes: {
+ hidden: React.PropTypes.bool,
editable: React.PropTypes.bool,
+ tooltip: React.PropTypes.element,
label: React.PropTypes.string,
value: React.PropTypes.oneOfType([
React.PropTypes.string,
@@ -19,7 +21,8 @@ let Property = React.createClass({
getDefaultProps() {
return {
- editable: true
+ editable: true,
+ hidden: false
};
},
@@ -38,8 +41,16 @@ let Property = React.createClass({
});
},
reset(){
+ // maybe do reset by reload instead of frontend state?
this.setState({value: this.state.initialValue});
- this.refs.input.getDOMNode().value = this.state.initialValue;
+ if (this.refs.input.state){
+ // This is probably not the right way but easy fix
+ this.refs.input.state.value = this.state.initialValue;
+ }
+ else{
+ this.refs.input.getDOMNode().value = this.state.initialValue;
+ }
+
},
handleChange(event) {
@@ -74,6 +85,9 @@ let Property = React.createClass({
this.setState({errors: null});
},
getClassName() {
+ if(this.props.hidden){
+ return 'is-hidden';
+ }
if(!this.props.editable){
return 'is-fixed';
}
diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
new file mode 100644
index 00000000..a4d1781b
--- /dev/null
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -0,0 +1,122 @@
+import React from 'react';
+import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
+
+
+// Taken from: https://github.com/fedosejev/react-file-drag-and-drop
+var FileDragAndDrop = React.createClass({
+ propTypes: {
+ onDragStart: React.PropTypes.func,
+ onDrop: React.PropTypes.func.isRequired,
+ onDragEnter: React.PropTypes.func,
+ onLeave: React.PropTypes.func,
+ onDragOver: React.PropTypes.func,
+ onDragEnd: React.PropTypes.func,
+ filesToUpload: React.PropTypes.array,
+ handleDeleteFile: React.PropTypes.func
+ },
+
+ handleDragStart(event) {
+ if (typeof this.props.onDragStart === 'function') {
+ this.props.onDragStart(event);
+ }
+ },
+
+ handleDrag(event) {
+ if (typeof this.props.onDrag === 'function') {
+ this.props.onDrag(event);
+ }
+ },
+
+ handleDragEnd(event) {
+ if (typeof this.props.onDragEnd === 'function') {
+ this.props.onDragEnd(event);
+ }
+ },
+
+ handleDragEnter(event) {
+ if (typeof this.props.onDragEnter === 'function') {
+ this.props.onDragEnter(event);
+ }
+ },
+
+ handleDragLeave(event) {
+ if (typeof this.props.onDragLeave === 'function') {
+ this.props.onDragLeave(event);
+ }
+ },
+
+ handleDragOver(event) {
+ event.preventDefault();
+
+ if (typeof this.props.onDragOver === 'function') {
+ this.props.onDragOver(event);
+ }
+ },
+
+
+ handleDrop(event) {
+ event.preventDefault();
+ event.stopPropagation();
+ let files;
+
+ // handle Drag and Drop
+ if(event.dataTransfer && event.dataTransfer.files.length > 0) {
+ files = event.dataTransfer.files;
+ } else if(event.target.files) { // handle input type file
+ files = event.target.files;
+ }
+
+ if(typeof this.props.onDrop === 'function' && files) {
+ this.props.onDrop(files);
+ }
+
+ },
+
+ handleDeleteFile(fileId) {
+ // input's value is not change the second time someone
+ // inputs the same file again, therefore we need to reset its value
+ this.refs.fileinput.getDOMNode().value = '';
+ this.props.handleDeleteFile(fileId);
+ },
+
+ handleOnClick() {
+ // Simulate click on hidden file input
+ var event = document.createEvent('HTMLEvents');
+ event.initEvent('click', false, true);
+ this.refs.fileinput.getDOMNode().dispatchEvent(event);
+ },
+
+ render: function () {
+ let hasFiles = this.props.filesToUpload.length > 0;
+
+ return (
+
+ {hasFiles ? null : Click or drag to add files}
+
+
+
+ );
+ }
+});
+
+module.exports = FileDragAndDrop;
\ No newline at end of file
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
new file mode 100644
index 00000000..4f3980c3
--- /dev/null
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
+import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
+
+
+let FileDragAndDropPreview = React.createClass({
+
+ propsTypes: {
+ file: React.PropTypes.shape({
+ url: React.PropTypes.string,
+ type: React.PropTypes.string
+ }).isRequired,
+ handleDeleteFile: React.PropTypes.func
+ },
+
+ handleDeleteFile(event) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ // handleDeleteFile is optional, so if its not submitted,
+ // don't run it
+ if(this.props.handleDeleteFile) {
+ this.props.handleDeleteFile(this.props.file.id);
+ }
+ },
+
+ render() {
+ let previewElement;
+
+ // Decide wether an image or a placeholder picture should be displayed
+ if(this.props.file.type.split('/')[0] === 'image') {
+ previewElement = (
);
+ } else {
+ previewElement = ();
+ }
+
+ return (
+
+ {previewElement}
+
+ );
+ }
+});
+
+export default FileDragAndDropPreview;
\ No newline at end of file
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
new file mode 100644
index 00000000..53790191
--- /dev/null
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_image.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ProgressBar from 'react-progressbar';
+
+let FileDragAndDropPreviewImage = React.createClass({
+ propTypes: {
+ progress: React.PropTypes.number,
+ url: React.PropTypes.string
+ },
+
+ render() {
+ let imageStyle = {
+ backgroundImage: 'url("' + this.props.url + '")',
+ backgroundSize: 'cover'
+ };
+
+ return (
+
+ );
+ }
+});
+
+export default FileDragAndDropPreviewImage;
\ No newline at end of file
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
new file mode 100644
index 00000000..47168793
--- /dev/null
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import FileDragAndDropPreview from './file_drag_and_drop_preview';
+
+let FileDragAndDropPreviewIterator = React.createClass({
+ propTypes: {
+ files: React.PropTypes.array,
+ handleDeleteFile: React.PropTypes.func
+ },
+
+ render() {
+ if(this.props.files) {
+ return (
+
+ {this.props.files.map((file, i) => {
+ return (
+
+ );
+ })}
+
+ );
+ } else {
+ return null;
+ }
+ }
+});
+
+export default FileDragAndDropPreviewIterator;
\ No newline at end of file
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
new file mode 100644
index 00000000..18f4031c
--- /dev/null
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_other.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import ProgressBar from 'react-progressbar';
+
+let FileDragAndDropPreviewOther = React.createClass({
+ propTypes: {
+ type: React.PropTypes.string,
+ progress: React.PropTypes.number
+ },
+
+ render() {
+ return(
+
+
+
+
+ {'.' + this.props.type}
+
+
+