feat(object): variable types

dev-test/config.yml

@@ -267,6 +267,20 @@ collections: # A list of collections the CMS should be able to edit
             fields:
               - { label: 'Image', name: 'image', widget: 'image' }
               - { label: 'File', name: 'file', widget: 'file' }
+      - label: Typed Object
+        name: typed_object
+        widget: object
+        types:
+          - name: copy
+            widget: object
+            fields:
+              - { name: text, widget: string }
+          - name: infographic
+            widget: object
+            fields:
+              - { name: caption, widget: string }
+              - { name: image, widget: image }
+              - { name: overlay, widget: image }
   - name: pages # a nested collection
     label: Pages
     label_singular: 'Page'

packages/decap-cms-app/src/extensions.js

@@ -19,7 +19,6 @@ import DecapCmsWidgetFile from 'decap-cms-widget-file';
 import DecapCmsWidgetSelect from 'decap-cms-widget-select';
 import DecapCmsWidgetMarkdown from 'decap-cms-widget-markdown';
 import DecapCmsWidgetList from 'decap-cms-widget-list';
-import DecapCmsWidgetObject from 'decap-cms-widget-object';
 import DecapCmsWidgetRelation from 'decap-cms-widget-relation';
 import DecapCmsWidgetBoolean from 'decap-cms-widget-boolean';
 import DecapCmsWidgetMap from 'decap-cms-widget-map';
@@ -50,7 +49,7 @@ CMS.registerWidget([
   DecapCmsWidgetSelect.Widget(),
   DecapCmsWidgetMarkdown.Widget(),
   DecapCmsWidgetList.Widget(),
-  DecapCmsWidgetObject.Widget(),
+  DecapCmsWidgetList.ObjectWidget(),
   DecapCmsWidgetRelation.Widget(),
   DecapCmsWidgetBoolean.Widget(),
   DecapCmsWidgetMap.Widget(),

packages/decap-cms-widget-list/src/ListControl.js

@@ -749,3 +749,18 @@ export default class ListControl extends React.Component {
     }
   }
 }
+
+export class ObjectControlWrapper extends React.Component {
+  render() {
+    if (this.props.field.get('required') === false || this.props.field.get('types')) {
+      return (
+        <ListControl
+          {...this.props}
+          onChange={e => this.props.onChange(e.get(0))}
+          value={List([this.props.value].filter(Boolean))}
+        />
+      );
+    }
+    return <ObjectControl {...this.props} />;
+  }
+}

packages/decap-cms-widget-list/src/index.js

@@ -1,6 +1,6 @@
 import DecapCmsWidgetObject from 'decap-cms-widget-object';
 
-import controlComponent from './ListControl';
+import controlComponent, { ObjectControlWrapper } from './ListControl';
 import schema from './schema';
 
 const previewComponent = DecapCmsWidgetObject.previewComponent;
@@ -15,5 +15,14 @@ function Widget(opts = {}) {
   };
 }
 
-export const DecapCmsWidgetList = { Widget, controlComponent, previewComponent };
+function ObjectWidget(opts = {}) {
+  return {
+    name: 'object',
+    controlComponent: ObjectControlWrapper,
+    previewComponent,
+    ...opts,
+  };
+}
+
+export const DecapCmsWidgetList = { Widget, controlComponent, previewComponent, ObjectWidget };
 export default DecapCmsWidgetList;