react-grid-system - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

build/grid/Col/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -22,2 +24,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -53,17 +57,24 @@
     }, _this.render = function () {
-      var style = (0, _style2.default)({
-        xs: _this.props.xs,
-        sm: _this.props.sm,
-        md: _this.props.md,
-        lg: _this.props.lg,
-        xl: _this.props.xl,
-        offset: _this.props.offset,
+      var _this$props = _this.props,
+          children = _this$props.children,
+          xs = _this$props.xs,
+          sm = _this$props.sm,
+          md = _this$props.md,
+          lg = _this$props.lg,
+          xl = _this$props.xl,
+          offset = _this$props.offset,
+          style = _this$props.style,
+          otherProps = _objectWithoutProperties(_this$props, ['children', 'xs', 'sm', 'md', 'lg', 'xl', 'offset', 'style']);
+
+      var theStyle = (0, _style2.default)({
+        width: { xs: xs, sm: sm, md: md, lg: lg, xl: xl },
+        offset: offset,
         screenClass: _this.state.screenClass,
         gutterWidth: _this.context.gutterWidth,
-        moreStyle: _this.props.style
+        moreStyle: style
       });
       return _react2.default.createElement(
         'div',
-        { style: style },
-        _this.props.children
+        _extends({ style: theStyle }, otherProps),
+        children
       );
@@ -80,3 +91,3 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
    */
-  children: _react2.default.PropTypes.node,
+  children: _react2.default.PropTypes.node.isRequired,
   /**
@@ -117,2 +128,11 @@ * The width of the column for screenclass `xs`, between 0 and 12
 };
+Col.defaultProps = {
+  xs: 12,
+  sm: 12,
+  md: 12,
+  lg: 12,
+  xl: 12,
+  offset: {},
+  style: {}
+};
 Col.contextTypes = {
@@ -119,0 +139,0 @@ phone: _react2.default.PropTypes.bool,

build/grid/Col/style.css.js

@@ -12,13 +12,13 @@ 'use strict';
 var getWidth = function getWidth(width) {
+  var defaultWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 12;
+
+  if (typeof width !== 'number') return undefined;
   var colWidth = (0, _utils.normalizeColumnWidth)(width);
-  if (colWidth) return 100 / 12 * colWidth + '%';
-  return undefined;
+  if (colWidth === defaultWidth) return undefined;
+  return 100 / 12 * colWidth + '%';
 };
 
 exports.default = function (_ref) {
-  var xs = _ref.xs,
-      sm = _ref.sm,
-      md = _ref.md,
-      lg = _ref.lg,
-      xl = _ref.xl,
+  var _ref$width = _ref.width,
+      width = _ref$width === undefined ? {} : _ref$width,
       _ref$offset = _ref.offset,
@@ -32,5 +32,4 @@ offset = _ref$offset === undefined ? {} : _ref$offset,
 
-  var styles = _extends({
+  var styles = _extends({}, moreStyle, {
     boxSizing: 'border-box',
-    position: 'relative',
     minHeight: '1px',
@@ -40,34 +39,15 @@ paddingLeft: theGutterWidth / 2 + 'px',
     float: 'left'
-  }, moreStyle);
+  });
 
-  var width = null;
-  var marginLeft = null;
+  styles.width = '100%';
+  styles.marginLeft = '0%';
 
-  if (['xl'].indexOf(screenClass) >= 0) {
-    width = width || getWidth(xl);
-    marginLeft = marginLeft || getWidth(offset.xl);
-  }
+  _utils.screenClasses.forEach(function (size, index) {
+    if (_utils.screenClasses.indexOf(screenClass) >= index) {
+      styles.width = getWidth(width[size]) || styles.width;
+      styles.marginLeft = getWidth(offset[size]) || styles.marginLeft;
+    }
+  });
 
-  if (['lg', 'xl'].indexOf(screenClass) >= 0) {
-    width = width || getWidth(lg);
-    marginLeft = marginLeft || getWidth(offset.lg);
-  }
-
-  if (['md', 'lg', 'xl'].indexOf(screenClass) >= 0) {
-    width = width || getWidth(md);
-    marginLeft = marginLeft || getWidth(offset.md);
-  }
-
-  if (['sm', 'md', 'lg', 'xl'].indexOf(screenClass) >= 0) {
-    width = width || getWidth(sm);
-    marginLeft = marginLeft || getWidth(offset.sm);
-  }
-
-  width = width || getWidth(xs) || '100%';
-  marginLeft = marginLeft || getWidth(offset.xs) || '0%';
-
-  styles.width = width;
-  styles.marginLeft = marginLeft;
-
   return styles;
 };

build/grid/Container/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -22,2 +24,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -53,13 +57,19 @@
     }, _this.render = function () {
-      var style = (0, _style2.default)({
-        fluid: _this.props.fluid,
+      var _this$props = _this.props,
+          children = _this$props.children,
+          fluid = _this$props.fluid,
+          style = _this$props.style,
+          otherProps = _objectWithoutProperties(_this$props, ['children', 'fluid', 'style']);
+
+      var theStyle = (0, _style2.default)({
+        fluid: fluid,
         screenClass: _this.state.screenClass,
         containerWidths: _this.context.containerWidths,
         gutterWidth: _this.context.gutterWidth,
-        moreStyle: _this.props.style
+        moreStyle: style
       });
       return _react2.default.createElement(
         'div',
-        { style: style },
-        _this.props.children,
+        _extends({ style: theStyle }, otherProps),
+        children,
         _react2.default.createElement('span', { style: (0, _style.getAfterStyle)() })
@@ -77,3 +87,3 @@ );
    */
-  children: _react2.default.PropTypes.node,
+  children: _react2.default.PropTypes.node.isRequired,
   /**
@@ -96,4 +106,5 @@ * True makes the container full-width, false fixed-width
 Container.defaultProps = {
-  fluid: false
+  fluid: false,
+  style: {}
 };
 exports.default = Container;

build/grid/Container/style.css.js

@@ -22,3 +22,3 @@ 'use strict';
 
-  var styles = _extends({
+  var styles = _extends({}, moreStyle, {
     boxSizing: 'border-box',
@@ -31,3 +31,3 @@ position: 'relative',
     width: 'auto'
-  }, moreStyle);
+  });
 
@@ -34,0 +34,0 @@ if (fluid) {

build/grid/Row/index.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -18,2 +20,4 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -40,10 +44,15 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Row.__proto__ || Object.getPrototypeOf(Row)).call.apply(_ref, [this].concat(args))), _this), _this.render = function () {
-      var style = (0, _style2.default)({
+      var _this$props = _this.props,
+          children = _this$props.children,
+          style = _this$props.style,
+          otherProps = _objectWithoutProperties(_this$props, ['children', 'style']);
+
+      var theStyle = (0, _style2.default)({
         gutterWidth: _this.context.gutterWidth,
-        moreStyle: _this.props.style
+        moreStyle: style
       });
       return _react2.default.createElement(
         'div',
-        { style: style },
-        _this.props.children,
+        _extends({ style: theStyle }, otherProps),
+        children,
         _react2.default.createElement(
@@ -69,3 +78,3 @@ 'div',
    */
-  children: _react2.default.PropTypes.node,
+  children: _react2.default.PropTypes.node.isRequired,
   /**
@@ -76,2 +85,5 @@ * Optional styling
 };
+Row.defaultProps = {
+  style: {}
+};
 Row.contextTypes = {
@@ -78,0 +90,0 @@ gutterWidth: _react2.default.PropTypes.number

build/grid/Row/style.css.js

@@ -18,6 +18,6 @@ 'use strict';
 
-  return _extends({
+  return _extends({}, moreStyle, {
     marginLeft: '-' + theGutterWidth / 2 + 'px',
     marginRight: '-' + theGutterWidth / 2 + 'px'
-  }, moreStyle);
+  });
 };
@@ -24,0 +24,0 @@

build/support/RenderAny/index.js

@@ -32,5 +32,5 @@ 'use strict';
 RenderAny.propTypes = {
-  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.element, _react2.default.PropTypes.node, _react2.default.PropTypes.func])
+  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.element, _react2.default.PropTypes.node, _react2.default.PropTypes.func]).isRequired
 };
 
 exports.default = RenderAny;

build/utilities/Hidden/index.js

@@ -80,3 +80,3 @@ 'use strict';
    */
-  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.element, _react2.default.PropTypes.node, _react2.default.PropTypes.func]),
+  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.element, _react2.default.PropTypes.node, _react2.default.PropTypes.func]).isRequired,
   /**
@@ -83,0 +83,0 @@ * Hide on extra small devices

build/utilities/ScreenClassRender/index.js

@@ -60,3 +60,3 @@ 'use strict';
       }
-      if (_this.props.children && _this.props.style) {
+      if (_this.props.style) {
         var clonedElement = _react2.default.cloneElement(_this.props.children, { style: _this.getStyle() });
@@ -76,3 +76,3 @@ return clonedElement;
    */
-  children: _react2.default.PropTypes.element,
+  children: _react2.default.PropTypes.element.isRequired,
   /**
@@ -85,2 +85,6 @@ * A function returning the style for the children.
 };
+ScreenClassRender.defaultProps = {
+  style: null,
+  render: null
+};
 ScreenClassRender.contextTypes = {
@@ -87,0 +91,0 @@ phone: _react2.default.PropTypes.bool,

build/utilities/Visible/index.js

@@ -80,3 +80,3 @@ 'use strict';
    */
-  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.element, _react2.default.PropTypes.node, _react2.default.PropTypes.func]),
+  children: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.element, _react2.default.PropTypes.node, _react2.default.PropTypes.func]).isRequired,
   /**
@@ -83,0 +83,0 @@ * Show on extra small devices

build/utils.js

@@ -21,2 +21,4 @@ 'use strict';
 
+var screenClasses = exports.screenClasses = ['xs', 'sm', 'md', 'lg', 'xl'];
+
 var defaultBreakpoints = exports.defaultBreakpoints = [576, 768, 992, 1200];
@@ -47,4 +49,3 @@
 var normalizeColumnWidth = exports.normalizeColumnWidth = function normalizeColumnWidth(width) {
-  if (typeof width !== 'number') return undefined;
   return Math.max(0, Math.min(12, width));
 };

example/package.json

@@ -10,19 +10,2 @@ {
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/zoover/react-grid-system.git"
-  },
-  "keywords": [
-    "react",
-    "bootstap",
-    "grid",
-    "responsive",
-    "example"
-  ],
-  "author": "Zoover",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/zoover/react-grid-system/issues"
-  },
-  "homepage": "https://github.com/zoover/react-grid-system#readme",
   "dependencies": {
@@ -29,0 +12,0 @@ "babel-core": "^6.14.0",

package.json

 {
   "name": "react-grid-system",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A no CSS Bootstrap-like responsive grid system for React.",
@@ -11,3 +11,3 @@ "main": "./build/index.js",
     "type": "git",
-    "url": "git+https://github.com/zoover/react-grid-system.git"
+    "url": "git+https://github.com/JSxMachina/react-grid-system.git"
   },
@@ -20,23 +20,33 @@ "keywords": [
   ],
-  "author": "Zoover",
+  "author": "JSxMachina",
+  "contributors": [
+    {
+      "name": "Gerben Meyer",
+      "url": "https://github.com/gerbenmeyer"
+    },
+    {
+      "name": "Mohamed Ben Mohamed",
+      "url": "https://github.com/tikider"
+    }
+  ],
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/zoover/react-grid-system/issues"
+    "url": "https://github.com/JSxMachina/react-grid-system/issues"
   },
-  "homepage": "https://github.com/zoover/react-grid-system#readme",
+  "homepage": "https://github.com/JSxMachina/react-grid-system#readme",
   "dependencies": {
-    "lodash": "^4.17.2",
-    "react": "^15.4.1"
+    "lodash": "^4.17.4",
+    "react": "^15.4.2"
   },
   "devDependencies": {
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-1": "^6.16.0",
+    "babel-preset-latest": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "babel-preset-stage-1": "^6.22.0",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
-    "gulp-dev-tasks": "^1.4.1",
-    "react-dom": "^15.4.1",
-    "react-styleguidist": "^4.4.1",
+    "gulp-dev-tasks": "^1.4.2",
+    "react-dom": "^15.4.2",
+    "react-styleguidist": "^4.6.3",
     "webpack": "^1.14.0"
   }
 }

README.md

 # react-grid-system
 A no CSS Bootstrap-like responsive grid system for React.
 
-[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]
+[![NPM version][version-image]][npm-url] [![Downloads][downloads-image]][npm-url]
 
@@ -101,9 +101,9 @@ ## Installation
 
-An simple example application using all the features of `react-grid-system` can be found at https://github.com/zoover/react-grid-system/tree/master/example.
+An simple example application using all the features of `react-grid-system` can be found at https://github.com/JSxMachina/react-grid-system/tree/master/example.
 
-More examples and documentation of all components can be found at the GitHub pages: https://zoover.github.io/react-grid-system/
+More examples and documentation of all components can be found at the GitHub pages: https://JSxMachina.github.io/react-grid-system/
 
-[downloads-image]: http://img.shields.io/npm/dm/react-grid-system.svg
+[version-image]: https://img.shields.io/npm/v/react-grid-system.svg
+[downloads-image]: https://img.shields.io/npm/dm/react-grid-system.svg
 
 [npm-url]: https://npmjs.org/package/react-grid-system
-[npm-image]: http://img.shields.io/npm/v/react-grid-system.svg

src/grid/Col/index.jsx

@@ -13,3 +13,3 @@ /* global window */
      */
-    children: React.PropTypes.node,
+    children: React.PropTypes.node.isRequired,
     /**
@@ -52,6 +52,16 @@ * The width of the column for screenclass `xs`, between 0 and 12
         React.PropTypes.string,
-      ])
+      ]),
     ),
   };
 
+  static defaultProps = {
+    xs: 12,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    xl: 12,
+    offset: {},
+    style: {},
+  }
+
   static contextTypes = {
@@ -82,16 +92,13 @@ phone: React.PropTypes.bool,
   render = () => {
-    const style = getStyle({
-      xs: this.props.xs,
-      sm: this.props.sm,
-      md: this.props.md,
-      lg: this.props.lg,
-      xl: this.props.xl,
-      offset: this.props.offset,
+    const { children, xs, sm, md, lg, xl, offset, style, ...otherProps } = this.props;
+    const theStyle = getStyle({
+      width: { xs, sm, md, lg, xl },
+      offset,
       screenClass: this.state.screenClass,
       gutterWidth: this.context.gutterWidth,
-      moreStyle: this.props.style,
+      moreStyle: style,
     });
     return (
-      <div style={style}>
-        {this.props.children}
+      <div style={theStyle} {...otherProps}>
+        {children}
       </div>
@@ -98,0 +105,0 @@ );

src/grid/Col/style.css.js

@@ -1,15 +0,16 @@
-import { defaultGutterWidth, normalizeColumnWidth } from '../../utils';
+import { defaultGutterWidth, normalizeColumnWidth, screenClasses } from '../../utils';
 
-const getWidth = (width) => {
+const getWidth = (width, defaultWidth = 12) => {
+  if (typeof width !== 'number') return undefined;
   const colWidth = normalizeColumnWidth(width);
-  if (colWidth) return `${(100 / 12) * colWidth}%`;
-  return undefined;
+  if (colWidth === defaultWidth) return undefined;
+  return `${(100 / 12) * colWidth}%`;
 };
 
-export default ({ xs, sm, md, lg, xl, offset = {}, screenClass, gutterWidth, moreStyle }) => {
+export default ({ width = {}, offset = {}, screenClass, gutterWidth, moreStyle }) => {
   const theGutterWidth = typeof gutterWidth === 'number' ? gutterWidth : defaultGutterWidth;
 
   const styles = {
+    ...moreStyle,
     boxSizing: 'border-box',
-    position: 'relative',
     minHeight: '1px',
@@ -19,35 +20,15 @@ paddingLeft: `${theGutterWidth / 2}px`,
     float: 'left',
-    ...moreStyle,
   };
 
-  let width = null;
-  let marginLeft = null;
+  styles.width = '100%';
+  styles.marginLeft = '0%';
 
-  if (['xl'].indexOf(screenClass) >= 0) {
-    width = width || getWidth(xl);
-    marginLeft = marginLeft || getWidth(offset.xl);
-  }
+  screenClasses.forEach((size, index) => {
+    if (screenClasses.indexOf(screenClass) >= index) {
+      styles.width = getWidth(width[size]) || styles.width;
+      styles.marginLeft = getWidth(offset[size]) || styles.marginLeft;
+    }
+  });
 
-  if (['lg', 'xl'].indexOf(screenClass) >= 0) {
-    width = width || getWidth(lg);
-    marginLeft = marginLeft || getWidth(offset.lg);
-  }
-
-  if (['md', 'lg', 'xl'].indexOf(screenClass) >= 0) {
-    width = width || getWidth(md);
-    marginLeft = marginLeft || getWidth(offset.md);
-  }
-
-  if (['sm', 'md', 'lg', 'xl'].indexOf(screenClass) >= 0) {
-    width = width || getWidth(sm);
-    marginLeft = marginLeft || getWidth(offset.sm);
-  }
-
-  width = width || getWidth(xs) || '100%';
-  marginLeft = marginLeft || getWidth(offset.xs) || '0%';
-
-  styles.width = width;
-  styles.marginLeft = marginLeft;
-
   return styles;
 };

src/grid/Container/index.jsx

@@ -13,3 +13,3 @@ /* global window */
      */
-    children: React.PropTypes.node,
+    children: React.PropTypes.node.isRequired,
     /**
@@ -26,3 +26,3 @@ * True makes the container full-width, false fixed-width
          React.PropTypes.string,
-       ])
+       ]),
      ),
@@ -41,2 +41,3 @@ };
     fluid: false,
+    style: {},
   };
@@ -62,12 +63,13 @@
   render = () => {
-    const style = getStyle({
-      fluid: this.props.fluid,
+    const { children, fluid, style, ...otherProps } = this.props;
+    const theStyle = getStyle({
+      fluid,
       screenClass: this.state.screenClass,
       containerWidths: this.context.containerWidths,
       gutterWidth: this.context.gutterWidth,
-      moreStyle: this.props.style,
+      moreStyle: style,
     });
     return (
-      <div style={style}>
-        {this.props.children}
+      <div style={theStyle} {...otherProps}>
+        {children}
         <span style={getAfterStyle()} />
@@ -74,0 +76,0 @@ </div>

src/grid/Container/style.css.js

@@ -10,2 +10,3 @@ import { defaultContainerWidths, defaultGutterWidth } from '../../utils';
   const styles = {
+    ...moreStyle,
     boxSizing: 'border-box',
@@ -18,3 +19,2 @@ position: 'relative',
     width: 'auto',
-    ...moreStyle,
   };
@@ -21,0 +21,0 @@

src/grid/Readme.md

 A no CSS Bootstrap-like responsive grid system for React.
 
-For more information on these components, view this project on GitHub: [https://github.com/zoover/react-grid-system](https://github.com/zoover/react-grid-system)
+For more information on these components, view this project on GitHub: [https://github.com/JSxMachina/react-grid-system](https://github.com/JSxMachina/react-grid-system)
 
@@ -5,0 +5,0 @@ ### Example: Stacked-to-horizontal

src/grid/Row/index.jsx

@@ -11,3 +11,3 @@ /* eslint react/prefer-stateless-function: "off" */
      */
-    children: React.PropTypes.node,
+    children: React.PropTypes.node.isRequired,
     /**
@@ -20,6 +20,10 @@ * Optional styling
          React.PropTypes.string,
-       ])
+       ]),
      ),
   };
 
+  static defaultProps = {
+    style: {},
+  }
+
   static contextTypes = {
@@ -30,9 +34,10 @@ gutterWidth: React.PropTypes.number,
   render = () => {
-    const style = getStyle({
+    const { children, style, ...otherProps } = this.props;
+    const theStyle = getStyle({
       gutterWidth: this.context.gutterWidth,
-      moreStyle: this.props.style,
+      moreStyle: style,
     });
     return (
-      <div style={style}>
-        {this.props.children}
+      <div style={theStyle} {...otherProps}>
+        {children}
         <div style={getAfterStyle()}><span style={getAfterContentStyle()}>&nbsp;</span></div>
@@ -39,0 +44,0 @@ </div>

src/grid/Row/style.css.js

@@ -7,5 +7,5 @@ import { defaultGutterWidth } from '../../utils';
   return {
+    ...moreStyle,
     marginLeft: `-${theGutterWidth / 2}px`,
     marginRight: `-${theGutterWidth / 2}px`,
-    ...moreStyle,
   };
@@ -12,0 +12,0 @@ };

src/support/RenderAny/index.jsx

@@ -18,5 +18,5 @@ import React from 'react';
     React.PropTypes.func,
-  ]),
+  ]).isRequired,
 };
 
 export default RenderAny;

src/utilities/Hidden/index.jsx

@@ -18,3 +18,3 @@ /* global window */
       React.PropTypes.func,
-    ]),
+    ]).isRequired,
     /**
@@ -21,0 +21,0 @@ * Hide on extra small devices

src/utilities/ScreenClassRender/index.jsx

@@ -13,3 +13,3 @@ /* global window */
      */
-    children: React.PropTypes.element,
+    children: React.PropTypes.element.isRequired,
     /**
@@ -23,2 +23,7 @@ * A function returning the style for the children.
 
+  static defaultProps = {
+    style: null,
+    render: null,
+  }
+
   static contextTypes = {
@@ -53,3 +58,3 @@ phone: React.PropTypes.bool,
     }
-    if (this.props.children && this.props.style) {
+    if (this.props.style) {
       const clonedElement = React.cloneElement(this.props.children, { style: this.getStyle() });
@@ -56,0 +61,0 @@ return clonedElement;

src/utilities/Visible/index.jsx

@@ -18,3 +18,3 @@ /* global window */
       React.PropTypes.func,
-    ]),
+    ]).isRequired,
     /**
@@ -21,0 +21,0 @@ * Show on extra small devices

src/utils.js

@@ -13,2 +13,4 @@ /* global window */
 
+export const screenClasses = ['xs', 'sm', 'md', 'lg', 'xl'];
+
 export const defaultBreakpoints = [576, 768, 992, 1200];
@@ -34,5 +36,2 @@
 
-export const normalizeColumnWidth = (width) => {
-  if (typeof width !== 'number') return undefined;
-  return Math.max(0, Math.min(12, width));
-};
+export const normalizeColumnWidth = width => Math.max(0, Math.min(12, width));

No alert changes

Improved metrics

Number of package files

50

increased by2.04%

Worsened metrics

Total package byte prevSize

1486012

decreased by-52.25%

Lines of code

6869

decreased by-48.06%

Dependency changes

• Updatedlodash@^4.17.4

• Updatedreact@^15.4.2