Merge pull request #146 from netlify/fix-demo-ui
WIP: Change how single entries are fetched to avoid loading full list
This commit is contained in:
@ -1,6 +1,7 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import MarkupIt, { Syntax, BLOCKS, STYLES, ENTITIES } from 'markup-it';
|
||||
import { omit } from 'lodash';
|
||||
import registry from '../../lib/registry';
|
||||
|
||||
const defaultSchema = {
|
||||
[BLOCKS.DOCUMENT]: 'article',
|
||||
@ -44,43 +45,16 @@ function sanitizeProps(props) {
|
||||
return omit(props, notAllowedAttributes);
|
||||
}
|
||||
|
||||
function renderToken(schema, token, index = 0, key = '0') {
|
||||
const type = token.get('type');
|
||||
const data = token.get('data');
|
||||
const text = token.get('text');
|
||||
const tokens = token.get('tokens');
|
||||
const nodeType = schema[type];
|
||||
key = `${ key }.${ index }`;
|
||||
|
||||
// Only render if type is registered as renderer
|
||||
if (typeof nodeType !== 'undefined') {
|
||||
let children = null;
|
||||
if (tokens.size) {
|
||||
children = tokens.map((token, idx) => renderToken(schema, token, idx, key));
|
||||
} else if (type === 'text') {
|
||||
children = text;
|
||||
}
|
||||
if (nodeType !== null) {
|
||||
let props = { key, token };
|
||||
if (typeof nodeType !== 'function') {
|
||||
props = { key, ...sanitizeProps(data.toJS()) };
|
||||
}
|
||||
// If this is a react element
|
||||
return React.createElement(nodeType, props, children);
|
||||
} else {
|
||||
// If this is a text node
|
||||
return children;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export default class MarkupItReactRenderer extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const { syntax } = props;
|
||||
this.parser = new MarkupIt(syntax);
|
||||
this.plugins = {};
|
||||
registry.getEditorComponents().forEach((component) => {
|
||||
this.plugins[component.get('id')] = component;
|
||||
});
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
@ -89,10 +63,51 @@ export default class MarkupItReactRenderer extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
renderToken(schema, token, index = 0, key = '0') {
|
||||
const type = token.get('type');
|
||||
const data = token.get('data');
|
||||
const text = token.get('text');
|
||||
const tokens = token.get('tokens');
|
||||
const nodeType = schema[type];
|
||||
key = `${ key }.${ index }`;
|
||||
|
||||
// Only render if type is registered as renderer
|
||||
if (typeof nodeType !== 'undefined') {
|
||||
let children = null;
|
||||
if (tokens.size) {
|
||||
children = tokens.map((token, idx) => this.renderToken(schema, token, idx, key));
|
||||
} else if (type === 'text') {
|
||||
children = text;
|
||||
}
|
||||
if (nodeType !== null) {
|
||||
let props = { key, token };
|
||||
if (typeof nodeType !== 'function') {
|
||||
props = { key, ...sanitizeProps(data.toJS()) };
|
||||
}
|
||||
// If this is a react element
|
||||
return React.createElement(nodeType, props, children);
|
||||
} else {
|
||||
// If this is a text node
|
||||
return children;
|
||||
}
|
||||
}
|
||||
|
||||
const plugin = this.plugins[token.get('type')];
|
||||
if (plugin) {
|
||||
const output = plugin.toPreview(token.get('data').toJS());
|
||||
return typeof output === 'string' ?
|
||||
<span dangerouslySetInnerHTML={{ __html: output}} /> :
|
||||
output;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const { value, schema } = this.props;
|
||||
const content = this.parser.toContent(value);
|
||||
return renderToken({ ...defaultSchema, ...schema }, content.get('token'));
|
||||
return this.renderToken({ ...defaultSchema, ...schema }, content.get('token'));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { ScrollSyncPane } from '../ScrollSync';
|
||||
import registry from '../../lib/registry';
|
||||
import Collection from '../../valueObjects/Collection';
|
||||
import { resolveWidget } from '../Widgets';
|
||||
import Preview from './Preview';
|
||||
import styles from './PreviewPane.css';
|
||||
@ -26,7 +27,9 @@ export default class PreviewPane extends React.Component {
|
||||
};
|
||||
|
||||
renderPreview() {
|
||||
const component = registry.getPreviewTemplate(this.props.collection.get('name')) || Preview;
|
||||
const { entry, collection } = this.props;
|
||||
const collectionModel = new Collection(collection);
|
||||
const component = registry.getPreviewTemplate(collectionModel.templateName(entry.get('slug'))) || Preview;
|
||||
const previewProps = {
|
||||
...this.props,
|
||||
widgetFor: this.widgetFor,
|
||||
|
@ -3,6 +3,8 @@ import UnknownControl from './Widgets/UnknownControl';
|
||||
import UnknownPreview from './Widgets/UnknownPreview';
|
||||
import StringControl from './Widgets/StringControl';
|
||||
import StringPreview from './Widgets/StringPreview';
|
||||
import NumberControl from './Widgets/NumberControl';
|
||||
import NumberPreview from './Widgets/NumberPreview';
|
||||
import ListControl from './Widgets/ListControl';
|
||||
import ListPreview from './Widgets/ListPreview';
|
||||
import TextControl from './Widgets/TextControl';
|
||||
@ -13,13 +15,17 @@ import ImageControl from './Widgets/ImageControl';
|
||||
import ImagePreview from './Widgets/ImagePreview';
|
||||
import DateTimeControl from './Widgets/DateTimeControl';
|
||||
import DateTimePreview from './Widgets/DateTimePreview';
|
||||
import ObjectControl from './Widgets/ObjectControl';
|
||||
import ObjectPreview from './Widgets/ObjectPreview';
|
||||
|
||||
registry.registerWidget('string', StringControl, StringPreview);
|
||||
registry.registerWidget('text', TextControl, TextPreview);
|
||||
registry.registerWidget('number', NumberControl, NumberPreview);
|
||||
registry.registerWidget('list', ListControl, ListPreview);
|
||||
registry.registerWidget('markdown', MarkdownControl, MarkdownPreview);
|
||||
registry.registerWidget('image', ImageControl, ImagePreview);
|
||||
registry.registerWidget('datetime', DateTimeControl, DateTimePreview);
|
||||
registry.registerWidget('object', ObjectControl, ObjectPreview);
|
||||
registry.registerWidget('unknown', UnknownControl, UnknownPreview);
|
||||
|
||||
export function resolveWidget(name) {
|
||||
|
72
src/components/Widgets/ListControl.css
Normal file
72
src/components/Widgets/ListControl.css
Normal file
@ -0,0 +1,72 @@
|
||||
:global(.list-item-dragging) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.addButton {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin: 20px 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
&::before {
|
||||
content: "+";
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 100%;
|
||||
background: transparent;
|
||||
line-height: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.removeButton {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 100%;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.toggleButton {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.objectLabel {
|
||||
border: 1px solid #e8eae8;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.objectControl {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
& .objectLabel {
|
||||
display: block;
|
||||
}
|
||||
& .objectControl {
|
||||
display: none;
|
||||
}
|
||||
}
|
@ -1,17 +1,132 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { List, Map, fromJS } from 'immutable';
|
||||
import { sortable } from 'react-sortable';
|
||||
import ObjectControl from './ObjectControl';
|
||||
import styles from './ListControl.css';
|
||||
|
||||
function ListItem(props) {
|
||||
return <div {...props} className={`list-item ${ props.className }`}>{props.children}</div>;
|
||||
}
|
||||
ListItem.propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
ListItem.displayName = 'list-item';
|
||||
|
||||
const SortableListItem = sortable(ListItem);
|
||||
|
||||
export default class ListControl extends Component {
|
||||
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
value: PropTypes.node,
|
||||
field: PropTypes.node,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { itemStates: Map() };
|
||||
}
|
||||
|
||||
handleChange = (e) => {
|
||||
this.props.onChange(e.target.value.split(',').map(item => item.trim()));
|
||||
};
|
||||
|
||||
handleAdd = (e) => {
|
||||
e.preventDefault();
|
||||
const { value, onChange } = this.props;
|
||||
|
||||
onChange((value || List()).push(Map()));
|
||||
};
|
||||
|
||||
handleChangeFor(index) {
|
||||
return (newValue) => {
|
||||
const { value, onChange } = this.props;
|
||||
onChange(value.set(index, newValue));
|
||||
};
|
||||
}
|
||||
|
||||
handleRemove(index) {
|
||||
return (e) => {
|
||||
e.preventDefault();
|
||||
const { value, onChange } = this.props;
|
||||
onChange(value.remove(index));
|
||||
};
|
||||
}
|
||||
|
||||
handleToggle(index) {
|
||||
return (e) => {
|
||||
e.preventDefault();
|
||||
const { itemStates } = this.state;
|
||||
this.setState({
|
||||
itemStates: itemStates.setIn([index, 'collapsed'], !itemStates.getIn([index, 'collapsed'])),
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
objectLabel(item) {
|
||||
const { field } = this.props;
|
||||
const fields = field.get('fields');
|
||||
const first = fields.first();
|
||||
const value = item.get(first.get('name'));
|
||||
return value || `No ${ first.get('name') }`;
|
||||
}
|
||||
|
||||
handleSort = (obj) => {
|
||||
this.setState({ draggingIndex: obj.draggingIndex });
|
||||
if ('items' in obj) {
|
||||
this.props.onChange(fromJS(obj.items));
|
||||
}
|
||||
};
|
||||
|
||||
renderItem(item, index) {
|
||||
const { value, field, getMedia, onAddMedia, onRemoveMedia } = this.props;
|
||||
const { itemStates, draggedItem } = this.state;
|
||||
const collapsed = itemStates.getIn([index, 'collapsed']);
|
||||
const classNames = [styles.item, collapsed ? styles.collapsed : styles.expanded];
|
||||
|
||||
return (<SortableListItem
|
||||
key={index}
|
||||
updateState={this.handleSort}
|
||||
items={value ? value.toJS() : []}
|
||||
draggingIndex={this.state.draggingIndex}
|
||||
sortId={index}
|
||||
outline="list"
|
||||
>
|
||||
<div className={classNames.join(' ')}>
|
||||
<div className={styles.objectLabel}>{this.objectLabel(item)}</div>
|
||||
<div className={styles.objectControl}>
|
||||
<ObjectControl
|
||||
value={item}
|
||||
field={field}
|
||||
onChange={this.handleChangeFor(index)}
|
||||
getMedia={getMedia}
|
||||
onAddMedia={onAddMedia}
|
||||
onRemoveMedia={onRemoveMedia}
|
||||
/>
|
||||
</div>
|
||||
<button className={styles.toggleButton} onClick={this.handleToggle(index)}>
|
||||
{collapsed ? '+' : '-'}
|
||||
</button>
|
||||
<button className={styles.removeButton} onClick={this.handleRemove(index)}>x</button>
|
||||
</div>
|
||||
</SortableListItem>);
|
||||
}
|
||||
|
||||
renderListControl() {
|
||||
const { value, field } = this.props;
|
||||
return (<div>
|
||||
{value && value.map((item, index) => this.renderItem(item, index))}
|
||||
<div><button className={styles.addButton} onClick={this.handleAdd}>new</button></div>
|
||||
</div>);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { value } = this.props;
|
||||
const { value, field } = this.props;
|
||||
|
||||
if (field.get('fields')) {
|
||||
return this.renderListControl();
|
||||
}
|
||||
|
||||
return <input type="text" value={value ? value.join(', ') : ''} onChange={this.handleChange} />;
|
||||
}
|
||||
}
|
||||
|
@ -1,11 +1,33 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import React, { PropTypes, Component } from 'react';
|
||||
import { resolveWidget } from '../Widgets';
|
||||
|
||||
export default function ListPreview({ value }) {
|
||||
return (<ul>
|
||||
{ value && value.map(item => <li key={item}>{item}</li>) }
|
||||
</ul>);
|
||||
export default class ObjectPreview extends Component {
|
||||
widgetFor = (field, value) => {
|
||||
const { getMedia } = this.props;
|
||||
const widget = resolveWidget(field.get('widget'));
|
||||
return (<div key={field.get('name')}>{React.createElement(widget.preview, {
|
||||
key: field.get('name'),
|
||||
value: value && value.get(field.get('name')),
|
||||
field,
|
||||
getMedia,
|
||||
})}</div>);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { field, value } = this.props;
|
||||
const fields = field && field.get('fields');
|
||||
if (fields) {
|
||||
return value ? (<div>{value.map((val, index) => <div key={index}>
|
||||
{fields && fields.map(f => this.widgetFor(f, val))}
|
||||
</div>)}</div>) : null;
|
||||
}
|
||||
|
||||
return value ? value.join(', ') : null;
|
||||
}
|
||||
}
|
||||
|
||||
ListPreview.propTypes = {
|
||||
ObjectPreview.propTypes = {
|
||||
value: PropTypes.node,
|
||||
field: PropTypes.node,
|
||||
getMedia: PropTypes.func.isRequired,
|
||||
};
|
||||
|
@ -3,6 +3,7 @@
|
||||
left: -18px;
|
||||
display: none;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.visible {
|
||||
|
@ -65,18 +65,17 @@ function getCleanPaste(e) {
|
||||
});
|
||||
}
|
||||
|
||||
const buildtInPlugins = fromJS([{
|
||||
const buildtInPlugins = [{
|
||||
label: 'Image',
|
||||
id: 'image',
|
||||
fromBlock: (data) => {
|
||||
const m = data.match(/^!\[([^\]]+)\]\(([^\)]+)\)$/);
|
||||
return m && {
|
||||
image: m[2],
|
||||
alt: m[1],
|
||||
};
|
||||
fromBlock: match => match && {
|
||||
image: match[2],
|
||||
alt: match[1],
|
||||
},
|
||||
toBlock: data => ``,
|
||||
toPreview: data => `<img src="${ data.image }" alt="${ data.alt }" />`,
|
||||
toPreview: (data) => {
|
||||
return <img src={data.image} alt={data.alt} />;
|
||||
},
|
||||
pattern: /^!\[([^\]]+)\]\(([^\)]+)\)$/,
|
||||
fields: [{
|
||||
label: 'Image',
|
||||
@ -86,18 +85,20 @@ const buildtInPlugins = fromJS([{
|
||||
label: 'Alt Text',
|
||||
name: 'alt',
|
||||
}],
|
||||
}]);
|
||||
}];
|
||||
buildtInPlugins.forEach(plugin => registry.registerEditorComponent(plugin));
|
||||
|
||||
export default class RawEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const plugins = registry.getEditorComponents();
|
||||
this.state = {
|
||||
plugins: buildtInPlugins.concat(plugins),
|
||||
plugins: plugins,
|
||||
};
|
||||
this.shortcuts = {
|
||||
meta: {
|
||||
b: this.handleBold,
|
||||
i: this.handleItalic,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -160,7 +161,7 @@ export default class RawEditor extends React.Component {
|
||||
}
|
||||
|
||||
replaceSelection(chars) {
|
||||
const { value } = this.props;
|
||||
const value = this.props.value || '';
|
||||
const selection = this.getSelection();
|
||||
const newSelection = Object.assign({}, selection);
|
||||
const beforeSelection = value.substr(0, selection.start);
|
||||
@ -171,7 +172,7 @@ export default class RawEditor extends React.Component {
|
||||
}
|
||||
|
||||
toggleHeader(header) {
|
||||
const { value } = this.props;
|
||||
const value = this.props.value || '';
|
||||
const selection = this.getSelection();
|
||||
const newSelection = Object.assign({}, selection);
|
||||
const lastNewline = value.lastIndexOf('\n', selection.start);
|
||||
@ -233,7 +234,7 @@ export default class RawEditor extends React.Component {
|
||||
};
|
||||
|
||||
handleSelection = () => {
|
||||
const { value } = this.props;
|
||||
const value = this.props.value || '';
|
||||
const selection = this.getSelection();
|
||||
if (selection.start !== selection.end && !HAS_LINE_BREAK.test(selection.selected)) {
|
||||
try {
|
||||
|
16
src/components/Widgets/NumberControl.js
Normal file
16
src/components/Widgets/NumberControl.js
Normal file
@ -0,0 +1,16 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
|
||||
export default class StringControl extends React.Component {
|
||||
handleChange = e => {
|
||||
this.props.onChange(e.target.value);
|
||||
};
|
||||
|
||||
render() {
|
||||
return <input type="number" value={this.props.value || ''} onChange={this.handleChange}/>;
|
||||
}
|
||||
}
|
||||
|
||||
StringControl.propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
value: PropTypes.node,
|
||||
};
|
9
src/components/Widgets/NumberPreview.js
Normal file
9
src/components/Widgets/NumberPreview.js
Normal file
@ -0,0 +1,9 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
|
||||
export default function StringPreview({ value }) {
|
||||
return <span>{value}</span>;
|
||||
}
|
||||
|
||||
StringPreview.propTypes = {
|
||||
value: PropTypes.node,
|
||||
};
|
6
src/components/Widgets/ObjectControl.css
Normal file
6
src/components/Widgets/ObjectControl.css
Normal file
@ -0,0 +1,6 @@
|
||||
.root {
|
||||
position: relative;
|
||||
border: 1px solid #e8eae8;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
}
|
52
src/components/Widgets/ObjectControl.js
Normal file
52
src/components/Widgets/ObjectControl.js
Normal file
@ -0,0 +1,52 @@
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { Map } from 'immutable';
|
||||
import { resolveWidget } from '../Widgets';
|
||||
import controlStyles from '../ControlPanel/ControlPane.css';
|
||||
import styles from './ObjectControl.css';
|
||||
|
||||
export default class ObjectControl extends Component {
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onAddMedia: PropTypes.func.isRequired,
|
||||
getMedia: PropTypes.func.isRequired,
|
||||
value: PropTypes.node,
|
||||
field: PropTypes.node,
|
||||
};
|
||||
|
||||
controlFor(field) {
|
||||
const { onAddMedia, onRemoveMedia, getMedia, value, onChange } = this.props;
|
||||
const widget = resolveWidget(field.get('widget') || 'string');
|
||||
const fieldValue = value && value.get(field.get('name'));
|
||||
|
||||
return (<div className={controlStyles.widget} key={field.get('name')}>
|
||||
<div className={controlStyles.control} key={field.get('name')}>
|
||||
<label className={controlStyles.label}>{field.get('label')}</label>
|
||||
{
|
||||
React.createElement(widget.control, {
|
||||
field,
|
||||
value: fieldValue,
|
||||
onChange: (val) => {
|
||||
onChange((value || Map()).set(field.get('name'), val));
|
||||
},
|
||||
onAddMedia,
|
||||
onRemoveMedia,
|
||||
getMedia,
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { field } = this.props;
|
||||
const fields = field.get('fields');
|
||||
|
||||
if (!fields) {
|
||||
return <h3>No fields defined for this widget</h3>;
|
||||
}
|
||||
|
||||
return (<div className={styles.root}>
|
||||
{field.get('fields').map(field => this.controlFor(field))}
|
||||
</div>);
|
||||
}
|
||||
}
|
28
src/components/Widgets/ObjectPreview.js
Normal file
28
src/components/Widgets/ObjectPreview.js
Normal file
@ -0,0 +1,28 @@
|
||||
import React, { PropTypes, Component } from 'react';
|
||||
import { resolveWidget } from '../Widgets';
|
||||
|
||||
export default class ObjectPreview extends Component {
|
||||
widgetFor = (field) => {
|
||||
const { value, getMedia } = this.props;
|
||||
const widget = resolveWidget(field.get('widget'));
|
||||
return (<div key={field.get('name')}>{React.createElement(widget.preview, {
|
||||
key: field.get('name'),
|
||||
value: value && value.get(field.get('name')),
|
||||
field,
|
||||
getMedia,
|
||||
})}</div>);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { field } = this.props;
|
||||
const fields = field && field.get('fields');
|
||||
|
||||
return <div>{fields && fields.map(f => this.widgetFor(f))}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
ObjectPreview.propTypes = {
|
||||
value: PropTypes.node,
|
||||
field: PropTypes.node,
|
||||
getMedia: PropTypes.func.isRequired,
|
||||
};
|
Reference in New Issue
Block a user