react-grid-system - npm Package Compare versions

Comparing version 4.4.7 to 4.4.8

build/grid/Row/index.js

@@ -60,3 +60,4 @@ 'use strict';
           component = _this$props.component,
-          otherProps = _objectWithoutProperties(_this$props, ['children', 'style', 'align', 'justify', 'debug', 'nogutter', 'gutterWidth', 'component']);
+          nowrap = _this$props.nowrap,
+          otherProps = _objectWithoutProperties(_this$props, ['children', 'style', 'align', 'justify', 'debug', 'nogutter', 'gutterWidth', 'component', 'nowrap']);
 
@@ -71,3 +72,4 @@ var theGutterWidth = (0, _config.getConfiguration)().gutterWidth;
         debug: debug,
-        moreStyle: style
+        moreStyle: style,
+        nowrap: nowrap
       });
@@ -117,3 +119,7 @@ return _react2.default.createElement(component, _extends({ style: theStyle }, otherProps), _react2.default.createElement(
    */
-  component: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.string])
+  component: _propTypes2.default.oneOfType([_propTypes2.default.func, _propTypes2.default.string]),
+  /**
+   * Whether the cols should not wrap
+   */
+  nowrap: _propTypes2.default.bool
 };
@@ -120,0 +126,0 @@ Row.defaultProps = {

build/grid/Row/style.js

@@ -14,3 +14,4 @@ 'use strict';
       debug = _ref.debug,
-      moreStyle = _ref.moreStyle;
+      moreStyle = _ref.moreStyle,
+      nowrap = _ref.nowrap;
 
@@ -36,3 +37,3 @@ // Vertical alignment
     display: 'flex',
-    flexWrap: 'wrap',
+    flexWrap: nowrap ? 'nowrap' : 'wrap',
     flexGrow: 0,
@@ -39,0 +40,0 @@ flexShrink: 0,

package.json

 {
   "name": "react-grid-system",
-  "version": "4.4.7",
+  "version": "4.4.8",
   "description": "A powerful Bootstrap-like responsive grid system for React.",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

src/grid/Readme.md

@@ -239,1 +239,12 @@ A powerful Bootstrap-like responsive grid system for React.
 ```
+
+### Example: Column width adapted to content
+
+```
+<Container fluid style={{ lineHeight: '32px' }}>
+  <Row debug>
+    <Col debug>Logo (Flexible column)</Col>
+    <Col xs="content" debug> Menu with x-items</Col>
+  </Row>
+</Container>
+```

src/grid/Row/index.jsx

@@ -55,2 +55,6 @@ import React from 'react';
     ]),
+    /**
+     * Whether the cols should not wrap
+     */
+    nowrap: PropTypes.bool,
   };
@@ -78,2 +82,3 @@
       component,
+      nowrap,
       ...otherProps
@@ -90,2 +95,3 @@ } = this.props;
       moreStyle: style,
+      nowrap,
     });
@@ -92,0 +98,0 @@ return React.createElement(

src/grid/Row/style.js

 export default ({
-  gutterWidth, align, justify, debug, moreStyle,
+  gutterWidth, align, justify, debug, moreStyle, nowrap,
 }) => {
@@ -23,3 +23,3 @@ // Vertical alignment
     display: 'flex',
-    flexWrap: 'wrap',
+    flexWrap: nowrap ? 'nowrap' : 'wrap',
     flexGrow: 0,
@@ -26,0 +26,0 @@ flexShrink: 0,

No alert changes

Improved metrics

Total package byte prevSize

90033

increased by0.65%

Lines of code

1891

increased by0.69%

No dependency changes