add widgetsFor helper

This allows individual widgets to be accessed
from preview templates that handle lists
This commit is contained in:
Shawn Erquhart
2017-03-06 12:27:41 -05:00
parent 73d5cf9031
commit 9dca9f912a
2 changed files with 41 additions and 0 deletions

View File

@ -1,5 +1,6 @@
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Map } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { ScrollSyncPane } from '../ScrollSync';
import registry from '../../lib/registry';
@ -50,6 +51,28 @@ export default class PreviewPane extends React.Component {
});
};
widgetsFor = (name) => {
const { fields, entry, getAsset } = this.props;
const field = fields && fields.find(f => f.get('name') === name);
const nestedFields = field && field.get('fields');
const values = entry.getIn(['data', field.get('name')]);
const widgetFor = (field, value) => {
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,
getAsset,
})}</div>);
};
return values ? values.map((value, index) => {
const widgets = nestedFields && Map(nestedFields.map(f => [f.get('name'), widgetFor(f, value)]));
return Map({ data: value, widgets });
}) : null;
};
handleIframeRef = (ref) => {
if (ref) {
registry.getPreviewStyles().forEach((style) => {
@ -80,7 +103,9 @@ export default class PreviewPane extends React.Component {
const previewProps = {
...this.props,
widgetFor: this.widgetFor,
widgetsFor: this.widgetsFor,
};
// We need to use this API in order to pass context to the iframe
ReactDOM.unstable_renderSubtreeIntoContainer(
this,