fix(utils): Use React.Children.map() to iterate through children. Fixes

#356

lib/utils.js

@@ -17,6 +17,7 @@ export type DragCallbackData = {
 export type DragEvent = {e: Event} & DragCallbackData;
 export type Size = {width: number, height: number};
 export type ResizeEvent = {e: Event, node: HTMLElement, size: Size};
+export type ReactChildren = React.Element<any>[] | React.Element<any> | {[key: string] : React.Element<any>};
 
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -58,7 +59,7 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
  * Comparing React `children` is a bit difficult. This is a good way to compare them.
  * This will catch differences in keys, order, and length.
  */
-export function childrenEqual(a: Array<React.Element<any>>, b: Array<React.Element<any>>): boolean {
+export function childrenEqual(a: ReactChildren, b: ReactChildren): boolean {
  return isEqual(React.Children.map(a, c => c.key), React.Children.map(b, c => c.key));
 }
 
@@ -353,24 +354,16 @@ export function sortLayoutItemsByRowCol(layout: Layout): Layout {
  * @param {Boolean} verticalCompact Whether or not to compact the layout vertically.
  * @return {Array} Working layout.
  */
-export function synchronizeLayoutWithChildren(initialLayout: Layout, children: Array<React.Element<any>>|React.Element<any>,
+export function synchronizeLayoutWithChildren(initialLayout: Layout, children: ReactChildren,
  cols: number, verticalCompact: boolean): Layout {
- // ensure 'children' is always an array
- if (!Array.isArray(children)) {
- children = [children];
- }
  initialLayout = initialLayout || [];
 
  // Generate one layout item per child.
- let layout: Layout = [];
- for (let i = 0, len = children.length; i < len; i++) {
- let newItem;
- const child = children[i];
-
+ let layout: Layout = React.Children.map(children, (child: React.Element<any>) => {
  // Don't overwrite if it already exists.
  const exists = getLayoutItem(initialLayout, child.key || "1" /* FIXME satisfies Flow */);
  if (exists) {
- newItem = cloneLayoutItem(exists);
+ return cloneLayoutItem(exists);
  } else {
  if (process.env.NODE_ENV !== 'production' && child.props._grid) {
  console.warn('`_grid` properties on children have been deprecated as of React 15.2. ' + // eslint-disable-line
@@ -384,15 +377,12 @@ export function synchronizeLayoutWithChildren(initialLayout: Layout, children: A
  validateLayout([g], 'ReactGridLayout.children');
  }
 
- newItem = cloneLayoutItem({...g, i: child.key});
+ return cloneLayoutItem({...g, i: child.key});
  }
  // Nothing provided: ensure this is added to the bottom
- else {
- newItem = cloneLayoutItem({w: 1, h: 1, x: 0, y: bottom(layout), i: child.key || "1"});
- }
+ return cloneLayoutItem({w: 1, h: 1, x: 0, y: bottom(layout), i: child.key || "1"});
  }
- layout[i] = newItem;
- }
+ });
 
  // Correct the layout.
  layout = correctBounds(layout, {cols: cols});