react-grid-system - npm Package Compare versions

Comparing version 4.2.1 to 4.3.0

build/grid/Row/index.js

@@ -18,2 +18,4 @@ 'use strict';
 
+var _config = require('../../config');
+
 var _style = require('./style');
@@ -23,4 +25,2 @@
 
-var _config = require('../../config');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,6 +57,7 @@
           align = _this$props.align,
+          justify = _this$props.justify,
           debug = _this$props.debug,
           nogutter = _this$props.nogutter,
           component = _this$props.component,
-          otherProps = _objectWithoutProperties(_this$props, ['children', 'style', 'align', 'debug', 'nogutter', 'component']);
+          otherProps = _objectWithoutProperties(_this$props, ['children', 'style', 'align', 'justify', 'debug', 'nogutter', 'component']);
 
@@ -66,2 +67,3 @@ var theStyle = (0, _style2.default)({
         align: align,
+        justify: justify,
         debug: debug,
@@ -87,16 +89,20 @@ moreStyle: style
   /**
-  * Column alignment
-  */
+   * Vertical column alignment
+   */
   align: _propTypes2.default.oneOf(['normal', 'start', 'center', 'end']),
   /**
-  * No gutter for this row
-  */
+   * Horizontal column alignment
+   */
+  justify: _propTypes2.default.oneOf(['start', 'center', 'end', 'between', 'around', 'initial', 'inherit']),
+  /**
+   * No gutter for this row
+   */
   nogutter: _propTypes2.default.bool,
   /**
-  * Optional styling
-  */
+   * Optional styling
+   */
   style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])),
   /**
-    * Set to apply some debug styling
-    */
+   * Set to apply some debug styling
+   */
   debug: _propTypes2.default.bool,
@@ -110,2 +116,3 @@ /**
   align: 'normal',
+  justify: 'start',
   nogutter: false,
@@ -112,0 +119,0 @@ style: {},

build/grid/Row/style.js

@@ -12,5 +12,7 @@ 'use strict';
       align = _ref.align,
+      justify = _ref.justify,
       debug = _ref.debug,
       moreStyle = _ref.moreStyle;
 
+  // Vertical alignment
   var alignItems = align;
@@ -20,2 +22,12 @@ if (align === 'start') alignItems = 'flex-start';
 
+  // Horizontal alignment
+  var justifyContent = justify;
+  if (justify === 'start') justifyContent = 'flex-start';
+  if (justify === 'end') justifyContent = 'flex-end';
+  if (justify === 'between') justifyContent = 'space-between';
+  if (justify === 'around') justifyContent = 'space-around';
+  if (justify === 'center') justifyContent = 'center';
+  if (justify === 'initial') justifyContent = 'initial';
+  if (justify === 'inherit') justifyContent = 'inherit';
+
   var styles = _extends({
@@ -28,3 +40,4 @@ marginLeft: '-' + gutterWidth / 2 + 'px',
     flexShrink: 0,
-    alignItems: alignItems
+    alignItems: alignItems,
+    justifyContent: justifyContent
   }, moreStyle);
@@ -31,0 +44,0 @@

package.json

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

src/grid/Readme.md

@@ -119,2 +119,50 @@ A no CSS Bootstrap-like responsive grid system for React.
 
+### Example: Horizontal alignment
+
+```
+<Container fluid style={{ lineHeight: '32px' }}>
+  <Row justify="start" 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 justify="center" 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 justify="end" 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 justify="between" 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 justify="around" 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 justify="initial" 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 justify="inherit" 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>
+</Container>
+```
+
 ### Example: Offsetting columns
@@ -121,0 +169,0 @@

src/grid/Row/index.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
+import { getConfiguration } from '../../config';
 import getStyle from './style';
-import { getConfiguration } from '../../config';
 
@@ -15,19 +15,30 @@ export const NoGutterContext = React.createContext(false);
     /**
-    * Column alignment
-    */
+     * Vertical column alignment
+     */
     align: PropTypes.oneOf(['normal', 'start', 'center', 'end']),
     /**
-    * No gutter for this row
-    */
+     * Horizontal column alignment
+     */
+    justify: PropTypes.oneOf([
+      'start',
+      'center',
+      'end',
+      'between',
+      'around',
+      'initial',
+      'inherit',
+    ]),
+    /**
+     * No gutter for this row
+     */
     nogutter: PropTypes.bool,
     /**
-    * Optional styling
-    */
-    style: PropTypes.objectOf(PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.string,
-    ])),
+     * Optional styling
+     */
+    style: PropTypes.objectOf(
+      PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ),
     /**
-      * Set to apply some debug styling
-      */
+     * Set to apply some debug styling
+     */
     debug: PropTypes.bool,
@@ -45,2 +56,3 @@ /**
     align: 'normal',
+    justify: 'start',
     nogutter: false,
@@ -50,7 +62,14 @@ style: {},
     component: 'div',
-  }
+  };
 
   render = () => {
     const {
-      children, style, align, debug, nogutter, component, ...otherProps
+      children,
+      style,
+      align,
+      justify,
+      debug,
+      nogutter,
+      component,
+      ...otherProps
     } = this.props;
@@ -60,10 +79,14 @@ const theStyle = getStyle({
       align,
+      justify,
       debug,
       moreStyle: style,
     });
-    return React.createElement(component, { style: theStyle, ...otherProps },
+    return React.createElement(
+      component,
+      { style: theStyle, ...otherProps },
       <NoGutterContext.Provider value={nogutter}>
-        { children }
-      </NoGutterContext.Provider>);
-  }
+        {children}
+      </NoGutterContext.Provider>,
+    );
+  };
 }

src/grid/Row/style.js

 export default ({
-  gutterWidth, align, debug, moreStyle,
+  gutterWidth, align, justify, debug, moreStyle,
 }) => {
+  // Vertical alignment
   let alignItems = align;
@@ -8,2 +9,12 @@ if (align === 'start') alignItems = 'flex-start';
 
+  // Horizontal alignment
+  let justifyContent = justify;
+  if (justify === 'start') justifyContent = 'flex-start';
+  if (justify === 'end') justifyContent = 'flex-end';
+  if (justify === 'between') justifyContent = 'space-between';
+  if (justify === 'around') justifyContent = 'space-around';
+  if (justify === 'center') justifyContent = 'center';
+  if (justify === 'initial') justifyContent = 'initial';
+  if (justify === 'inherit') justifyContent = 'inherit';
+
   const styles = {
@@ -17,2 +28,3 @@ marginLeft: `-${gutterWidth / 2}px`,
     alignItems,
+    justifyContent,
     ...moreStyle,
@@ -19,0 +31,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

74097

increased by3.96%

Lines of code

1691

increased by3.24%

No dependency changes