react-flexr - npm Package Compare versions

Comparing version 1.1.2 to 1.3.0

lib/cell.component.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var _objectWithoutProperties = function (obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; };
+
 var _slicedToArray = function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i['return']) _i['return'](); } finally { if (_d) throw _e; } } return _arr; } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } };
@@ -12,6 +14,6 @@
 
-var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
 var _inherits = function (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) subClass.__proto__ = superClass; };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 Object.defineProperty(exports, '__esModule', {
@@ -33,35 +35,65 @@ value: true
 
-var PropTypes = _React2['default'].PropTypes;
+var _StyleSheet = require('react-style');
 
-var Cell = (function (_React$Component) {
-  function Cell(props) {
-    _classCallCheck(this, Cell);
+var _StyleSheet2 = _interopRequireWildcard(_StyleSheet);
 
-    _get(Object.getPrototypeOf(Cell.prototype), 'constructor', this).call(this, props);
-    var size = props.size;
-    var gutter = props.gutter;
-    var flex = props.flex;
-    var style = props.style;
-    var align = props.align;
-    var grow = props.grow;
+var _staticProperties$baseMethods$media$variables = require('./defaults');
 
-    var _ref = size ? size.split('/') : [];
+var Type = _React2['default'].PropTypes;
 
-    var _ref2 = _slicedToArray(_ref, 2);
+var styling = _StyleSheet2['default'].create({
+  cellBase: {
+    flex: 1
+  }
+});
 
-    var numer = _ref2[0];
-    var denom = _ref2[1];
+function calcWidth(size) {
+  var _ref = size ? size.split('/') : [];
 
-    var growStyle = typeof grow === 'number' ? grow : grow === false ? 0 : 1;
+  var _ref2 = _slicedToArray(_ref, 2);
 
-    var styles = {
-      flex: size ? '0 0 ' + 100 / denom * numer + '%' : grow !== undefined ? '' + growStyle + ' 1 auto' : 1,
-      padding: gutter ? gutter : '0 1em',
-      display: flex ? 'flex' : null,
-      alignSelf: align ? _flexAlignments2['default'][align] : null
-    };
+  var numerator = _ref2[0];
+  var denominator = _ref2[1];
 
-    this.styles = style ? _assign2['default']({}, styles, style) : styles;
+  return { flex: '0 0 ' + 100 / denominator * numerator + '%' };
+}
+
+function findResponsiveSize(mediaQuerries, props) {
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = Object.keys(mediaQuerries)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var breakpoint = _step.value;
+
+      if (mediaQuerries[breakpoint] && props[breakpoint]) {
+        return props[breakpoint];
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator['return']) {
+        _iterator['return']();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
   }
+}
 
+var Cell = (function (_React$Component) {
+  function Cell() {
+    _classCallCheck(this, Cell);
+
+    if (_React$Component != null) {
+      _React$Component.apply(this, arguments);
+    }
+  }
+
   _inherits(Cell, _React$Component);
@@ -72,6 +104,48 @@
     value: function render() {
+      var _props = this.props;
+      var size = _props.size;
+      var propGutter = _props.gutter;
+      var flex = _props.flex;
+      var style = _props.style;
+      var styles = _props.styles;
+      var align = _props.align;
+      var grow = _props.grow;
+      var children = _props.children;
+
+      var rest = _objectWithoutProperties(_props, ['size', 'gutter', 'flex', 'style', 'styles', 'align', 'grow', 'children']);
+
+      var gutter = propGutter || _staticProperties$baseMethods$media$variables.variables.gutter;
+      var growStyle = typeof grow === 'number' ? grow : grow === false ? 0 : 1;
+
+      this.styles = [styling.cellBase, { padding: '0 ' + gutter }];
+
+      var responsiveSize = findResponsiveSize(_staticProperties$baseMethods$media$variables.media, this.props);
+      if (responsiveSize) {
+        this.styles.push(calcWidth(responsiveSize));
+      } else if (size) {
+        this.styles.push(calcWidth(size));
+      } else if (grow !== undefined) {
+        this.styles.push({ flex: '' + growStyle + ' 1 auto' });
+      }
+
+      if (flex) {
+        this.styles.push({ display: 'flex' });
+      }
+
+      if (align) {
+        this.styles.push({ alignSelf: _flexAlignments2['default'][align] });
+      }
+
+      if (style) {
+        this.styles.push(style);
+      }
+
+      if (styles) {
+        this.styles.push(styles);
+      }
+
       return _React2['default'].createElement(
         'div',
-        { style: this.styles },
-        this.props.children
+        _extends({}, rest, { styles: this.styles }),
+        children
       );
@@ -85,6 +159,6 @@ }
 Cell.propTypes = {
-  grow: PropTypes.oneOf([false, true, _React2['default'].PropTypes.number]),
-  gutter: _React2['default'].PropTypes.string,
-  flex: _React2['default'].PropTypes.bool,
-  align: PropTypes.oneOf(['top', 'center', 'bottom']),
+  grow: Type.oneOf([false, true, Type.number]),
+  gutter: Type.string,
+  flex: Type.bool,
+  align: Type.oneOf(['top', 'center', 'bottom']),
   size: function size(props, propName) {
@@ -97,3 +171,6 @@ if (props[propName] && props[propName].split('/').length !== 2) {
 
+_assign2['default'](Cell.prototype, _staticProperties$baseMethods$media$variables.baseMethods);
+_assign2['default'](Cell, _staticProperties$baseMethods$media$variables.staticProperties);
+
 exports['default'] = Cell;
 module.exports = exports['default'];

lib/grid.component.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var _objectWithoutProperties = function (obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; };
+
 var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
@@ -10,6 +12,6 @@
 
-var _get = function get(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
 var _inherits = function (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) subClass.__proto__ = superClass; };
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 Object.defineProperty(exports, '__esModule', {
@@ -35,26 +37,27 @@ value: true
 
+var _StyleSheet = require('react-style');
+
+var _StyleSheet2 = _interopRequireWildcard(_StyleSheet);
+
+var _staticProperties$baseMethods$variables = require('./defaults');
+
 var Component = _React2['default'].Component;
-var Children = _React2['default'].Children;
-var PropTypes = _React2['default'].PropTypes;
-var addons = _React2['default'].addons;
+var Type = _React2['default'].PropTypes;
 
+var styling = _StyleSheet2['default'].create({
+  gridBase: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    listStyle: 'none',
+    padding: 0
+  }
+});
+
 var Grid = (function (_Component) {
-  function Grid(props) {
+  function Grid() {
     _classCallCheck(this, Grid);
 
-    _get(Object.getPrototypeOf(Grid.prototype), 'constructor', this).call(this, props);
-    var gutter = props.gutter;
-    var style = props.style;
-    var align = props.align;
-
-    var styles = {
-      display: 'flex',
-      flexWrap: 'wrap',
-      listStyle: 'none',
-      margin: gutter ? gutter : '0 -1em 1em',
-      padding: 0,
-      alignItems: align ? _flexAlignments2['default'][align] : null
-    };
-
-    this.styles = style ? _assign2['default']({}, styles, style) : styles;
+    if (_Component != null) {
+      _Component.apply(this, arguments);
+    }
   }
@@ -67,11 +70,24 @@
     value: function render() {
-      var props = this.props;
-      var children = props.flexCells ? Children.map(props.children, function (child) {
-        return child.type === _Cell2['default'] ? addons.cloneWithProps(child, { flex: true }) : child;
-      }) : props.children;
+      var _props = this.props;
+      var propGutter = _props.gutter;
+      var style = _props.style;
+      var styles = _props.styles;
+      var align = _props.align;
+      var flexCells = _props.flexCells;
+      var children = _props.children;
 
+      var rest = _objectWithoutProperties(_props, ['gutter', 'style', 'styles', 'align', 'flexCells', 'children']);
+
+      var gutter = propGutter || _staticProperties$baseMethods$variables.variables.gutter;
+
+      this.styles = [styling.gridBase, { margin: '0 -' + gutter + ' ' + gutter }, align ? { alignItems: _flexAlignments2['default'][align] } : null, style, styles];
+
+      var wrapppedChildren = flexCells ? _React2['default'].Children.map(children, function (child) {
+        return child.type === _Cell2['default'] ? _React2['default'].addons.cloneWithProps(child, { flex: true }) : _React2['default'].addons.cloneWithProps(child);
+      }) : children;
+
       return _React2['default'].createElement(
         'div',
-        { style: this.styles },
-        children
+        _extends({}, rest, { styles: this.styles }),
+        wrapppedChildren
       );
@@ -85,8 +101,11 @@ }
 Grid.propTypes = {
-  gutter: PropTypes.string,
-  flexCells: PropTypes.bool,
-  align: PropTypes.oneOf(['top', 'center', 'bottom'])
+  gutter: Type.string,
+  flexCells: Type.bool,
+  align: Type.oneOf(['top', 'center', 'bottom'])
 };
 
+_assign2['default'](Grid.prototype, _staticProperties$baseMethods$variables.baseMethods);
+_assign2['default'](Grid, _staticProperties$baseMethods$variables.staticProperties);
+
 exports['default'] = Grid;
 module.exports = exports['default'];

package.json

 {
   "name": "react-flexr",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "description": "React flexbox grid made simple.",
@@ -27,3 +27,4 @@ "main": "lib",
   "dependencies": {
-    "react": "^0.13.0"
+    "react": "^0.13.0",
+    "react-style": "^0.5.2"
   },
@@ -30,0 +31,0 @@ "author": "Chris Kjær Sørensen",

src/cell.component.js

 import React from 'react';
 import assign from 'react/lib/Object.assign';
 import flexAlignments from './flex-alignments';
-const { PropTypes } = React;
+import StyleSheet from 'react-style';
+import { staticProperties, baseMethods, media, variables } from './defaults';
+const { PropTypes: Type } = React;
 
+const styling = StyleSheet.create({
+  cellBase: {
+    flex: 1
+  }
+});
 
+function calcWidth(size) {
+  const [ numerator, denominator ] = size ? size.split('/') : [];
+  return { flex: `0 0 ${ ( 100 / denominator ) * numerator }%` };
+}
+
+function findResponsiveSize(mediaQuerries, props) {
+  for (let breakpoint of Object.keys( mediaQuerries )) {
+    if (mediaQuerries[breakpoint] && props[breakpoint]) {
+      return props[breakpoint];
+    }
+  }
+}
+
 class Cell extends React.Component {
-  constructor(props) {
-    super(props);
-    const { size, gutter, flex, style, align, grow } = props;
-    const [ numer, denom ] = size ? size.split('/') : [];
+  render() {
+    const {
+      size,
+      gutter: propGutter,
+      flex,
+      style,
+      styles,
+      align,
+      grow,
+      children,
+      ...rest } = this.props;
+    const gutter = propGutter || variables.gutter;
     const growStyle =
@@ -17,21 +45,37 @@ typeof grow === 'number' ? grow :
 
-    const styles = {
-      flex: size ?
-        `0 0 ${ ( 100 / denom ) * numer }%` :
-        grow !== undefined ? `${ growStyle } 1 auto` :
-        1,
-      padding: gutter ? gutter : '0 1em',
-      display: flex ? 'flex' : null,
-      alignSelf: align ? flexAlignments[align] : null
-    };
+    this.styles = [
+      styling.cellBase,
+      { padding: `0 ${ gutter }` }
+    ];
 
-    this.styles = style ?
-      assign({}, styles, style) :
-      styles;
-  }
+    const responsiveSize = findResponsiveSize(media, this.props);
+    if ( responsiveSize ) {
+      this.styles.push( calcWidth( responsiveSize ) );
+    }
+    else if ( size ) {
+      this.styles.push( calcWidth(size) );
+    }
+    else if (grow !== undefined) {
+      this.styles.push({ flex: `${ growStyle } 1 auto` });
+    }
 
-  render() {
+    if ( flex ) {
+      this.styles.push({ display: 'flex' });
+    }
+
+    if ( align ) {
+      this.styles.push({ alignSelf: flexAlignments[align] });
+    }
+
+    if ( style ) {
+      this.styles.push( style );
+    }
+
+    if ( styles ) {
+      this.styles.push( styles );
+    }
+
     return (
-      <div style={ this.styles }>
-        { this.props.children }
+      <div { ...rest } styles={ this.styles }>
+        { children }
       </div>
@@ -42,7 +86,8 @@ );
 
+
 Cell.propTypes = {
-  grow: PropTypes.oneOf([false, true, React.PropTypes.number]),
-  gutter: React.PropTypes.string,
-  flex: React.PropTypes.bool,
-  align: PropTypes.oneOf(['top', 'center', 'bottom']),
+  grow: Type.oneOf([false, true, Type.number]),
+  gutter: Type.string,
+  flex: Type.bool,
+  align: Type.oneOf(['top', 'center', 'bottom']),
   size: (props, propName) => {
@@ -55,2 +100,5 @@ if (props[propName] && props[propName].split('/').length !== 2) {
 
+assign(Cell.prototype, baseMethods);
+assign(Cell, staticProperties);
+
 export default Cell;

src/grid.component.js

@@ -5,35 +5,46 @@ import React from 'react/addons';
 import flexAlignments from './flex-alignments';
-const { Component, Children, PropTypes, addons } = React;
+import StyleSheet from 'react-style';
+import { staticProperties, baseMethods, variables } from './defaults';
+const { Component, PropTypes: Type } = React;
 
+const styling = StyleSheet.create({
+  gridBase: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    listStyle: 'none',
+    padding: 0
+  }
+});
 
+
 class Grid extends Component {
-  constructor(props) {
-    super(props);
-    const { gutter, style, align } = props;
+  render() {
+    const {
+      gutter: propGutter,
+      style,
+      styles,
+      align,
+      flexCells,
+      children,
+      ...rest } = this.props;
+    const gutter = propGutter || variables.gutter;
 
-    const styles = {
-      display: 'flex',
-      flexWrap: 'wrap',
-      listStyle: 'none',
-      margin: gutter ? gutter : '0 -1em 1em',
-      padding: 0,
-      alignItems: align ? flexAlignments[align] : null
-    };
+    this.styles = [
+      styling.gridBase,
+      { margin: `0 -${ gutter } ${ gutter }` },
+      align ? { alignItems: flexAlignments[align] } : null,
+      style,
+      styles
+    ];
 
-    this.styles = style ?
-      assign({}, styles, style) :
-      styles;
-  }
+    const wrapppedChildren = flexCells ?
+      React.Children.map(
+        children, child => child.type === Cell ?
+          React.addons.cloneWithProps( child, { flex: true }) :
+          React.addons.cloneWithProps( child ) ) :
+      children;
 
-  render() {
-    const props = this.props;
-    const children = props.flexCells ?
-      Children.map( props.children, child => {
-        return child.type === Cell ? addons.cloneWithProps(child, { flex: true }) : child;
-      }) :
-      props.children;
-
     return (
-      <div style={ this.styles }>
-        { children }
+      <div { ...rest } styles={ this.styles }>
+        { wrapppedChildren }
       </div>
@@ -45,7 +56,10 @@ );
 Grid.propTypes = {
-  gutter: PropTypes.string,
-  flexCells: PropTypes.bool,
-  align: PropTypes.oneOf(['top', 'center', 'bottom'])
+  gutter: Type.string,
+  flexCells: Type.bool,
+  align: Type.oneOf(['top', 'center', 'bottom'])
 };
 
+assign(Grid.prototype, baseMethods);
+assign(Grid, staticProperties);
+
 export default Grid;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

21724

increased by44.59%

Number of package files

19

increased by26.67%

Lines of code

465

increased by80.93%

Worsened metrics

Dependency count

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-style@^0.5.2

• + Addedreact-style@0.5.5(transitive)