Support for YAML content

This commit is contained in:
Mathias Biilmann Christensen
2016-09-11 23:08:18 +02:00
parent bbbf3c5621
commit fcd0ce718a
10 changed files with 291 additions and 73 deletions

View File

@ -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)),

View File

@ -0,0 +1,10 @@
.container {
display: flex
}
.controlPane {
width: 50%;
padding: 0 10px;
}
.previewPane {
width: 50%;
}

View File

@ -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,

View File

@ -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,

View File

@ -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>;
}
}

View File

@ -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');
}