react-grid-system - npm Package Compare versions

Comparing version 7.1.2 to 7.2.0

build/grid/Container/style.js

@@ -35,10 +35,14 @@ "use strict";
 
-  if (fluid && !sm && !md && !lg && !xl) {
+  if (fluid && !xs && !sm && !md && !lg && !xl) {
     return _objectSpread(_objectSpread({}, styles), moreStyle);
   }
 
-  if (screenClass === 'sm' && containerWidths[0] && !sm && !xs) {
+  if (screenClass === 'xs' && containerWidths[0] && !xs) {
     styles.maxWidth = containerWidths[0];
   }
 
+  if (screenClass === 'sm' && containerWidths[0] && !sm) {
+    styles.maxWidth = containerWidths[0];
+  }
+
   if (screenClass === 'md' && containerWidths[1] && !md) {
@@ -45,0 +49,0 @@ styles.maxWidth = containerWidths[1];

build/grid/Row/index.js

@@ -44,3 +44,4 @@ "use strict";
       nowrap = _ref.nowrap,
-      otherProps = _objectWithoutProperties(_ref, ["children", "style", "align", "justify", "debug", "nogutter", "gutterWidth", "component", "nowrap"]);
+      direction = _ref.direction,
+      otherProps = _objectWithoutProperties(_ref, ["children", "style", "align", "justify", "debug", "nogutter", "gutterWidth", "component", "nowrap", "direction"]);
 
@@ -56,3 +57,4 @@ var theGutterWidth = (0, _config.getConfiguration)().gutterWidth;
     moreStyle: style,
-    nowrap: nowrap
+    nowrap: nowrap,
+    direction: direction
   });
@@ -83,2 +85,7 @@ return /*#__PURE__*/_react.default.createElement(component, _objectSpread({
   /**
+   * flex-direction style attribute
+   */
+  direction: _propTypes.default.oneOf(['column', 'row', 'column-reverse', 'row-reverse']),
+
+  /**
    * No gutter for this row
@@ -116,2 +123,3 @@ */
   justify: 'start',
+  direction: 'row',
   nogutter: false,
@@ -118,0 +126,0 @@ gutterWidth: null,

build/grid/Row/style.js

@@ -20,3 +20,4 @@ "use strict";
       moreStyle = _ref.moreStyle,
-      nowrap = _ref.nowrap;
+      nowrap = _ref.nowrap,
+      direction = _ref.direction;
   // Vertical alignment
@@ -35,2 +36,3 @@ var alignItems = align;
   if (justify === 'inherit') justifyContent = 'inherit';
+  var flexDirection = ['column', 'row', 'column-reverse', 'row-reverse'].includes(direction) ? direction : undefined;
   var styles = {
@@ -44,3 +46,4 @@ marginLeft: -gutterWidth / 2,
     alignItems: alignItems,
-    justifyContent: justifyContent
+    justifyContent: justifyContent,
+    flexDirection: flexDirection
   };
@@ -47,0 +50,0 @@

index.d.ts

@@ -6,2 +6,3 @@ declare module 'react-grid-system' {
     type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'initial' | 'inherit';
+    type Direction = 'column' | 'row' | 'column-reverse' | 'row-reverse'
     type ScreenClass = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
@@ -33,2 +34,3 @@ type ScreenClassMap<T> = Partial<Record<ScreenClass, T>>;
         justify?: Justify,
+        direction?: Direction,
         debug?: boolean,
@@ -35,0 +37,0 @@ style?: object,

package.json

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

src/grid.md

@@ -181,2 +181,36 @@ Resize your browser or load on different devices to test the grid system.
 
+### Example: Direction prop for order and orientation of Row children
+
+```js
+import { Container, Row, Col } from '.';
+
+<Container fluid>
+  <Row align="center" justify="center" direction="row" style={{ height: '300px' }} debug>
+    <Col xs={3} debug>1 of 3</Col>
+    <Col xs={3} debug>2 of 3</Col>
+    <Col xs={3} debug>3 of 3</Col>
+  </Row>
+  <br />
+    <Row align="center" justify="center" direction="row-reverse" style={{ height: '300px' }} debug>
+    <Col xs={3} debug>1 of 3</Col>
+    <Col xs={3} debug>2 of 3</Col>
+    <Col xs={3} debug>3 of 3</Col>
+  </Row>
+  <br />
+    <Row align="center" justify="center" direction="column" style={{ height: '300px' }} debug>
+    <Col xs={3} debug>1 of 3</Col>
+    <Col xs={3} debug>2 of 3</Col>
+    <Col xs={3} debug>3 of 3</Col>
+  </Row>
+  <br />
+    <Row align="center" justify="center" direction="column-reverse" style={{ height: '300px' }} debug>
+    <Col xs={3} debug>1 of 3</Col>
+    <Col xs={3} debug>2 of 3</Col>
+    <Col xs={3} debug>3 of 3</Col>
+  </Row>
+  <br />
+
+</Container>
+```
+
 ### Example: Offsetting columns
@@ -183,0 +217,0 @@

src/grid/Container/style.js

@@ -23,10 +23,14 @@ export default ({
 
-  if (fluid && (!sm && !md && !lg && !xl)) {
+  if (fluid && !xs && !sm && !md && !lg && !xl) {
     return { ...styles, ...moreStyle };
   }
 
-  if (screenClass === 'sm' && containerWidths[0] && !sm && !xs) {
+  if (screenClass === 'xs' && containerWidths[0] && !xs) {
     styles.maxWidth = containerWidths[0];
   }
 
+  if (screenClass === 'sm' && containerWidths[0] && !sm) {
+    styles.maxWidth = containerWidths[0];
+  }
+
   if (screenClass === 'md' && containerWidths[1] && !md) {
@@ -33,0 +37,0 @@ styles.maxWidth = containerWidths[1];

src/grid/Row/index.js

@@ -19,2 +19,3 @@ import React from 'react';
   nowrap,
+  direction,
   ...otherProps
@@ -32,2 +33,3 @@ }) => {
     nowrap,
+    direction
   });
@@ -65,2 +67,6 @@ return React.createElement(
   /**
+   * flex-direction style attribute
+   */
+  direction: PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse']),
+  /**
    * No gutter for this row
@@ -96,2 +102,3 @@ */
   justify: 'start',
+  direction: 'row',
   nogutter: false,
@@ -98,0 +105,0 @@ gutterWidth: null,

src/grid/Row/style.js

 export default ({
-  gutterWidth, align, justify, debug, moreStyle, nowrap,
+  gutterWidth, align, justify, debug, moreStyle, nowrap, direction
 }) => {
@@ -19,2 +19,4 @@ // Vertical alignment
 
+  const flexDirection = ['column', 'row', 'column-reverse', 'row-reverse'].includes(direction) ? direction : undefined;
+
   const styles = {
@@ -29,2 +31,3 @@ marginLeft: -gutterWidth / 2,
     justifyContent,
+    flexDirection
   };
@@ -31,0 +34,0 @@

No alert changes

Improved metrics

Total package byte prevSize

107061

increased by2%

Lines of code

2120

increased by1.29%

No dependency changes