react-grid-system - npm Package Compare versions

Comparing version 7.0.3 to 7.1.0

build/context/ScreenClassProvider/index.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _primitives = require("../../primitives");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -40,3 +42,3 @@
 
-var ScreenClassContext = _react.default.createContext(NO_PROVIDER_FLAG);
+var ScreenClassContext = /*#__PURE__*/_react.default.createContext(NO_PROVIDER_FLAG);
 
@@ -67,3 +69,3 @@ exports.ScreenClassContext = ScreenClassContext;
     value: screenClass
-  }, useOwnWidth ? /*#__PURE__*/_react.default.createElement("div", {
+  }, useOwnWidth ? /*#__PURE__*/_react.default.createElement(_primitives.Div, {
     ref: useOwnWidth ? screenClassRef : null
@@ -70,0 +72,0 @@ }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children));

build/grid/Col/index.js

@@ -22,2 +22,4 @@ "use strict";
 
+var _primitives = require("../../primitives");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -192,5 +194,5 @@
   debug: false,
-  component: 'div'
+  component: _primitives.Div
 };
 var _default = Col;
 exports.default = _default;

build/grid/Col/style.js

@@ -46,6 +46,6 @@ "use strict";
     boxSizing: 'border-box',
-    minHeight: '1px',
+    minHeight: 1,
     position: 'relative',
-    paddingLeft: "".concat(gutterWidth / 2, "px"),
-    paddingRight: "".concat(gutterWidth / 2, "px"),
+    paddingLeft: gutterWidth / 2,
+    paddingRight: gutterWidth / 2,
     width: '100%'
@@ -87,3 +87,5 @@ };
   if (forceWidth) {
-    styles.flex = 'unset';
+    styles.flexBasis = 'unset';
+    styles.flexGrow = 'unset';
+    styles.flexShrink = 'unset';
     styles.width = forceWidth;
@@ -90,0 +92,0 @@ }

build/grid/Container/index.js

@@ -20,2 +20,4 @@ "use strict";
 
+var _primitives = require("../../primitives");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -65,3 +67,3 @@
       })
-    }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, /*#__PURE__*/_react.default.createElement("span", {
+    }, otherProps), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, /*#__PURE__*/_react.default.createElement(_primitives.Span, {
       style: (0, _style.getAfterStyle)()
@@ -138,5 +140,5 @@ })));
   style: {},
-  component: 'div'
+  component: _primitives.Div
 };
 var _default = Container;
 exports.default = _default;

build/grid/Container/style.js

@@ -31,4 +31,4 @@ "use strict";
     marginRight: 'auto',
-    paddingLeft: "".concat(gutterWidth / 2, "px"),
-    paddingRight: "".concat(gutterWidth / 2, "px")
+    paddingLeft: gutterWidth / 2,
+    paddingRight: gutterWidth / 2
   };
@@ -41,19 +41,19 @@
   if (screenClass === 'sm' && containerWidths[0] && !sm && !xs) {
-    styles.maxWidth = "".concat(containerWidths[0], "px");
+    styles.maxWidth = containerWidths[0];
   }
 
   if (screenClass === 'md' && containerWidths[1] && !md) {
-    styles.maxWidth = "".concat(containerWidths[1], "px");
+    styles.maxWidth = containerWidths[1];
   }
 
   if (screenClass === 'lg' && containerWidths[2] && !lg) {
-    styles.maxWidth = "".concat(containerWidths[2], "px");
+    styles.maxWidth = containerWidths[2];
   }
 
   if (screenClass === 'xl' && containerWidths[3] && !xl) {
-    styles.maxWidth = "".concat(containerWidths[3], "px");
+    styles.maxWidth = containerWidths[3];
   }
 
   if (screenClass === 'xxl' && containerWidths[4] && !xxl) {
-    styles.maxWidth = "".concat(containerWidths[4], "px");
+    styles.maxWidth = containerWidths[4];
   }
@@ -60,0 +60,0 @@

build/grid/Row/index.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _primitives = require("../../primitives");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,3 +31,3 @@
 
-var GutterWidthContext = _react.default.createContext(false);
+var GutterWidthContext = /*#__PURE__*/_react.default.createContext(false);
 
@@ -117,3 +119,3 @@ exports.GutterWidthContext = GutterWidthContext;
   debug: false,
-  component: 'div',
+  component: _primitives.Div,
   nowrap: false
@@ -120,0 +122,0 @@ };

build/grid/Row/style.js

@@ -35,4 +35,4 @@ "use strict";
   var styles = {
-    marginLeft: "-".concat(gutterWidth / 2, "px"),
-    marginRight: "-".concat(gutterWidth / 2, "px"),
+    marginLeft: -gutterWidth / 2,
+    marginRight: -gutterWidth / 2,
     display: 'flex',
@@ -39,0 +39,0 @@ flexWrap: nowrap ? 'nowrap' : 'wrap',

build/utils.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _primitives = require("./primitives");
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -30,4 +32,4 @@
 
-  if (typeof window !== 'undefined' && window.innerWidth) {
-    return window.innerWidth;
+  if (typeof _primitives.Window !== 'undefined' && _primitives.Window.innerWidth) {
+    return _primitives.Window.innerWidth;
   }
@@ -82,5 +84,6 @@
 
-    window.addEventListener('resize', handleWindowResized, false);
+    _primitives.Window.addEventListener('resize', handleWindowResized, false);
+
     return function () {
-      window.removeEventListener('resize', handleWindowResized, false);
+      _primitives.Window.removeEventListener('resize', handleWindowResized, false);
     };
@@ -87,0 +90,0 @@ }, []);

package.json

 {
   "name": "react-grid-system",
-  "version": "7.0.3",
+  "version": "7.1.0",
   "description": "A powerful Bootstrap-like responsive grid system for React.",
@@ -43,13 +43,13 @@ "main": "./build/index.js",
   "devDependencies": {
-    "@babel/cli": "^7.10.1",
-    "@babel/core": "^7.10.2",
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.10.1",
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-jsx-a11y": "^6.3.0",
     "eslint-plugin-react": "^7.20.0",
@@ -59,6 +59,6 @@ "eslint-plugin-react-hooks": "^2.5.0",
     "react-dom": "^16.13.1",
-    "react-styleguidist": "^11.0.8",
+    "react-styleguidist": "^11.1.0",
     "rimraf": "^3.0.2",
-    "webpack": "^4.43.0"
+    "webpack": "^4.44.1"
   }
 }

src/context/ScreenClassProvider/index.js

@@ -5,2 +5,3 @@ import React, { useRef, useState, useEffect } from 'react';
 import { getConfiguration } from '../../config';
+import { Div } from '../../primitives'
 
@@ -24,3 +25,3 @@ export const NO_PROVIDER_FLAG = 'NO_PROVIDER_FLAG';
       {useOwnWidth
-        ? <div ref={useOwnWidth ? screenClassRef : null}>{children}</div>
+        ? <Div ref={useOwnWidth ? screenClassRef : null}>{children}</Div>
         : <>{children}</>}
@@ -27,0 +28,0 @@ </ScreenClassContext.Provider>

src/grid/Col/index.js

@@ -7,2 +7,3 @@ import React, { createElement } from 'react';
 import ScreenClassResolver from '../../context/ScreenClassResolver';
+import { Div } from '../../primitives'
 
@@ -171,5 +172,5 @@ const Col = ({
   debug: false,
-  component: 'div',
+  component: Div,
 };
 
 export default Col;

src/grid/Col/style.js

@@ -25,6 +25,6 @@ import { screenClasses } from '../../utils';
     boxSizing: 'border-box',
-    minHeight: '1px',
+    minHeight: 1,
     position: 'relative',
-    paddingLeft: `${gutterWidth / 2}px`,
-    paddingRight: `${gutterWidth / 2}px`,
+    paddingLeft: gutterWidth / 2,
+    paddingRight: gutterWidth / 2,
     width: '100%',
@@ -67,3 +67,5 @@ };
   if (forceWidth) {
-    styles.flex = 'unset';
+    styles.flexBasis = 'unset';
+    styles.flexGrow = 'unset';
+    styles.flexShrink = 'unset';
     styles.width = forceWidth;
@@ -70,0 +72,0 @@ }

src/grid/Container/index.js

@@ -6,2 +6,3 @@ import React, { createElement } from 'react';
 import ScreenClassResolver from '../../context/ScreenClassResolver';
+import { Div, Span } from '../../primitives'
 
@@ -42,3 +43,3 @@ const Container = ({
         {children}
-        <span style={getAfterStyle()} />
+        <Span style={getAfterStyle()} />
       </>,
@@ -107,5 +108,5 @@ )}
   style: {},
-  component: 'div',
+  component: Div,
 };
 
 export default Container;

src/grid/Container/style.js

@@ -19,4 +19,4 @@ export default ({
     marginRight: 'auto',
-    paddingLeft: `${gutterWidth / 2}px`,
-    paddingRight: `${gutterWidth / 2}px`,
+    paddingLeft: gutterWidth / 2,
+    paddingRight: gutterWidth / 2,
   };
@@ -29,19 +29,19 @@
   if (screenClass === 'sm' && containerWidths[0] && !sm && !xs) {
-    styles.maxWidth = `${containerWidths[0]}px`;
+    styles.maxWidth = containerWidths[0];
   }
 
   if (screenClass === 'md' && containerWidths[1] && !md) {
-    styles.maxWidth = `${containerWidths[1]}px`;
+    styles.maxWidth = containerWidths[1];
   }
 
   if (screenClass === 'lg' && containerWidths[2] && !lg) {
-    styles.maxWidth = `${containerWidths[2]}px`;
+    styles.maxWidth = containerWidths[2];
   }
 
   if (screenClass === 'xl' && containerWidths[3] && !xl) {
-    styles.maxWidth = `${containerWidths[3]}px`;
+    styles.maxWidth = containerWidths[3];
   }
 
   if (screenClass === 'xxl' && containerWidths[4] && !xxl) {
-    styles.maxWidth = `${containerWidths[4]}px`;
+    styles.maxWidth = containerWidths[4];
   }
@@ -48,0 +48,0 @@

src/grid/Row/index.js

@@ -5,2 +5,3 @@ import React from 'react';
 import getStyle from './style';
+import { Div } from '../../primitives'
 
@@ -97,3 +98,3 @@ export const GutterWidthContext = React.createContext(false);
   debug: false,
-  component: 'div',
+  component: Div,
   nowrap: false,
@@ -100,0 +101,0 @@ };

src/grid/Row/style.js

@@ -20,4 +20,4 @@ export default ({
   const styles = {
-    marginLeft: `-${gutterWidth / 2}px`,
-    marginRight: `-${gutterWidth / 2}px`,
+    marginLeft: -gutterWidth / 2,
+    marginRight: -gutterWidth / 2,
     display: 'flex',
@@ -24,0 +24,0 @@ flexWrap: nowrap ? 'nowrap' : 'wrap',

src/utils.js

@@ -5,2 +5,3 @@ /* global window */
 import { getConfiguration } from './config';
+import { Window } from './primitives'
 
@@ -11,4 +12,4 @@ const getViewPort = (source) => {
   }
-  if (typeof window !== 'undefined' && window.innerWidth) {
-    return window.innerWidth;
+  if (typeof Window !== 'undefined' && Window.innerWidth) {
+    return Window.innerWidth;
   }
@@ -53,6 +54,6 @@ return null;
 
-    window.addEventListener('resize', handleWindowResized, false);
+    Window.addEventListener('resize', handleWindowResized, false);
 
     return () => {
-      window.removeEventListener('resize', handleWindowResized, false);
+      Window.removeEventListener('resize', handleWindowResized, false);
     };
@@ -59,0 +60,0 @@ }, []);

No alert changes

Improved metrics

Total package byte prevSize

104823

increased by5.65%

Number of package files

56

increased by33.33%

Lines of code

2091

increased by8.62%

No dependency changes