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:
Cássio Souza
2016-10-31 12:17:10 -02:00
committed by GitHub
28 changed files with 711 additions and 193 deletions

View File

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

View File

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

View File

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

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

View File

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

View File

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

View File

@ -3,6 +3,7 @@
left: -18px;
display: none;
width: 100%;
z-index: 1000;
}
.visible {

View File

@ -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 => `![${ data.alt }](${ data.image })`,
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 {

View 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,
};

View File

@ -0,0 +1,9 @@
import React, { PropTypes } from 'react';
export default function StringPreview({ value }) {
return <span>{value}</span>;
}
StringPreview.propTypes = {
value: PropTypes.node,
};

View File

@ -0,0 +1,6 @@
.root {
position: relative;
border: 1px solid #e8eae8;
margin-bottom: 20px;
padding: 20px;
}

View 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>);
}
}

View 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,
};