Refactor on upload media data fow

This commit is contained in:
Cássio Zen
2016-06-10 14:01:14 -03:00
parent 1ba98fdb5a
commit 1700f98e4e
8 changed files with 47 additions and 40 deletions

View File

@ -3,7 +3,7 @@ import Widgets from './Widgets';
export default class ControlPane extends React.Component {
controlFor(field) {
const { entry, getMedia, onChange, onAddMedia } = this.props;
const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
const widget = Widgets[field.get('widget')] || Widgets._unknown;
return React.createElement(widget.Control, {
key: field.get('name'),
@ -11,6 +11,7 @@ export default class ControlPane extends React.Component {
value: entry.getIn(['data', field.get('name')]),
onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
onAddMedia: onAddMedia,
onRemoveMedia: onRemoveMedia,
getMedia: getMedia
});
}

View File

@ -5,7 +5,7 @@ import PreviewPane from './PreviewPane';
export default class EntryEditor extends React.Component {
render() {
const { collection, entry, getMedia, onChange, onAddMedia, onPersist } = this.props;
const { collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
return <div>
<h1>Entry in {collection.get('label')}</h1>
<h2>{entry && entry.get('title')}</h2>
@ -17,6 +17,7 @@ export default class EntryEditor extends React.Component {
getMedia={getMedia}
onChange={onChange}
onAddMedia={onAddMedia}
onRemoveMedia={onRemoveMedia}
/>
</div>
<div className="cms-preview-pane" style={styles.pane}>

View File

@ -1,5 +1,6 @@
import React from 'react';
import { truncateMiddle } from '../../lib/textHelper';
import MediaProxy from '../../valueObjects/MediaProxy';
const MAX_DISPLAY_LENGTH = 50;
@ -7,11 +8,6 @@ export default class ImageControl extends React.Component {
constructor(props) {
super(props);
this.state = {
currentImage: props.value
};
this.revokeCurrentImage = this.revokeCurrentImage.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleFileInputRef = this.handleFileInputRef.bind(this);
this.handleClick = this.handleClick.bind(this);
@ -20,12 +16,6 @@ export default class ImageControl extends React.Component {
this.renderImageName = this.renderImageName.bind(this);
}
revokeCurrentImage() {
if (this.state.currentImage) {
//this.props.onRemoveMedia(this.state.currentImage);
}
}
handleFileInputRef(el) {
this._fileInput = el;
}
@ -47,7 +37,7 @@ export default class ImageControl extends React.Component {
handleChange(e) {
e.stopPropagation();
e.preventDefault();
this.revokeCurrentImage();
const fileList = e.dataTransfer ? e.dataTransfer.files : e.target.files;
const files = [...fileList];
const imageType = /^image\//;
@ -59,21 +49,25 @@ export default class ImageControl extends React.Component {
}
});
this.props.onRemoveMedia(this.props.value);
if (file) {
this.props.onAddMedia(file);
this.props.onChange(file.name);
this.setState({currentImage: file.name});
const mediaProxy = new MediaProxy(file.name, file);
this.props.onAddMedia(mediaProxy);
this.props.onChange(mediaProxy.uri);
} else {
this.props.onChange(null);
this.setState({currentImage: null});
}
}
renderImageName() {
if (!this.props.value) return null;
if (this.value instanceof MediaProxy) {
return truncateMiddle(this.props.value.uri, MAX_DISPLAY_LENGTH);
} else {
return truncateMiddle(this.props.value, MAX_DISPLAY_LENGTH);
}
if (!this.state.currentImage) return null;
return truncateMiddle(this.props.getMedia(this.state.currentImage).uri, MAX_DISPLAY_LENGTH);
}
render() {