refactor: Creating Medias reducer

This commit is contained in:
Cássio Zen
2016-06-10 00:16:01 -03:00
parent 9275aaec90
commit 1ba98fdb5a
21 changed files with 130 additions and 121 deletions

View File

@ -3,7 +3,7 @@ import Widgets from './Widgets';
export default class ControlPane extends React.Component {
controlFor(field) {
const { entry, onChange, onAddMedia, onRemoveMedia } = this.props;
const { entry, getMedia, onChange, onAddMedia } = this.props;
const widget = Widgets[field.get('widget')] || Widgets._unknown;
return React.createElement(widget.Control, {
key: field.get('name'),
@ -11,7 +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, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
const { collection, entry, getMedia, onChange, onAddMedia, onPersist } = this.props;
return <div>
<h1>Entry in {collection.get('label')}</h1>
<h2>{entry && entry.get('title')}</h2>
@ -14,13 +14,13 @@ export default class EntryEditor extends React.Component {
<ControlPane
collection={collection}
entry={entry}
getMedia={getMedia}
onChange={onChange}
onAddMedia={onAddMedia}
onRemoveMedia={onRemoveMedia}
/>
</div>
<div className="cms-preview-pane" style={styles.pane}>
<PreviewPane collection={collection} entry={entry}/>
<PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
</div>
</div>
<button onClick={onPersist}>Save</button>

View File

@ -3,12 +3,13 @@ import Widgets from './Widgets';
export default class PreviewPane extends React.Component {
previewFor(field) {
const { entry } = this.props;
const { entry, getMedia } = this.props;
const widget = Widgets[field.get('widget')] || Widgets._unknown;
return React.createElement(widget.Preview, {
key: field.get('name'),
field: field,
value: entry.getIn(['data', field.get('name')])
value: entry.getIn(['data', field.get('name')]),
getMedia: getMedia,
});
}

View File

@ -1,6 +1,5 @@
import React from 'react';
import { truncateMiddle } from '../../lib/textHelper';
import ImageProxy from '../../valueObjects/ImageProxy';
const MAX_DISPLAY_LENGTH = 50;
@ -9,7 +8,7 @@ export default class ImageControl extends React.Component {
super(props);
this.state = {
currentImage: props.value ? new ImageProxy(props.value, null, true) : null
currentImage: props.value
};
this.revokeCurrentImage = this.revokeCurrentImage.bind(this);
@ -22,8 +21,8 @@ export default class ImageControl extends React.Component {
}
revokeCurrentImage() {
if (this.state.currentImage && !this.state.currentImage.uploaded) {
this.props.onRemoveMedia(this.state.currentImage);
if (this.state.currentImage) {
//this.props.onRemoveMedia(this.state.currentImage);
}
}
@ -49,7 +48,6 @@ export default class ImageControl extends React.Component {
e.stopPropagation();
e.preventDefault();
this.revokeCurrentImage();
let imageRef = null;
const fileList = e.dataTransfer ? e.dataTransfer.files : e.target.files;
const files = [...fileList];
const imageType = /^image\//;
@ -62,17 +60,20 @@ export default class ImageControl extends React.Component {
});
if (file) {
imageRef = new ImageProxy(file.name, window.URL.createObjectURL(file, {oneTimeOnly: true}));
this.props.onAddMedia(file);
this.props.onChange(file.name);
this.setState({currentImage: file.name});
} else {
this.props.onChange(null);
this.setState({currentImage: null});
}
this.props.onChange(imageRef);
this.setState({currentImage: imageRef});
}
renderImageName() {
if (!this.state.currentImage) return null;
return truncateMiddle(this.state.currentImage.uri, MAX_DISPLAY_LENGTH);
return truncateMiddle(this.props.getMedia(this.state.currentImage).uri, MAX_DISPLAY_LENGTH);
}
render() {

View File

@ -6,7 +6,7 @@ export default class ImagePreview extends React.Component {
}
render() {
const { value } = this.props;
return value ? <img src={value}/> : null;
const { value, getMedia } = this.props;
return value ? <img src={getMedia(value)}/> : null;
}
}