react-grid-system - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

build/utilities/Hidden/index.js

@@ -25,6 +25,2 @@ 'use strict';
 
-var _RenderAny = require('../../support/RenderAny');
-
-var _RenderAny2 = _interopRequireDefault(_RenderAny);
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -74,3 +70,3 @@
       return _react2.default.createElement(
-        _RenderAny2.default,
+        _react2.default.Fragment,
         null,
@@ -89,3 +85,3 @@ _this.props.children
    */
-  children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.node, _propTypes2.default.func]).isRequired,
+  children: _propTypes2.default.node.isRequired,
   /**
@@ -92,0 +88,0 @@ * Hide on extra small devices

build/utilities/ScreenClassRender/index.js

@@ -21,6 +21,2 @@ 'use strict';
 
-var _RenderAny = require('../../support/RenderAny');
-
-var _RenderAny2 = _interopRequireDefault(_RenderAny);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,2 +29,3 @@
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* global window */
+/* eslint no-console: off */
 
@@ -64,3 +61,3 @@ var ScreenClassRender = function (_React$Component) {
         return _react2.default.createElement(
-          _RenderAny2.default,
+          _react2.default.Fragment,
           null,
@@ -70,2 +67,3 @@ _this.props.render(_this.state.screenClass)
       }
+      console.info('Please use the render prop of ScreenClassRender. Using style and children is deprecated and will be removed in the next major release.');
       if (_this.props.style) {
@@ -83,15 +81,12 @@ return _react2.default.cloneElement(_this.props.children, { style: _this.getStyle() });
   /**
-   * Content of the component
+   * Deprecated, will be removed in the next major release
    */
   children: _propTypes2.default.element,
   /**
-   * A function returning the style for the children.
-   * Will be called with two arguments: the screen class and
-   * the props of the child element.
+   * Deprecated, will be removed in the next major release
    */
   style: _propTypes2.default.func,
   /**
-   * A function which return value will be rendered.
+   * The function which return value will be rendered.
    * Will be called with one argument: the screen class.
-   * When set, the props children and style will be ignored.
    */
@@ -98,0 +93,0 @@ render: _propTypes2.default.func

build/utilities/Visible/index.js

@@ -25,6 +25,2 @@ 'use strict';
 
-var _RenderAny = require('../../support/RenderAny');
-
-var _RenderAny2 = _interopRequireDefault(_RenderAny);
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -74,3 +70,3 @@
       return _react2.default.createElement(
-        _RenderAny2.default,
+        _react2.default.Fragment,
         null,
@@ -89,3 +85,3 @@ _this.props.children
    */
-  children: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.node, _propTypes2.default.func]).isRequired,
+  children: _propTypes2.default.node.isRequired,
   /**
@@ -92,0 +88,0 @@ * Show on extra small devices

package.json

 {
   "name": "react-grid-system",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "A no CSS Bootstrap-like responsive grid system for React.",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

README.md

@@ -88,15 +88,7 @@ # react-grid-system
 ```html
-const styleFunction = (screenClass, props) => {
-  let fontSize = 10;
-  if (screenClass === 'sm') fontSize = 20;
-  if (screenClass === 'md') fontSize = 30;
-  if (screenClass === 'lg') fontSize = 40;
-  if (screenClass === 'xl') fontSize = 50;
-  return {
-      fontSize: `${fontSize}px`,
-      ...props.style,
-   };
-};
-
-<ScreenClassRender style={styleFunction}><p style={{ color: 'red' }}>Some red text, which font size depends on the screen class.</p></ScreenClassRender>
+<ScreenClassRender render={(screenClass) => (
+  <p style={{ fontSize: ['lg', 'xl'].includes(screenClass) ? '2rem' : '1rem' }} >
+    Screen class: {screenClass}
+  </p>
+)} />
 ```
@@ -103,0 +95,0 @@

src/utilities/Hidden/index.jsx

@@ -8,3 +8,2 @@ /* global window */
 import { getScreenClass } from '../../utils';
-import RenderAny from '../../support/RenderAny';
 
@@ -16,7 +15,3 @@ export default class Hidden extends React.Component {
      */
-    children: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.node,
-      PropTypes.func,
-    ]).isRequired,
+    children: PropTypes.node.isRequired,
     /**
@@ -84,4 +79,4 @@ * Hide on extra small devices
     })) return false;
-    return <RenderAny>{this.props.children}</RenderAny>;
+    return <React.Fragment>{this.props.children}</React.Fragment>;
   }
 }

src/utilities/ScreenClassRender/index.jsx

 /* global window */
+/* eslint no-console: off */
 
@@ -7,3 +8,2 @@ import React from 'react';
 import { getScreenClass } from '../../utils';
-import RenderAny from '../../support/RenderAny';
 
@@ -13,15 +13,12 @@ export default class ScreenClassRender extends React.Component {
     /**
-     * Content of the component
+     * Deprecated, will be removed in the next major release
      */
     children: PropTypes.element,
     /**
-     * A function returning the style for the children.
-     * Will be called with two arguments: the screen class and
-     * the props of the child element.
+     * Deprecated, will be removed in the next major release
      */
     style: PropTypes.func,
     /**
-     * A function which return value will be rendered.
+     * The function which return value will be rendered.
      * Will be called with one argument: the screen class.
-     * When set, the props children and style will be ignored.
      */
@@ -64,4 +61,5 @@ render: PropTypes.func,
     if (this.props.render) {
-      return <RenderAny>{this.props.render(this.state.screenClass)}</RenderAny>;
+      return <React.Fragment>{this.props.render(this.state.screenClass)}</React.Fragment>;
     }
+    console.info('Please use the render prop of ScreenClassRender. Using style and children is deprecated and will be removed in the next major release.');
     if (this.props.style) {
@@ -68,0 +66,0 @@ return React.cloneElement(this.props.children, { style: this.getStyle() });

src/utilities/ScreenClassRender/Readme.md

@@ -1,17 +0,10 @@
-Example usage, rendering a different font size for each screen class:
+Example usage, rendering a font size based on the screen class:
 
 ```
-const styleFunction = (screenClass, props) => {
-  let fontSize = 10;
-  if (screenClass === 'sm') fontSize = 20;
-  if (screenClass === 'md') fontSize = 30;
-  if (screenClass === 'lg') fontSize = 40;
-  if (screenClass === 'xl') fontSize = 50;
-  return {
-      fontSize: `${fontSize}px`,
-      ...props.style,
-   };
-};
+<ScreenClassRender render={(screenClass) => (
+  <p style={{ fontSize: ['lg', 'xl'].includes(screenClass) ? '2rem' : '1rem' }} >
+    Screen class: {screenClass}
+  </p>
+)} />
 
-<ScreenClassRender style={styleFunction}><p style={{ color: 'red' }}>Some text</p></ScreenClassRender>
 ```

src/utilities/Visible/index.jsx

@@ -8,3 +8,2 @@ /* global window */
 import { getScreenClass } from '../../utils';
-import RenderAny from '../../support/RenderAny';
 
@@ -16,7 +15,3 @@ export default class Visible extends React.Component {
      */
-    children: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.node,
-      PropTypes.func,
-    ]).isRequired,
+    children: PropTypes.node.isRequired,
     /**
@@ -84,4 +79,4 @@ * Show on extra small devices
     })) return false;
-    return <RenderAny>{this.props.children}</RenderAny>;
+    return <React.Fragment>{this.props.children}</React.Fragment>;
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

72997

decreased by-3.93%

Number of package files

33

decreased by-5.71%

Lines of code

1630

decreased by-4.29%

Number of lines in readme file

119

decreased by-6.3%

No dependency changes