react-grid-system - npm Package Compare versions

Comparing version 2.0.4 to 2.1.0

build/grid/Col/index.js

@@ -52,7 +52,7 @@ 'use strict';
       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,
+        xs: (0, _utils.normalizeColumnWidth)(_this.props.xs),
+        sm: (0, _utils.normalizeColumnWidth)(_this.props.sm),
+        md: (0, _utils.normalizeColumnWidth)(_this.props.md),
+        lg: (0, _utils.normalizeColumnWidth)(_this.props.lg),
+        xl: (0, _utils.normalizeColumnWidth)(_this.props.xl),
         screenClass: _this.state.screenClass,
@@ -75,11 +75,26 @@ gutterWidth: _this.context.gutterWidth,
   /**
-   * Content of the component
+   * Content of the column
    */
   children: _react2.default.PropTypes.node,
-  xs: _react2.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  sm: _react2.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  md: _react2.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  lg: _react2.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-  xl: _react2.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
   /**
+   * The width of the column for screenclass `xs`, between 0 and 12
+   */
+  xs: _react2.default.PropTypes.number,
+  /**
+   * The width of the column for screenclass `sm`, between 0 and 12
+   */
+  sm: _react2.default.PropTypes.number,
+  /**
+   * The width of the column for screenclass `md`, between 0 and 12
+   */
+  md: _react2.default.PropTypes.number,
+  /**
+   * The width of the column for screenclass `lg`, between 0 and 12
+   */
+  lg: _react2.default.PropTypes.number,
+  /**
+   * The width of the column for screenclass `xl`, between 0 and 12
+   */
+  xl: _react2.default.PropTypes.number,
+  /**
    * Optional styling
@@ -86,0 +101,0 @@ */

build/utils.js

@@ -43,2 +43,7 @@ 'use strict';
   return screenClass;
+};
+
+var normalizeColumnWidth = exports.normalizeColumnWidth = function normalizeColumnWidth(width) {
+  if (typeof width !== 'number') return undefined;
+  return Math.max(0, Math.min(12, width));
 };

package.json

 {
   "name": "react-grid-system",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "A no CSS Bootstrap-like responsive grid system for React.",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

src/grid/Col/index.jsx

@@ -6,3 +6,3 @@ /* global window */
 import getStyle from './style.css';
-import { getScreenClass } from '../../utils';
+import { getScreenClass, normalizeColumnWidth } from '../../utils';
 
@@ -12,11 +12,26 @@ export default class Col extends React.Component {
     /**
-     * Content of the component
+     * Content of the column
      */
     children: React.PropTypes.node,
-    xs: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-    sm: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-    md: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-    lg: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
-    xl: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
     /**
+     * The width of the column for screenclass `xs`, between 0 and 12
+     */
+    xs: React.PropTypes.number,
+    /**
+     * The width of the column for screenclass `sm`, between 0 and 12
+     */
+    sm: React.PropTypes.number,
+    /**
+     * The width of the column for screenclass `md`, between 0 and 12
+     */
+    md: React.PropTypes.number,
+    /**
+     * The width of the column for screenclass `lg`, between 0 and 12
+     */
+    lg: React.PropTypes.number,
+    /**
+     * The width of the column for screenclass `xl`, between 0 and 12
+     */
+    xl: React.PropTypes.number,
+    /**
      * Optional styling
@@ -58,7 +73,7 @@ */
     const style = getStyle({
-      xs: this.props.xs,
-      sm: this.props.sm,
-      md: this.props.md,
-      lg: this.props.lg,
-      xl: this.props.xl,
+      xs: normalizeColumnWidth(this.props.xs),
+      sm: normalizeColumnWidth(this.props.sm),
+      md: normalizeColumnWidth(this.props.md),
+      lg: normalizeColumnWidth(this.props.lg),
+      xl: normalizeColumnWidth(this.props.xl),
       screenClass: this.state.screenClass,
@@ -65,0 +80,0 @@ gutterWidth: this.context.gutterWidth,

src/utils.js

@@ -32,1 +32,6 @@ /* global window */
 };
+
+export const normalizeColumnWidth = (width) => {
+  if (typeof width !== 'number') return undefined;
+  return Math.max(0, Math.min(12, width));
+};

No alert changes

Improved metrics

Total package byte prevSize

3111067

0.03%

Lines of code

13180

0.29%

No dependency changes