fix: handle single child in Resizable, add version to demo

- Fix longstanding bug where single child caused "not iterable" error
  by using React.Children.toArray() instead of spreading directly
- Remove array workaround from tests now that bug is fixed
- Add version/commit display to demo page via webpack DefinePlugin
- Add eslint global for Element (from merged PR #220)

Author: STRML

__tests__/Resizable.test.js

@@ -25,9 +25,8 @@ describe('render Resizable', () => {
     transformScale: 1,
     width: 50,
   };
-  const userChildren = <span key="user-children" className={'children'} />;
-  // Note: children.props.children must be an array for Resizable to spread it
-  const resizableBoxChildren = <div style={{width: '50px', height: '50px'}}>{[userChildren]}</div>;
+  const userChildren = <span className={'children'} />;
+  const resizableBoxChildren = <div style={{width: '50px', height: '50px'}}>{userChildren}</div>;
 
   beforeEach(() => {
     jest.clearAllMocks();

__tests__/ResizableBox.test.js

@@ -21,11 +21,7 @@ describe('render ResizableBox', () => {
     transformScale: 1,
     width: 50,
   };
-  // ResizableBox passes children to its inner div, and Resizable spreads
-  // children.props.children, so we wrap in array for it to be iterable.
-  // Note: This causes a propType warning since ResizableBox expects a single element,
-  // but it's necessary for the tests to work with React Testing Library.
-  const children = [<span key="child" className="children" />];
+  const children = <span className="children" />;
 
   beforeEach(() => {
     jest.clearAllMocks();

examples/ExampleLayout.js

@@ -4,6 +4,8 @@ import ResizableBox from '../lib/ResizableBox';
 import 'style-loader!css-loader!../css/styles.css';
 import 'style-loader!css-loader!./example.css';
 
+/* global __VERSION__, __GIT_TAG__, __GIT_COMMIT__ */
+
 const CustomResizeHandle = React.forwardRef((props, ref) => {
   const {handleAxis, ...restProps} = props;
   return (
@@ -64,6 +66,10 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
   render() {
     return (
       <div>
+        <p className="version-info">
+          react-resizable {__GIT_TAG__ || __VERSION__}
+          {__GIT_COMMIT__ && <span> ({__GIT_COMMIT__})</span>}
+        </p>
 
         <h3>Statically Positioned Layout</h3>
         <div className="layoutRoot">

examples/example.css

@@ -115,4 +115,11 @@
 }
 .custom-resize-handle-component {
   background-color: red;
+}
+
+.version-info {
+  font-family: monospace;
+  font-size: 12px;
+  color: #666;
+  margin: 10px 20px;
 }

lib/Resizable.js

@@ -201,7 +201,7 @@ export default class Resizable extends React.Component<Props, void> {
       ...p,
       className: `${className ? `${className} ` : ''}react-resizable`,
       children: [
-        ...children.props.children,
+        ...React.Children.toArray(children.props.children),
         ...resizeHandles.map((handleAxis) => {
           // Create a ref to the handle so that `<DraggableCore>` doesn't have to use ReactDOM.findDOMNode().
           const ref = (this.handleRefs[handleAxis]) ?? (this.handleRefs[handleAxis] = React.createRef());

lib/propTypes.js

@@ -1,4 +1,5 @@
 // @flow
+/* global Element */
 import PropTypes from 'prop-types';
 import {DraggableCore} from "react-draggable";
 import type {Element as ReactElement, ElementConfig} from 'react';

webpack.config.js

@@ -1,7 +1,26 @@
 const webpack = require('webpack');
 const path = require('path');
+const {execFileSync} = require('child_process');
+const pkg = require('./package.json');
 
 const isProduction = process.env.NODE_ENV === 'production';
+
+// Get git info for version display
+function getGitInfo() {
+  try {
+    const commitHash = execFileSync('git', ['rev-parse', '--short', 'HEAD']).toString().trim();
+    let tag = '';
+    try {
+      tag = execFileSync('git', ['describe', '--tags', '--abbrev=0']).toString().trim();
+    } catch (e) {
+      // No tags found
+    }
+    return {commitHash, tag};
+  } catch (e) {
+    return {commitHash: 'unknown', tag: ''};
+  }
+}
+const gitInfo = getGitInfo();
 const isDevelopment = !isProduction;
 
 module.exports = {
@@ -51,5 +70,11 @@ module.exports = {
   plugins: [
     // Scope hoisting
     new webpack.optimize.ModuleConcatenationPlugin(),
+    // Inject version info
+    new webpack.DefinePlugin({
+      __VERSION__: JSON.stringify(pkg.version),
+      __GIT_TAG__: JSON.stringify(gitInfo.tag),
+      __GIT_COMMIT__: JSON.stringify(gitInfo.commitHash),
+    }),
   ]
 };