react-demo - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

CHANGELOG.md

@@ -1,8 +0,22 @@
-## 1.1.0 (November 5, 2015)
+## 1.3.0 (Apr 16, 2016)
 
+ - A bug with multiple children in the JSX preview fixed
+ - A `panelBelow` option added
+
+## 1.2.1 (Mar 30, 2016)
+
+ - A PropTypes warning fixed (thanks [@StevenFrostwick](https://github.com/StevenFrostwick))
+
+## 1.2.0 (Feb 20, 2016)
+
+ - `Demo.props.number` added
+ - A bug in `Demo.props.json` fixed
+
+## 1.1.0 (Nov 5, 2015)
+
  - Improve jsx props output in stringify()
 
-## 1.0.0 (October 19, 2015)
+## 1.0.0 (Oct 19, 2015)
 
  - Start using Semantic Versioning
  - Start tracking changes

dist/index.js

@@ -44,2 +44,3 @@ 'use strict';
     fullWidth: _react.PropTypes.bool,
+    panelBelow: _react.PropTypes.bool,
     target: _react.PropTypes.oneOfType([_react.PropTypes.func, _react.PropTypes.string]),
@@ -128,2 +129,3 @@ children: _react.PropTypes.func,
     var background = _props.background;
+    var panelBelow = _props.panelBelow;
 
@@ -144,3 +146,3 @@ var targetProps = _extends({}, values, this.getCallbacks());
 
-    var layoutProps = { fullWidth: fullWidth, targetEl: targetEl, controlsEl: controlsEl, background: background };
+    var layoutProps = { fullWidth: fullWidth, targetEl: targetEl, controlsEl: controlsEl, background: background, panelBelow: panelBelow };
     return _react2['default'].createElement(_Layout2['default'], layoutProps);
@@ -147,0 +149,0 @@ }

dist/Layout.js

@@ -40,4 +40,6 @@ 'use strict';
 };
-var styleControlsTop = {
-  borderBottom: 'solid 1px #ddd'
+var styleControlsTop = function styleControlsTop(panelBelow) {
+  var _ref;
+
+  return _ref = {}, _ref['border' + (panelBelow ? 'Top' : 'Bottom')] = 'solid 1px #ddd', _ref;
 };
@@ -52,2 +54,3 @@ var styleComponentTop = {};
     fullWidth: _react.PropTypes.bool.isRequired,
+    panelBelow: _react.PropTypes.bool,
     controlsEl: _react.PropTypes.node.isRequired,
@@ -79,3 +82,3 @@ targetEl: _react.PropTypes.node.isRequired,
   getControlsStyle: function getControlsStyle() {
-    return this.props.fullWidth ? styleControlsTop : styleControlsSide;
+    return this.props.fullWidth ? styleControlsTop(this.props.panelBelow) : styleControlsSide;
   },
@@ -87,16 +90,18 @@
     var targetEl = _props2.targetEl;
+    var panelBelow = _props2.panelBelow;
 
+    var demo = _react2['default'].createElement(
+      'div',
+      { style: this.getTagretStyle(), className: 'react-demo__target-wrap', key: 'demo' },
+      targetEl
+    );
+    var panel = _react2['default'].createElement(
+      'div',
+      { style: this.getControlsStyle(), className: 'react-demo__controls-wrap', key: 'panel' },
+      controlsEl
+    );
     return _react2['default'].createElement(
       'div',
       { style: this.getWrapStyle(), className: 'react-demo' },
-      _react2['default'].createElement(
-        'div',
-        { style: this.getControlsStyle(), className: 'react-demo__controls-wrap' },
-        controlsEl
-      ),
-      _react2['default'].createElement(
-        'div',
-        { style: this.getTagretStyle(), className: 'react-demo__target-wrap' },
-        targetEl
-      )
+      panelBelow ? [demo, panel] : [panel, demo]
     );
@@ -103,0 +108,0 @@ }

dist/stringify.js

@@ -105,3 +105,9 @@ 'use strict';
         if (keys.indexOf('children') !== -1) {
-          children = wrapJsxChildren(next(x.props.children));
+          if (Array.isArray(x.props.children)) {
+            children = x.props.children.map(function (c) {
+              return wrapJsxChildren(next(c));
+            }).join('' + indent);
+          } else {
+            children = wrapJsxChildren(next(x.props.children));
+          }
         }
@@ -108,0 +114,0 @@ seen.pop();

package.json

 {
   "name": "react-demo",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A React-component for creating demos of other components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -26,3 +26,3 @@ # React-demo [![Build Status](https://travis-ci.org/rpominov/react-demo.svg?branch=master)](https://travis-ci.org/rpominov/react-demo)
 See [examples/index.js](https://github.com/rpominov/react-demo/blob/master/examples/index.js)
-for more examples. You can play with it online at [webpackbin.com](http://www.webpackbin.com/4J0Js5QAg), 
+for more examples. You can play with it online at [webpackbin.com](http://www.webpackbin.com/4J0Js5QAg),
 or to run them locally do the following:
@@ -57,2 +57,3 @@
   fullWidth={false}
+  panelBelow={false}
   background="light"
@@ -73,2 +74,7 @@ codeIndentDepth={3}
 
+#### `panelBelow`
+
+If set to `true` the comtrols panel will be shown below the demo.
+Should be used in combination with `fullWidth`.
+
 #### `background`
@@ -75,0 +81,0 @@

No alert changes

Improved metrics

Total package byte prevSize

48476

2.3%

Lines of code

1122

1.08%

Number of lines in readme file

299

2.05%

No dependency changes