react-grid-system - npm Package Compare versions

Comparing version 2.8.0 to 2.9.0

build/grid/Col/index.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _throttle = require('lodash/throttle');
@@ -68,4 +72,5 @@
           push = _this$props.push,
+          debug = _this$props.debug,
           style = _this$props.style,
-          otherProps = _objectWithoutProperties(_this$props, ['children', 'xs', 'sm', 'md', 'lg', 'xl', 'offset', 'pull', 'push', 'style']);
+          otherProps = _objectWithoutProperties(_this$props, ['children', 'xs', 'sm', 'md', 'lg', 'xl', 'offset', 'pull', 'push', 'debug', 'style']);
 
@@ -77,2 +82,3 @@ var theStyle = (0, _style2.default)({
         push: push,
+        debug: debug,
         screenClass: _this.state.screenClass,
@@ -97,32 +103,32 @@ gutterWidth: _this.context.gutterWidth,
    */
-  children: _react2.default.PropTypes.node,
+  children: _propTypes2.default.node,
   /**
    * The width of the column for screenclass `xs`, between 0 and 12
    */
-  xs: _react2.default.PropTypes.number,
+  xs: _propTypes2.default.number,
   /**
    * The width of the column for screenclass `sm`, between 0 and 12
    */
-  sm: _react2.default.PropTypes.number,
+  sm: _propTypes2.default.number,
   /**
    * The width of the column for screenclass `md`, between 0 and 12
    */
-  md: _react2.default.PropTypes.number,
+  md: _propTypes2.default.number,
   /**
    * The width of the column for screenclass `lg`, between 0 and 12
    */
-  lg: _react2.default.PropTypes.number,
+  lg: _propTypes2.default.number,
   /**
    * The width of the column for screenclass `xl`, between 0 and 12
    */
-  xl: _react2.default.PropTypes.number,
+  xl: _propTypes2.default.number,
   /**
    * The offset of this column for all screenclasses
    */
-  offset: _react2.default.PropTypes.shape({
-    xs: _react2.default.PropTypes.number,
-    sm: _react2.default.PropTypes.number,
-    md: _react2.default.PropTypes.number,
-    lg: _react2.default.PropTypes.number,
-    xl: _react2.default.PropTypes.number
+  offset: _propTypes2.default.shape({
+    xs: _propTypes2.default.number,
+    sm: _propTypes2.default.number,
+    md: _propTypes2.default.number,
+    lg: _propTypes2.default.number,
+    xl: _propTypes2.default.number
   }),
@@ -132,8 +138,8 @@ /**
   */
-  push: _react2.default.PropTypes.shape({
-    xs: _react2.default.PropTypes.number,
-    sm: _react2.default.PropTypes.number,
-    md: _react2.default.PropTypes.number,
-    lg: _react2.default.PropTypes.number,
-    xl: _react2.default.PropTypes.number
+  push: _propTypes2.default.shape({
+    xs: _propTypes2.default.number,
+    sm: _propTypes2.default.number,
+    md: _propTypes2.default.number,
+    lg: _propTypes2.default.number,
+    xl: _propTypes2.default.number
   }),
@@ -143,8 +149,8 @@ /**
    */
-  pull: _react2.default.PropTypes.shape({
-    xs: _react2.default.PropTypes.number,
-    sm: _react2.default.PropTypes.number,
-    md: _react2.default.PropTypes.number,
-    lg: _react2.default.PropTypes.number,
-    xl: _react2.default.PropTypes.number
+  pull: _propTypes2.default.shape({
+    xs: _propTypes2.default.number,
+    sm: _propTypes2.default.number,
+    md: _propTypes2.default.number,
+    lg: _propTypes2.default.number,
+    xl: _propTypes2.default.number
   }),
@@ -154,3 +160,7 @@ /**
    */
-  style: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.string]))
+  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])),
+  /**
+   * Set to apply some debug styling
+   */
+  debug: _propTypes2.default.bool
 };
@@ -167,11 +177,12 @@ Col.defaultProps = {
   pull: {},
-  style: {}
+  style: {},
+  debug: false
 };
 Col.contextTypes = {
-  phone: _react2.default.PropTypes.bool,
-  tablet: _react2.default.PropTypes.bool,
-  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number),
-  gutterWidth: _react2.default.PropTypes.number
+  phone: _propTypes2.default.bool,
+  tablet: _propTypes2.default.bool,
+  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number),
+  gutterWidth: _propTypes2.default.number
 };
 exports.default = Col;

build/grid/Col/style.js

@@ -29,2 +29,3 @@ 'use strict';
       push = _ref$push === undefined ? {} : _ref$push,
+      debug = _ref.debug,
       screenClass = _ref.screenClass,
@@ -45,2 +46,9 @@ gutterWidth = _ref.gutterWidth,
 
+  if (debug) {
+    styles.paddingTop = '10px';
+    styles.paddingBottom = '10px';
+    styles.border = '1px solid rgba(86,86,86,.2)';
+    styles.background = 'rgba(86,86,86,.15)';
+  }
+
   styles.width = '100%';
@@ -47,0 +55,0 @@ styles.marginLeft = '0%';

build/grid/Container/index.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _throttle = require('lodash/throttle');
@@ -97,7 +101,7 @@
    */
-  children: _react2.default.PropTypes.node.isRequired,
+  children: _propTypes2.default.node.isRequired,
   /**
    * True makes the container full-width, false fixed-width
    */
-  fluid: _react2.default.PropTypes.bool,
+  fluid: _propTypes2.default.bool,
   /**
@@ -107,3 +111,3 @@ * This is in combination with fluid enabled
    */
-  xs: _react2.default.PropTypes.bool,
+  xs: _propTypes2.default.bool,
   /**
@@ -113,3 +117,3 @@ * This is in combination with fluid enabled
    */
-  sm: _react2.default.PropTypes.bool,
+  sm: _propTypes2.default.bool,
   /**
@@ -119,3 +123,3 @@ * This is in combination with fluid enabled
    */
-  md: _react2.default.PropTypes.bool,
+  md: _propTypes2.default.bool,
   /**
@@ -125,3 +129,3 @@ * This is in combination with fluid enabled
    */
-  lg: _react2.default.PropTypes.bool,
+  lg: _propTypes2.default.bool,
   /**
@@ -131,15 +135,15 @@ * This is in combination with fluid enabled
    */
-  xl: _react2.default.PropTypes.bool,
+  xl: _propTypes2.default.bool,
   /**
    * Optional styling
    */
-  style: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.string]))
+  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]))
 };
 Container.contextTypes = {
-  phone: _react2.default.PropTypes.bool,
-  tablet: _react2.default.PropTypes.bool,
-  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number),
-  containerWidths: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number),
-  gutterWidth: _react2.default.PropTypes.number
+  phone: _propTypes2.default.bool,
+  tablet: _propTypes2.default.bool,
+  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number),
+  containerWidths: _propTypes2.default.arrayOf(_propTypes2.default.number),
+  gutterWidth: _propTypes2.default.number
 };
@@ -146,0 +150,0 @@ Container.defaultProps = {

build/grid/Row/index.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _style = require('./style');
@@ -72,7 +76,7 @@
    */
-  children: _react2.default.PropTypes.node.isRequired,
+  children: _propTypes2.default.node.isRequired,
   /**
    * Optional styling
    */
-  style: _react2.default.PropTypes.objectOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.number, _react2.default.PropTypes.string]))
+  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]))
 };
@@ -83,4 +87,4 @@ Row.defaultProps = {
 Row.contextTypes = {
-  gutterWidth: _react2.default.PropTypes.number
+  gutterWidth: _propTypes2.default.number
 };
 exports.default = Row;

build/support/RenderAny/index.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,5 +37,5 @@
 RenderAny.propTypes = {
-  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.element, _react2.default.PropTypes.node, _react2.default.PropTypes.func]).isRequired
+  children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.node, _propTypes2.default.func]).isRequired
 };
 
 exports.default = RenderAny;

build/utilities/ClearFix/index.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _Visible = require('../Visible');
@@ -70,19 +74,19 @@
    */
-  xs: _react2.default.PropTypes.bool,
+  xs: _propTypes2.default.bool,
   /**
    * Show on small devices
    */
-  sm: _react2.default.PropTypes.bool,
+  sm: _propTypes2.default.bool,
   /**
    * Show on medium devices
    */
-  md: _react2.default.PropTypes.bool,
+  md: _propTypes2.default.bool,
   /**
    * Show on large devices
    */
-  lg: _react2.default.PropTypes.bool,
+  lg: _propTypes2.default.bool,
   /**
    * Show on xl devices
    */
-  xl: _react2.default.PropTypes.bool
+  xl: _propTypes2.default.bool
 };
@@ -89,0 +93,0 @@ ClearFix.defaultProps = {

build/utilities/Hidden/index.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _throttle = require('lodash/throttle');
@@ -83,29 +87,29 @@
    */
-  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.element, _react2.default.PropTypes.node, _react2.default.PropTypes.func]).isRequired,
+  children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.node, _propTypes2.default.func]).isRequired,
   /**
    * Hide on extra small devices
    */
-  xs: _react2.default.PropTypes.bool,
+  xs: _propTypes2.default.bool,
   /**
    * Hide on small devices
    */
-  sm: _react2.default.PropTypes.bool,
+  sm: _propTypes2.default.bool,
   /**
    * Hide on medium devices
    */
-  md: _react2.default.PropTypes.bool,
+  md: _propTypes2.default.bool,
   /**
    * Hide on large devices
    */
-  lg: _react2.default.PropTypes.bool,
+  lg: _propTypes2.default.bool,
   /**
    * Hide on xlarge devices
    */
-  xl: _react2.default.PropTypes.bool
+  xl: _propTypes2.default.bool
 };
 Hidden.contextTypes = {
-  phone: _react2.default.PropTypes.bool,
-  tablet: _react2.default.PropTypes.bool,
-  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)
+  phone: _propTypes2.default.bool,
+  tablet: _propTypes2.default.bool,
+  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number)
 };
@@ -112,0 +116,0 @@ Hidden.defaultProps = {

build/utilities/ScreenClassRender/index.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _throttle = require('lodash/throttle');
@@ -18,6 +22,2 @@
 
-var _RenderAny = require('../../support/RenderAny');
-
-var _RenderAny2 = _interopRequireDefault(_RenderAny);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -55,16 +55,5 @@
     }, _this.getStyle = function () {
-      return _this.props.style(_this.state.screenClass);
+      return _this.props.style(_this.state.screenClass, _this.props.children.props);
     }, _this.render = function () {
-      if (_this.props.render) {
-        return _react2.default.createElement(
-          _RenderAny2.default,
-          null,
-          _this.props.render(_this.state.screenClass)
-        );
-      }
-      if (_this.props.style) {
-        var clonedElement = _react2.default.cloneElement(_this.props.children, { style: _this.getStyle() });
-        return clonedElement;
-      }
-      return false;
+      return _react2.default.cloneElement(_this.props.children, { style: _this.getStyle() });
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -80,20 +69,19 @@ }
    */
-  children: _react2.default.PropTypes.element.isRequired,
+  children: _propTypes2.default.element.isRequired,
   /**
    * A function returning the style for the children.
-   * This function gets the screen class as a parameter.
+   * This function gets the screen class as the first parameter,
+   * and the props of the child element as the second parameter
    */
-  style: _react2.default.PropTypes.func,
-  render: _react2.default.PropTypes.func
+  style: _propTypes2.default.func.isRequired
 };
 ScreenClassRender.defaultProps = {
-  style: null,
-  render: null
+  style: null
 };
 ScreenClassRender.contextTypes = {
-  phone: _react2.default.PropTypes.bool,
-  tablet: _react2.default.PropTypes.bool,
-  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)
+  phone: _propTypes2.default.bool,
+  tablet: _propTypes2.default.bool,
+  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number)
 };
 exports.default = ScreenClassRender;

build/utilities/Visible/index.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _throttle = require('lodash/throttle');
@@ -83,29 +87,29 @@
    */
-  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.element, _react2.default.PropTypes.node, _react2.default.PropTypes.func]).isRequired,
+  children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.node, _propTypes2.default.func]).isRequired,
   /**
    * Show on extra small devices
    */
-  xs: _react2.default.PropTypes.bool,
+  xs: _propTypes2.default.bool,
   /**
    * Show on small devices
    */
-  sm: _react2.default.PropTypes.bool,
+  sm: _propTypes2.default.bool,
   /**
    * Show on medium devices
    */
-  md: _react2.default.PropTypes.bool,
+  md: _propTypes2.default.bool,
   /**
    * Show on large devices
    */
-  lg: _react2.default.PropTypes.bool,
+  lg: _propTypes2.default.bool,
   /**
    * Show on xl devices
    */
-  xl: _react2.default.PropTypes.bool
+  xl: _propTypes2.default.bool
 };
 Visible.contextTypes = {
-  phone: _react2.default.PropTypes.bool,
-  tablet: _react2.default.PropTypes.bool,
-  serverSideScreenClass: _react2.default.PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpoints: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number)
+  phone: _propTypes2.default.bool,
+  tablet: _propTypes2.default.bool,
+  serverSideScreenClass: _propTypes2.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.number)
 };
@@ -112,0 +116,0 @@ Visible.defaultProps = {

package.json

 {
   "name": "react-grid-system",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "A no CSS Bootstrap-like responsive grid system for React.",
@@ -45,2 +45,3 @@ "main": "./build/index.js",
     "lodash": "4.17.4",
+    "prop-types": "15.5.8",
     "react": "15.5.4"
@@ -47,0 +48,0 @@ },

README.md

@@ -85,11 +85,15 @@ # react-grid-system
 ```html
-const styleFunction = (screenClass) => {
-  if (screenClass === 'xl') return { fontSize: '60px' };
-  if (screenClass === 'lg') return { fontSize: '40px' };
-  if (screenClass === 'md') return { fontSize: '30px' };
-  if (screenClass === 'sm') return { fontSize: '20px' };
-  return { fontSize: '10px' };
+const styleFunction = (screenClass, props) => {
+  let fontSize = 10;
+  if (screenClass === 'sm') fontSize = 20;
+  if (screenClass === 'md') fontSize = 30;
+  if (screenClass === 'lg') fontSize = 40;
+  if (screenClass === 'xl') fontSize = 50;
+  return {
+      fontSize: `${fontSize}px`,
+      ...props.style,
+   };
 };
 
-<ScreenClassRender style={styleFunction}><p>Some text which font size depends on the screen class.</p></ScreenClassRender>
+<ScreenClassRender style={styleFunction}><p style={{ color: 'red' }}>Some red text, which font size depends on the screen class.</p></ScreenClassRender>
 ```
@@ -96,0 +100,0 @@

No alert changes

Improved metrics

Total package byte prevSize

49036

0.49%

Lines of code

942

1.73%

Number of lines in readme file

142

2.9%

Worsened metrics

Dependency count

3

50%

Dependency changes

• + Added

  prop-types@15.5.8

• + Added

  prop-types@15.5.8
  (transitive)

• - Removed

  prop-types@15.8.1
  (transitive)

• - Removed

  react-is@16.13.1
  (transitive)