You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-columns

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-columns - npm Package Compare versions

Comparing version

0.2.2
to
1.0.0

es/index.js
es/mapNodesToColumns.js
es/mq.js

8

CHANGELOG.md

@@ -12,2 +12,8 @@ # Changelog

## v1.0.0 (January 07, 2017)
- **New Feature**
- [#7](https://github.com/novascreen/react-columns/pull/7) Enable server side rendering (thanks to [@olapersson](https://github.com/olapersson))
- **Internal**
- Update dependencies
## v0.2.2 (May 30, 2016)

@@ -45,2 +51,2 @@ - **Bug Fix**

First public release.
First public release.

181

lib/index.js
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
exports.__esModule = true;
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 _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
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 _react = require('react');

@@ -27,3 +15,11 @@

var Columns = (function (_Component) {
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
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 Columns = function (_Component) {
_inherits(Columns, _Component);

@@ -34,94 +30,89 @@

_get(Object.getPrototypeOf(Columns.prototype), 'constructor', this).call(this, props);
this.setColumns = this.setColumns.bind(this);
this.state = {};
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.setColumns = _this.setColumns.bind(_this);
_this.state = {};
return _this;
}
_createClass(Columns, [{
key: 'setColumns',
value: function setColumns() {
this.setState({
columns: this._columns.getValue()
Columns.prototype.setColumns = function setColumns() {
this.setState({
columns: this._columns.getValue()
});
};
Columns.prototype.componentDidMount = function componentDidMount() {
if (this.props.queries.length) {
this._columns = (0, _mq.mediaQueryMapper)({
queries: this.props.queries,
valueKey: 'columns',
defaultValue: this.props.queries.length ? 1 : this.props.columns,
onChange: this.setColumns
});
this.setColumns();
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
if (this.props.queries.length) {
this._columns = (0, _mq.mediaQueryMapper)({
queries: this.props.queries,
valueKey: 'columns',
defaultValue: this.props.queries.length ? 1 : this.props.columns,
onChange: this.setColumns
});
this.setColumns();
}
};
Columns.prototype.componentWillUnmount = function componentWillUnmount() {
if (this._columns) {
this._columns.removeListeners();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this._columns) {
this._columns.removeListeners();
}
}
}, {
key: 'renderColumns',
value: function renderColumns(columns) {
var _props = this.props;
var children = _props.children;
var dimensions = _props.dimensions;
var gap = _props.gap;
};
var columnStyles = {
boxSizing: 'border-box',
float: 'left',
width: 1 / columns * 100 + '%',
paddingLeft: gap,
paddingRight: gap
};
var renderedColumns = children;
Columns.prototype.renderColumns = function renderColumns(columns) {
var _props = this.props,
children = _props.children,
dimensions = _props.dimensions,
gap = _props.gap;
if (columns > 1) {
var columnsContainers = (0, _mapNodesToColumns2['default'])({ children: children, columns: columns, dimensions: dimensions });
renderedColumns = columnsContainers.map(function (column, i) {
return _react2['default'].createElement(
'div',
{ key: i, style: columnStyles },
column
);
});
}
var columnStyles = {
boxSizing: 'border-box',
float: 'left',
width: 1 / columns * 100 + '%',
paddingLeft: gap,
paddingRight: gap
};
var renderedColumns = children;
return renderedColumns;
if (columns > 1) {
var columnsContainers = (0, _mapNodesToColumns2.default)({ children: children, columns: columns, dimensions: dimensions });
renderedColumns = columnsContainers.map(function (column, i) {
return _react2.default.createElement(
'div',
{ key: i, style: columnStyles },
column
);
});
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props;
var className = _props2.className;
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 rowStyles = columns === 1 ? {} : {
marginLeft: 'calc(' + gap + ' * -1)',
marginRight: 'calc(' + gap + ' * -1)'
};
return renderedColumns;
};
return _react2['default'].createElement(
Columns.prototype.render = function render() {
var _props2 = this.props,
className = _props2.className,
gap = _props2.gap,
rootStyles = _props2.rootStyles;
var _state$columns = this.state.columns,
columns = _state$columns === undefined ? this.props.columns : _state$columns;
var rowStyles = columns === 1 ? {} : {
marginLeft: 'calc(' + gap + ' * -1)',
marginRight: 'calc(' + gap + ' * -1)'
};
return _react2.default.createElement(
'div',
{ className: className, style: rootStyles },
_react2.default.createElement(
'div',
{ className: className, style: rootStyles },
_react2['default'].createElement(
'div',
{ style: rowStyles },
this.renderColumns(columns),
_react2['default'].createElement('div', { style: { clear: 'both' } })
)
);
}
}]);
{ style: rowStyles },
this.renderColumns(columns),
_react2.default.createElement('div', { style: { clear: 'both' } })
)
);
};
return Columns;
})(_react.Component);
}(_react.Component);

@@ -138,3 +129,3 @@ Columns.defaultProps = {

Columns.propTypes = {
process.env.NODE_ENV !== "production" ? Columns.propTypes = {
className: _react.PropTypes.string,

@@ -145,5 +136,5 @@ rootStyles: _react.PropTypes.object,

gap: _react.PropTypes.string
};
} : void 0;
exports['default'] = Columns;
exports.default = Columns;
module.exports = exports['default'];

46

lib/mapNodesToColumns.js
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
exports['default'] = mapNodesToColumns;
exports.__esModule = true;
exports.default = mapNodesToColumns;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _lodash = require('lodash.min');
var _lodashMin = require('lodash.min');
var _lodash2 = _interopRequireDefault(_lodash);
var _lodashMin2 = _interopRequireDefault(_lodashMin);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function mapNodesToColumns() {
var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$children = _ref.children,
children = _ref$children === undefined ? [] : _ref$children,
_ref$columns = _ref.columns,
columns = _ref$columns === undefined ? 1 : _ref$columns,
_ref$dimensions = _ref.dimensions,
dimensions = _ref$dimensions === undefined ? [] : _ref$dimensions;
var _ref$children = _ref.children;
var children = _ref$children === undefined ? [] : _ref$children;
var _ref$columns = _ref.columns;
var columns = _ref$columns === undefined ? 1 : _ref$columns;
var _ref$dimensions = _ref.dimensions;
var dimensions = _ref$dimensions === undefined ? [] : _ref$dimensions;
var nodes = [];

@@ -38,7 +35,7 @@ var heights = [];

children.forEach(function (child, i) {
var _dimensions$i = dimensions[i];
var width = _dimensions$i.width;
var height = _dimensions$i.height;
var _dimensions$i = dimensions[i],
width = _dimensions$i.width,
height = _dimensions$i.height;
var index = heights.indexOf((0, _lodashMin2['default'])(heights));
var index = heights.indexOf((0, _lodash2.default)(heights));
nodes[index].push(child);

@@ -50,10 +47,10 @@ heights[index] += height / width;

else {
var _loop = function (i) {
nodes[i] = children.filter(function (child, j) {
return j % columns === i;
var _loop = function _loop(_i) {
nodes[_i] = children.filter(function (child, j) {
return j % columns === _i;
});
};
for (var i = 0; i < columns; i++) {
_loop(i);
for (var _i = 0; _i < columns; _i++) {
_loop(_i);
}

@@ -64,3 +61,2 @@ }

}
module.exports = exports['default'];

45

lib/mq.js
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
exports.__esModule = true;
exports.mediaQuery = mediaQuery;
exports.mediaQueryMapper = mediaQueryMapper;
var mediaQueries = {};
function mediaQuery() {
var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$query = _ref.query,
query = _ref$query === undefined ? '' : _ref$query,
_ref$full = _ref.full,
full = _ref$full === undefined ? false : _ref$full,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === undefined ? function () {} : _ref$onChange;
var _ref$query = _ref.query;
var query = _ref$query === undefined ? '' : _ref$query;
var _ref$full = _ref.full;
var full = _ref$full === undefined ? false : _ref$full;
var _ref$onChange = _ref.onChange;
var onChange = _ref$onChange === undefined ? function () {} : _ref$onChange;
var result = {

@@ -51,13 +50,12 @@ query: query,

function mediaQueryMapper() {
var _ref2 = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$queries = _ref2.queries,
queries = _ref2$queries === undefined ? [] : _ref2$queries,
_ref2$valueKey = _ref2.valueKey,
valueKey = _ref2$valueKey === undefined ? 'value' : _ref2$valueKey,
_ref2$defaultValue = _ref2.defaultValue,
defaultValue = _ref2$defaultValue === undefined ? '' : _ref2$defaultValue,
_ref2$onChange = _ref2.onChange,
onChange = _ref2$onChange === undefined ? function () {} : _ref2$onChange;
var _ref2$queries = _ref2.queries;
var queries = _ref2$queries === undefined ? [] : _ref2$queries;
var _ref2$valueKey = _ref2.valueKey;
var valueKey = _ref2$valueKey === undefined ? 'value' : _ref2$valueKey;
var _ref2$defaultValue = _ref2.defaultValue;
var defaultValue = _ref2$defaultValue === undefined ? '' : _ref2$defaultValue;
var _ref2$onChange = _ref2.onChange;
var onChange = _ref2$onChange === undefined ? function () {} : _ref2$onChange;
var mQs = queries.map(function (query) {

@@ -92,5 +90,2 @@ return mediaQuery({

return { getValue: getValue, removeListeners: removeListeners };
}
exports['default'] = { mediaQuery: mediaQuery, mediaQueryMapper: mediaQueryMapper };
module.exports = exports['default'];
}

0

LICENSE.md

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

30

package.json
{
"name": "react-columns",
"version": "0.2.2",
"version": "1.0.0",
"description": "React component for rendering columns from a list of children with horizontal ordering",

@@ -9,3 +9,3 @@ "main": "lib/index.js",

"css",
"es6",
"es",
"lib",

@@ -15,22 +15,22 @@ "umd"

"scripts": {
"build": "nwb build",
"clean": "nwb clean",
"start": "nwb serve",
"test": "nwb test",
"test:watch": "nwb test --server",
"build": "nwb build-react-component",
"clean": "nwb clean-module && npm clean-demo",
"start": "nwb serve-react-demo",
"test": "nwb test-react",
"test:coverage": "nwb test-react --coverage",
"test:watch": "nwb test-react --server",
"deploy": "gh-pages -d demo/dist"
},
"dependencies": {
"lodash.min": "^4.0.0"
"lodash.min": "^4.0.1"
},
"peerDependencies": {
"react": "0.14.x"
"react": "15.x"
},
"devDependencies": {
"gh-pages": "^0.11.0",
"lodash.random": "^3.1.4",
"lodash.range": "^3.1.4",
"nwb": "0.9.x",
"react": "0.14.x",
"react-dom": "0.14.x",
"lodash.random": "^3.2.0",
"lodash.range": "^3.2.0",
"nwb": "0.13.x",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-lorem-image": "^1.3.0"

@@ -37,0 +37,0 @@ },

396

umd/react-columns.js
/*!
* react-columns 0.2.2 - http://novascreen.github.io/react-columns/
* react-columns v1.0.0 - http://novascreen.github.io/react-columns/
* MIT Licensed

@@ -14,3 +14,3 @@ */

root["ReactColumns"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_4__) {
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
return /******/ (function(modules) { // webpackBootstrap

@@ -62,29 +62,33 @@ /******/ // The module cache

module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
exports.__esModule = true;
var _jsxFileName = 'D:\\Repos\\github\\novascreen\\react-columns\\src\\index.js';
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 _react = __webpack_require__(2);
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _mq = __webpack_require__(3);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var _mapNodesToColumns = __webpack_require__(4);
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 _mapNodesToColumns2 = _interopRequireDefault(_mapNodesToColumns);
var _react = __webpack_require__(4);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _react2 = _interopRequireDefault(_react);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _mq = __webpack_require__(2);
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
var _mapNodesToColumns = __webpack_require__(1);
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 _mapNodesToColumns2 = _interopRequireDefault(_mapNodesToColumns);
var Columns = (function (_Component) {
var Columns = function (_Component) {
_inherits(Columns, _Component);

@@ -95,94 +99,111 @@

_get(Object.getPrototypeOf(Columns.prototype), 'constructor', this).call(this, props);
this.setColumns = this.setColumns.bind(this);
this.state = {};
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.setColumns = _this.setColumns.bind(_this);
_this.state = {};
return _this;
}
_createClass(Columns, [{
key: 'setColumns',
value: function setColumns() {
this.setState({
columns: this._columns.getValue()
Columns.prototype.setColumns = function setColumns() {
this.setState({
columns: this._columns.getValue()
});
};
Columns.prototype.componentDidMount = function componentDidMount() {
if (this.props.queries.length) {
this._columns = (0, _mq.mediaQueryMapper)({
queries: this.props.queries,
valueKey: 'columns',
defaultValue: this.props.queries.length ? 1 : this.props.columns,
onChange: this.setColumns
});
this.setColumns();
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
if (this.props.queries.length) {
this._columns = (0, _mq.mediaQueryMapper)({
queries: this.props.queries,
valueKey: 'columns',
defaultValue: this.props.queries.length ? 1 : this.props.columns,
onChange: this.setColumns
});
this.setColumns();
}
};
Columns.prototype.componentWillUnmount = function componentWillUnmount() {
if (this._columns) {
this._columns.removeListeners();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this._columns) {
this._columns.removeListeners();
}
}
}, {
key: 'renderColumns',
value: function renderColumns(columns) {
var _props = this.props;
var children = _props.children;
var dimensions = _props.dimensions;
var gap = _props.gap;
};
var columnStyles = {
boxSizing: 'border-box',
float: 'left',
width: 1 / columns * 100 + '%',
paddingLeft: gap,
paddingRight: gap
};
var renderedColumns = children;
Columns.prototype.renderColumns = function renderColumns(columns) {
var _this2 = this;
if (columns > 1) {
var columnsContainers = (0, _mapNodesToColumns2['default'])({ children: children, columns: columns, dimensions: dimensions });
renderedColumns = columnsContainers.map(function (column, i) {
return _react2['default'].createElement(
'div',
{ key: i, style: columnStyles },
column
);
});
}
var _props = this.props,
children = _props.children,
dimensions = _props.dimensions,
gap = _props.gap;
return renderedColumns;
var columnStyles = {
boxSizing: 'border-box',
float: 'left',
width: 1 / columns * 100 + '%',
paddingLeft: gap,
paddingRight: gap
};
var renderedColumns = children;
if (columns > 1) {
var columnsContainers = (0, _mapNodesToColumns2.default)({ children: children, columns: columns, dimensions: dimensions });
renderedColumns = columnsContainers.map(function (column, i) {
return _react2.default.createElement(
'div',
{ key: i, style: columnStyles, __source: {
fileName: _jsxFileName,
lineNumber: 50
},
__self: _this2
},
column
);
});
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props;
var className = _props2.className;
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 rowStyles = columns === 1 ? {} : {
marginLeft: 'calc(' + gap + ' * -1)',
marginRight: 'calc(' + gap + ' * -1)'
};
return renderedColumns;
};
return _react2['default'].createElement(
Columns.prototype.render = function render() {
var _props2 = this.props,
className = _props2.className,
gap = _props2.gap,
rootStyles = _props2.rootStyles;
var _state$columns = this.state.columns,
columns = _state$columns === undefined ? this.props.columns : _state$columns;
var rowStyles = columns === 1 ? {} : {
marginLeft: 'calc(' + gap + ' * -1)',
marginRight: 'calc(' + gap + ' * -1)'
};
return _react2.default.createElement(
'div',
{ className: className, style: rootStyles, __source: {
fileName: _jsxFileName,
lineNumber: 66
},
__self: this
},
_react2.default.createElement(
'div',
{ className: className, style: rootStyles },
_react2['default'].createElement(
'div',
{ style: rowStyles },
this.renderColumns(columns),
_react2['default'].createElement('div', { style: { clear: 'both' } })
)
);
}
}]);
{ style: rowStyles, __source: {
fileName: _jsxFileName,
lineNumber: 67
},
__self: this
},
this.renderColumns(columns),
_react2.default.createElement('div', { style: { clear: 'both' }, __source: {
fileName: _jsxFileName,
lineNumber: 69
},
__self: this
})
)
);
};
return Columns;
})(_react.Component);
}(_react.Component);

@@ -207,75 +228,12 @@ Columns.defaultProps = {

exports['default'] = Columns;
module.exports = exports['default'];
exports.default = Columns;
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
/* 2 */
/***/ function(module, exports) {
'use strict';
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
Object.defineProperty(exports, '__esModule', {
value: true
});
exports['default'] = mapNodesToColumns;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _lodashMin = __webpack_require__(3);
var _lodashMin2 = _interopRequireDefault(_lodashMin);
function mapNodesToColumns() {
var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var _ref$children = _ref.children;
var children = _ref$children === undefined ? [] : _ref$children;
var _ref$columns = _ref.columns;
var columns = _ref$columns === undefined ? 1 : _ref$columns;
var _ref$dimensions = _ref.dimensions;
var dimensions = _ref$dimensions === undefined ? [] : _ref$dimensions;
var nodes = [];
var heights = [];
if (columns === 1) {
return children;
}
// use dimensions to calculate the best column for each child
if (dimensions.length && dimensions.length === children.length) {
for (var i = 0; i < columns; i++) {
nodes[i] = [];
heights[i] = 0;
}
children.forEach(function (child, i) {
var _dimensions$i = dimensions[i];
var width = _dimensions$i.width;
var height = _dimensions$i.height;
var index = heights.indexOf((0, _lodashMin2['default'])(heights));
nodes[index].push(child);
heights[index] += height / width;
});
}
// equally spread the children across the columns
else {
var _loop = function (i) {
nodes[i] = children.filter(function (child, j) {
return j % columns === i;
});
};
for (var i = 0; i < columns; i++) {
_loop(i);
}
}
return nodes;
}
module.exports = exports['default'];
/***/ },
/* 2 */
/* 3 */
/***/ function(module, exports) {

@@ -285,17 +243,16 @@

Object.defineProperty(exports, '__esModule', {
value: true
});
exports.__esModule = true;
exports.mediaQuery = mediaQuery;
exports.mediaQueryMapper = mediaQueryMapper;
var mediaQueries = {};
function mediaQuery() {
var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$query = _ref.query,
query = _ref$query === undefined ? '' : _ref$query,
_ref$full = _ref.full,
full = _ref$full === undefined ? false : _ref$full,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === undefined ? function () {} : _ref$onChange;
var _ref$query = _ref.query;
var query = _ref$query === undefined ? '' : _ref$query;
var _ref$full = _ref.full;
var full = _ref$full === undefined ? false : _ref$full;
var _ref$onChange = _ref.onChange;
var onChange = _ref$onChange === undefined ? function () {} : _ref$onChange;
var result = {

@@ -334,13 +291,12 @@ query: query,

function mediaQueryMapper() {
var _ref2 = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref2$queries = _ref2.queries,
queries = _ref2$queries === undefined ? [] : _ref2$queries,
_ref2$valueKey = _ref2.valueKey,
valueKey = _ref2$valueKey === undefined ? 'value' : _ref2$valueKey,
_ref2$defaultValue = _ref2.defaultValue,
defaultValue = _ref2$defaultValue === undefined ? '' : _ref2$defaultValue,
_ref2$onChange = _ref2.onChange,
onChange = _ref2$onChange === undefined ? function () {} : _ref2$onChange;
var _ref2$queries = _ref2.queries;
var queries = _ref2$queries === undefined ? [] : _ref2$queries;
var _ref2$valueKey = _ref2.valueKey;
var valueKey = _ref2$valueKey === undefined ? 'value' : _ref2$valueKey;
var _ref2$defaultValue = _ref2.defaultValue;
var defaultValue = _ref2$defaultValue === undefined ? '' : _ref2$defaultValue;
var _ref2$onChange = _ref2.onChange;
var onChange = _ref2$onChange === undefined ? function () {} : _ref2$onChange;
var mQs = queries.map(function (query) {

@@ -377,7 +333,67 @@ return mediaQuery({

exports['default'] = { mediaQuery: mediaQuery, mediaQueryMapper: mediaQueryMapper };
module.exports = exports['default'];
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.default = mapNodesToColumns;
var _lodash = __webpack_require__(5);
var _lodash2 = _interopRequireDefault(_lodash);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function mapNodesToColumns() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$children = _ref.children,
children = _ref$children === undefined ? [] : _ref$children,
_ref$columns = _ref.columns,
columns = _ref$columns === undefined ? 1 : _ref$columns,
_ref$dimensions = _ref.dimensions,
dimensions = _ref$dimensions === undefined ? [] : _ref$dimensions;
var nodes = [];
var heights = [];
if (columns === 1) {
return children;
}
// use dimensions to calculate the best column for each child
if (dimensions.length && dimensions.length === children.length) {
for (var i = 0; i < columns; i++) {
nodes[i] = [];
heights[i] = 0;
}
children.forEach(function (child, i) {
var _dimensions$i = dimensions[i],
width = _dimensions$i.width,
height = _dimensions$i.height;
var index = heights.indexOf((0, _lodash2.default)(heights));
nodes[index].push(child);
heights[index] += height / width;
});
}
// equally spread the children across the columns
else {
var _loop = function _loop(_i) {
nodes[_i] = children.filter(function (child, j) {
return j % columns === _i;
});
};
for (var _i = 0; _i < columns; _i++) {
_loop(_i);
}
}
return nodes;
}
/***/ },
/* 3 */
/* 5 */
/***/ function(module, exports) {

@@ -547,8 +563,2 @@

/***/ },
/* 4 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
/***/ }

@@ -555,0 +565,0 @@ /******/ ])

4

umd/react-columns.min.js
/*!
* react-columns 0.2.2 - http://novascreen.github.io/react-columns/
* react-columns v1.0.0 - http://novascreen.github.io/react-columns/
* MIT Licensed
*/
!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: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:"0px"},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 i=e[r],s=t(i);if(null!=s&&(void 0===l?s===s&&!u(s):n(s,l)))var l=s,a=i}return a}function r(e,t){return t>e}function o(e){return!!e&&"object"==typeof e}function u(e){return"symbol"==typeof e||o(e)&&c.call(e)==l}function i(e){return e}function s(e){return e&&e.length?n(e,i,r):void 0}var l="[object Symbol]",a=Object.prototype,c=a.toString;e.exports=s},function(t,n){t.exports=e}])});
!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(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(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)}t.__esModule=!0;var s=n(2),c=o(s),l=n(3),a=n(4),f=o(a),d=function(e){function t(n){r(this,t);var o=u(this,e.call(this,n));return o.setColumns=o.setColumns.bind(o),o.state={},o}return i(t,e),t.prototype.setColumns=function(){this.setState({columns:this._columns.getValue()})},t.prototype.componentDidMount=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())},t.prototype.componentWillUnmount=function(){this._columns&&this._columns.removeListeners()},t.prototype.renderColumns=function(e){var t=this.props,n=t.children,o=t.dimensions,r=t.gap,u={boxSizing:"border-box",float:"left",width:1/e*100+"%",paddingLeft:r,paddingRight:r},i=n;if(e>1){var s=(0,f.default)({children:n,columns:e,dimensions:o});i=s.map(function(e,t){return c.default.createElement("div",{key:t,style:u},e)})}return i},t.prototype.render=function(){var e=this.props,t=e.className,n=e.gap,o=e.rootStyles,r=this.state.columns,u=void 0===r?this.props.columns:r,i=1===u?{}:{marginLeft:"calc("+n+" * -1)",marginRight:"calc("+n+" * -1)"};return c.default.createElement("div",{className:t,style:o},c.default.createElement("div",{style:i},this.renderColumns(u),c.default.createElement("div",{style:{clear:"both"}})))},t}(s.Component);d.defaultProps={className:"",rootStyles:{overflowX:"hidden"},queries:[],columns:3,gap:"0px"},t.default=d},function(t,n){t.exports=e},function(e,t){"use strict";function n(){function e(e){a.queryMatches=e.matches,l(a.queryMatches)}function t(){a._mq.removeListener(e)}var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.query,u=void 0===o?"":o,i=n.full,s=void 0!==i&&i,c=n.onChange,l=void 0===c?function(){}:c,a={query:u,full:s,queryMatches:!1,_mq:null};return u?(a.query=s||")"===u[u.length-1]?u:"("+u+")",r[a.query]||(r[a.query]=window.matchMedia(a.query)),a._mq=r[a.query],a.queryMatches=a._mq.matches,a.removeListener=t,a._mq.addListener(e),a):a}function o(){function e(){var e=a;return p.forEach(function(t,n){t.queryMatches&&(e=i[n][c])}),e}function t(t){d(e())}function o(){p.forEach(function(e,t){e.removeListener()})}var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},u=r.queries,i=void 0===u?[]:u,s=r.valueKey,c=void 0===s?"value":s,l=r.defaultValue,a=void 0===l?"":l,f=r.onChange,d=void 0===f?function(){}:f,p=i.map(function(e){return n({query:e.query,full:e.full,onChange:t})});return{getValue:e,removeListeners:o}}t.__esModule=!0,t.mediaQuery=n,t.mediaQueryMapper=o;var r={}},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.children,n=void 0===t?[]:t,o=e.columns,r=void 0===o?1:o,u=e.dimensions,s=void 0===u?[]:u,c=[],l=[];if(1===r)return n;if(s.length&&s.length===n.length){for(var a=0;a<r;a++)c[a]=[],l[a]=0;n.forEach(function(e,t){var n=s[t],o=n.width,r=n.height,u=l.indexOf((0,i.default)(l));c[u].push(e),l[u]+=r/o})}else for(var f=function(e){c[e]=n.filter(function(t,n){return n%r===e})},d=0;d<r;d++)f(d);return c}t.__esModule=!0,t.default=r;var u=n(5),i=o(u)},function(e,t){function n(e,t,n){for(var o=-1,r=e.length;++o<r;){var i=e[o],s=t(i);if(null!=s&&(void 0===c?s===s&&!u(s):n(s,c)))var c=s,l=i}return l}function o(e,t){return e<t}function r(e){return!!e&&"object"==typeof e}function u(e){return"symbol"==typeof e||r(e)&&a.call(e)==c}function i(e){return e}function s(e){return e&&e.length?n(e,i,o):void 0}var c="[object Symbol]",l=Object.prototype,a=l.toString;e.exports=s}])});
//# sourceMappingURL=react-columns.min.js.map
es6/index.js
es6/mapNodesToColumns.js
es6/mq.js
umd/react-columns.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

About

Packages

Explore npm
Explore Cargo
Explore Go
Explore Maven
Explore NuGet
Explore PyPI
Explore Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.