styled-bootstrap-grid - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/Col.js

@@ -23,3 +23,3 @@ 'use strict';
 
-var col = function col(props) {
+var MyCol = function MyCol(props) {
   var col = props.col,
@@ -61,3 +61,3 @@ offset = props.offset,
   if (col) {
-    if (!isNaN(parseInt(col, 10))) {
+    if (!Number.isNaN(parseInt(col, 10))) {
       dataName = dataName + ' col-' + col;
@@ -68,3 +68,3 @@ } else {
   }
-  if (!isNaN(parseInt(offset, 10))) {
+  if (!Number.isNaN(parseInt(offset, 10))) {
     dataName = dataName + ' offset-' + offset;
@@ -78,3 +78,3 @@ }
   }
-  if (!isNaN(parseInt(order, 10)) || order === 'first' || order === 'last') {
+  if (!Number.isNaN(parseInt(order, 10)) || order === 'first' || order === 'last') {
     dataName = dataName + ' order-' + order;
@@ -85,3 +85,3 @@ }
   if (xs) {
-    if (!isNaN(parseInt(xs, 10))) {
+    if (!Number.isNaN(parseInt(xs, 10))) {
       dataName = dataName + ' col-xs-' + xs;
@@ -92,3 +92,3 @@ } else {
   }
-  if (!isNaN(parseInt(xsOffset, 10))) {
+  if (!Number.isNaN(parseInt(xsOffset, 10))) {
     dataName = dataName + ' offset-xs-' + xsOffset;
@@ -102,3 +102,3 @@ }
   }
-  if (!isNaN(parseInt(xsOrder, 10)) || xsOrder === 'first' || xsOrder === 'last') {
+  if (!Number.isNaN(parseInt(xsOrder, 10)) || xsOrder === 'first' || xsOrder === 'last') {
     dataName = dataName + ' order-xs-' + xsOrder;
@@ -109,3 +109,3 @@ }
   if (sm) {
-    if (!isNaN(parseInt(sm, 10))) {
+    if (!Number.isNaN(parseInt(sm, 10))) {
       dataName = dataName + ' col-sm-' + sm;
@@ -116,3 +116,3 @@ } else {
   }
-  if (!isNaN(parseInt(smOffset, 10))) {
+  if (!Number.isNaN(parseInt(smOffset, 10))) {
     dataName = dataName + ' offset-sm-' + smOffset;
@@ -126,3 +126,3 @@ }
   }
-  if (!isNaN(parseInt(smOrder, 10)) || smOrder === 'first' || smOrder === 'last') {
+  if (!Number.isNaN(parseInt(smOrder, 10)) || smOrder === 'first' || smOrder === 'last') {
     dataName = dataName + ' order-sm-' + smOrder;
@@ -133,3 +133,3 @@ }
   if (md) {
-    if (!isNaN(parseInt(md, 10))) {
+    if (!Number.isNaN(parseInt(md, 10))) {
       dataName = dataName + ' col-md-' + md;
@@ -140,3 +140,3 @@ } else {
   }
-  if (!isNaN(parseInt(mdOffset, 10))) {
+  if (!Number.isNaN(parseInt(mdOffset, 10))) {
     dataName = dataName + ' offset-md-' + mdOffset;
@@ -150,3 +150,3 @@ }
   }
-  if (!isNaN(parseInt(mdOrder, 10)) || mdOrder === 'first' || mdOrder === 'last') {
+  if (!Number.isNaN(parseInt(mdOrder, 10)) || mdOrder === 'first' || mdOrder === 'last') {
     dataName = dataName + ' order-md-' + mdOrder;
@@ -157,3 +157,3 @@ }
   if (lg) {
-    if (!isNaN(parseInt(lg, 10))) {
+    if (!Number.isNaN(parseInt(lg, 10))) {
       dataName = dataName + ' col-lg-' + lg;
@@ -164,3 +164,3 @@ } else {
   }
-  if (!isNaN(parseInt(lgOffset, 10))) {
+  if (!Number.isNaN(parseInt(lgOffset, 10))) {
     dataName = dataName + ' offset-lg-' + lgOffset;
@@ -174,3 +174,3 @@ }
   }
-  if (!isNaN(parseInt(lgOrder, 10)) || lgOrder === 'first' || lgOrder === 'last') {
+  if (!Number.isNaN(parseInt(lgOrder, 10)) || lgOrder === 'first' || lgOrder === 'last') {
     dataName = dataName + ' order-lg-' + lgOrder;
@@ -181,3 +181,3 @@ }
   if (xl) {
-    if (!isNaN(parseInt(xl, 10))) {
+    if (!Number.isNaN(parseInt(xl, 10))) {
       dataName = dataName + ' col-xl-' + xl;
@@ -188,3 +188,3 @@ } else {
   }
-  if (!isNaN(parseInt(xlOffset, 10))) {
+  if (!Number.isNaN(parseInt(xlOffset, 10))) {
     dataName = dataName + ' offset-xl-' + xlOffset;
@@ -198,3 +198,3 @@ }
   }
-  if (!isNaN(parseInt(xlOrder, 10)) || xlOrder === 'first' || xlOrder === 'last') {
+  if (!Number.isNaN(parseInt(xlOrder, 10)) || xlOrder === 'first' || xlOrder === 'last') {
     dataName = dataName + ' order-xl-' + xlOrder;
@@ -261,4 +261,4 @@ }
 
-col.propTypes = {
-  children: _propTypes2.default.any,
+MyCol.propTypes = {
+  children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node, _propTypes2.default.string]).isRequired,
   noGutter: _propTypes2.default.bool,
@@ -302,6 +302,35 @@
 
-col.defaultProps = {
-  children: null
+MyCol.defaultProps = {
+  noGutter: null,
+  col: null,
+  auto: null,
+  alignSelf: null,
+  order: null,
+  xs: null,
+  xsOffset: null,
+  xsAuto: null,
+  xsAlignSelf: null,
+  xsOrder: null,
+  sm: null,
+  smOffset: null,
+  smAuto: null,
+  smAlignSelf: null,
+  smOrder: null,
+  md: null,
+  mdOffset: null,
+  mdAuto: null,
+  mdAlignSelf: null,
+  mdOrder: null,
+  lg: null,
+  lgOffset: null,
+  lgAuto: null,
+  lgAlignSelf: null,
+  lgOrder: null,
+  xl: null,
+  xlOffset: null,
+  xlAuto: null,
+  xlAlignSelf: null,
+  xlOrder: null
 };
 
-exports.default = col;
+exports.default = MyCol;

dist/Container.js

@@ -43,8 +43,7 @@ 'use strict';
 container.propTypes = {
-  children: _propTypes2.default.any,
-  fluid: _propTypes2.default.bool.isRequired
+  children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node, _propTypes2.default.string]).isRequired,
+  fluid: _propTypes2.default.bool
 };
 
 container.defaultProps = {
-  children: null,
   fluid: false
@@ -51,0 +50,0 @@ };

dist/Row.js

@@ -91,3 +91,3 @@ 'use strict';
 row.propTypes = {
-  children: _propTypes2.default.any,
+  children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node, _propTypes2.default.string]).isRequired,
   alignItems: _propTypes2.default.string,
@@ -106,5 +106,14 @@ smAlignItems: _propTypes2.default.string,
 row.defaultProps = {
-  children: null
+  alignItems: null,
+  smAlignItems: null,
+  mdAlignItems: null,
+  lgAlignItems: null,
+  xlAlignItems: null,
+  justifyContent: null,
+  smJustifyContent: null,
+  mdJustifyContent: null,
+  lgJustifyContent: null,
+  xlJustifyContent: null
 };
 
 exports.default = row;

dist/styled/Col.js

@@ -106,3 +106,3 @@ 'use strict';
 }, function (p) {
-  return !isNaN(parseInt(p.xsOffset, 10)) && _media2.default.xs(_templateObject2, css.offset[p.xsOffset]);
+  return !Number.isNaN(parseInt(p.xsOffset, 10)) && _media2.default.xs(_templateObject2, css.offset[p.xsOffset]);
 }, function (p) {
@@ -117,3 +117,3 @@ return p.xsAuto && _media2.default.xs(_templateObject2, css.col.auto);
 }, function (p) {
-  return !isNaN(parseInt(p.smOffset, 10)) && _media2.default.sm(_templateObject2, css.offset[p.smOffset]);
+  return !Number.isNaN(parseInt(p.smOffset, 10)) && _media2.default.sm(_templateObject2, css.offset[p.smOffset]);
 }, function (p) {
@@ -128,3 +128,3 @@ return p.smAuto && _media2.default.sm(_templateObject2, css.col.auto);
 }, function (p) {
-  return !isNaN(parseInt(p.mdOffset, 10)) && _media2.default.md(_templateObject2, css.offset[p.mdOffset]);
+  return !Number.isNaN(parseInt(p.mdOffset, 10)) && _media2.default.md(_templateObject2, css.offset[p.mdOffset]);
 }, function (p) {
@@ -139,3 +139,3 @@ return p.mdAuto && _media2.default.md(_templateObject2, css.col.auto);
 }, function (p) {
-  return !isNaN(parseInt(p.lgOffset, 10)) && _media2.default.lg(_templateObject2, css.offset[p.lgOffset]);
+  return !Number.isNaN(parseInt(p.lgOffset, 10)) && _media2.default.lg(_templateObject2, css.offset[p.lgOffset]);
 }, function (p) {
@@ -150,3 +150,3 @@ return p.lgAuto && _media2.default.lg(_templateObject2, css.col.auto);
 }, function (p) {
-  return !isNaN(parseInt(p.xlOffset, 10)) && _media2.default.xl(_templateObject2, css.offset[p.xlOffset]);
+  return !Number.isNaN(parseInt(p.xlOffset, 10)) && _media2.default.xl(_templateObject2, css.offset[p.xlOffset]);
 }, function (p) {
@@ -153,0 +153,0 @@ return p.xlAuto && _media2.default.xl(_templateObject2, css.col.auto);

dist/styled/ContainerFluid.js

@@ -13,6 +13,2 @@ 'use strict';
 
-var _media = require('./media');
-
-var _media2 = _interopRequireDefault(_media);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,0 +15,0 @@

dist/styled/media.js

@@ -28,7 +28,6 @@ 'use strict';
 var getBreakpoints = function getBreakpoints(props) {
-  if (props.theme && props.theme.grid && props.theme.grid.breakpoints) {
-    return props.theme.grid.breakpoints;
-  } else {
-    return defaultBreakpoints;
+  if (props.theme && props.theme.styledBootstrapGrid && props.theme.styledBootstrapGrid.breakpoints) {
+    return props.theme.styledBootstrapGrid.breakpoints;
   }
+  return defaultBreakpoints;
 };
@@ -35,0 +34,0 @@

dist/ThemeProvider.js

@@ -18,3 +18,5 @@ 'use strict';
 exports.default = function (props) {
-  var theme = props.gridTheme || {};
+  var _props$grittheme = props.grittheme,
+      theme = _props$grittheme === undefined ? {} : _props$grittheme;
+
   var myTheme = {
@@ -28,3 +30,3 @@ styledBootstrapGrid: {
         if (theme.container) {
-          if (!isNaN(parseInt(theme.container.padding, 10))) {
+          if (!Number.isNaN(parseInt(theme.container.padding, 10))) {
             return theme.container.padding;
@@ -37,3 +39,3 @@ }
         if (theme.row) {
-          if (!isNaN(parseInt(theme.row.padding, 10))) {
+          if (!Number.isNaN(parseInt(theme.row.padding, 10))) {
             return theme.row.padding;
@@ -46,3 +48,3 @@ }
         if (theme.col) {
-          if (!isNaN(parseInt(theme.col.padding, 10))) {
+          if (!Number.isNaN(parseInt(theme.col.padding, 10))) {
             return theme.col.padding;
@@ -49,0 +51,0 @@ }

example/package.json

@@ -6,5 +6,7 @@ {
   "dependencies": {
+    "prop-types": "^15.6.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-scripts": "1.1.1"
+    "react-scripts": "1.1.1",
+    "styled-components": "^3.4.10"
   },
@@ -16,3 +18,10 @@ "scripts": {
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "eslint": "^5.7.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.11.1"
   }
 }

example/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'styled-components';
 import { injectLayoutBaseCSS, GridThemeProvider } from './styled-bootstrap-grid';
-import { ThemeProvider } from 'styled-components';
 
@@ -24,6 +24,12 @@ import './index.css';
   },
-}
+};
 
-// ReactDOM.render(<GridThemeProvider gridTheme={theme}><App /></GridThemeProvider>, document.getElementById('root'));
-ReactDOM.render(<ThemeProvider theme={{ test: 124 }}><GridThemeProvider gridTheme={theme}><App /></GridThemeProvider></ThemeProvider>, document.getElementById('root'));
+ReactDOM.render(
+  <ThemeProvider theme={{ test: 124 }}>
+    <GridThemeProvider gridTheme={theme}>
+      <App />
+    </GridThemeProvider>
+  </ThemeProvider>,
+  document.getElementById('root'), //eslint-disable-line
+);
 registerServiceWorker();

package.json

 {
   "name": "styled-bootstrap-grid",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "bootstrap grid system using styled components",
@@ -34,2 +34,3 @@ "main": "dist/index.js",
   "peerDependencies": {
+    "prop-types": "^15.5.7",
     "react": "^0.14.0 || ^16.0.0-0",
@@ -43,2 +44,7 @@ "styled-components": "^1.4.4 || ^3.0.0"
     "babel-preset-react": "^6.23.0",
+    "eslint": "^5.7.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.11.1",
     "react": "16.4.0",
@@ -45,0 +51,0 @@ "styled-components": "^1.4.4"

README.md

 # styled-bootstrap-grid
+
 [![npm version](https://badge.fury.io/js/styled-bootstrap-grid.svg)](https://badge.fury.io/js/styled-bootstrap-grid)
 
+## DEPRECATED VERSION
+[styled-components](https://www.npmjs.com/package/styled-components) has launched their v4 module, that has some breaking changes.
+This npm version will be the last to support v3
+
 #### Credits
@@ -5,0 +10,0 @@ This module is based on the [styled-components](https://www.npmjs.com/package/styled-components) module.

src/Col.jsx

@@ -6,4 +6,3 @@ import React from 'react';
 
-const col = (props) => {
-
+const MyCol = (props) => {
   const {
@@ -42,3 +41,3 @@ col,
     children,
-    ...otherProps,
+    ...otherProps
   } = props;
@@ -48,3 +47,3 @@
   if (col) {
-    if (!isNaN(parseInt(col, 10))) {
+    if (!Number.isNaN(parseInt(col, 10))) {
       dataName = `${dataName} col-${col}`;
@@ -55,3 +54,3 @@ } else {
   }
-  if (!isNaN(parseInt(offset, 10))) {
+  if (!Number.isNaN(parseInt(offset, 10))) {
     dataName = `${dataName} offset-${offset}`;
@@ -65,3 +64,3 @@ }
   }
-  if (!isNaN(parseInt(order, 10)) || order === 'first' || order === 'last') {
+  if (!Number.isNaN(parseInt(order, 10)) || order === 'first' || order === 'last') {
     dataName = `${dataName} order-${order}`;
@@ -72,3 +71,3 @@ }
   if (xs) {
-    if (!isNaN(parseInt(xs, 10))) {
+    if (!Number.isNaN(parseInt(xs, 10))) {
       dataName = `${dataName} col-xs-${xs}`;
@@ -79,3 +78,3 @@ } else {
   }
-  if (!isNaN(parseInt(xsOffset, 10))) {
+  if (!Number.isNaN(parseInt(xsOffset, 10))) {
     dataName = `${dataName} offset-xs-${xsOffset}`;
@@ -89,3 +88,3 @@ }
   }
-  if (!isNaN(parseInt(xsOrder, 10)) || xsOrder === 'first' || xsOrder === 'last') {
+  if (!Number.isNaN(parseInt(xsOrder, 10)) || xsOrder === 'first' || xsOrder === 'last') {
     dataName = `${dataName} order-xs-${xsOrder}`;
@@ -96,3 +95,3 @@ }
   if (sm) {
-    if (!isNaN(parseInt(sm, 10))) {
+    if (!Number.isNaN(parseInt(sm, 10))) {
       dataName = `${dataName} col-sm-${sm}`;
@@ -103,3 +102,3 @@ } else {
   }
-  if (!isNaN(parseInt(smOffset, 10))) {
+  if (!Number.isNaN(parseInt(smOffset, 10))) {
     dataName = `${dataName} offset-sm-${smOffset}`;
@@ -113,3 +112,3 @@ }
   }
-  if (!isNaN(parseInt(smOrder, 10)) || smOrder === 'first' || smOrder === 'last') {
+  if (!Number.isNaN(parseInt(smOrder, 10)) || smOrder === 'first' || smOrder === 'last') {
     dataName = `${dataName} order-sm-${smOrder}`;
@@ -120,3 +119,3 @@ }
   if (md) {
-    if (!isNaN(parseInt(md, 10))) {
+    if (!Number.isNaN(parseInt(md, 10))) {
       dataName = `${dataName} col-md-${md}`;
@@ -127,3 +126,3 @@ } else {
   }
-  if (!isNaN(parseInt(mdOffset, 10))) {
+  if (!Number.isNaN(parseInt(mdOffset, 10))) {
     dataName = `${dataName} offset-md-${mdOffset}`;
@@ -137,3 +136,3 @@ }
   }
-  if (!isNaN(parseInt(mdOrder, 10)) || mdOrder === 'first' || mdOrder === 'last') {
+  if (!Number.isNaN(parseInt(mdOrder, 10)) || mdOrder === 'first' || mdOrder === 'last') {
     dataName = `${dataName} order-md-${mdOrder}`;
@@ -144,3 +143,3 @@ }
   if (lg) {
-    if (!isNaN(parseInt(lg, 10))) {
+    if (!Number.isNaN(parseInt(lg, 10))) {
       dataName = `${dataName} col-lg-${lg}`;
@@ -151,3 +150,3 @@ } else {
   }
-  if (!isNaN(parseInt(lgOffset, 10))) {
+  if (!Number.isNaN(parseInt(lgOffset, 10))) {
     dataName = `${dataName} offset-lg-${lgOffset}`;
@@ -161,3 +160,3 @@ }
   }
-  if (!isNaN(parseInt(lgOrder, 10)) || lgOrder === 'first' || lgOrder === 'last') {
+  if (!Number.isNaN(parseInt(lgOrder, 10)) || lgOrder === 'first' || lgOrder === 'last') {
     dataName = `${dataName} order-lg-${lgOrder}`;
@@ -168,3 +167,3 @@ }
   if (xl) {
-    if (!isNaN(parseInt(xl, 10))) {
+    if (!Number.isNaN(parseInt(xl, 10))) {
       dataName = `${dataName} col-xl-${xl}`;
@@ -175,3 +174,3 @@ } else {
   }
-  if (!isNaN(parseInt(xlOffset, 10))) {
+  if (!Number.isNaN(parseInt(xlOffset, 10))) {
     dataName = `${dataName} offset-xl-${xlOffset}`;
@@ -185,3 +184,3 @@ }
   }
-  if (!isNaN(parseInt(xlOrder, 10)) || xlOrder === 'first' || xlOrder === 'last') {
+  if (!Number.isNaN(parseInt(xlOrder, 10)) || xlOrder === 'first' || xlOrder === 'last') {
     dataName = `${dataName} order-xl-${xlOrder}`;
@@ -198,44 +197,44 @@ }
     col,
-      offset,
-      auto,
-      alignSelf,
-      order,
+    offset,
+    auto,
+    alignSelf,
+    order,
 
-      xs,
-      xsOffset,
-      xsAuto,
-      xsAlignSelf,
-      xsOrder,
+    xs,
+    xsOffset,
+    xsAuto,
+    xsAlignSelf,
+    xsOrder,
 
-      sm,
-      smOffset,
-      smAuto,
-      smAlignSelf,
-      smOrder,
+    sm,
+    smOffset,
+    smAuto,
+    smAlignSelf,
+    smOrder,
 
-      md,
-      mdOffset,
-      mdAuto,
-      mdAlignSelf,
-      mdOrder,
+    md,
+    mdOffset,
+    mdAuto,
+    mdAlignSelf,
+    mdOrder,
 
-      lg,
-      lgOffset,
-      lgAuto,
-      lgAlignSelf,
-      lgOrder,
+    lg,
+    lgOffset,
+    lgAuto,
+    lgAlignSelf,
+    lgOrder,
 
-      xl,
-      xlOffset,
-      xlAuto,
-      xlAlignSelf,
-      xlOrder,
+    xl,
+    xlOffset,
+    xlAuto,
+    xlAlignSelf,
+    xlOrder,
 
-      noGutter,
-      'data-name': dataName,
-      ...otherProps
+    noGutter,
+    'data-name': dataName,
+    ...otherProps,
   };
 
   return (
-    <Col {...allProps} >
+    <Col {...allProps}>
       {children}
@@ -246,17 +245,19 @@ </Col>
 
-const stringOrNumberReactPropType =
-  PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]);
+const stringOrNumberReactPropType = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.number,
+]);
 
-const stringOrNumberorBooleanReactPropType =
-  PropTypes.oneOfType([
+const stringOrNumberorBooleanReactPropType = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.number,
+  PropTypes.bool,
+]);
+
+MyCol.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
     PropTypes.string,
-    PropTypes.number,
-    PropTypes.bool,
-  ]);
-
-col.propTypes = {
-  children: PropTypes.any,
+  ]).isRequired,
   noGutter: PropTypes.bool,
@@ -300,6 +301,35 @@
 
-col.defaultProps = {
-  children: null,
+MyCol.defaultProps = {
+  noGutter: null,
+  col: null,
+  auto: null,
+  alignSelf: null,
+  order: null,
+  xs: null,
+  xsOffset: null,
+  xsAuto: null,
+  xsAlignSelf: null,
+  xsOrder: null,
+  sm: null,
+  smOffset: null,
+  smAuto: null,
+  smAlignSelf: null,
+  smOrder: null,
+  md: null,
+  mdOffset: null,
+  mdAuto: null,
+  mdAlignSelf: null,
+  mdOrder: null,
+  lg: null,
+  lgOffset: null,
+  lgAuto: null,
+  lgAlignSelf: null,
+  lgOrder: null,
+  xl: null,
+  xlOffset: null,
+  xlAuto: null,
+  xlAlignSelf: null,
+  xlOrder: null,
 };
 
-export default col;
+export default MyCol;

src/Container.jsx

@@ -20,8 +20,11 @@ import React from 'react';
 container.propTypes = {
-  children: PropTypes.any,
-  fluid: PropTypes.bool.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.string,
+  ]).isRequired,
+  fluid: PropTypes.bool,
 };
 
 container.defaultProps = {
-  children: null,
   fluid: false,
@@ -28,0 +31,0 @@ };

src/injectLayoutBaseCSS.js

@@ -30,2 +30,2 @@ import { injectGlobal } from 'styled-components';
   `;
-}
+};

src/Row.jsx

@@ -6,3 +6,3 @@ import React from 'react';
 
-const row = props => {
+const row = (props) => {
   const {
@@ -20,3 +20,3 @@ children,
     xlJustifyContent,
-    ...otherProps,
+    ...otherProps
   } = props;
@@ -27,53 +27,59 @@
   if (alignItems) {
-    dataName = `${dataName} align-items-${alignItems}`
+    dataName = `${dataName} align-items-${alignItems}`;
   }
   if (smAlignItems) {
-    dataName = `${dataName} align-items-sm-${smAlignItems}`
+    dataName = `${dataName} align-items-sm-${smAlignItems}`;
   }
   if (mdAlignItems) {
-    dataName = `${dataName} align-items-md-${mdAlignItems}`
+    dataName = `${dataName} align-items-md-${mdAlignItems}`;
   }
   if (lgAlignItems) {
-    dataName = `${dataName} align-items-lg-${lgAlignItems}`
+    dataName = `${dataName} align-items-lg-${lgAlignItems}`;
   }
   if (xlAlignItems) {
-    dataName = `${dataName} align-items-xl-${xlAlignItems}`
+    dataName = `${dataName} align-items-xl-${xlAlignItems}`;
   }
   if (justifyContent) {
-    dataName = `${dataName} justify-content-${justifyContent}`
+    dataName = `${dataName} justify-content-${justifyContent}`;
   }
   if (smJustifyContent) {
-    dataName = `${dataName} justify-content-sm-${smJustifyContent}`
+    dataName = `${dataName} justify-content-sm-${smJustifyContent}`;
   }
   if (mdJustifyContent) {
-    dataName = `${dataName} justify-content-md-${mdJustifyContent}`
+    dataName = `${dataName} justify-content-md-${mdJustifyContent}`;
   }
   if (lgJustifyContent) {
-    dataName = `${dataName} justify-content-lg-${lgJustifyContent}`
+    dataName = `${dataName} justify-content-lg-${lgJustifyContent}`;
   }
   if (xlJustifyContent) {
-    dataName = `${dataName} justify-content-xl-${xlJustifyContent}`
+    dataName = `${dataName} justify-content-xl-${xlJustifyContent}`;
   }
 
   dataName = dataName.trim();
-  return <Row
-    alignItems={alignItems}
-    smAlignItems={smAlignItems}
-    mdAlignItems={mdAlignItems}
-    lgAlignItems={lgAlignItems}
-    xlAlignItems={xlAlignItems}
-    justifyContent={justifyContent}
-    smJustifyContent={smJustifyContent}
-    mdJustifyContent={mdJustifyContent}
-    lgJustifyContent={lgJustifyContent}
-    xlJustifyContent={xlJustifyContent}
-    data-name={dataName}
-    {...otherProps}
-  >
-    {children}
-  </Row>;
-}
+  return (
+    <Row
+      alignItems={alignItems}
+      smAlignItems={smAlignItems}
+      mdAlignItems={mdAlignItems}
+      lgAlignItems={lgAlignItems}
+      xlAlignItems={xlAlignItems}
+      justifyContent={justifyContent}
+      smJustifyContent={smJustifyContent}
+      mdJustifyContent={mdJustifyContent}
+      lgJustifyContent={lgJustifyContent}
+      xlJustifyContent={xlJustifyContent}
+      data-name={dataName}
+      {...otherProps}
+    >
+      {children}
+    </Row>
+  );
+};
 
 row.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.string,
+  ]).isRequired,
   alignItems: PropTypes.string,
@@ -91,6 +97,16 @@ smAlignItems: PropTypes.string,
 
+
 row.defaultProps = {
-  children: null,
+  alignItems: null,
+  smAlignItems: null,
+  mdAlignItems: null,
+  lgAlignItems: null,
+  xlAlignItems: null,
+  justifyContent: null,
+  smJustifyContent: null,
+  mdJustifyContent: null,
+  lgJustifyContent: null,
+  xlJustifyContent: null,
 };
 
 export default row;

src/styled/Col.js

@@ -96,14 +96,14 @@ import styled from 'styled-components';
   offset: {
-    0: `margin-left: 0;`,
-    1: `margin-left: 8.333333%;`,
-    2: `margin-left: 16.666667%;`,
-    3: `margin-left: 25%;`,
-    4: `margin-left: 33.333333%;`,
-    5: `margin-left: 41.666667%;`,
-    6: `margin-left: 50%;`,
-    7: `margin-left: 58.333333%;`,
-    8: `margin-left: 66.666667%;`,
-    9: `margin-left: 75%;`,
-    10: `margin-left: 83.333333%;`,
-    11: `margin-left: 91.666667%;`,
+    0: 'margin-left: 0;',
+    1: 'margin-left: 8.333333%;',
+    2: 'margin-left: 16.666667%;',
+    3: 'margin-left: 25%;',
+    4: 'margin-left: 33.333333%;',
+    5: 'margin-left: 41.666667%;',
+    6: 'margin-left: 50%;',
+    7: 'margin-left: 58.333333%;',
+    8: 'margin-left: 66.666667%;',
+    9: 'margin-left: 75%;',
+    10: 'margin-left: 83.333333%;',
+    11: 'margin-left: 91.666667%;',
   },
@@ -217,3 +217,3 @@ order: {
   `,
-}
+};
 
@@ -224,3 +224,3 @@ const Col = styled.div`
   min-height: 1px;
-  padding-right: ${p => {
+  padding-right: ${(p) => {
     if (!p.theme || !p.theme.styledBootstrapGrid || !p.theme.styledBootstrapGrid.getColPadding) {
@@ -231,3 +231,3 @@ return 15;
   }}px;
-  padding-left: ${p => {
+  padding-left: ${(p) => {
     if (!p.theme || !p.theme.styledBootstrapGrid || !p.theme.styledBootstrapGrid.getColPadding) {
@@ -248,3 +248,3 @@ return 15;
   ${p => p.xs && media.xs`${css.col[p.xs]}`}
-  ${p => !isNaN(parseInt(p.xsOffset, 10)) && media.xs`${css.offset[p.xsOffset]}`}
+  ${p => !Number.isNaN(parseInt(p.xsOffset, 10)) && media.xs`${css.offset[p.xsOffset]}`}
   ${p => p.xsAuto && media.xs`${css.col.auto}`}
@@ -255,3 +255,3 @@ ${p => p.xsAlignSelf && media.xs`${css.alignSelf[p.xsAlignSelf]}`}
   ${p => p.sm && media.sm`${css.col[p.sm]}`}
-  ${p => !isNaN(parseInt(p.smOffset, 10)) && media.sm`${css.offset[p.smOffset]}`}
+  ${p => !Number.isNaN(parseInt(p.smOffset, 10)) && media.sm`${css.offset[p.smOffset]}`}
   ${p => p.smAuto && media.sm`${css.col.auto}`}
@@ -262,3 +262,3 @@ ${p => p.smAlignSelf && media.sm`${css.alignSelf[p.smAlignSelf]}`}
   ${p => p.md && media.md`${css.col[p.md]}`}
-  ${p => !isNaN(parseInt(p.mdOffset, 10)) && media.md`${css.offset[p.mdOffset]}`}
+  ${p => !Number.isNaN(parseInt(p.mdOffset, 10)) && media.md`${css.offset[p.mdOffset]}`}
   ${p => p.mdAuto && media.md`${css.col.auto}`}
@@ -269,3 +269,3 @@ ${p => p.mdAlignSelf && media.md`${css.alignSelf[p.mdAlignSelf]}`}
   ${p => p.lg && media.lg`${css.col[p.lg]}`}
-  ${p => !isNaN(parseInt(p.lgOffset, 10)) && media.lg`${css.offset[p.lgOffset]}`}
+  ${p => !Number.isNaN(parseInt(p.lgOffset, 10)) && media.lg`${css.offset[p.lgOffset]}`}
   ${p => p.lgAuto && media.lg`${css.col.auto}`}
@@ -276,3 +276,3 @@ ${p => p.lgAlignSelf && media.lg`${css.alignSelf[p.lgAlignSelf]}`}
   ${p => p.xl && media.xl`${css.col[p.xl]}`}
-  ${p => !isNaN(parseInt(p.xlOffset, 10)) && media.xl`${css.offset[p.xlOffset]}`}
+  ${p => !Number.isNaN(parseInt(p.xlOffset, 10)) && media.xl`${css.offset[p.xlOffset]}`}
   ${p => p.xlAuto && media.xl`${css.col.auto}`}
@@ -279,0 +279,0 @@ ${p => p.xlAlignSelf && media.xl`${css.alignSelf[p.xlAlignSelf]}`}

src/styled/Container.js

@@ -7,4 +7,8 @@ import styled from 'styled-components';
   width: 100%;
-  padding-right: ${p => {
-    if (!p.theme || !p.theme.styledBootstrapGrid || !p.theme.styledBootstrapGrid.getContainerPadding) {
+  padding-right: ${(p) => {
+    if (
+      !p.theme
+      || !p.theme.styledBootstrapGrid
+      || !p.theme.styledBootstrapGrid.getContainerPadding
+    ) {
       return 15;
@@ -14,4 +18,8 @@ }
   }}px;
-  padding-left: ${p => {
-    if (!p.theme || !p.theme.styledBootstrapGrid || !p.theme.styledBootstrapGrid.getContainerPadding) {
+  padding-left: ${(p) => {
+    if (
+      !p.theme
+      || !p.theme.styledBootstrapGrid
+      || !p.theme.styledBootstrapGrid.getContainerPadding
+    ) {
       return 15;
@@ -18,0 +26,0 @@ }

src/styled/ContainerFluid.js

 import styled from 'styled-components';
 
-import media from './media';
-
 const ContainerFluid = styled.div`
   width: 100%;
-  padding-right: ${p => {
-    if (!p.theme || !p.theme.styledBootstrapGrid || !p.theme.styledBootstrapGrid.getContainerPadding) {
+  padding-right: ${(p) => {
+    if (
+      !p.theme
+      || !p.theme.styledBootstrapGrid
+      || !p.theme.styledBootstrapGrid.getContainerPadding
+    ) {
       return 15;
@@ -13,4 +15,8 @@ }
   }}px;
-  padding-left: ${p => {
-    if (!p.theme || !p.theme.styledBootstrapGrid || !p.theme.styledBootstrapGrid.getContainerPadding) {
+  padding-left: ${(p) => {
+    if (
+      !p.theme
+      || !p.theme.styledBootstrapGrid
+      || !p.theme.styledBootstrapGrid.getContainerPadding
+    ) {
       return 15;
@@ -17,0 +23,0 @@ }

src/styled/media.js

@@ -17,8 +17,11 @@ import { css } from 'styled-components';
 const getBreakpoints = (props) => {
-  if (props.theme && props.theme.grid && props.theme.grid.breakpoints) {
-    return props.theme.grid.breakpoints
-  } else {
-    return defaultBreakpoints
+  if (
+    props.theme
+    && props.theme.styledBootstrapGrid
+    && props.theme.styledBootstrapGrid.breakpoints
+  ) {
+    return props.theme.styledBootstrapGrid.breakpoints;
   }
-}
+  return defaultBreakpoints;
+};
 
@@ -25,0 +28,0 @@ const media = Object.keys(defaultBreakpoints).reduce((accumulator, label) => {

src/styled/Row.js

@@ -58,4 +58,4 @@ import styled from 'styled-components';
     `,
-  }
-}
+  },
+};
 
@@ -69,3 +69,3 @@
   flex-wrap: wrap;
-  margin-right: -${p => {
+  margin-right: -${(p) => {
     if (!p.theme || !p.theme.styledBootstrapGrid || !p.theme.styledBootstrapGrid.getRowPadding) {
@@ -76,3 +76,3 @@ return 15;
   }}px;
-  margin-left: -${p => {
+  margin-left: -${(p) => {
     if (!p.theme || !p.theme.styledBootstrapGrid || !p.theme.styledBootstrapGrid.getRowPadding) {
@@ -79,0 +79,0 @@ return 15;

src/ThemeProvider.jsx

 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-export default props => {
-  const theme = props.gridTheme || {};
+export default (props) => {
+  const { grittheme: theme = {} } = props;
   const myTheme = {
@@ -14,4 +14,4 @@ styledBootstrapGrid: {
         if (theme.container) {
-          if (!isNaN(parseInt(theme.container.padding, 10))) {
-            return theme.container.padding
+          if (!Number.isNaN(parseInt(theme.container.padding, 10))) {
+            return theme.container.padding;
           }
@@ -23,4 +23,4 @@ }
         if (theme.row) {
-          if (!isNaN(parseInt(theme.row.padding, 10))) {
-            return theme.row.padding
+          if (!Number.isNaN(parseInt(theme.row.padding, 10))) {
+            return theme.row.padding;
           }
@@ -32,12 +32,12 @@ }
         if (theme.col) {
-          if (!isNaN(parseInt(theme.col.padding, 10))) {
-            return theme.col.padding
+          if (!Number.isNaN(parseInt(theme.col.padding, 10))) {
+            return theme.col.padding;
           }
         }
         return 15;
-      }
-    }
+      },
+    },
   };
 
   return <ThemeProvider theme={myTheme} {...props} />;
-}
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

562238

increased by19.45%

Number of package files

46

increased by6.98%

Lines of code

2403

increased by5.77%

Number of lines in readme file

339

increased by1.5%

Worsened metrics

Dependency count

3

increased by50%

Dev dependency count

11

increased by83.33%

No dependency changes