react-flexr - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0-beta

dist/cell.component.js

 'use strict';
 
-exports.__esModule = true;
+var _inherits = require('babel-runtime/helpers/inherits')['default'];
 
-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; };
+var _createClass = require('babel-runtime/helpers/create-class')['default'];
 
-var _slicedToArray = (function () { function sliceIterator(arr, i) { 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; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default'];
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _slicedToArray = require('babel-runtime/helpers/sliced-to-array')['default'];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _objectWithoutProperties = require('babel-runtime/helpers/object-without-properties')['default'];
 
-function _objectWithoutProperties(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 _extends = require('babel-runtime/helpers/extends')['default'];
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+var _Object$keys = require('babel-runtime/core-js/object/keys')['default'];
 
-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; }
+var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
 
+exports.__esModule = true;
+
 var _stylesheet = require('./stylesheet');
@@ -33,3 +35,3 @@
 
-var ERGONOMICS = Object.keys(_utils.settings);
+var ERGONOMICS = _Object$keys(_utils.settings);
 
@@ -95,2 +97,8 @@ var cellStyles = _stilr2['default'].create({
   Cell.prototype.calcWidth = function calcWidth(size) {
+    if (typeof size === 'number') {
+      return {
+        width: size < 1 ? Math.round(size * 10000) / 100 + '%' : size + 'px'
+      };
+    }
+
     var _ref = size ? size.split('/') : [];
@@ -103,5 +111,4 @@
 
-    var calcSize = 100 / denominator * numerator + '%';
     return {
-      width: calcSize
+      width: 100 / denominator * numerator + '%'
     };
@@ -122,2 +129,8 @@ };
     var breakpoint = this.getMatchingBreakpoint();
+
+    // Return early for performance
+    if (breakpoint === 'hidden') {
+      return null;
+    }
+
     var flexSize = this.handleFlexSize(breakpoint);
@@ -129,3 +142,3 @@
 
-    return breakpoint === 'hidden' ? null : _react2['default'].createElement(
+    return _react2['default'].createElement(
       'div',
@@ -147,4 +160,5 @@ _extends({}, rest, {
       size: function size(props, propName) {
-        if (props[propName] && props[propName].split('/').length !== 2) {
-          return new Error('Size should be a fraction, e.g. 1/6');
+        var value = props[propName];
+        if (value && !(typeof value === 'number' || typeof value === 'string' && /^[0-9]+\/[0-9]+$/.test(value))) {
+          return new Error('Size should be a fraction (e.g. 1/6) or a number for fixed size');
         }
@@ -151,0 +165,0 @@ }

dist/grid.component.js

 'use strict';
 
-exports.__esModule = true;
+var _inherits = require('babel-runtime/helpers/inherits')['default'];
 
-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; };
+var _createClass = require('babel-runtime/helpers/create-class')['default'];
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
+var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default'];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _extends = require('babel-runtime/helpers/extends')['default'];
 
-function _objectWithoutProperties(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 _objectWithoutProperties = require('babel-runtime/helpers/object-without-properties')['default'];
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+var _Object$keys = require('babel-runtime/core-js/object/keys')['default'];
 
-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; }
+var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
 
+exports.__esModule = true;
+
 var _stylesheet = require('./stylesheet');
@@ -89,5 +91,4 @@
 
-    var wrappedChildren = Object.keys(parentProps).length ? _react2['default'].Children.map(children, function (child) {
-      if (!child) return child;
-      return _react2['default'].cloneElement(child, _extends({}, parentProps));
+    var wrappedChildren = _Object$keys(parentProps).length ? _react2['default'].Children.map(children, function (child) {
+      return child ? _react2['default'].cloneElement(child, _extends({}, parentProps)) : child;
     }) : children;
@@ -94,0 +95,0 @@

dist/index.js

 'use strict';
 
-exports.__esModule = true;
+var _extends = require('babel-runtime/helpers/extends')['default'];
 
-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; };
+var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+exports.__esModule = true;
 
@@ -9,0 +9,0 @@ var _gridComponent = require('./grid.component');

dist/stylesheet.js

 'use strict';
 
+var _Map = require('babel-runtime/core-js/map')['default'];
+
+var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];
+
 exports.__esModule = true;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 var _stilr = require('stilr');
@@ -12,4 +14,4 @@
 // Used as Stilr StyleSheet
-var stylesheet = new (_stilr2['default'].Map || Map)();
+var stylesheet = new (_stilr2['default'].Map || _Map)();
 exports['default'] = stylesheet;
 module.exports = exports['default'];

dist/utils/index.js

 'use strict';
 
-exports.__esModule = true;
+var _slicedToArray = require('babel-runtime/helpers/sliced-to-array')['default'];
 
-var _slicedToArray = (function () { function sliceIterator(arr, i) { 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; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError('Invalid attempt to destructure non-iterable instance'); } }; })();
+var _Object$keys = require('babel-runtime/core-js/object/keys')['default'];
 
+var _Map = require('babel-runtime/core-js/map')['default'];
+
+exports.__esModule = true;
 exports.generateMatchMediaString = generateMatchMediaString;
@@ -42,3 +45,3 @@ exports.setBreakpoints = setBreakpoints;
 
-var matchMediaQueries = Object.keys(settings).reduce(function (acc, breakpoint) {
+var matchMediaQueries = _Object$keys(settings).reduce(function (acc, breakpoint) {
   acc[breakpoint] = generateMatchMediaString(settings[breakpoint]);
@@ -49,3 +52,3 @@ return acc;
 exports.matchMediaQueries = matchMediaQueries;
-var mediaQueries = Object.keys(matchMediaQueries).reduce(function (acc, breakpoint) {
+var mediaQueries = _Object$keys(matchMediaQueries).reduce(function (acc, breakpoint) {
   acc[breakpoint] = '@media screen and ' + matchMediaQueries[breakpoint];
@@ -81,11 +84,11 @@ return acc;
 
-  var newBreakpoints = Object.keys(matchMediaQueries).filter(function (breakpoint) {
+  var newBreakpoints = _Object$keys(matchMediaQueries).filter(function (breakpoint) {
     return window.matchMedia(matchMediaQueries[breakpoint]).matches;
   });
 
-  return isDifferent(newBreakpoints) ? setBreakpoints(newBreakpoints) : false;
+  return isDifferent(newBreakpoints) && setBreakpoints(newBreakpoints);
 }
 
 var optimizedResize = (function () {
-  var callbacks = [];
+  var callbacks = new _Map();
   var running = false;
@@ -106,3 +109,3 @@
   function runCallbacks() {
-    callbacks.forEach(function (callback) {
+    callbacks.values().forEach(function (callback) {
       return callback();
@@ -113,6 +116,12 @@ });
 
-  function addCallback(callback) {
-    if (callback) callbacks.push(callback);
+  function addCallback(callback, key) {
+    if (typeof callback === 'function') {
+      callbacks.setItem(key || callback, callback);
+    }
   }
 
+  function removeCallback(key) {
+    callbacks['delete'](key);
+  }
+
   return {
@@ -123,4 +132,7 @@ init: function init(callback) {
     },
-    add: function add(callback) {
-      addCallback(callback);
+    add: function add(callback, key) {
+      addCallback(callback, key);
+    },
+    remove: function remove(key) {
+      removeCallback(key);
     }
@@ -127,0 +139,0 @@ };

lib/cell.component.js

@@ -40,4 +40,5 @@ import stylesheet from './stylesheet';
     size: (props, propName) => {
-      if (props[propName] && props[propName].split('/').length !== 2) {
-        return new Error('Size should be a fraction, e.g. 1/6');
+      const value = props[propName];
+      if (value && !(typeof value === 'number' || (typeof value === 'string' && /^[0-9]+\/[0-9]+$/.test(value)))) {
+        return new Error('Size should be a fraction (e.g. 1/6) or a number for fixed size');
       }
@@ -48,6 +49,11 @@ }
   calcWidth(size) {
+    if (typeof size === 'number') {
+      return {
+        width: size < 1 ? `${Math.round(size*10000)/100}%` : `${size}px`
+      };
+    }
+
     const [ numerator, denominator ] = size ? size.split('/') : [];
-    const calcSize = `${ ( 100 / denominator ) * numerator }%`;
     return {
-      width: calcSize
+      width: `${ ( 100 / denominator ) * numerator }%`
     };
@@ -106,5 +112,11 @@ }
     const breakpoint = this.getMatchingBreakpoint();
+
+    // Return early for performance
+    if (breakpoint === 'hidden') {
+      return null;
+    }
+
     const flexSize = this.handleFlexSize(breakpoint);
 
-    this.styles = assign( {},
+    this.styles = assign({},
       gutter
@@ -114,3 +126,4 @@ ? { padding: `0 ${ gutter }` }
       flexSize,
-      style );
+      style
+    );
 
@@ -130,10 +143,10 @@ const classes = [
 
-    return breakpoint === 'hidden'
-      ? null
-      : <div
-          { ...rest }
-          style={ this.styles }
-          className={ classes }>
-          { children }
-        </div>;
+    return (
+      <div
+        { ...rest }
+        style={ this.styles }
+        className={ classes }>
+        { children }
+      </div>
+    );
   }
@@ -140,0 +153,0 @@ }

lib/grid.component.js

@@ -83,6 +83,5 @@ import stylesheet from './stylesheet';
       ? React.Children.map(
-        children, ( child ) => {
-          if (!child) return child;
-          return React.cloneElement( child, { ...parentProps });
-        })
+        children, child => (
+          child ? React.cloneElement( child, { ...parentProps }) : child
+        ))
       : children;
@@ -89,0 +88,0 @@

lib/utils/index.js

@@ -72,9 +72,7 @@ export const canUseDOM = (() => (
 
-  return isDifferent( newBreakpoints )
-    ? setBreakpoints( newBreakpoints )
-    : false;
+  return isDifferent( newBreakpoints ) && setBreakpoints( newBreakpoints );
 }
 
 export const optimizedResize = (function() {
-  let callbacks = [];
+  const callbacks = new Map();
   let running = false;
@@ -95,10 +93,16 @@
   function runCallbacks() {
-    callbacks.forEach( (callback) => callback() );
+    callbacks.values().forEach(callback => callback());
     running = false;
   }
 
-  function addCallback(callback) {
-    if (callback) callbacks.push(callback);
+  function addCallback(callback, key) {
+    if (typeof callback === 'function') {
+      callbacks.setItem(key || callback, callback);
+    }
   }
 
+  function removeCallback(key) {
+    callbacks.delete(key);
+  }
+
   return {
@@ -109,4 +113,7 @@ init(callback) {
     },
-    add(callback) {
-      addCallback(callback);
+    add(callback, key) {
+      addCallback(callback, key);
+    },
+    remove(key) {
+      removeCallback(key)
     }
@@ -113,0 +120,0 @@ };

package.json

 {
   "name": "react-flexr",
-  "version": "2.0.2",
+  "version": "2.1.0-beta",
   "description": "React flexbox grid made simple.",
@@ -20,11 +20,12 @@ "main": "dist",
     "babel-loader": "^5.0.0",
-    "jsdom": "^6.5.1",
-    "mocha": "^2.2.4",
-    "react": "^0.14.0",
-    "react-addons-test-utils": "^0.14.0",
-    "react-dom": "^0.14.0",
+    "babel-runtime": "^5.8.35",
+    "jsdom": "^8.0.4",
+    "mocha": "^2.4.5",
+    "react": "^0.14.7",
+    "react-addons-test-utils": "^0.14.7",
+    "react-dom": "^0.14.7",
     "react-hot-loader": "^1.2.7",
-    "semver": "^5.0.1",
-    "webpack": "^1.9.4",
-    "webpack-dev-server": "^1.8.2"
+    "semver": "^5.1.0",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1"
   },
@@ -36,4 +37,9 @@ "dependencies": {
   "repository": "kodyl/react-flexr",
-  "author": "Chris Kjær Sørensen",
+  "author": "Kodyl ApS",
+  "contributors": [{
+    "name": "Chris Kjær Sørensen"
+  },{
+    "name": "Daniel Juhl"
+  }],
   "license": "MIT"
 }

README.md

@@ -18,5 +18,5 @@ # Flexr [![Build Status](https://travis-ci.org/kodyl/react-flexr.svg)](https://travis-ci.org/kodyl/react-flexr) [![npm version](https://badge.fury.io/js/react-flexr.svg)](http://badge.fury.io/js/react-flexr)
       <Grid>
-        <Cell>1/3<Cell>
-        <Cell>1/3<Cell>
-        <Cell>1/3<Cell>
+        <Cell>1/3</Cell>
+        <Cell>1/3</Cell>
+        <Cell>1/3</Cell>
       </Grid>
@@ -27,3 +27,3 @@ );
 ```
-**If you don't use webpack with css-loader, make sure to include the `react-flexr/styles.css` somewhere in your project. For more advanced use cases, the [Stilr](https://github.com/chriskjaer/stilr)
+**If you don't use webpack with css-loader, make sure to include the `react-flexr/styles.css` somewhere in your project. For more advanced use cases, the [Stilr](https://github.com/kodyl/stilr)
 stylesheet is also exposed.**
@@ -43,3 +43,3 @@
           Fills Half
-        <Cell>
+        </Cell>
 
@@ -50,13 +50,21 @@ <Cell>
 
+        <Cell size={200} lap={150}>
+          Fills 150px on lap and 200px everywhere else
+        </Cell>
+
+        <Cell size={0.5} lap={0.25}>
+          Fills a quarter on lap and half everywhere else
+        </Cell>
+
         <Cell size='3/12'>
           Fills a quarter
-        <Cell>
+        </Cell>
 
         <Cell palm='3/12' lap='1/2'>
-          Fills a quarter on palm (mobile), half on lap and dynamicly sized everywhere else.
-        <Cell>
+          Fills a quarter on palm (mobile), half on lap and dynamicly sized everywhere else
+        </Cell>
 
         <Cell palm='hidden' size='1/2'>
           Hidden on palm, half width otherwise
-        <Cell>
+        </Cell>
       </Grid>
@@ -87,11 +95,10 @@ );
 <Cell
-  align={ string }    // Vertical Align This Cell: top, center, bottom
-  gutter={ string }   // Override default gutter: '1em', '5%', '10px', etc.
-  flex={ bool }       // Like flexCells above, but for a single cell.
-  size={ string }     // Takes a fraction. e.g. 1/6
-  palm={ string }     // Like size, but only applies for palm devices.*
-  lap={ string }      // Like size, but only applies for lap devices.*
-  portable={ string } // Like size, but only applies for ( palm + lap )
-                      //   devices.*
-  desk={ string }     // Like size, but only applies for desk devices.*
+  align={ string }             // Vertical Align This Cell: top, center, bottom
+  gutter={ string }            // Override default gutter: '1em', '5%', '10px', etc.
+  flex={ bool }                // Like flexCells above, but for a single cell.
+  size={ string | number }     // Takes a fraction. e.g. 1/6
+  palm={ string | number }     // Like size, but only for palm devices.*
+  lap={ string | number }      // Like size, but only for lap devices.*
+  portable={ string | number } // Like size, but only for ( palm + lap ) devices.*
+  desk={ string | number }     // Like size, but only for desk devices.*
 />
@@ -107,4 +114,3 @@ ```
 
-I've used these breakpoints in a variety of [apps](https://github.com/chriskjaer/prototype-seed) and [ grids ](https://github.com/chriskjaer/prototype-seed/blob/master/source/assets/styles/utilities/_grid.scss) with success. So far
-the following breakpoints have beeen implemented:
+We've used these breakpoints in a variety of apps and grids with success. So far the following breakpoints have beeen implemented:
 - Palm
@@ -115,3 +121,3 @@ - Lap
 
-See [breakpoints file](https://github.com/chriskjaer/react-flexr/blob/master/src/breakpoints.js) for sizes.
+See the [breakpoint config object](https://github.com/kodyl/react-flexr/blob/master/lib/utils/index.js#L8) for sizes.
 
@@ -229,3 +235,3 @@
 #### `Map stylesheet`
-The internal [Stilr](https://github.com/chriskjaer/stilr) stylesheet used to
+The internal [Stilr](https://github.com/kodyl/stilr) stylesheet used to
 handle basic flexbox styling for the components.
@@ -239,3 +245,3 @@ Usefull if you need full controll of how the CSS is rendered. Reed the Stilr
 The ergonomic breakpoint media queries that flexr uses internally is also
-exposed. These are especially useful in combination with [Stilr](https://github.com/chriskjaer/stilr).
+exposed. These are especially useful in combination with [Stilr](https://github.com/kodyl/stilr).
 
@@ -242,0 +248,0 @@ __Example__

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Lines of code

814

increased by3.56%

Number of lines in readme file

264

increased by2.33%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

38169

decreased by-5.89%

Dev dependency count

13

increased by8.33%

Number of low quality alerts

2

increased by100%

No dependency changes