Skip to content

Commit 9be2693

Browse files
domclealdemshy
andauthored
fix(widgetsFor): return widgets for variable type lists (#7296)
When using a Variable Type list widget and a custom preview component, the `widgetsFor` helper would only return a `data` list with each of the items in the list, not a `widgets` list, e.g. {"data" => {"markdown" => "# Title"} {"type" => "block_body"} } {"widgets" => undefined} 🚫 The `widgets` list should also be supplied, particularly for nested Markdown widgets, so a fully formatted preview can be rendered: {"data" => {"markdown" => "# Title"} {"type" => "block_body"} } {"widgets" => {"markdown" => Object} ✅ } This extends support in `widgetsFor` to detect variable type list widgets and correctly construct the `widgets` return value. As reported at #2307 (comment) Co-authored-by: Anze Demsar <anze.demsar@p-m.si>
1 parent 989c2dd commit 9be2693

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

packages/decap-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,9 +169,28 @@ export class PreviewPane extends React.Component {
169169
const { fields, entry, fieldsMetaData } = this.props;
170170
const field = fields.find(f => f.get('name') === name);
171171
const nestedFields = field && field.get('fields');
172+
const variableTypes = field && field.get('types');
172173
const value = entry.getIn(['data', field.get('name')]);
173174
const metadata = fieldsMetaData.get(field.get('name'), Map());
174175

176+
// Variable Type lists
177+
if (List.isList(value) && variableTypes) {
178+
return value.map(val => {
179+
const valueType = variableTypes.find(t => t.get('name') === val.get('type'));
180+
const typeFields = valueType && valueType.get('fields');
181+
const widgets =
182+
typeFields &&
183+
Map(
184+
typeFields.map((f, i) => [
185+
f.get('name'),
186+
<div key={i}>{this.getWidget(f, val, metadata.get(f.get('name')), this.props)}</div>,
187+
]),
188+
);
189+
return Map({ data: val, widgets });
190+
});
191+
}
192+
193+
// List widgets
175194
if (List.isList(value)) {
176195
return value.map(val => {
177196
const widgets =

0 commit comments

Comments
 (0)