feat(Row): Add row columns support (#1720)

reactstrap · Dec 3, 2019 · 1fb3c17 · 1fb3c17
1 parent 284a543
commit 1fb3c17
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 5 deletions.
diff --git a/docs/lib/Components/LayoutPage.js b/docs/lib/Components/LayoutPage.js
@@ -4,7 +4,10 @@ import { PrismCode } from 'react-prism';
 import PageTitle from '../UI/PageTitle';
 import SectionTitle from '../UI/SectionTitle';
 import LayoutExample from '../examples/Layout';
+import LayoutRowColsExample from '../examples/LayoutRowCols';
+
 const LayoutExampleSource = require('!!raw-loader!../examples/Layout');
+const LayoutRowColsExampleSource = require('!!raw-loader!../examples/LayoutRowCols');
 
 export default class LayoutsPage extends React.Component {
   render() {
@@ -34,7 +37,12 @@ export default class LayoutsPage extends React.Component {
 {`Row.propTypes = {
   noGutters: PropTypes.bool,
   // see https://reactstrap.github.io/components/form Form Grid with Form Row
-  form: PropTypes.bool
+  form: PropTypes.bool,
+  xs: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  sm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  md: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 }`}
           </PrismCode>
         </pre>
@@ -69,6 +77,15 @@ Col.propTypes = {
 }`}
           </PrismCode>
         </pre>
+        <h4>Row Columns</h4>
+        <div className="docs-example">
+          <LayoutRowColsExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {LayoutRowColsExampleSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }

diff --git a/docs/lib/examples/LayoutRowCols.js b/docs/lib/examples/LayoutRowCols.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Container, Row, Col } from 'reactstrap';
+
+const Example = (props) => {
+  return (
+    <Container>
+      <Row xs="2">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+      </Row>
+      <Row xs="3">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+      </Row>
+      <Row xs="4">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+      </Row>
+      <Row xs="4">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col xs="6">Column</Col>
+        <Col>Column</Col>
+      </Row>
+      <Row xs="1" sm="2" md="4">
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+        <Col>Column</Col>
+      </Row>
+    </Container>
+  );
+}
+
+export default Example;
diff --git a/package.json b/package.json
@@ -91,7 +91,8 @@
     "npm-to-cdn-bot (by Forbes Lindesay) (https://github.com/npmcdn-to-unpkg-bot)",
     "polmauri (https://github.com/polmauri)",
     "Steven Scaffidi (https://github.com/sscaff1)",
-    "Brady Pascoe (https://github.com/bpas247)"
+    "Brady Pascoe (https://github.com/bpas247)",
+    "Kyle Tsang (https://github.com/kyletsang)"
   ],
   "license": "MIT",
   "bugs": {

diff --git a/src/Row.js b/src/Row.js
@@ -3,16 +3,25 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { mapToCssModules, tagPropType } from './utils';
 
+const rowColWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
+const rowColsPropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
+
 const propTypes = {
   tag: tagPropType,
   noGutters: PropTypes.bool,
   className: PropTypes.string,
   cssModule: PropTypes.object,
-  form: PropTypes.bool
+  form: PropTypes.bool,
+  xs: rowColsPropType,
+  sm: rowColsPropType,
+  md: rowColsPropType,
+  lg: rowColsPropType,
+  xl: rowColsPropType
 };
 
 const defaultProps = {
-  tag: 'div'
+  tag: 'div',
+  widths: rowColWidths
 };
 
 const Row = (props) => {
@@ -22,13 +31,30 @@ const Row = (props) => {
     noGutters,
     tag: Tag,
     form,
+    widths,
     ...attributes
   } = props;
 
+  const colClasses = [];
+
+  widths.forEach((colWidth, i) => {
+    let colSize = props[colWidth];
+
+    delete attributes[colWidth];
+
+    if (!colSize) {
+      return;
+    }
+
+    const isXs = !i;
+    colClasses.push(isXs ? `row-cols-${colSize}` : `row-cols-${colWidth}-${colSize}`);
+  });
+
   const classes = mapToCssModules(classNames(
     className,
     noGutters ? 'no-gutters' : null,
-    form ? 'form-row' : 'row'
+    form ? 'form-row' : 'row',
+    colClasses
   ), cssModule);
 
   return (

diff --git a/src/__tests__/Row.spec.js b/src/__tests__/Row.spec.js
@@ -34,4 +34,16 @@ describe('Row', () => {
 
     expect(wrapper.html()).toBe('<div class="form-row"></div>');
   });
+
+  it('should pass row col size specific classes as strings', () => {
+    const wrapper = shallow(<Row sm="6" />);
+
+    expect(wrapper.hasClass('row-cols-sm-6')).toBe(true);
+  });
+
+  it('should pass row col size specific classes as numbers', () => {
+    const wrapper = shallow(<Row sm={6} />);
+
+    expect(wrapper.hasClass('row-cols-sm-6')).toBe(true);
+  });
 });