Merge pull request #146 from netlify/fix-demo-ui

WIP: Change how single entries are fetched to avoid loading full list

src/components/MarkupItReactRenderer/index.js

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

src/components/PreviewPane/PreviewPane.js

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

src/components/Widgets.js

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

src/components/Widgets/ListControl.css

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

src/components/Widgets/ListControl.js

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

src/components/Widgets/ListPreview.js

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

src/components/Widgets/MarkdownControlElements/RawEditor/BlockMenu.css

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

src/components/Widgets/MarkdownControlElements/RawEditor/index.js

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

src/components/Widgets/NumberControl.js

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

src/components/Widgets/NumberPreview.js

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

src/components/Widgets/ObjectControl.css

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

src/components/Widgets/ObjectControl.js

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

src/components/Widgets/ObjectPreview.js

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