Moved draft state for an entry (when in edit mode) to Redux
This commit is contained in:
@ -3,15 +3,15 @@ import Widgets from './Widgets';
|
||||
|
||||
export default class ControlPane extends React.Component {
|
||||
controlFor(field) {
|
||||
const { entry } = this.props;
|
||||
const { entry, onChange, onAddMedia, onRemoveMedia } = this.props;
|
||||
const widget = Widgets[field.get('widget')] || Widgets._unknown;
|
||||
return React.createElement(widget.Control, {
|
||||
key: field.get('name'),
|
||||
field: field,
|
||||
value: entry.getIn(['data', field.get('name')]),
|
||||
onChange: (value) => this.props.onChange(entry.setIn(['data', field.get('name')], value)),
|
||||
onAddMedia: (mediaFile) => this.props.onAddMedia(mediaFile),
|
||||
onRemoveMedia: (mediaFile) => this.props.onRemoveMedia(mediaFile)
|
||||
onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
|
||||
onAddMedia: onAddMedia,
|
||||
onRemoveMedia: onRemoveMedia
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -1,44 +1,11 @@
|
||||
import React from 'react';
|
||||
import Immutable from 'immutable';
|
||||
import ControlPane from './ControlPane';
|
||||
import PreviewPane from './PreviewPane';
|
||||
|
||||
export default class EntryEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
entry: props.entry,
|
||||
mediaFiles: Immutable.List()
|
||||
};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleAddMedia = this.handleAddMedia.bind(this);
|
||||
this.handleRemoveMedia = this.handleRemoveMedia.bind(this);
|
||||
this.handleSave = this.handleSave.bind(this);
|
||||
}
|
||||
|
||||
handleChange(entry) {
|
||||
this.setState({entry: entry});
|
||||
}
|
||||
|
||||
handleAddMedia(mediaFile) {
|
||||
this.setState({mediaFiles: this.state.mediaFiles.push(mediaFile)});
|
||||
}
|
||||
|
||||
handleRemoveMedia(mediaFile) {
|
||||
const newState = this.state.mediaFiles.filterNot((item) => item === mediaFile);
|
||||
this.state = {
|
||||
entry: this.props.entry,
|
||||
mediaFiles: Immutable.List(newState)
|
||||
};
|
||||
}
|
||||
|
||||
handleSave() {
|
||||
this.props.onPersist(this.state.entry, this.state.mediaFiles);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { collection, entry } = this.props;
|
||||
|
||||
const { collection, entry, onChange, onAddMedia, onRemoveMedia, onPersist } = this.props;
|
||||
return <div>
|
||||
<h1>Entry in {collection.get('label')}</h1>
|
||||
<h2>{entry && entry.get('title')}</h2>
|
||||
@ -46,17 +13,17 @@ export default class EntryEditor extends React.Component {
|
||||
<div className="cms-control-pane" style={styles.pane}>
|
||||
<ControlPane
|
||||
collection={collection}
|
||||
entry={this.state.entry}
|
||||
onChange={this.handleChange}
|
||||
onAddMedia={this.handleAddMedia}
|
||||
onRemoveMedia={this.handleRemoveMedia}
|
||||
entry={entry}
|
||||
onChange={onChange}
|
||||
onAddMedia={onAddMedia}
|
||||
onRemoveMedia={onRemoveMedia}
|
||||
/>
|
||||
</div>
|
||||
<div className="cms-preview-pane" style={styles.pane}>
|
||||
<PreviewPane collection={collection} entry={this.state.entry}/>
|
||||
<PreviewPane collection={collection} entry={entry}/>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={this.handleSave}>Save</button>
|
||||
<button onClick={onPersist}>Save</button>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
@ -62,8 +62,8 @@ export default class ImageControl extends React.Component {
|
||||
});
|
||||
|
||||
if (file) {
|
||||
imageRef = new ImageProxy(file.name, file);
|
||||
this.props.onAddMedia(imageRef);
|
||||
imageRef = new ImageProxy(file.name, window.URL.createObjectURL(file, {oneTimeOnly: true}));
|
||||
this.props.onAddMedia(file);
|
||||
}
|
||||
|
||||
this.props.onChange(imageRef);
|
||||
|
Reference in New Issue
Block a user