Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-grid-system

Package Overview
Dependencies
Maintainers
2
Versions
132
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-grid-system - npm Package Compare versions

Comparing version 5.0.2 to 6.0.1

21

build/config.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,5 +6,10 @@ Object.defineProperty(exports, "__esModule", {

});
exports.setConfiguration = exports.getConfiguration = void 0;
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; };
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var configuration = {

@@ -18,8 +23,12 @@ breakpoints: [576, 768, 992, 1200],

var getConfiguration = exports.getConfiguration = function getConfiguration() {
var getConfiguration = function getConfiguration() {
return configuration;
};
var setConfiguration = exports.setConfiguration = function setConfiguration(newConfiguration) {
configuration = _extends({}, configuration, newConfiguration);
};
exports.getConfiguration = getConfiguration;
var setConfiguration = function setConfiguration(newConfiguration) {
configuration = _objectSpread({}, configuration, {}, newConfiguration);
};
exports.setConfiguration = setConfiguration;

116

build/context/ScreenClassProvider/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,99 +6,33 @@ Object.defineProperty(exports, "__esModule", {

});
exports.ScreenClassContext = exports.NO_PROVIDER_FLAG = undefined;
exports.default = ScreenClassProvider;
exports.ScreenClassContext = exports.NO_PROVIDER_FLAG = void 0;
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 = _interopRequireDefault(require("react"));
var _react = require('react');
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react2 = _interopRequireDefault(_react);
var _utils = require("../../utils");
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _utils = require('../../utils');
var _config = require('../../config');
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"); } }
var NO_PROVIDER_FLAG = 'NO_PROVIDER_FLAG';
exports.NO_PROVIDER_FLAG = NO_PROVIDER_FLAG;
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 ScreenClassContext = _react.default.createContext(NO_PROVIDER_FLAG);
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* global window */
exports.ScreenClassContext = ScreenClassContext;
function ScreenClassProvider(props) {
var screenClassRef = _react.default.createRef();
var NO_PROVIDER_FLAG = exports.NO_PROVIDER_FLAG = 'NO_PROVIDER_FLAG';
var useOwnWidth = props.useOwnWidth,
children = props.children;
var screenClass = (0, _utils.useScreenClass)(screenClassRef);
return _react.default.createElement(ScreenClassContext.Provider, {
value: screenClass
}, useOwnWidth ? _react.default.createElement("div", {
ref: useOwnWidth ? screenClassRef : null
}, children) : _react.default.createElement(_react.default.Fragment, null, children));
}
var ScreenClassContext = exports.ScreenClassContext = _react2.default.createContext(NO_PROVIDER_FLAG);
var ScreenClassProvider = function (_PureComponent) {
_inherits(ScreenClassProvider, _PureComponent);
function ScreenClassProvider(props) {
_classCallCheck(this, ScreenClassProvider);
var _this = _possibleConstructorReturn(this, (ScreenClassProvider.__proto__ || Object.getPrototypeOf(ScreenClassProvider)).call(this, props));
_this.state = {
screenClass: (0, _config.getConfiguration)().defaultScreenClass
};
_this.screenClassRef = _react2.default.createRef();
_this.setScreenClass = _this.setScreenClass.bind(_this);
return _this;
}
_createClass(ScreenClassProvider, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.setScreenClass();
window.addEventListener('resize', this.setScreenClass, false);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener('resize', this.setScreenClass, false);
}
}, {
key: 'setScreenClass',
value: function setScreenClass() {
var useOwnWidth = this.props.useOwnWidth;
var source = useOwnWidth && this.screenClassRef && this.screenClassRef.current;
var currScreenClass = (0, _utils.getScreenClass)(source);
if (currScreenClass !== this.state.screenClass) {
this.setState({ screenClass: currScreenClass });
}
}
}, {
key: 'render',
value: function render() {
var screenClass = this.state.screenClass;
var _props = this.props,
children = _props.children,
useOwnWidth = _props.useOwnWidth;
return _react2.default.createElement(
ScreenClassContext.Provider,
{ value: screenClass },
useOwnWidth ? _react2.default.createElement(
'div',
{ ref: this.screenClassRef },
children
) : _react2.default.createElement(
_react2.default.Fragment,
null,
children
)
);
}
}]);
return ScreenClassProvider;
}(_react.PureComponent);
ScreenClassProvider.propTypes = {

@@ -109,3 +43,4 @@ /**

*/
children: _propTypes2.default.node.isRequired,
children: _propTypes.default.node.isRequired,
/**

@@ -115,7 +50,6 @@ * Boolean to determine whether own width should be used as source.

*/
useOwnWidth: _propTypes2.default.bool
useOwnWidth: _propTypes.default.bool
};
ScreenClassProvider.defaultProps = {
useOwnWidth: false
};
exports.default = ScreenClassProvider;
};

75

build/context/ScreenClassResolver/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,26 +6,37 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
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 = _interopRequireWildcard(require("react"));
var _react = require('react');
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react2 = _interopRequireDefault(_react);
var _ScreenClassProvider = _interopRequireWildcard(require("../ScreenClassProvider"));
var _propTypes = require('prop-types');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _propTypes2 = _interopRequireDefault(_propTypes);
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
var _ScreenClassProvider = require('../ScreenClassProvider');
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var _ScreenClassProvider2 = _interopRequireDefault(_ScreenClassProvider);
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
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 _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); } }
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; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var ScreenClassResolver = function (_Component) {
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var ScreenClassResolver =
/*#__PURE__*/
function (_Component) {
_inherits(ScreenClassResolver, _Component);

@@ -36,30 +47,18 @@

return _possibleConstructorReturn(this, (ScreenClassResolver.__proto__ || Object.getPrototypeOf(ScreenClassResolver)).apply(this, arguments));
return _possibleConstructorReturn(this, _getPrototypeOf(ScreenClassResolver).apply(this, arguments));
}
_createClass(ScreenClassResolver, [{
key: 'render',
key: "render",
value: function render() {
var children = this.props.children;
return _react.default.createElement(_ScreenClassProvider.ScreenClassContext.Consumer, null, function (screenClassCheck) {
if (screenClassCheck === _ScreenClassProvider.NO_PROVIDER_FLAG) {
return _react.default.createElement(_ScreenClassProvider.default, null, _react.default.createElement(_ScreenClassProvider.ScreenClassContext.Consumer, null, function (screenClassResolved) {
return children(screenClassResolved);
}));
}
return _react2.default.createElement(
_ScreenClassProvider.ScreenClassContext.Consumer,
null,
function (screenClassCheck) {
if (screenClassCheck === _ScreenClassProvider.NO_PROVIDER_FLAG) {
return _react2.default.createElement(
_ScreenClassProvider2.default,
null,
_react2.default.createElement(
_ScreenClassProvider.ScreenClassContext.Consumer,
null,
function (screenClassResolved) {
return children(screenClassResolved);
}
)
);
}
return children(screenClassCheck);
}
);
return children(screenClassCheck);
});
}

@@ -71,5 +70,5 @@ }]);

exports.default = ScreenClassResolver;
ScreenClassResolver.propTypes = {
children: _propTypes2.default.func.isRequired
};
exports.default = ScreenClassResolver;
children: _propTypes.default.func.isRequired
};

164

build/grid/Col/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,50 +6,65 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
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 _react = _interopRequireWildcard(require("react"));
var _react = require('react');
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react2 = _interopRequireDefault(_react);
var _style = _interopRequireDefault(require("./style"));
var _propTypes = require('prop-types');
var _config = require("../../config");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _Row = require("../Row");
var _style = require('./style');
var _ScreenClassResolver = _interopRequireDefault(require("../../context/ScreenClassResolver"));
var _style2 = _interopRequireDefault(_style);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _config = require('../../config');
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
var _Row = require('../Row');
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var _ScreenClassResolver = require('../../context/ScreenClassResolver');
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var _ScreenClassResolver2 = _interopRequireDefault(_ScreenClassResolver);
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(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; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var Col = function (_React$PureComponent) {
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var Col =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Col, _React$PureComponent);
function Col() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, Col);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Col.__proto__ || Object.getPrototypeOf(Col)).call.apply(_ref, [this].concat(args))), _this), _this.renderCol = function (gutterWidth, screenClass) {
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Col)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "renderCol", function (gutterWidth, screenClass) {
var _this$props = _this.props,

@@ -68,5 +83,5 @@ children = _this$props.children,

component = _this$props.component,
otherProps = _objectWithoutProperties(_this$props, ['children', 'xs', 'sm', 'md', 'lg', 'xl', 'offset', 'pull', 'push', 'debug', 'style', 'component']);
otherProps = _objectWithoutProperties(_this$props, ["children", "xs", "sm", "md", "lg", "xl", "offset", "pull", "push", "debug", "style", "component"]);
var theStyle = (0, _style2.default)({
var theStyle = (0, _style.default)({
width: {

@@ -88,23 +103,24 @@ xs: xs,

});
return (0, _react.createElement)(component, _extends({ style: theStyle }, otherProps, { children: children }));
}, _this.render = function () {
return _react2.default.createElement(
_ScreenClassResolver2.default,
null,
function (screenClass) {
return _react2.default.createElement(
_Row.GutterWidthContext.Consumer,
null,
function (gutterWidth) {
return _this.renderCol(gutterWidth, screenClass);
}
);
}
);
}, _temp), _possibleConstructorReturn(_this, _ret);
return (0, _react.createElement)(component, _objectSpread({
style: theStyle
}, otherProps, {
children: children
}));
});
_defineProperty(_assertThisInitialized(_this), "render", function () {
return _react.default.createElement(_ScreenClassResolver.default, null, function (screenClass) {
return _react.default.createElement(_Row.GutterWidthContext.Consumer, null, function (gutterWidth) {
return _this.renderCol(gutterWidth, screenClass);
});
});
});
return _this;
}
return Col;
}(_react2.default.PureComponent);
}(_react.default.PureComponent);
exports.default = Col;
Col.propTypes = {

@@ -114,65 +130,76 @@ /**

*/
children: _propTypes2.default.node,
children: _propTypes.default.node,
/**
* The width of the column for screenclass `xs`, either a number between 0 and 12, or "content"
*/
xs: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['content'])]),
xs: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['content'])]),
/**
* The width of the column for screenclass `sm`, either a number between 0 and 12, or "content"
*/
sm: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['content'])]),
sm: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['content'])]),
/**
* The width of the column for screenclass `md`, either a number between 0 and 12, or "content"
*/
md: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['content'])]),
md: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['content'])]),
/**
* The width of the column for screenclass `lg`, either a number between 0 and 12, or "content"
*/
lg: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['content'])]),
lg: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['content'])]),
/**
* The width of the column for screenclass `xl`, either a number between 0 and 12, or "content"
*/
xl: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf(['content'])]),
xl: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['content'])]),
/**
* The offset of this column for all screenclasses
*/
offset: _propTypes2.default.shape({
xs: _propTypes2.default.number,
sm: _propTypes2.default.number,
md: _propTypes2.default.number,
lg: _propTypes2.default.number,
xl: _propTypes2.default.number
offset: _propTypes.default.shape({
xs: _propTypes.default.number,
sm: _propTypes.default.number,
md: _propTypes.default.number,
lg: _propTypes.default.number,
xl: _propTypes.default.number
}),
/**
* The amount this column is pushed to the right for all screenclasses
*/
push: _propTypes2.default.shape({
xs: _propTypes2.default.number,
sm: _propTypes2.default.number,
md: _propTypes2.default.number,
lg: _propTypes2.default.number,
xl: _propTypes2.default.number
push: _propTypes.default.shape({
xs: _propTypes.default.number,
sm: _propTypes.default.number,
md: _propTypes.default.number,
lg: _propTypes.default.number,
xl: _propTypes.default.number
}),
/**
* The amount this column is pulled to the left for all screenclasses
*/
pull: _propTypes2.default.shape({
xs: _propTypes2.default.number,
sm: _propTypes2.default.number,
md: _propTypes2.default.number,
lg: _propTypes2.default.number,
xl: _propTypes2.default.number
pull: _propTypes.default.shape({
xs: _propTypes.default.number,
sm: _propTypes.default.number,
md: _propTypes.default.number,
lg: _propTypes.default.number,
xl: _propTypes.default.number
}),
/**
* Optional styling
*/
style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])),
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
/**
* Set to apply some debug styling
*/
debug: _propTypes2.default.bool,
debug: _propTypes.default.bool,
/**
* Use your own component
*/
component: _propTypes2.default.elementType
component: _propTypes.default.elementType
};

@@ -192,3 +219,2 @@ Col.defaultProps = {

component: 'div'
};
exports.default = Col;
};

34

build/grid/Col/style.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,7 +6,12 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
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 _utils = require("../../utils");
var _utils = require('../../utils');
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var hasWidth = function hasWidth(widths) {

@@ -21,14 +26,14 @@ return Object.keys(widths).reduce(function (acc, cur) {

var normalizedWidth = Math.max(0, Math.min(gridColumns, width));
return 100 / gridColumns * normalizedWidth + '%';
return "".concat(100 / gridColumns * normalizedWidth, "%");
};
exports.default = function (_ref) {
var _default = function _default(_ref) {
var _ref$width = _ref.width,
width = _ref$width === undefined ? {} : _ref$width,
width = _ref$width === void 0 ? {} : _ref$width,
_ref$offset = _ref.offset,
offset = _ref$offset === undefined ? {} : _ref$offset,
offset = _ref$offset === void 0 ? {} : _ref$offset,
_ref$pull = _ref.pull,
pull = _ref$pull === undefined ? {} : _ref$pull,
pull = _ref$pull === void 0 ? {} : _ref$pull,
_ref$push = _ref.push,
push = _ref$push === undefined ? {} : _ref$push,
push = _ref$push === void 0 ? {} : _ref$push,
debug = _ref.debug,

@@ -40,8 +45,8 @@ screenClass = _ref.screenClass,

var styles = _extends({
var styles = _objectSpread({
boxSizing: 'border-box',
minHeight: '1px',
position: 'relative',
paddingLeft: gutterWidth / 2 + 'px',
paddingRight: gutterWidth / 2 + 'px',
paddingLeft: "".concat(gutterWidth / 2, "px"),
paddingRight: "".concat(gutterWidth / 2, "px"),
width: '100%'

@@ -67,3 +72,2 @@ }, moreStyle);

var isSizedToContent = width[size] === 'content';
styles.flexBasis = isSizedToContent ? 'auto' : currentWidth || styles.flexBasis;

@@ -84,2 +88,4 @@ styles.width = isSizedToContent ? 'auto' : width;

return styles;
};
};
exports.default = _default;

152

build/grid/Container/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,36 +6,51 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
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 _react = _interopRequireWildcard(require("react"));
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 _propTypes = _interopRequireDefault(require("prop-types"));
var _react = require('react');
var _style = _interopRequireWildcard(require("./style"));
var _react2 = _interopRequireDefault(_react);
var _config = require("../../config");
var _propTypes = require('prop-types');
var _ScreenClassResolver = _interopRequireDefault(require("../../context/ScreenClassResolver"));
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _style = require('./style');
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
var _style2 = _interopRequireDefault(_style);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var _config = require('../../config');
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var _ScreenClassResolver = require('../../context/ScreenClassResolver');
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
var _ScreenClassResolver2 = _interopRequireDefault(_ScreenClassResolver);
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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 _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); } }
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; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var Container = function (_React$PureComponent) {
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var Container =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Container, _React$PureComponent);

@@ -46,47 +61,40 @@

return _possibleConstructorReturn(this, (Container.__proto__ || Object.getPrototypeOf(Container)).apply(this, arguments));
return _possibleConstructorReturn(this, _getPrototypeOf(Container).apply(this, arguments));
}
_createClass(Container, [{
key: 'render',
key: "render",
value: function render() {
var _this2 = this;
var _this = this;
var _props = this.props,
children = _props.children,
fluid = _props.fluid,
xs = _props.xs,
sm = _props.sm,
md = _props.md,
lg = _props.lg,
xl = _props.xl,
style = _props.style,
component = _props.component,
otherProps = _objectWithoutProperties(_props, ['children', 'fluid', 'xs', 'sm', 'md', 'lg', 'xl', 'style', 'component']);
var _this$props = this.props,
children = _this$props.children,
fluid = _this$props.fluid,
xs = _this$props.xs,
sm = _this$props.sm,
md = _this$props.md,
lg = _this$props.lg,
xl = _this$props.xl,
style = _this$props.style,
component = _this$props.component,
otherProps = _objectWithoutProperties(_this$props, ["children", "fluid", "xs", "sm", "md", "lg", "xl", "style", "component"]);
return _react2.default.createElement(
_ScreenClassResolver2.default,
null,
function (screenClass) {
return (0, _react.createElement)(component, _extends({
style: (0, _style2.default)({
fluid: fluid,
xs: xs,
sm: sm,
md: md,
lg: lg,
xl: xl,
screenClass: screenClass || _this2.state.screenClass,
containerWidths: (0, _config.getConfiguration)().containerWidths,
gutterWidth: (0, _config.getConfiguration)().gutterWidth,
moreStyle: style
})
}, otherProps), _react2.default.createElement(
_react2.default.Fragment,
null,
children,
_react2.default.createElement('span', { style: (0, _style.getAfterStyle)() })
));
}
);
return _react.default.createElement(_ScreenClassResolver.default, null, function (screenClass) {
return (0, _react.createElement)(component, _objectSpread({
style: (0, _style.default)({
fluid: fluid,
xs: xs,
sm: sm,
md: md,
lg: lg,
xl: xl,
screenClass: screenClass || _this.state.screenClass,
containerWidths: (0, _config.getConfiguration)().containerWidths,
gutterWidth: (0, _config.getConfiguration)().gutterWidth,
moreStyle: style
})
}, otherProps), _react.default.createElement(_react.default.Fragment, null, children, _react.default.createElement("span", {
style: (0, _style.getAfterStyle)()
})));
});
}

@@ -96,4 +104,5 @@ }]);

return Container;
}(_react2.default.PureComponent);
}(_react.default.PureComponent);
exports.default = Container;
Container.propTypes = {

@@ -103,7 +112,9 @@ /**

*/
children: _propTypes2.default.node.isRequired,
children: _propTypes.default.node.isRequired,
/**
* True makes the container full-width, false fixed-width
*/
fluid: _propTypes2.default.bool,
fluid: _propTypes.default.bool,
/**

@@ -113,3 +124,4 @@ * This is in combination with fluid enabled

*/
xs: _propTypes2.default.bool,
xs: _propTypes.default.bool,
/**

@@ -119,3 +131,4 @@ * This is in combination with fluid enabled

*/
sm: _propTypes2.default.bool,
sm: _propTypes.default.bool,
/**

@@ -125,3 +138,4 @@ * This is in combination with fluid enabled

*/
md: _propTypes2.default.bool,
md: _propTypes.default.bool,
/**

@@ -131,3 +145,4 @@ * This is in combination with fluid enabled

*/
lg: _propTypes2.default.bool,
lg: _propTypes.default.bool,
/**

@@ -137,11 +152,13 @@ * This is in combination with fluid enabled

*/
xl: _propTypes2.default.bool,
xl: _propTypes.default.bool,
/**
* Optional styling
*/
style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])),
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
/**
* Use your own component
*/
component: _propTypes2.default.elementType
component: _propTypes.default.elementType
};

@@ -157,3 +174,2 @@ Container.defaultProps = {

component: 'div'
};
exports.default = Container;
};

33

build/grid/Container/style.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,6 +6,11 @@ Object.defineProperty(exports, "__esModule", {

});
exports.getAfterStyle = exports.default = void 0;
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; };
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
exports.default = function (_ref) {
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _default = function _default(_ref) {
var fluid = _ref.fluid,

@@ -22,3 +27,3 @@ xs = _ref.xs,

var styles = _extends({
var styles = _objectSpread({
boxSizing: 'border-box',

@@ -28,4 +33,4 @@ position: 'relative',

marginRight: 'auto',
paddingLeft: gutterWidth / 2 + 'px',
paddingRight: gutterWidth / 2 + 'px'
paddingLeft: "".concat(gutterWidth / 2, "px"),
paddingRight: "".concat(gutterWidth / 2, "px")
}, moreStyle);

@@ -38,15 +43,15 @@

if (screenClass === 'sm' && containerWidths[0] && !sm && !xs) {
styles.maxWidth = containerWidths[0] + 'px';
styles.maxWidth = "".concat(containerWidths[0], "px");
}
if (screenClass === 'md' && containerWidths[1] && !md) {
styles.maxWidth = containerWidths[1] + 'px';
styles.maxWidth = "".concat(containerWidths[1], "px");
}
if (screenClass === 'lg' && containerWidths[2] && !lg) {
styles.maxWidth = containerWidths[2] + 'px';
styles.maxWidth = "".concat(containerWidths[2], "px");
}
if (screenClass === 'xl' && containerWidths[3] && !xl) {
styles.maxWidth = containerWidths[3] + 'px';
styles.maxWidth = "".concat(containerWidths[3], "px");
}

@@ -57,3 +62,5 @@

var getAfterStyle = exports.getAfterStyle = function getAfterStyle() {
exports.default = _default;
var getAfterStyle = function getAfterStyle() {
return {

@@ -63,2 +70,4 @@ display: 'table',

};
};
};
exports.getAfterStyle = getAfterStyle;

104

build/grid/Row/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,47 +6,61 @@ Object.defineProperty(exports, "__esModule", {

});
exports.GutterWidthContext = undefined;
exports.default = exports.GutterWidthContext = void 0;
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 _react = _interopRequireDefault(require("react"));
var _react = require('react');
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react2 = _interopRequireDefault(_react);
var _config = require("../../config");
var _propTypes = require('prop-types');
var _style = _interopRequireDefault(require("./style"));
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _config = require('../../config');
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var _style = require('./style');
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
var _style2 = _interopRequireDefault(_style);
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
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; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(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; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var GutterWidthContext = exports.GutterWidthContext = _react2.default.createContext(false);
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var Row = function (_React$PureComponent) {
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var GutterWidthContext = _react.default.createContext(false);
exports.GutterWidthContext = GutterWidthContext;
var Row =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Row, _React$PureComponent);
function Row() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, Row);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Row.__proto__ || Object.getPrototypeOf(Row)).call.apply(_ref, [this].concat(args))), _this), _this.render = function () {
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Row)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "render", function () {
var _this$props = _this.props,

@@ -62,3 +76,3 @@ children = _this$props.children,

nowrap = _this$props.nowrap,
otherProps = _objectWithoutProperties(_this$props, ['children', 'style', 'align', 'justify', 'debug', 'nogutter', 'gutterWidth', 'component', 'nowrap']);
otherProps = _objectWithoutProperties(_this$props, ["children", "style", "align", "justify", "debug", "nogutter", "gutterWidth", "component", "nowrap"]);

@@ -68,3 +82,3 @@ var theGutterWidth = (0, _config.getConfiguration)().gutterWidth;

if (typeof gutterWidth === 'number') theGutterWidth = gutterWidth;
var theStyle = (0, _style2.default)({
var theStyle = (0, _style.default)({
gutterWidth: theGutterWidth,

@@ -77,13 +91,16 @@ align: align,

});
return _react2.default.createElement(component, _extends({ style: theStyle }, otherProps), _react2.default.createElement(
GutterWidthContext.Provider,
{ value: theGutterWidth },
children
));
}, _temp), _possibleConstructorReturn(_this, _ret);
return _react.default.createElement(component, _objectSpread({
style: theStyle
}, otherProps), _react.default.createElement(GutterWidthContext.Provider, {
value: theGutterWidth
}, children));
});
return _this;
}
return Row;
}(_react2.default.PureComponent);
}(_react.default.PureComponent);
exports.default = Row;
Row.propTypes = {

@@ -93,35 +110,43 @@ /**

*/
children: _propTypes2.default.node.isRequired,
children: _propTypes.default.node.isRequired,
/**
* Vertical column alignment
*/
align: _propTypes2.default.oneOf(['normal', 'start', 'center', 'end', 'stretch']),
align: _propTypes.default.oneOf(['normal', 'start', 'center', 'end', 'stretch']),
/**
* Horizontal column alignment
*/
justify: _propTypes2.default.oneOf(['start', 'center', 'end', 'between', 'around', 'initial', 'inherit']),
justify: _propTypes.default.oneOf(['start', 'center', 'end', 'between', 'around', 'initial', 'inherit']),
/**
* No gutter for this row
*/
nogutter: _propTypes2.default.bool,
nogutter: _propTypes.default.bool,
/**
* Custom gutter width for this row
*/
gutterWidth: _propTypes2.default.number,
gutterWidth: _propTypes.default.number,
/**
* Optional styling
*/
style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])),
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
/**
* Set to apply some debug styling
*/
debug: _propTypes2.default.bool,
debug: _propTypes.default.bool,
/**
* Use your own component
*/
component: _propTypes2.default.elementType,
component: _propTypes.default.elementType,
/**
* Whether the cols should not wrap
*/
nowrap: _propTypes2.default.bool
nowrap: _propTypes.default.bool
};

@@ -137,3 +162,2 @@ Row.defaultProps = {

nowrap: false
};
exports.default = Row;
};

25

build/grid/Row/style.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,6 +6,11 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
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; };
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
exports.default = function (_ref) {
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _default = function _default(_ref) {
var gutterWidth = _ref.gutterWidth,

@@ -17,9 +22,7 @@ align = _ref.align,

nowrap = _ref.nowrap;
// Vertical alignment
var alignItems = align;
if (align === 'start') alignItems = 'flex-start';
if (align === 'end') alignItems = 'flex-end';
if (align === 'end') alignItems = 'flex-end'; // Horizontal alignment
// Horizontal alignment
var justifyContent = justify;

@@ -34,5 +37,5 @@ if (justify === 'start') justifyContent = 'flex-start';

var styles = _extends({
marginLeft: '-' + gutterWidth / 2 + 'px',
marginRight: '-' + gutterWidth / 2 + 'px',
var styles = _objectSpread({
marginLeft: "-".concat(gutterWidth / 2, "px"),
marginRight: "-".concat(gutterWidth / 2, "px"),
display: 'flex',

@@ -51,2 +54,4 @@ flexWrap: nowrap ? 'nowrap' : 'wrap',

return styles;
};
};
exports.default = _default;

86

build/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,66 +6,45 @@ Object.defineProperty(exports, "__esModule", {

});
var _Col = require('./grid/Col');
Object.defineProperty(exports, 'Col', {
Object.defineProperty(exports, "Col", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Col).default;
return _Col.default;
}
});
var _Container = require('./grid/Container');
Object.defineProperty(exports, 'Container', {
Object.defineProperty(exports, "Container", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Container).default;
return _Container.default;
}
});
var _Row = require('./grid/Row');
Object.defineProperty(exports, 'Row', {
Object.defineProperty(exports, "Row", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Row).default;
return _Row.default;
}
});
var _Hidden = require('./utilities/Hidden');
Object.defineProperty(exports, 'Hidden', {
Object.defineProperty(exports, "Hidden", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Hidden).default;
return _Hidden.default;
}
});
var _Visible = require('./utilities/Visible');
Object.defineProperty(exports, 'Visible', {
Object.defineProperty(exports, "Visible", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Visible).default;
return _Visible.default;
}
});
var _ScreenClassRender = require('./utilities/ScreenClassRender');
Object.defineProperty(exports, 'ScreenClassRender', {
Object.defineProperty(exports, "ScreenClassRender", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_ScreenClassRender).default;
return _ScreenClassRender.default;
}
});
var _ScreenClassProvider = require('./context/ScreenClassProvider');
Object.defineProperty(exports, 'ScreenClassProvider', {
Object.defineProperty(exports, "ScreenClassProvider", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_ScreenClassProvider).default;
return _ScreenClassProvider.default;
}
});
Object.defineProperty(exports, 'ScreenClassContext', {
Object.defineProperty(exports, "ScreenClassContext", {
enumerable: true,

@@ -76,6 +55,3 @@ get: function get() {

});
var _config = require('./config');
Object.defineProperty(exports, 'setConfiguration', {
Object.defineProperty(exports, "setConfiguration", {
enumerable: true,

@@ -86,3 +62,31 @@ get: function get() {

});
Object.defineProperty(exports, "useScreenClass", {
enumerable: true,
get: function get() {
return _utils.useScreenClass;
}
});
var _Col = _interopRequireDefault(require("./grid/Col"));
var _Container = _interopRequireDefault(require("./grid/Container"));
var _Row = _interopRequireDefault(require("./grid/Row"));
var _Hidden = _interopRequireDefault(require("./utilities/Hidden"));
var _Visible = _interopRequireDefault(require("./utilities/Visible"));
var _ScreenClassRender = _interopRequireDefault(require("./utilities/ScreenClassRender"));
var _ScreenClassProvider = _interopRequireWildcard(require("./context/ScreenClassProvider"));
var _config = require("./config");
var _utils = require("./utils");
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

98

build/utilities/Hidden/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,64 +6,72 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
var _react = require('react');
var _react = _interopRequireDefault(require("react"));
var _react2 = _interopRequireDefault(_react);
var _propTypes = _interopRequireDefault(require("prop-types"));
var _propTypes = require('prop-types');
var style = _interopRequireWildcard(require("./style"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _ScreenClassResolver = _interopRequireDefault(require("../../context/ScreenClassResolver"));
var _style = require('./style');
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
var style = _interopRequireWildcard(_style);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var _ScreenClassResolver = require('../../context/ScreenClassResolver');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _ScreenClassResolver2 = _interopRequireDefault(_ScreenClassResolver);
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return 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; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
var Hidden = function (_React$PureComponent) {
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var Hidden =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Hidden, _React$PureComponent);
function Hidden() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, Hidden);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hidden.__proto__ || Object.getPrototypeOf(Hidden)).call.apply(_ref, [this].concat(args))), _this), _this.render = function () {
return _react2.default.createElement(
_ScreenClassResolver2.default,
null,
function (screenClass) {
return style.hidden({
screenClass: screenClass,
xs: _this.props.xs,
sm: _this.props.sm,
md: _this.props.md,
lg: _this.props.lg,
xl: _this.props.xl
}) ? null : _this.props.children;
}
);
}, _temp), _possibleConstructorReturn(_this, _ret);
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Hidden)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "render", function () {
return _react.default.createElement(_ScreenClassResolver.default, null, function (screenClass) {
return style.hidden({
screenClass: screenClass,
xs: _this.props.xs,
sm: _this.props.sm,
md: _this.props.md,
lg: _this.props.lg,
xl: _this.props.xl
}) ? null : _this.props.children;
});
});
return _this;
}
return Hidden;
}(_react2.default.PureComponent);
}(_react.default.PureComponent);
exports.default = Hidden;
Hidden.propTypes = {

@@ -73,23 +81,28 @@ /**

*/
children: _propTypes2.default.node.isRequired,
children: _propTypes.default.node.isRequired,
/**
* Hide on extra small devices
*/
xs: _propTypes2.default.bool,
xs: _propTypes.default.bool,
/**
* Hide on small devices
*/
sm: _propTypes2.default.bool,
sm: _propTypes.default.bool,
/**
* Hide on medium devices
*/
md: _propTypes2.default.bool,
md: _propTypes.default.bool,
/**
* Hide on large devices
*/
lg: _propTypes2.default.bool,
lg: _propTypes.default.bool,
/**
* Hide on xlarge devices
*/
xl: _propTypes2.default.bool
xl: _propTypes.default.bool
};

@@ -102,3 +115,2 @@ Hidden.defaultProps = {

xl: false
};
exports.default = Hidden;
};

11

build/utilities/Hidden/style.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,3 +6,5 @@ Object.defineProperty(exports, "__esModule", {

});
var hidden = exports.hidden = function hidden(_ref) {
exports.default = exports.hidden = void 0;
var hidden = function hidden(_ref) {
var screenClass = _ref.screenClass,

@@ -14,3 +16,2 @@ xs = _ref.xs,

xl = _ref.xl;
if (screenClass === 'xl') return xl;

@@ -23,2 +24,4 @@ if (screenClass === 'lg') return lg;

exports.default = hidden;
exports.hidden = hidden;
var _default = hidden;
exports.default = _default;

63

build/utilities/ScreenClassRender/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,51 +6,59 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
var _react = require('react');
var _react = _interopRequireDefault(require("react"));
var _react2 = _interopRequireDefault(_react);
var _propTypes = _interopRequireDefault(require("prop-types"));
var _propTypes = require('prop-types');
var _ScreenClassResolver = _interopRequireDefault(require("../../context/ScreenClassResolver"));
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _ScreenClassResolver = require('../../context/ScreenClassResolver');
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var _ScreenClassResolver2 = _interopRequireDefault(_ScreenClassResolver);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return 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; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
var ScreenClassRender = function (_React$PureComponent) {
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var ScreenClassRender =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(ScreenClassRender, _React$PureComponent);
function ScreenClassRender() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, ScreenClassRender);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ScreenClassRender.__proto__ || Object.getPrototypeOf(ScreenClassRender)).call.apply(_ref, [this].concat(args))), _this), _this.render = function () {
return _react2.default.createElement(
_ScreenClassResolver2.default,
null,
function (screenClass) {
return _this.props.render(screenClass);
}
);
}, _temp), _possibleConstructorReturn(_this, _ret);
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ScreenClassRender)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "render", function () {
return _react.default.createElement(_ScreenClassResolver.default, null, function (screenClass) {
return _this.props.render(screenClass);
});
});
return _this;
}
return ScreenClassRender;
}(_react2.default.PureComponent);
}(_react.default.PureComponent);
exports.default = ScreenClassRender;
ScreenClassRender.propTypes = {

@@ -61,4 +69,3 @@ /**

*/
render: _propTypes2.default.func.isRequired
};
exports.default = ScreenClassRender;
render: _propTypes.default.func.isRequired
};

106

build/utilities/Visible/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,91 +6,106 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
var _react = require('react');
var _react = _interopRequireDefault(require("react"));
var _react2 = _interopRequireDefault(_react);
var _propTypes = _interopRequireDefault(require("prop-types"));
var _propTypes = require('prop-types');
var style = _interopRequireWildcard(require("./style"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _ScreenClassResolver = _interopRequireDefault(require("../../context/ScreenClassResolver"));
var _style = require('./style');
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
var style = _interopRequireWildcard(_style);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var _ScreenClassResolver = require('../../context/ScreenClassResolver');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _ScreenClassResolver2 = _interopRequireDefault(_ScreenClassResolver);
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return 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; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
var Visible = function (_React$PureComponent) {
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var Visible =
/*#__PURE__*/
function (_React$PureComponent) {
_inherits(Visible, _React$PureComponent);
function Visible() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, Visible);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Visible.__proto__ || Object.getPrototypeOf(Visible)).call.apply(_ref, [this].concat(args))), _this), _this.render = function () {
return _react2.default.createElement(
_ScreenClassResolver2.default,
null,
function (screenClass) {
return !style.visible({
screenClass: screenClass,
xs: _this.props.xs,
sm: _this.props.sm,
md: _this.props.md,
lg: _this.props.lg,
xl: _this.props.xl
}) ? null : _this.props.children;
}
);
}, _temp), _possibleConstructorReturn(_this, _ret);
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Visible)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "render", function () {
return _react.default.createElement(_ScreenClassResolver.default, null, function (screenClass) {
return !style.visible({
screenClass: screenClass,
xs: _this.props.xs,
sm: _this.props.sm,
md: _this.props.md,
lg: _this.props.lg,
xl: _this.props.xl
}) ? null : _this.props.children;
});
});
return _this;
}
return Visible;
}(_react2.default.PureComponent);
}(_react.default.PureComponent);
Visible.propTypes = {
exports.default = Visible;
_defineProperty(Visible, "propTypes", {
/**
* Content of the component
*/
children: _propTypes2.default.node.isRequired,
children: _propTypes.default.node.isRequired,
/**
* Show on extra small devices
*/
xs: _propTypes2.default.bool,
xs: _propTypes.default.bool,
/**
* Show on small devices
*/
sm: _propTypes2.default.bool,
sm: _propTypes.default.bool,
/**
* Show on medium devices
*/
md: _propTypes2.default.bool,
md: _propTypes.default.bool,
/**
* Show on large devices
*/
lg: _propTypes2.default.bool,
lg: _propTypes.default.bool,
/**
* Show on xl devices
*/
xl: _propTypes2.default.bool
};
Visible.defaultProps = {
xl: _propTypes.default.bool
});
_defineProperty(Visible, "defaultProps", {
xs: false,

@@ -101,3 +116,2 @@ sm: false,

xl: false
};
exports.default = Visible;
});

11

build/utilities/Visible/style.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,3 +6,5 @@ Object.defineProperty(exports, "__esModule", {

});
var visible = exports.visible = function visible(_ref) {
exports.default = exports.visible = void 0;
var visible = function visible(_ref) {
var screenClass = _ref.screenClass,

@@ -14,3 +16,2 @@ xs = _ref.xs,

xl = _ref.xl;
if (screenClass === 'xl') return xl;

@@ -23,2 +24,4 @@ if (screenClass === 'lg') return lg;

exports.default = visible;
exports.visible = visible;
var _default = visible;
exports.default = _default;

76

build/utils.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,36 +6,68 @@ Object.defineProperty(exports, "__esModule", {

});
exports.getScreenClass = exports.screenClasses = undefined;
exports.useScreenClass = exports.screenClasses = void 0;
var _config = require('./config');
var _react = require("react");
var _config = require("./config");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } 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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var getViewPort = function getViewPort(source) {
if (source && source.clientWidth) {
return source.clientWidth;
console.log(source);
if (source && source.current && source.current.clientWidth) {
return source.current.clientWidth;
}
if (typeof window !== 'undefined' && window.innerWidth) {
return window.innerWidth;
}
return null;
}; /* global window */
/* eslint "no-console": "off" */
};
var screenClasses = exports.screenClasses = ['xs', 'sm', 'md', 'lg', 'xl'];
var screenClasses = ['xs', 'sm', 'md', 'lg', 'xl'];
exports.screenClasses = screenClasses;
var getScreenClass = exports.getScreenClass = function getScreenClass(source) {
var _getConfiguration = (0, _config.getConfiguration)(),
breakpoints = _getConfiguration.breakpoints,
defaultScreenClass = _getConfiguration.defaultScreenClass;
var useScreenClass = function useScreenClass(source) {
var _useState = (0, _react.useState)((0, _config.getConfiguration)().defaultScreenClass),
_useState2 = _slicedToArray(_useState, 2),
screenClass = _useState2[0],
setScreenClass = _useState2[1];
var screenClass = defaultScreenClass;
(0, _react.useEffect)(function () {
function handleWindowResized() {
var _getConfiguration = (0, _config.getConfiguration)(),
breakpoints = _getConfiguration.breakpoints,
defaultScreenClass = _getConfiguration.defaultScreenClass;
var viewport = getViewPort(source);
if (viewport) {
screenClass = 'xs';
if (breakpoints[0] && viewport >= breakpoints[0]) screenClass = 'sm';
if (breakpoints[1] && viewport >= breakpoints[1]) screenClass = 'md';
if (breakpoints[2] && viewport >= breakpoints[2]) screenClass = 'lg';
if (breakpoints[3] && viewport >= breakpoints[3]) screenClass = 'xl';
}
var newScreenClass = defaultScreenClass;
var viewport = getViewPort(source);
if (viewport) {
newScreenClass = 'xs';
if (newScreenClass[0] && viewport >= breakpoints[0]) newScreenClass = 'sm';
if (breakpoints[1] && viewport >= breakpoints[1]) newScreenClass = 'md';
if (breakpoints[2] && viewport >= breakpoints[2]) newScreenClass = 'lg';
if (breakpoints[3] && viewport >= breakpoints[3]) newScreenClass = 'xl';
}
setScreenClass(newScreenClass);
}
window.addEventListener('resize', handleWindowResized, false);
handleWindowResized();
return function () {
window.removeEventListener('resize', handleWindowResized, false);
};
});
return screenClass;
};
};
exports.useScreenClass = useScreenClass;

39

package.json
{
"name": "react-grid-system",
"version": "5.0.2",
"version": "6.0.1",
"description": "A powerful Bootstrap-like responsive grid system for React.",

@@ -37,3 +37,3 @@ "main": "./build/index.js",

"peerDependencies": {
"react": "^16.0.0"
"react": "^16.10.2"
},

@@ -44,20 +44,21 @@ "dependencies": {

"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"eslint": "^5.12.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.12.3",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-styleguidist": "^8.0.6",
"rimraf": "^2.6.3",
"webpack": "^4.28.1",
"webpack-blocks": "^1.0.0"
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/preset-env": "^7.6.3",
"@babel/preset-react": "^7.6.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"eslint": "^6.5.1",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^1.7.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-styleguidist": "^8.0.5",
"rimraf": "^3.0.0",
"webpack": "^4.41.2"
}
}

16

README.md

@@ -97,2 +97,18 @@ # React Grid System

Alternatively, the `useScreenClass` hook can be used for rendering a component differently based on the screen class. An example on how to use this:
```javascript
import React from 'react';
import { useScreenClass } from 'react-grid-system';
function Example() {
const screenClass = useScreenClass();
return (
<p style={{ fontSize: ['lg', 'xl'].includes(screenClass) ? '2rem' : '1rem' }} >
Screen class: {screenClass}
</p>
);
}
```
## Configuration

@@ -99,0 +115,0 @@

92

src/context/ScreenClassProvider/index.jsx

@@ -1,6 +0,4 @@

/* global window */
import React, { PureComponent } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { getScreenClass } from '../../utils';
import { getConfiguration } from '../../config';
import { useScreenClass } from '../../utils';

@@ -11,63 +9,31 @@ export const NO_PROVIDER_FLAG = 'NO_PROVIDER_FLAG';

export default class ScreenClassProvider extends PureComponent {
static propTypes = {
/**
* Children of the ScreenClassProvider.
* This should be all your child React nodes that are using `react-grid-system`.
*/
children: PropTypes.node.isRequired,
/**
* Boolean to determine whether own width should be used as source.
* When provided, the screen class is derived from own dimensions instead of the window.
*/
useOwnWidth: PropTypes.bool,
};
export default function ScreenClassProvider(props) {
const screenClassRef = React.createRef();
const { useOwnWidth, children } = props;
const screenClass = useScreenClass(screenClassRef);
static defaultProps = {
useOwnWidth: false,
};
return (
<ScreenClassContext.Provider value={screenClass}>
{useOwnWidth
? <div ref={useOwnWidth ? screenClassRef : null}>{children}</div>
: <>{children}</>}
</ScreenClassContext.Provider>
);
}
constructor(props) {
super(props);
ScreenClassProvider.propTypes = {
/**
* Children of the ScreenClassProvider.
* This should be all your child React nodes that are using `react-grid-system`.
*/
children: PropTypes.node.isRequired,
/**
* Boolean to determine whether own width should be used as source.
* When provided, the screen class is derived from own dimensions instead of the window.
*/
useOwnWidth: PropTypes.bool,
};
this.state = {
screenClass: getConfiguration().defaultScreenClass,
};
this.screenClassRef = React.createRef();
this.setScreenClass = this.setScreenClass.bind(this);
}
componentDidMount() {
this.setScreenClass();
window.addEventListener('resize', this.setScreenClass, false);
}
componentWillUnmount() {
window.removeEventListener('resize', this.setScreenClass, false);
}
setScreenClass() {
const { useOwnWidth } = this.props;
const source = useOwnWidth && this.screenClassRef && this.screenClassRef.current;
const currScreenClass = getScreenClass(source);
if (currScreenClass !== this.state.screenClass) {
this.setState({ screenClass: currScreenClass });
}
}
render() {
const { screenClass } = this.state;
const { children, useOwnWidth } = this.props;
return (
<ScreenClassContext.Provider value={screenClass}>
{useOwnWidth
? <div ref={this.screenClassRef}>{children}</div>
: <React.Fragment>{children}</React.Fragment>
}
</ScreenClassContext.Provider>
);
}
}
ScreenClassProvider.defaultProps = {
useOwnWidth: false,
};

10

src/context/ScreenClassResolver/index.jsx

@@ -6,6 +6,2 @@ import React, { Component } from 'react';

export default class ScreenClassResolver extends Component {
static propTypes = {
children: PropTypes.func.isRequired,
};
render() {

@@ -20,3 +16,3 @@ const { children } = this.props;

<ScreenClassContext.Consumer>
{screenClassResolved => children(screenClassResolved)}
{(screenClassResolved) => children(screenClassResolved)}
</ScreenClassContext.Consumer>

@@ -32,1 +28,5 @@ </ScreenClassProvider>

}
ScreenClassResolver.propTypes = {
children: PropTypes.func.isRequired,
};

202

src/grid/Col/index.jsx

@@ -9,101 +9,2 @@ import React, { createElement } from 'react';

export default class Col extends React.PureComponent {
static propTypes = {
/**
* Content of the column
*/
children: PropTypes.node,
/**
* The width of the column for screenclass `xs`, either a number between 0 and 12, or "content"
*/
xs: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The width of the column for screenclass `sm`, either a number between 0 and 12, or "content"
*/
sm: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The width of the column for screenclass `md`, either a number between 0 and 12, or "content"
*/
md: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The width of the column for screenclass `lg`, either a number between 0 and 12, or "content"
*/
lg: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The width of the column for screenclass `xl`, either a number between 0 and 12, or "content"
*/
xl: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The offset of this column for all screenclasses
*/
offset: PropTypes.shape({
xs: PropTypes.number,
sm: PropTypes.number,
md: PropTypes.number,
lg: PropTypes.number,
xl: PropTypes.number,
}),
/**
* The amount this column is pushed to the right for all screenclasses
*/
push: PropTypes.shape({
xs: PropTypes.number,
sm: PropTypes.number,
md: PropTypes.number,
lg: PropTypes.number,
xl: PropTypes.number,
}),
/**
* The amount this column is pulled to the left for all screenclasses
*/
pull: PropTypes.shape({
xs: PropTypes.number,
sm: PropTypes.number,
md: PropTypes.number,
lg: PropTypes.number,
xl: PropTypes.number,
}),
/**
* Optional styling
*/
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
/**
* Set to apply some debug styling
*/
debug: PropTypes.bool,
/**
* Use your own component
*/
component: PropTypes.elementType,
};
static defaultProps = {
children: null,
xs: null,
sm: null,
md: null,
lg: null,
xl: null,
offset: {},
push: {},
pull: {},
style: {},
debug: false,
component: 'div',
};
renderCol = (gutterWidth, screenClass) => {

@@ -147,5 +48,5 @@ const {

<ScreenClassResolver>
{screenClass => (
{(screenClass) => (
<GutterWidthContext.Consumer>
{gutterWidth => this.renderCol(gutterWidth, screenClass)}
{(gutterWidth) => this.renderCol(gutterWidth, screenClass)}
</GutterWidthContext.Consumer>

@@ -156,1 +57,100 @@ )}

}
Col.propTypes = {
/**
* Content of the column
*/
children: PropTypes.node,
/**
* The width of the column for screenclass `xs`, either a number between 0 and 12, or "content"
*/
xs: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The width of the column for screenclass `sm`, either a number between 0 and 12, or "content"
*/
sm: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The width of the column for screenclass `md`, either a number between 0 and 12, or "content"
*/
md: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The width of the column for screenclass `lg`, either a number between 0 and 12, or "content"
*/
lg: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The width of the column for screenclass `xl`, either a number between 0 and 12, or "content"
*/
xl: PropTypes.oneOfType([
PropTypes.number,
PropTypes.oneOf(['content']),
]),
/**
* The offset of this column for all screenclasses
*/
offset: PropTypes.shape({
xs: PropTypes.number,
sm: PropTypes.number,
md: PropTypes.number,
lg: PropTypes.number,
xl: PropTypes.number,
}),
/**
* The amount this column is pushed to the right for all screenclasses
*/
push: PropTypes.shape({
xs: PropTypes.number,
sm: PropTypes.number,
md: PropTypes.number,
lg: PropTypes.number,
xl: PropTypes.number,
}),
/**
* The amount this column is pulled to the left for all screenclasses
*/
pull: PropTypes.shape({
xs: PropTypes.number,
sm: PropTypes.number,
md: PropTypes.number,
lg: PropTypes.number,
xl: PropTypes.number,
}),
/**
* Optional styling
*/
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
/**
* Set to apply some debug styling
*/
debug: PropTypes.bool,
/**
* Use your own component
*/
component: PropTypes.elementType,
};
Col.defaultProps = {
children: null,
xs: null,
sm: null,
md: null,
lg: null,
xl: null,
offset: {},
push: {},
pull: {},
style: {},
debug: false,
component: 'div',
};

119

src/grid/Container/index.jsx

@@ -8,57 +8,2 @@ import React, { createElement } from 'react';

export default class Container extends React.PureComponent {
static propTypes = {
/**
* Content of the component
*/
children: PropTypes.node.isRequired,
/**
* True makes the container full-width, false fixed-width
*/
fluid: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in xs, not present means fluid everywhere
*/
xs: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in sm, not present means fluid everywhere
*/
sm: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in md, not present means fluid everywhere
*/
md: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in lg, not present means fluid everywhere
*/
lg: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in xl, not present means fluid everywhere
*/
xl: PropTypes.bool,
/**
* Optional styling
*/
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
/**
* Use your own component
*/
component: PropTypes.elementType,
};
static defaultProps = {
fluid: false,
xs: false,
sm: false,
md: false,
lg: false,
xl: false,
style: {},
component: 'div',
};
render() {

@@ -71,3 +16,3 @@ const {

<ScreenClassResolver>
{screenClass => createElement(
{(screenClass) => createElement(
component,

@@ -89,8 +34,7 @@ {

},
<React.Fragment>
<>
{children}
<span style={getAfterStyle()} />
</React.Fragment>,
)
}
</>,
)}
</ScreenClassResolver>

@@ -100,1 +44,56 @@ );

}
Container.propTypes = {
/**
* Content of the component
*/
children: PropTypes.node.isRequired,
/**
* True makes the container full-width, false fixed-width
*/
fluid: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in xs, not present means fluid everywhere
*/
xs: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in sm, not present means fluid everywhere
*/
sm: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in md, not present means fluid everywhere
*/
md: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in lg, not present means fluid everywhere
*/
lg: PropTypes.bool,
/**
* This is in combination with fluid enabled
* True makes container fluid only in xl, not present means fluid everywhere
*/
xl: PropTypes.bool,
/**
* Optional styling
*/
style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
/**
* Use your own component
*/
component: PropTypes.elementType,
};
Container.defaultProps = {
fluid: false,
xs: false,
sm: false,
md: false,
lg: false,
xl: false,
style: {},
component: 'div',
};

120

src/grid/Row/index.jsx

@@ -9,62 +9,2 @@ import React from 'react';

export default class Row extends React.PureComponent {
static propTypes = {
/**
* Content of the element
*/
children: PropTypes.node.isRequired,
/**
* Vertical column alignment
*/
align: PropTypes.oneOf(['normal', 'start', 'center', 'end', 'stretch']),
/**
* Horizontal column alignment
*/
justify: PropTypes.oneOf([
'start',
'center',
'end',
'between',
'around',
'initial',
'inherit',
]),
/**
* No gutter for this row
*/
nogutter: PropTypes.bool,
/**
* Custom gutter width for this row
*/
gutterWidth: PropTypes.number,
/**
* Optional styling
*/
style: PropTypes.objectOf(
PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
),
/**
* Set to apply some debug styling
*/
debug: PropTypes.bool,
/**
* Use your own component
*/
component: PropTypes.elementType,
/**
* Whether the cols should not wrap
*/
nowrap: PropTypes.bool,
};
static defaultProps = {
align: 'normal',
justify: 'start',
nogutter: false,
gutterWidth: null,
style: {},
debug: false,
component: 'div',
nowrap: false,
};
render = () => {

@@ -103,1 +43,61 @@ const {

}
Row.propTypes = {
/**
* Content of the element
*/
children: PropTypes.node.isRequired,
/**
* Vertical column alignment
*/
align: PropTypes.oneOf(['normal', 'start', 'center', 'end', 'stretch']),
/**
* Horizontal column alignment
*/
justify: PropTypes.oneOf([
'start',
'center',
'end',
'between',
'around',
'initial',
'inherit',
]),
/**
* No gutter for this row
*/
nogutter: PropTypes.bool,
/**
* Custom gutter width for this row
*/
gutterWidth: PropTypes.number,
/**
* Optional styling
*/
style: PropTypes.objectOf(
PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
),
/**
* Set to apply some debug styling
*/
debug: PropTypes.bool,
/**
* Use your own component
*/
component: PropTypes.elementType,
/**
* Whether the cols should not wrap
*/
nowrap: PropTypes.bool,
};
Row.defaultProps = {
align: 'normal',
justify: 'start',
nogutter: false,
gutterWidth: null,
style: {},
debug: false,
component: 'div',
nowrap: false,
};

1

src/index.js

@@ -12,1 +12,2 @@ // Grid

export { setConfiguration } from './config';
export { useScreenClass } from './utils';

75

src/utilities/Hidden/index.jsx

@@ -7,40 +7,5 @@ import React from 'react';

export default class Hidden extends React.PureComponent {
static propTypes = {
/**
* Content of the component
*/
children: PropTypes.node.isRequired,
/**
* Hide on extra small devices
*/
xs: PropTypes.bool,
/**
* Hide on small devices
*/
sm: PropTypes.bool,
/**
* Hide on medium devices
*/
md: PropTypes.bool,
/**
* Hide on large devices
*/
lg: PropTypes.bool,
/**
* Hide on xlarge devices
*/
xl: PropTypes.bool,
};
static defaultProps = {
xs: false,
sm: false,
md: false,
lg: false,
xl: false,
};
render = () => (
<ScreenClassResolver>
{screenClass => (style.hidden({
{(screenClass) => (style.hidden({
screenClass,

@@ -54,6 +19,40 @@ xs: this.props.xs,

? null
: this.props.children)
}
: this.props.children)}
</ScreenClassResolver>
);
}
Hidden.propTypes = {
/**
* Content of the component
*/
children: PropTypes.node.isRequired,
/**
* Hide on extra small devices
*/
xs: PropTypes.bool,
/**
* Hide on small devices
*/
sm: PropTypes.bool,
/**
* Hide on medium devices
*/
md: PropTypes.bool,
/**
* Hide on large devices
*/
lg: PropTypes.bool,
/**
* Hide on xlarge devices
*/
xl: PropTypes.bool,
};
Hidden.defaultProps = {
xs: false,
sm: false,
md: false,
lg: false,
xl: false,
};

18

src/utilities/ScreenClassRender/index.jsx

@@ -6,15 +6,15 @@ import React from 'react';

export default class ScreenClassRender extends React.PureComponent {
static propTypes = {
/**
* The function which return value will be rendered.
* Will be called with one argument: the screen class.
*/
render: PropTypes.func.isRequired,
};
render = () => (
<ScreenClassResolver>
{screenClass => this.props.render(screenClass)}
{(screenClass) => this.props.render(screenClass)}
</ScreenClassResolver>
);
}
ScreenClassRender.propTypes = {
/**
* The function which return value will be rendered.
* Will be called with one argument: the screen class.
*/
render: PropTypes.func.isRequired,
};

42

src/utils.js
/* global window */
/* eslint "no-console": "off" */
import { useState, useEffect } from 'react';
import { getConfiguration } from './config';
const getViewPort = (source) => {
if (source && source.clientWidth) {
return source.clientWidth;
console.log(source);
if (source && source.current && source.current.clientWidth) {
return source.current.clientWidth;
}

@@ -18,16 +20,30 @@ if (typeof window !== 'undefined' && window.innerWidth) {

export const getScreenClass = (source) => {
const { breakpoints, defaultScreenClass } = getConfiguration();
let screenClass = defaultScreenClass;
export const useScreenClass = (source) => {
const [screenClass, setScreenClass] = useState(getConfiguration().defaultScreenClass);
const viewport = getViewPort(source);
if (viewport) {
screenClass = 'xs';
if (breakpoints[0] && viewport >= breakpoints[0]) screenClass = 'sm';
if (breakpoints[1] && viewport >= breakpoints[1]) screenClass = 'md';
if (breakpoints[2] && viewport >= breakpoints[2]) screenClass = 'lg';
if (breakpoints[3] && viewport >= breakpoints[3]) screenClass = 'xl';
}
useEffect(() => {
function handleWindowResized() {
const { breakpoints, defaultScreenClass } = getConfiguration();
let newScreenClass = defaultScreenClass;
const viewport = getViewPort(source);
if (viewport) {
newScreenClass = 'xs';
if (newScreenClass[0] && viewport >= breakpoints[0]) newScreenClass = 'sm';
if (breakpoints[1] && viewport >= breakpoints[1]) newScreenClass = 'md';
if (breakpoints[2] && viewport >= breakpoints[2]) newScreenClass = 'lg';
if (breakpoints[3] && viewport >= breakpoints[3]) newScreenClass = 'xl';
}
setScreenClass(newScreenClass);
}
window.addEventListener('resize', handleWindowResized, false);
handleWindowResized();
return () => {
window.removeEventListener('resize', handleWindowResized, false);
};
});
return screenClass;
};
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc