Add Component.normalizeElements() utility function

Ref #2

Author: maxkfranz

README.md

@@ -52,6 +52,26 @@ The flat list of [Cytoscape elements](http://js.cytoscape.org/#notation/elements
 
 N.b. arrays or objects should not be used in an `element`'s `data` or `scratch` fields, unless using a custom `diff()` prop.
 
+In order to make it easier to support passing in `elements` JSON in the `elements: { nodes: [], edges: [] }` format, there is a static function `CytoscapeComponent.normalizeElements()`.  E.g.:
+
+```jsx
+<CytoscapeComponent
+  elements={CytoscapeComponent.normalizeElements({
+    nodes: [
+      { data: { id: 'one', label: 'Node 1' }, position: { x: 0, y: 0 } },
+      { data: { id: 'two', label: 'Node 2' }, position: { x: 100, y: 0 } }
+    ],
+    edges: [
+      {
+        data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' }
+      }
+    ]
+  })}
+/>
+```
+
+Note that `CytoscapeComponent.normalizeElements()` is useful only for plain-JSON data, such as an export from Cytoscape.js or the Cytoscape desktop software.  If you use [custom prop types](#custom-prop-types), such as Immutable, then you should flatten the elements yourself before passing the `elements` prop.
+
 ### `stylesheet`
 
 The Cytoscape stylesheet as non-stringified JSON. N.b. the prop key is `stylesheet` rather than `style`, the key used by Cytoscape itself, so as to not conflict with the HTML [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style) attribute. E.g.:

src/component.js

@@ -18,6 +18,26 @@ export default class CytoscapeComponent extends React.Component {
     return defaults;
   }
 
+  static normalizeElements(elements) {
+    const isArray = elements.length != null;
+
+    if (isArray) {
+      return elements;
+    } else {
+      let { nodes, edges } = elements;
+
+      if (nodes == null) {
+        nodes = [];
+      }
+
+      if (edges == null) {
+        edges = [];
+      }
+
+      return nodes.concat(edges);
+    }
+  }
+
   constructor(props) {
     super(props);
   }

test/component.js

@@ -416,5 +416,36 @@
         expect(a.hasClass('bar')).to.be.false;
       });
     });
+
+    it('converts non-array elements', function() {
+      const elements = {
+        nodes: [{ data: { id: 'n0' } }, { data: { id: 'n1' } }],
+        edges: [{ data: { id: 'e', source: 'n0', target: 'n1' } }]
+      };
+
+      return updateCyProps({
+        elements: ReactCytoscape.normalizeElements(elements)
+      }).then(() => {
+        expect(cy.getElementById('n0').length).to.equal(1);
+        expect(cy.getElementById('n1').length).to.equal(1);
+        expect(cy.getElementById('e').length).to.equal(1);
+      });
+    });
+
+    it('maintains array elements', function() {
+      const elements = [
+        { data: { id: 'n0' } },
+        { data: { id: 'n1' } },
+        { data: { id: 'e', source: 'n0', target: 'n1' } }
+      ];
+
+      return updateCyProps({
+        elements: ReactCytoscape.normalizeElements(elements)
+      }).then(() => {
+        expect(cy.getElementById('n0').length).to.equal(1);
+        expect(cy.getElementById('n1').length).to.equal(1);
+        expect(cy.getElementById('e').length).to.equal(1);
+      });
+    });
   });
 })();