react-columns - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

CHANGELOG.md

@@ -12,2 +12,12 @@ # Changelog
 
+## v0.2.0 (April 30, 2016)
+
+- **Internal**
+  - Switched to using float for columns instead of CSS3 Multiple column layout
+  - Removed lodash.times
+  - Added propTypes
+- **Documentation**
+  - added documentation for new `rootStyles` property
+  - added missing documentation for `className` property
+
 ## v0.1.2 (April 11, 2016)
@@ -14,0 +24,0 @@

es6/index.js

@@ -11,14 +11,6 @@ 'use strict';
 
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { mediaQueryMapper } from './mq';
 import mapNodesToColumns from './mapNodesToColumns';
 
-var styles = {
-  column: {
-    breakInside: 'avoid-column',
-    WebkitColumnBreakInside: 'avoid',
-    WebkitMarginTopCollapse: 'discard'
-  }
-};
-
 var Columns = (function (_Component) {
@@ -68,11 +60,19 @@ _inherits(Columns, _Component);
       var dimensions = _props.dimensions;
+      var gap = _props.gap;
 
-      if (columns === 1) {
-        return children;
-      } else {
+      var columnStyles = {
+        boxSizing: 'border-box',
+        float: 'left',
+        width: 'calc(1 / ' + columns + ' * 100%)',
+        paddingLeft: gap,
+        paddingRight: gap
+      };
+      var renderedColumns = children;
+
+      if (columns > 1) {
         var columnsContainers = mapNodesToColumns({ children: children, columns: columns, dimensions: dimensions });
-        return columnsContainers.map(function (column, i) {
+        renderedColumns = columnsContainers.map(function (column, i) {
           return React.createElement(
             'div',
-            { key: i, style: styles.column },
+            { key: i, style: columnStyles },
             column
@@ -82,2 +82,4 @@ );
       }
+
+      return renderedColumns;
     }
@@ -89,14 +91,10 @@ }, {
       var className = _props2.className;
-      var _props2$gap = _props2.gap;
-      var gap = _props2$gap === undefined ? 0 : _props2$gap;
+      var gap = _props2.gap;
+      var rootStyles = _props2.rootStyles;
       var _state$columns = this.state.columns;
       var columns = _state$columns === undefined ? this.props.columns : _state$columns;
 
-      var rootStyles = columns === 1 ? {} : {
-        columnCount: columns,
-        WebkitColumnCount: columns,
-        MozColumnCount: columns,
-        columnGap: gap,
-        WebkitColumnGap: gap,
-        MozColumnGap: gap
+      var rowStyles = columns === 1 ? {} : {
+        marginLeft: 'calc(' + gap + ' * -1)',
+        marginRight: 'calc(' + gap + ' * -1)'
       };
@@ -107,3 +105,8 @@
         { className: className, style: rootStyles },
-        this.renderColumns(columns)
+        React.createElement(
+          'div',
+          { style: rowStyles },
+          this.renderColumns(columns),
+          React.createElement('div', { style: { clear: 'both' } })
+        )
       );
@@ -117,6 +120,19 @@ }
 Columns.defaultProps = {
+  className: '',
+  rootStyles: {
+    overflowX: 'hidden'
+  },
   queries: [],
-  columns: 3
+  columns: 3,
+  gap: 0
 };
 
+Columns.propTypes = {
+  className: PropTypes.string,
+  rootStyles: PropTypes.object,
+  queries: PropTypes.array,
+  columns: PropTypes.number,
+  gap: PropTypes.string
+};
+
 export default Columns;

es6/mapNodesToColumns.js

@@ -5,3 +5,2 @@ 'use strict';
 import min from 'lodash.min';
-import times from 'lodash.times';
 function mapNodesToColumns() {
@@ -26,6 +25,6 @@ var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
   if (dimensions.length && dimensions.length === children.length) {
-    times(columns, function (i) {
+    for (var i = 0; i < columns; i++) {
       nodes[i] = [];
       heights[i] = 0;
-    });
+    }
     children.forEach(function (child, i) {
@@ -43,7 +42,11 @@ var _dimensions$i = dimensions[i];
   else {
-      times(columns, function (i) {
+      var _loop = function (i) {
         nodes[i] = children.filter(function (child, j) {
           return j % columns === i;
         });
-      });
+      };
+
+      for (var i = 0; i < columns; i++) {
+        _loop(i);
+      }
     }
@@ -50,0 +53,0 @@

lib/index.js

@@ -27,10 +27,2 @@ 'use strict';
 
-var styles = {
-  column: {
-    breakInside: 'avoid-column',
-    WebkitColumnBreakInside: 'avoid',
-    WebkitMarginTopCollapse: 'discard'
-  }
-};
-
 var Columns = (function (_Component) {
@@ -80,11 +72,19 @@ _inherits(Columns, _Component);
       var dimensions = _props.dimensions;
+      var gap = _props.gap;
 
-      if (columns === 1) {
-        return children;
-      } else {
+      var columnStyles = {
+        boxSizing: 'border-box',
+        float: 'left',
+        width: 'calc(1 / ' + columns + ' * 100%)',
+        paddingLeft: gap,
+        paddingRight: gap
+      };
+      var renderedColumns = children;
+
+      if (columns > 1) {
         var columnsContainers = (0, _mapNodesToColumns2['default'])({ children: children, columns: columns, dimensions: dimensions });
-        return columnsContainers.map(function (column, i) {
+        renderedColumns = columnsContainers.map(function (column, i) {
           return _react2['default'].createElement(
             'div',
-            { key: i, style: styles.column },
+            { key: i, style: columnStyles },
             column
@@ -94,2 +94,4 @@ );
       }
+
+      return renderedColumns;
     }
@@ -101,14 +103,10 @@ }, {
       var className = _props2.className;
-      var _props2$gap = _props2.gap;
-      var gap = _props2$gap === undefined ? 0 : _props2$gap;
+      var gap = _props2.gap;
+      var rootStyles = _props2.rootStyles;
       var _state$columns = this.state.columns;
       var columns = _state$columns === undefined ? this.props.columns : _state$columns;
 
-      var rootStyles = columns === 1 ? {} : {
-        columnCount: columns,
-        WebkitColumnCount: columns,
-        MozColumnCount: columns,
-        columnGap: gap,
-        WebkitColumnGap: gap,
-        MozColumnGap: gap
+      var rowStyles = columns === 1 ? {} : {
+        marginLeft: 'calc(' + gap + ' * -1)',
+        marginRight: 'calc(' + gap + ' * -1)'
       };
@@ -119,3 +117,8 @@
         { className: className, style: rootStyles },
-        this.renderColumns(columns)
+        _react2['default'].createElement(
+          'div',
+          { style: rowStyles },
+          this.renderColumns(columns),
+          _react2['default'].createElement('div', { style: { clear: 'both' } })
+        )
       );
@@ -129,7 +132,20 @@ }
 Columns.defaultProps = {
+  className: '',
+  rootStyles: {
+    overflowX: 'hidden'
+  },
   queries: [],
-  columns: 3
+  columns: 3,
+  gap: 0
 };
 
+Columns.propTypes = {
+  className: _react.PropTypes.string,
+  rootStyles: _react.PropTypes.object,
+  queries: _react.PropTypes.array,
+  columns: _react.PropTypes.number,
+  gap: _react.PropTypes.string
+};
+
 exports['default'] = Columns;
 module.exports = exports['default'];

lib/mapNodesToColumns.js

@@ -14,6 +14,2 @@ 'use strict';
 
-var _lodashTimes = require('lodash.times');
-
-var _lodashTimes2 = _interopRequireDefault(_lodashTimes);
-
 function mapNodesToColumns() {
@@ -38,6 +34,6 @@ var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
   if (dimensions.length && dimensions.length === children.length) {
-    (0, _lodashTimes2['default'])(columns, function (i) {
+    for (var i = 0; i < columns; i++) {
       nodes[i] = [];
       heights[i] = 0;
-    });
+    }
     children.forEach(function (child, i) {
@@ -55,7 +51,11 @@ var _dimensions$i = dimensions[i];
   else {
-      (0, _lodashTimes2['default'])(columns, function (i) {
+      var _loop = function (i) {
         nodes[i] = children.filter(function (child, j) {
           return j % columns === i;
         });
-      });
+      };
+
+      for (var i = 0; i < columns; i++) {
+        _loop(i);
+      }
     }
@@ -62,0 +62,0 @@

LICENSE.md

@@ -0,0 +0,0 @@ The MIT License (MIT)

package.json

 {
   "name": "react-columns",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "React component for rendering columns from a list of children with horizontal ordering",
@@ -22,4 +22,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "lodash.min": "^4.0.0",
-    "lodash.times": "^4.1.0"
+    "lodash.min": "^4.0.0"
   },
@@ -26,0 +25,0 @@ "peerDependencies": {

README.md

@@ -17,7 +17,20 @@ # react-columns
 [coveralls]: https://coveralls.io/github/novascreen/react-columns
+ 
+## Installation
 
+`npm install --save react-columns`
+
+## Features
+
+* Static number of columns
+* Dynamic number of columns based on media queries ([matchMedia][matchmedia])
+* Height aware ordering of items
+* Put gap between columns
+
 ## Demo
 
-<http://novascreen.github.io/react-columns/>
- 
+See this [component in action][demo]
+
+![](https://i.gyazo.com/9a59c888c472388d8de14dbc4391db7e.gif)
+
 ## Usage
@@ -115,2 +128,10 @@
 
+* `className`  `{String}` (default: `''`)
+
+  Lets you pass in a class for the most outer element of the component.
+
+* `rootStyles`  `{Object}` (default: `{ overflowX: 'hidden' }`)
+
+  Styles applied to the most outer element. This avoids horizontal scrolling when using `gap` since the negative margin technique is used to create the gaps. You might want to remove this and handle it at a node higher up in the DOM tree.
+
 * `columns` `{Number}` (default: `3`)
@@ -149,1 +170,8 @@
   Gap between columns as number or string with unit.
+
+## License
+
+MIT
+
+[matchmedia]: http://caniuse.com/#feat=matchmedia
+[demo]: http://novascreen.github.io/react-columns/

umd/react-columns.min.js

 /*!
- * react-columns 0.1.1 - http://novascreen.github.io/react-columns/
+ * react-columns 0.2.0 - http://novascreen.github.io/react-columns/
  * MIT Licensed
  */
-!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.ReactColumns=n(require("react")):t.ReactColumns=n(t.React)}(this,function(t){return function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={exports:{},id:r,loaded:!1};return t[r].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var e={};return n.m=t,n.c=e,n.p="",n(0)}([function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function u(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function, not "+typeof n);t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),n&&(Object.setPrototypeOf?Object.setPrototypeOf(t,n):t.__proto__=n)}Object.defineProperty(n,"__esModule",{value:!0});var i=function(){function t(t,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(n,e,r){return e&&t(n.prototype,e),r&&t(n,r),n}}(),a=function(t,n,e){for(var r=!0;r;){var o=t,u=n,i=e;r=!1,null===o&&(o=Function.prototype);var a=Object.getOwnPropertyDescriptor(o,u);if(void 0!==a){if("value"in a)return a.value;var c=a.get;if(void 0===c)return;return c.call(i)}var f=Object.getPrototypeOf(o);if(null===f)return;t=f,n=u,e=i,r=!0,a=f=void 0}},c=e(8),f=r(c),l=e(3),s=e(2),p=r(s),v={column:{breakInside:"avoid-column",WebkitColumnBreakInside:"avoid",WebkitMarginTopCollapse:"discard"}},y=function(t){function n(t){o(this,n),a(Object.getPrototypeOf(n.prototype),"constructor",this).call(this,t),this.setColumns=this.setColumns.bind(this),this.state={}}return u(n,t),i(n,[{key:"setColumns",value:function(){this.setState({columns:this._columns.getValue()})}},{key:"componentWillMount",value:function(){this.props.queries.length&&(this._columns=(0,l.mediaQueryMapper)({queries:this.props.queries,valueKey:"columns",defaultValue:this.props.queries.length?1:this.props.columns,onChange:this.setColumns}),this.setColumns())}},{key:"componentWillUnmount",value:function(){this._columns&&this._columns.removeListeners()}},{key:"renderColumns",value:function(t){var n=this.props,e=n.children,r=n.dimensions;if(1===t)return e;var o=(0,p.default)({children:e,columns:t,dimensions:r});return o.map(function(t,n){return f.default.createElement("div",{key:n,style:v.column},t)})}},{key:"render",value:function(){var t=this.props,n=t.className,e=t.gap,r=void 0===e?0:e,o=this.state.columns,u=void 0===o?this.props.columns:o,i=1===u?{}:{columnCount:u,WebkitColumnCount:u,MozColumnCount:u,columnGap:r,WebkitColumnGap:r,MozColumnGap:r};return f.default.createElement("div",{className:n,style:i},this.renderColumns(u))}}]),n}(c.Component);y.defaultProps={queries:[],columns:3},n.default=y,t.exports=n.default},function(t,n){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children=[],t.webpackPolyfill=1),t}},function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function o(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],n=t.children,e=void 0===n?[]:n,r=t.columns,o=void 0===r?1:r,u=t.dimensions,a=void 0===u?[]:u,f=[],l=[];return 1===o?e:(a.length&&a.length===e.length?((0,c.default)(o,function(t){f[t]=[],l[t]=0}),e.forEach(function(t,n){var e=a[n],r=e.width,o=e.height,u=l.indexOf((0,i.default)(l));f[u].push(t),l[u]+=o/r})):(0,c.default)(o,function(t){f[t]=e.filter(function(n,e){return e%o===t})}),f)}Object.defineProperty(n,"__esModule",{value:!0}),n.default=o;var u=e(6),i=r(u),a=e(7),c=r(a);t.exports=n.default},function(t,n){"use strict";function e(){function t(t){l.queryMatches=t.matches,f(l.queryMatches)}function n(){l._mq.removeListener(t)}var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],r=e.query,u=void 0===r?"":r,i=e.full,a=void 0===i?!1:i,c=e.onChange,f=void 0===c?function(){}:c,l={query:u,full:a,queryMatches:!1,_mq:null};return u?(l.query=a||")"===u[u.length-1]?u:"("+u+")",o[l.query]||(o[l.query]=window.matchMedia(l.query)),l._mq=o[l.query],l.queryMatches=l._mq.matches,l.removeListener=n,l._mq.addListener(t),l):l}function r(){function t(){var t=l;return v.forEach(function(n,e){n.queryMatches&&(t=i[e][c])}),t}function n(n){p(t())}function r(){v.forEach(function(t,n){t.removeListener()})}var o=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],u=o.queries,i=void 0===u?[]:u,a=o.valueKey,c=void 0===a?"value":a,f=o.defaultValue,l=void 0===f?"":f,s=o.onChange,p=void 0===s?function(){}:s,v=i.map(function(t){return e({query:t.query,full:t.full,onChange:n})});return{getValue:t,removeListeners:r}}Object.defineProperty(n,"__esModule",{value:!0});var o={};n.default={mediaQuery:e,mediaQueryMapper:r},t.exports=n.default},function(t,n,e){(function(t,r){function o(t,n){for(var e=-1,r=t.length,o=Array(r);++e<r;)o[e]=n(t[e],e,t);return o}function u(t,n){for(var e=-1,r=t.length;++e<r;)if(n(t[e],e,t))return!0;return!1}function i(t,n){for(var e=-1,r=Array(t);++e<t;)r[e]=n(e);return r}function a(t,n){return o(n,function(n){return[n,t[n]]})}function c(t){return t&&t.Object===Object?t:null}function f(t){var n=!1;if(null!=t&&"function"!=typeof t.toString)try{n=!!(t+"")}catch(e){}return n}function l(t,n){return t="number"==typeof t||sn.test(t)?+t:-1,n=null==n?$t:n,t>-1&&t%1==0&&n>t}function s(t){var n=-1,e=Array(t.size);return t.forEach(function(t,r){e[++n]=[r,t]}),e}function p(t){var n=-1,e=Array(t.size);return t.forEach(function(t){e[++n]=t}),e}function v(){}function y(t,n){return d(t,n)&&delete t[n]}function h(t,n){if(In){var e=t[n];return e===Mt?void 0:e}return Cn.call(t,n)?t[n]:void 0}function d(t,n){return In?void 0!==t[n]:Cn.call(t,n)}function b(t,n,e){t[n]=In&&void 0===e?Mt:e}function m(t){var n=-1,e=t?t.length:0;for(this.clear();++n<e;){var r=t[n];this.set(r[0],r[1])}}function g(){this.__data__={hash:new v,map:Fn?new Fn:[],string:new v}}function _(t){var n=this.__data__;return ot(t)?y("string"==typeof t?n.string:n.hash,t):Fn?n.map.delete(t):P(n.map,t)}function j(t){var n=this.__data__;return ot(t)?h("string"==typeof t?n.string:n.hash,t):Fn?n.map.get(t):S(n.map,t)}function w(t){var n=this.__data__;return ot(t)?d("string"==typeof t?n.string:n.hash,t):Fn?n.map.has(t):$(n.map,t)}function O(t,n){var e=this.__data__;return ot(t)?b("string"==typeof t?e.string:e.hash,t,n):Fn?e.map.set(t,n):F(e.map,t,n),this}function C(t){var n=-1,e=t?t.length:0;for(this.clear();++n<e;){var r=t[n];this.set(r[0],r[1])}}function q(){this.__data__={array:[],map:null}}function x(t){var n=this.__data__,e=n.array;return e?P(e,t):n.map.delete(t)}function k(t){var n=this.__data__,e=n.array;return e?S(e,t):n.map.get(t)}function A(t){var n=this.__data__,e=n.array;return e?$(e,t):n.map.has(t)}function M(t,n){var e=this.__data__,r=e.array;r&&(r.length<At-1?F(r,t,n):(e.array=null,e.map=new m(r)));var o=e.map;return o&&o.set(t,n),this}function P(t,n){var e=E(t,n);if(0>e)return!1;var r=t.length-1;return e==r?t.pop():Pn.call(t,e,1),!0}function S(t,n){var e=E(t,n);return 0>e?void 0:t[e][1]}function $(t,n){return E(t,n)>-1}function E(t,n){for(var e=t.length;e--;)if(ft(t[e][0],n))return e;return-1}function F(t,n,e){var r=E(t,n);0>r?t.push([n,e]):t[r][1]=e}function L(t){return Qn(t)?t:kt(t)}function T(t,n){n=rt(n,t)?[n]:L(n);for(var e=0,r=n.length;null!=t&&r>e;)t=t[n[e++]];return e&&e==r?t:void 0}function W(t,n){return Cn.call(t,n)||"object"==typeof t&&n in t&&null===Z(t)}function I(t,n){return n in Object(t)}function z(t,n,e,r,o){return t===n?!0:null==t||null==n||!ht(t)&&!dt(n)?t!==t&&n!==n:G(t,n,z,e,r,o)}function G(t,n,e,r,o,u){var i=Qn(t),a=Qn(n),c=Ft,l=Ft;i||(c=tt(t),c=c==Et?Ut:c),a||(l=tt(n),l=l==Et?Ut:l);var s=c==Ut&&!f(t),p=l==Ut&&!f(n),v=c==l;if(v&&!s)return u||(u=new C),i||_t(t)?K(t,n,e,r,o,u):H(t,n,c,e,r,o,u);if(!(o&St)){var y=s&&Cn.call(t,"__wrapped__"),h=p&&Cn.call(n,"__wrapped__");if(y||h){var d=y?t.value():t,b=h?n.value():n;return u||(u=new C),e(d,b,r,o,u)}}return v?(u||(u=new C),J(t,n,e,r,o,u)):!1}function R(t,n,e,r){var o=e.length,u=o,i=!r;if(null==t)return!u;for(t=Object(t);o--;){var a=e[o];if(i&&a[2]?a[1]!==t[a[0]]:!(a[0]in t))return!1}for(;++o<u;){a=e[o];var c=a[0],f=t[c],l=a[1];if(i&&a[2]){if(void 0===f&&!(c in t))return!1}else{var s=new C;if(r)var p=r(f,l,c,t,n,s);if(!(void 0===p?z(l,f,r,Pt|St,s):p))return!1}}return!0}function U(t){return"function"==typeof t?t:null==t?qt:"object"==typeof t?Qn(t)?B(t[0],t[1]):N(t):xt(t)}function V(t){return $n(Object(t))}function N(t){var n=X(t);return 1==n.length&&n[0][2]?at(n[0][0],n[0][1]):function(e){return e===t||R(e,t,n)}}function B(t,n){return rt(t)&&it(n)?at(t,n):function(e){var r=jt(e,t);return void 0===r&&r===n?wt(e,t):z(n,r,void 0,Pt|St)}}function D(t){return function(n){return null==n?void 0:n[t]}}function Q(t){return function(n){return T(n,t)}}function K(t,n,e,r,o,i){var a=-1,c=o&St,f=o&Pt,l=t.length,s=n.length;if(l!=s&&!(c&&s>l))return!1;var p=i.get(t);if(p)return p==n;var v=!0;for(i.set(t,n);++a<l;){var y=t[a],h=n[a];if(r)var d=c?r(h,y,a,n,t,i):r(y,h,a,t,n,i);if(void 0!==d){if(d)continue;v=!1;break}if(f){if(!u(n,function(t){return y===t||e(y,t,r,o,i)})){v=!1;break}}else if(y!==h&&!e(y,h,r,o,i)){v=!1;break}}return i.delete(t),v}function H(t,n,e,r,o,u,i){switch(e){case Jt:if(t.byteLength!=n.byteLength||t.byteOffset!=n.byteOffset)return!1;t=t.buffer,n=n.buffer;case Ht:return!(t.byteLength!=n.byteLength||!r(new An(t),new An(n)));case Lt:case Tt:return+t==+n;case Wt:return t.name==n.name&&t.message==n.message;case Rt:return t!=+t?n!=+n:t==+n;case Nt:case Dt:return t==n+"";case Gt:var a=s;case Bt:var c=u&St;if(a||(a=p),t.size!=n.size&&!c)return!1;var f=i.get(t);return f?f==n:(u|=Pt,i.set(t,n),K(a(t),a(n),r,o,u,i));case Qt:if(Bn)return Bn.call(t)==Bn.call(n)}return!1}function J(t,n,e,r,o,u){var i=o&St,a=Ot(t),c=a.length,f=Ot(n),l=f.length;if(c!=l&&!i)return!1;for(var s=c;s--;){var p=a[s];if(!(i?p in n:W(n,p)))return!1}var v=u.get(t);if(v)return v==n;var y=!0;u.set(t,n);for(var h=i;++s<c;){p=a[s];var d=t[p],b=n[p];if(r)var m=i?r(b,d,p,n,t,u):r(d,b,p,t,n,u);if(!(void 0===m?d===b||e(d,b,r,o,u):m)){y=!1;break}h||(h="constructor"==p)}if(y&&!h){var g=t.constructor,_=n.constructor;g!=_&&"constructor"in t&&"constructor"in n&&!("function"==typeof g&&g instanceof g&&"function"==typeof _&&_ instanceof _)&&(y=!1)}return u.delete(t),y}function X(t){for(var n=Ct(t),e=n.length;e--;)n[e][2]=it(n[e][1]);return n}function Y(t,n){var e=t[n];return bt(e)?e:void 0}function Z(t){return Sn(Object(t))}function tt(t){return qn.call(t)}function nt(t,n,e){n=rt(n,t)?[n]:L(n);for(var r,o=-1,u=n.length;++o<u;){var i=n[o];if(!(r=null!=t&&e(t,i)))break;t=t[i]}if(r)return r;var u=t?t.length:0;return!!u&&yt(u)&&l(i,u)&&(Qn(t)||mt(t)||lt(t))}function et(t){var n=t?t.length:void 0;return yt(n)&&(Qn(t)||mt(t)||lt(t))?i(n,String):null}function rt(t,n){var e=typeof t;return"number"==e||"symbol"==e?!0:!Qn(t)&&(gt(t)||cn.test(t)||!an.test(t)||null!=n&&t in Object(n))}function ot(t){var n=typeof t;return"number"==n||"boolean"==n||"string"==n&&"__proto__"!=t||null==t}function ut(t){var n=t&&t.constructor,e="function"==typeof n&&n.prototype||wn;return t===e}function it(t){return t===t&&!ht(t)}function at(t,n){return function(e){return null==e?!1:e[t]===n&&(void 0!==n||t in Object(e))}}function ct(t){if(null!=t){try{return On.call(t)}catch(n){}try{return t+""}catch(n){}}return""}function ft(t,n){return t===n||t!==t&&n!==n}function lt(t){return pt(t)&&Cn.call(t,"callee")&&(!Mn.call(t,"callee")||qn.call(t)==Et)}function st(t){return null!=t&&yt(Dn(t))&&!vt(t)}function pt(t){return dt(t)&&st(t)}function vt(t){var n=ht(t)?qn.call(t):"";return n==It||n==zt}function yt(t){return"number"==typeof t&&t>-1&&t%1==0&&$t>=t}function ht(t){var n=typeof t;return!!t&&("object"==n||"function"==n)}function dt(t){return!!t&&"object"==typeof t}function bt(t){if(!ht(t))return!1;var n=vt(t)||f(t)?xn:ln;return n.test(ct(t))}function mt(t){return"string"==typeof t||!Qn(t)&&dt(t)&&qn.call(t)==Dt}function gt(t){return"symbol"==typeof t||dt(t)&&qn.call(t)==Qt}function _t(t){return dt(t)&&yt(t.length)&&!!pn[qn.call(t)]}function jt(t,n,e){var r=null==t?void 0:T(t,n);return void 0===r?e:r}function wt(t,n){return null!=t&&nt(t,n,I)}function Ot(t){var n=ut(t);if(!n&&!st(t))return V(t);var e=et(t),r=!!e,o=e||[],u=o.length;for(var i in t)!W(t,i)||r&&("length"==i||l(i,u))||n&&"constructor"==i||o.push(i);return o}function Ct(t){return a(t,Ot(t))}function qt(t){return t}function xt(t){return rt(t)?D(t):Q(t)}var kt=e(5),At=200,Mt="__lodash_hash_undefined__",Pt=1,St=2,$t=9007199254740991,Et="[object Arguments]",Ft="[object Array]",Lt="[object Boolean]",Tt="[object Date]",Wt="[object Error]",It="[object Function]",zt="[object GeneratorFunction]",Gt="[object Map]",Rt="[object Number]",Ut="[object Object]",Vt="[object Promise]",Nt="[object RegExp]",Bt="[object Set]",Dt="[object String]",Qt="[object Symbol]",Kt="[object WeakMap]",Ht="[object ArrayBuffer]",Jt="[object DataView]",Xt="[object Float32Array]",Yt="[object Float64Array]",Zt="[object Int8Array]",tn="[object Int16Array]",nn="[object Int32Array]",en="[object Uint8Array]",rn="[object Uint8ClampedArray]",on="[object Uint16Array]",un="[object Uint32Array]",an=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,cn=/^\w*$/,fn=/[\\^$.*+?()[\]{}|]/g,ln=/^\[object .+?Constructor\]$/,sn=/^(?:0|[1-9]\d*)$/,pn={};pn[Xt]=pn[Yt]=pn[Zt]=pn[tn]=pn[nn]=pn[en]=pn[rn]=pn[on]=pn[un]=!0,pn[Et]=pn[Ft]=pn[Ht]=pn[Lt]=pn[Jt]=pn[Tt]=pn[Wt]=pn[It]=pn[Gt]=pn[Rt]=pn[Ut]=pn[Nt]=pn[Bt]=pn[Dt]=pn[Kt]=!1;var vn={"function":!0,object:!0},yn=vn[typeof n]&&n&&!n.nodeType?n:void 0,hn=vn[typeof t]&&t&&!t.nodeType?t:void 0,dn=c(yn&&hn&&"object"==typeof r&&r),bn=c(vn[typeof self]&&self),mn=c(vn[typeof window]&&window),gn=c(vn[typeof this]&&this),_n=dn||mn!==(gn&&gn.window)&&mn||bn||gn||Function("return this")(),jn=Array.prototype,wn=Object.prototype,On=Function.prototype.toString,Cn=wn.hasOwnProperty,qn=wn.toString,xn=RegExp("^"+On.call(Cn).replace(fn,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),kn=_n.Symbol,An=_n.Uint8Array,Mn=wn.propertyIsEnumerable,Pn=jn.splice,Sn=Object.getPrototypeOf,$n=Object.keys,En=Y(_n,"DataView"),Fn=Y(_n,"Map"),Ln=Y(_n,"Promise"),Tn=Y(_n,"Set"),Wn=Y(_n,"WeakMap"),In=Y(Object,"create"),zn=ct(En),Gn=ct(Fn),Rn=ct(Ln),Un=ct(Tn),Vn=ct(Wn),Nn=kn?kn.prototype:void 0,Bn=Nn?Nn.valueOf:void 0;v.prototype=In?In(null):wn,m.prototype.clear=g,m.prototype.delete=_,m.prototype.get=j,m.prototype.has=w,m.prototype.set=O,C.prototype.clear=q,C.prototype.delete=x,C.prototype.get=k,C.prototype.has=A,C.prototype.set=M;var Dn=D("length");(En&&tt(new En(new ArrayBuffer(1)))!=Jt||Fn&&tt(new Fn)!=Gt||Ln&&tt(Ln.resolve())!=Vt||Tn&&tt(new Tn)!=Bt||Wn&&tt(new Wn)!=Kt)&&(tt=function(t){var n=qn.call(t),e=n==Ut?t.constructor:void 0,r=e?ct(e):void 0;if(r)switch(r){case zn:return Jt;case Gn:return Gt;case Rn:return Vt;case Un:return Bt;case Vn:return Kt}return n});var Qn=Array.isArray;t.exports=U}).call(n,e(1)(t),function(){return this}())},function(t,n,e){(function(t,e){function r(t){return t&&t.Object===Object?t:null}function o(t){var n=!1;if(null!=t&&"function"!=typeof t.toString)try{n=!!(t+"")}catch(e){}return n}function u(){}function i(t,n){return c(t,n)&&delete t[n]}function a(t,n){if(ut){var e=t[n];return e===E?void 0:e}return Z.call(t,n)?t[n]:void 0}function c(t,n){return ut?void 0!==t[n]:Z.call(t,n)}function f(t,n,e){t[n]=ut&&void 0===e?E:e}function l(t){var n=-1,e=t?t.length:0;for(this.clear();++n<e;){var r=t[n];this.set(r[0],r[1])}}function s(){this.__data__={hash:new u,map:ot?new ot:[],string:new u}}function p(t){var n=this.__data__;return w(t)?i("string"==typeof t?n.string:n.hash,t):ot?n.map.delete(t):d(n.map,t)}function v(t){var n=this.__data__;return w(t)?a("string"==typeof t?n.string:n.hash,t):ot?n.map.get(t):b(n.map,t)}function y(t){var n=this.__data__;return w(t)?c("string"==typeof t?n.string:n.hash,t):ot?n.map.has(t):m(n.map,t)}function h(t,n){var e=this.__data__;return w(t)?f("string"==typeof t?e.string:e.hash,t,n):ot?e.map.set(t,n):_(e.map,t,n),this}function d(t,n){var e=g(t,n);if(0>e)return!1;var r=t.length-1;return e==r?t.pop():rt.call(t,e,1),!0}function b(t,n){var e=g(t,n);return 0>e?void 0:t[e][1]}function m(t,n){return g(t,n)>-1}function g(t,n){for(var e=t.length;e--;)if(q(t[e][0],n))return e;return-1}function _(t,n,e){var r=g(t,n);0>r?t.push([n,e]):t[r][1]=e}function j(t,n){var e=t[n];return M(e)?e:void 0}function w(t){var n=typeof t;return"number"==n||"boolean"==n||"string"==n&&"__proto__"!=t||null==t}function O(t){if(null!=t){try{return Y.call(t)}catch(n){}try{return t+""}catch(n){}}return""}function C(t,n){if("function"!=typeof t||n&&"function"!=typeof n)throw new TypeError($);var e=function(){var r=arguments,o=n?n.apply(this,r):r[0],u=e.cache;if(u.has(o))return u.get(o);var i=t.apply(this,r);return e.cache=u.set(o,i),i};return e.cache=new(C.Cache||l),e}function q(t,n){return t===n||t!==t&&n!==n}function x(t){var n=k(t)?tt.call(t):"";return n==L||n==T}function k(t){var n=typeof t;return!!t&&("object"==n||"function"==n)}function A(t){return!!t&&"object"==typeof t}function M(t){if(!k(t))return!1;var n=x(t)||o(t)?nt:R;return n.test(O(t))}function P(t){return"symbol"==typeof t||A(t)&&tt.call(t)==W}function S(t){if("string"==typeof t)return t;if(null==t)return"";if(P(t))return at?at.call(t):"";var n=t+"";return"0"==n&&1/t==-F?"-0":n}var $="Expected a function",E="__lodash_hash_undefined__",F=1/0,L="[object Function]",T="[object GeneratorFunction]",W="[object Symbol]",I=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]/g,z=/[\\^$.*+?()[\]{}|]/g,G=/\\(\\)?/g,R=/^\[object .+?Constructor\]$/,U={"function":!0,object:!0},V=U[typeof n]&&n&&!n.nodeType?n:void 0,N=U[typeof t]&&t&&!t.nodeType?t:void 0,B=r(V&&N&&"object"==typeof e&&e),D=r(U[typeof self]&&self),Q=r(U[typeof window]&&window),K=r(U[typeof this]&&this),H=B||Q!==(K&&K.window)&&Q||D||K||Function("return this")(),J=Array.prototype,X=Object.prototype,Y=Function.prototype.toString,Z=X.hasOwnProperty,tt=X.toString,nt=RegExp("^"+Y.call(Z).replace(z,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),et=H.Symbol,rt=J.splice,ot=j(H,"Map"),ut=j(Object,"create"),it=et?et.prototype:void 0,at=it?it.toString:void 0;u.prototype=ut?ut(null):X,l.prototype.clear=s,l.prototype.delete=p,l.prototype.get=v,l.prototype.has=y,l.prototype.set=h;var ct=C(function(t){var n=[];return S(t).replace(I,function(t,e,r,o){n.push(r?o.replace(G,"$1"):e||t)}),n});C.Cache=l,t.exports=ct}).call(n,e(1)(t),function(){return this}())},function(t,n){function e(t,n,e){for(var r=-1,o=t.length;++r<o;){var u=t[r],i=n(u);if(null!=i&&(void 0===a?i===i:e(i,a)))var a=i,c=u}return c}function r(t,n){return n>t}function o(t){return t}function u(t){return t&&t.length?e(t,o,r):void 0}t.exports=u},function(t,n,e){function r(t,n){for(var e=-1,r=Array(t);++e<t;)r[e]=n(e);return r}function o(t){var n=u(t)?x.call(t):"";return n==b||n==m}function u(t){var n=typeof t;return!!t&&("object"==n||"function"==n)}function i(t){return!!t&&"object"==typeof t}function a(t){return"symbol"==typeof t||i(t)&&x.call(t)==g}function c(t){if(!t)return 0===t?t:0;if(t=f(t),t===p||t===-p){var n=0>t?-1:1;return n*y}var e=t%1;return t===t?e?t-e:t:0}function f(t){if("number"==typeof t)return t;if(a(t))return h;if(u(t)){var n=o(t.valueOf)?t.valueOf():t;t=u(n)?n+"":n}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(_,"");var e=w.test(t);return e||O.test(t)?C(t.slice(2),e?2:8):j.test(t)?h:+t}function l(t,n){if(t=c(t),1>t||t>v)return[];var e=d,o=k(t,d);n=s(n),t-=d;for(var u=r(o,n);++e<t;)n(e);return u}var s=e(4),p=1/0,v=9007199254740991,y=1.7976931348623157e308,h=NaN,d=4294967295,b="[object Function]",m="[object GeneratorFunction]",g="[object Symbol]",_=/^\s+|\s+$/g,j=/^[-+]0x[0-9a-f]+$/i,w=/^0b[01]+$/i,O=/^0o[0-7]+$/i,C=parseInt,q=Object.prototype,x=q.toString,k=Math.min;t.exports=l},function(n,e){n.exports=t}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactColumns=t(require("react")):e.ReactColumns=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e,t,n){for(var r=!0;r;){var o=e,u=t,i=n;r=!1,null===o&&(o=Function.prototype);var s=Object.getOwnPropertyDescriptor(o,u);if(void 0!==s){if("value"in s)return s.value;var l=s.get;if(void 0===l)return;return l.call(i)}var a=Object.getPrototypeOf(o);if(null===a)return;e=a,t=u,n=i,r=!0,s=a=void 0}},l=n(4),a=r(l),c=n(2),f=n(1),p=r(f),d=function(e){function t(e){o(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.setColumns=this.setColumns.bind(this),this.state={}}return u(t,e),i(t,[{key:"setColumns",value:function(){this.setState({columns:this._columns.getValue()})}},{key:"componentWillMount",value:function(){this.props.queries.length&&(this._columns=(0,c.mediaQueryMapper)({queries:this.props.queries,valueKey:"columns",defaultValue:this.props.queries.length?1:this.props.columns,onChange:this.setColumns}),this.setColumns())}},{key:"componentWillUnmount",value:function(){this._columns&&this._columns.removeListeners()}},{key:"renderColumns",value:function(e){var t=this.props,n=t.children,r=t.dimensions,o=t.gap,u={boxSizing:"border-box","float":"left",width:"calc(1 / "+e+" * 100%)",paddingLeft:o,paddingRight:o},i=n;if(e>1){var s=(0,p.default)({children:n,columns:e,dimensions:r});i=s.map(function(e,t){return a.default.createElement("div",{key:t,style:u},e)})}return i}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.gap,r=e.rootStyles,o=this.state.columns,u=void 0===o?this.props.columns:o,i=1===u?{}:{marginLeft:"calc("+n+" * -1)",marginRight:"calc("+n+" * -1)"};return a.default.createElement("div",{className:t,style:r},a.default.createElement("div",{style:i},this.renderColumns(u),a.default.createElement("div",{style:{clear:"both"}})))}}]),t}(l.Component);d.defaultProps={className:"",rootStyles:{overflowX:"hidden"},queries:[],columns:3,gap:0},d.propTypes={className:l.PropTypes.string,rootStyles:l.PropTypes.object,queries:l.PropTypes.array,columns:l.PropTypes.number,gap:l.PropTypes.string},t.default=d,e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function o(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],t=e.children,n=void 0===t?[]:t,r=e.columns,o=void 0===r?1:r,u=e.dimensions,s=void 0===u?[]:u,l=[],a=[];if(1===o)return n;if(s.length&&s.length===n.length){for(var c=0;o>c;c++)l[c]=[],a[c]=0;n.forEach(function(e,t){var n=s[t],r=n.width,o=n.height,u=a.indexOf((0,i.default)(a));l[u].push(e),a[u]+=o/r})}else for(var f=function(e){l[e]=n.filter(function(t,n){return n%o===e})},c=0;o>c;c++)f(c);return l}Object.defineProperty(t,"__esModule",{value:!0}),t.default=o;var u=n(3),i=r(u);e.exports=t.default},function(e,t){"use strict";function n(){function e(e){c.queryMatches=e.matches,a(c.queryMatches)}function t(){c._mq.removeListener(e)}var n=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],r=n.query,u=void 0===r?"":r,i=n.full,s=void 0===i?!1:i,l=n.onChange,a=void 0===l?function(){}:l,c={query:u,full:s,queryMatches:!1,_mq:null};return u?(c.query=s||")"===u[u.length-1]?u:"("+u+")",o[c.query]||(o[c.query]=window.matchMedia(c.query)),c._mq=o[c.query],c.queryMatches=c._mq.matches,c.removeListener=t,c._mq.addListener(e),c):c}function r(){function e(){var e=c;return d.forEach(function(t,n){t.queryMatches&&(e=i[n][l])}),e}function t(t){p(e())}function r(){d.forEach(function(e,t){e.removeListener()})}var o=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],u=o.queries,i=void 0===u?[]:u,s=o.valueKey,l=void 0===s?"value":s,a=o.defaultValue,c=void 0===a?"":a,f=o.onChange,p=void 0===f?function(){}:f,d=i.map(function(e){return n({query:e.query,full:e.full,onChange:t})});return{getValue:e,removeListeners:r}}Object.defineProperty(t,"__esModule",{value:!0});var o={};t.default={mediaQuery:n,mediaQueryMapper:r},e.exports=t.default},function(e,t){function n(e,t,n){for(var r=-1,o=e.length;++r<o;){var u=e[r],i=t(u);if(null!=i&&(void 0===s?i===i:n(i,s)))var s=i,l=u}return l}function r(e,t){return t>e}function o(e){return e}function u(e){return e&&e.length?n(e,o,r):void 0}e.exports=u},function(t,n){t.exports=e}])});
 //# sourceMappingURL=react-columns.min.js.map

New alerts

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

-33.33%

Number of lines in readme file

175

19.05%

Number of medium supply chain risk alerts

1

-75%

Worsened metrics

Total package byte prevSize

82248

-78.18%

Lines of code

920

-75.42%

Dependency changes

• - Removed

  lodash.times@^4.1.0

• - Removed

  lodash.times@4.3.2
  (transitive)