Support for YAML content
This commit is contained in:
@ -1,14 +1,14 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import Widgets from './Widgets';
|
||||
import {resolveWidget} from './Widgets';
|
||||
|
||||
export default class ControlPane extends React.Component {
|
||||
controlFor(field) {
|
||||
const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
|
||||
const widget = Widgets[field.get('widget')] || Widgets._unknown;
|
||||
const widget = resolveWidget(field.get('widget'));
|
||||
return <div className="cms-control">
|
||||
<label>{ field.get('label') }</label>
|
||||
{React.createElement(widget.Control, {
|
||||
{React.createElement(widget.control, {
|
||||
field: field,
|
||||
value: entry.getIn(['data', field.get('name')]),
|
||||
onChange: (value) => onChange(entry.setIn(['data', field.get('name')], value)),
|
||||
|
10
src/components/EntryEditor.css
Normal file
10
src/components/EntryEditor.css
Normal file
@ -0,0 +1,10 @@
|
||||
.container {
|
||||
display: flex
|
||||
}
|
||||
.controlPane {
|
||||
width: 50%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.previewPane {
|
||||
width: 50%;
|
||||
}
|
@ -2,13 +2,14 @@ import React, { PropTypes } from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ControlPane from './ControlPane';
|
||||
import PreviewPane from './PreviewPane';
|
||||
import styles from './EntryEditor.css';
|
||||
|
||||
export default function EntryEditor({ collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist }) {
|
||||
return <div>
|
||||
<h1>Entry in {collection.get('label')}</h1>
|
||||
<h2>{entry && entry.get('title')}</h2>
|
||||
<div className="cms-container" style={styles.container}>
|
||||
<div className="cms-control-pane" style={styles.controlPane}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.controlPane}>
|
||||
<ControlPane
|
||||
collection={collection}
|
||||
entry={entry}
|
||||
@ -18,7 +19,7 @@ export default function EntryEditor({ collection, entry, getMedia, onChange, onA
|
||||
onRemoveMedia={onRemoveMedia}
|
||||
/>
|
||||
</div>
|
||||
<div className="cms-preview-pane" style={styles.pane}>
|
||||
<div className={styles.previewPane}>
|
||||
<PreviewPane collection={collection} entry={entry} getMedia={getMedia} />
|
||||
</div>
|
||||
</div>
|
||||
@ -26,20 +27,6 @@ export default function EntryEditor({ collection, entry, getMedia, onChange, onA
|
||||
</div>;
|
||||
}
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
display: 'flex'
|
||||
},
|
||||
controlPane: {
|
||||
width: '50%',
|
||||
paddingLeft: '10px',
|
||||
paddingRight: '10px'
|
||||
},
|
||||
pane: {
|
||||
width: '50%'
|
||||
}
|
||||
};
|
||||
|
||||
EntryEditor.propTypes = {
|
||||
collection: ImmutablePropTypes.map.isRequired,
|
||||
entry: ImmutablePropTypes.map.isRequired,
|
||||
|
@ -60,7 +60,8 @@ export default class EntryListing extends React.Component {
|
||||
|
||||
cardFor(collection, entry, link) {
|
||||
//const { entry, getMedia, onChange, onAddMedia, onRemoveMedia } = this.props;
|
||||
const card = Cards[collection.getIn(['card', 'type'])] || Cards._unknown;
|
||||
const cartType = collection.getIn(['card', 'type']) || 'alltype';
|
||||
const card = Cards[cartType] || Cards._unknown;
|
||||
return React.createElement(card, {
|
||||
key: entry.get('slug'),
|
||||
collection: collection,
|
||||
|
@ -1,15 +1,15 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { getPreviewTemplate, getPreviewStyles } from '../lib/registry';
|
||||
import Widgets from './Widgets';
|
||||
import registry from '../lib/registry';
|
||||
import { resolveWidget } from './Widgets';
|
||||
import styles from './PreviewPane.css';
|
||||
|
||||
class Preview extends React.Component {
|
||||
previewFor(field) {
|
||||
const { entry, getMedia } = this.props;
|
||||
const widget = Widgets[field.get('widget')] || Widgets._unknown;
|
||||
return React.createElement(widget.Preview, {
|
||||
const widget = resolveWidget(field.get('widget'));
|
||||
return React.createElement(widget.preview, {
|
||||
field: field,
|
||||
value: entry.getIn(['data', field.get('name')]),
|
||||
getMedia: getMedia,
|
||||
@ -46,8 +46,8 @@ export default class PreviewPane extends React.Component {
|
||||
widgetFor(name) {
|
||||
const { collection, entry, getMedia } = this.props;
|
||||
const field = collection.get('fields').find((field) => field.get('name') === name);
|
||||
const widget = Widgets[field.get('widget')] || Widgets._unknown;
|
||||
return React.createElement(widget.Preview, {
|
||||
const widget = resolveWidget(field.get('widget'));
|
||||
return React.createElement(widget.preview, {
|
||||
field: field,
|
||||
value: entry.getIn(['data', field.get('name')]),
|
||||
getMedia: getMedia,
|
||||
@ -56,14 +56,14 @@ export default class PreviewPane extends React.Component {
|
||||
|
||||
renderPreview() {
|
||||
const props = Object.assign({}, this.props, {widgetFor: this.widgetFor});
|
||||
const component = getPreviewTemplate(props.collection.get('name')) || Preview;
|
||||
const component = registry.getPreviewTemplate(props.collection.get('name')) || Preview;
|
||||
|
||||
render(React.createElement(component, props), this.previewEl);
|
||||
}
|
||||
|
||||
handleIframeRef(ref) {
|
||||
if (ref) {
|
||||
getPreviewStyles().forEach((style) => {
|
||||
registry.getPreviewStyles().forEach((style) => {
|
||||
const linkEl = document.createElement('link');
|
||||
linkEl.setAttribute('rel', 'stylesheet');
|
||||
linkEl.setAttribute('href', style);
|
||||
@ -79,7 +79,7 @@ export default class PreviewPane extends React.Component {
|
||||
const { collection } = this.props;
|
||||
if (!collection) { return null; }
|
||||
|
||||
return <iframe className={styles.frame} ref={this.handleIframeRef}></iframe>
|
||||
return <iframe className={styles.frame} ref={this.handleIframeRef}></iframe>;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,3 +1,4 @@
|
||||
import registry from '../lib/registry';
|
||||
import UnknownControl from './Widgets/UnknownControl';
|
||||
import UnknownPreview from './Widgets/UnknownPreview';
|
||||
import StringControl from './Widgets/StringControl';
|
||||
@ -6,25 +7,15 @@ import MarkdownControl from './Widgets/MarkdownControl';
|
||||
import MarkdownPreview from './Widgets/MarkdownPreview';
|
||||
import ImageControl from './Widgets/ImageControl';
|
||||
import ImagePreview from './Widgets/ImagePreview';
|
||||
import DateTimeControl from './Widgets/DateTimeControl';
|
||||
import DateTimePreview from './Widgets/DateTimePreview';
|
||||
|
||||
registry.registerWidget('string', StringControl, StringPreview);
|
||||
registry.registerWidget('markdown', MarkdownControl, MarkdownPreview);
|
||||
registry.registerWidget('image', ImageControl, ImagePreview);
|
||||
registry.registerWidget('datetime', DateTimeControl, DateTimePreview);
|
||||
registry.registerWidget('_unknown', UnknownControl, UnknownPreview);
|
||||
|
||||
const Widgets = {
|
||||
_unknown: {
|
||||
Control: UnknownControl,
|
||||
Preview: UnknownPreview
|
||||
},
|
||||
string: {
|
||||
Control: StringControl,
|
||||
Preview: StringPreview
|
||||
},
|
||||
markdown: {
|
||||
Control: MarkdownControl,
|
||||
Preview: MarkdownPreview
|
||||
},
|
||||
image: {
|
||||
Control: ImageControl,
|
||||
Preview: ImagePreview
|
||||
}
|
||||
};
|
||||
|
||||
export default Widgets;
|
||||
export function resolveWidget(name) {
|
||||
return registry.getWidget(name) || registry.getWidget('_unknown');
|
||||
}
|
||||
|
Reference in New Issue
Block a user