import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Dropzone from 'react-dropzone';
import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
id: React.PropTypes.string,
name: React.PropTypes.string,
description: React.PropTypes.string,
artifactName: React.PropTypes.string
});
class SoftwareProductProcessesEditorView extends React.Component {
state = {
dragging: false,
files: []
};
static propTypes = {
data: SoftwareProductProcessEditorPropType,
previousData: SoftwareProductProcessEditorPropType,
isReadOnlyMode: React.PropTypes.bool,
onDataChanged: React.PropTypes.func,
onSubmit: React.PropTypes.func,
onCancel: React.PropTypes.func
};
render() {
let {isReadOnlyMode, onCancel, onDataChanged, data = {}} = this.props;
let {name, description, artifactName} = data;
return (
this.submit() }
onReset={ () => onCancel() }
className='vsp-processes-editor'>
this.handleImportSubmit(files)}
onDragEnter={() => this.setState({dragging:true})}
onDragLeave={() => this.setState({dragging:false})}
multiple={false}
disableClick={true}
ref='processEditorFileInput'
name='processEditorFileInput'
accept='*.*'>
onDataChanged({name})}
label={i18n('Name')}
value={name}
validations={{validateName: true, maxLength: 120, required: true}}
type='text'/>
{i18n('Drag & drop for upload')}
{i18n('or')}
this.refs.processEditorFileInput.open()}>
{i18n('Select file')}
onDataChanged({description})}
label={i18n('Notes')}
value={description}
name='vsp-process-description'
className='vsp-process-description'
validations={{maxLength: 1000}}
type='textarea'/>
);
}
submit() {
const {data: process, previousData: previousProcess} = this.props;
let {files} = this.state;
let formData = new FormData();
if (files.length) {
let file = files[0];
formData.append('upload', file);
}
let updatedProcess = {
...process,
formData: files.length ? formData : false
};
this.props.onSubmit({process: updatedProcess, previousProcess});
}
handleImportSubmit(files) {
let {onDataChanged} = this.props;
this.setState({
dragging: false,
complete: '0',
files
});
onDataChanged({artifactName: files[0].name});
}
}
export default SoftwareProductProcessesEditorView;