Refactor on upload media data fow
This commit is contained in:
@ -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
|
||||
});
|
||||
}
|
||||
|
@ -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}>
|
||||
|
@ -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() {
|
||||
|
Reference in New Issue
Block a user