@dabapps/roe
Version:
A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.
66 lines • 4.27 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var classNames = require("classnames");
var React = require("react");
var utils_1 = require("../../utils");
/**
* Placed inside rows to align content in columns.
* The default grid has 12 divisions.
*/
var Column = function (props) {
var children = props.children, className = props.className, _a = props.component, Component = _a === void 0 ? 'div' : _a, xs = props.xs, sm = props.sm, md = props.md, lg = props.lg, xl = props.xl, xsOffset = props.xsOffset, smOffset = props.smOffset, mdOffset = props.mdOffset, lgOffset = props.lgOffset, xlOffset = props.xlOffset, xsFill = props.xsFill, smFill = props.smFill, mdFill = props.mdFill, lgFill = props.lgFill, xlFill = props.xlFill, xsPush = props.xsPush, smPush = props.smPush, mdPush = props.mdPush, lgPush = props.lgPush, xlPush = props.xlPush, xsPull = props.xsPull, smPull = props.smPull, mdPull = props.mdPull, lgPull = props.lgPull, xlPull = props.xlPull, remainingProps = __rest(props, ["children", "className", "component", "xs", "sm", "md", "lg", "xl", "xsOffset", "smOffset", "mdOffset", "lgOffset", "xlOffset", "xsFill", "smFill", "mdFill", "lgFill", "xlFill", "xsPush", "smPush", "mdPush", "lgPush", "xlPush", "xsPull", "smPull", "mdPull", "lgPull", "xlPull"]);
var myClassNames = [
'column',
utils_1.isValidColumnNumber(xs) ? "xs-" + xs : null,
utils_1.isValidColumnNumber(sm) ? "sm-" + sm : null,
utils_1.isValidColumnNumber(md) ? "md-" + md : null,
utils_1.isValidColumnNumber(lg) ? "lg-" + lg : null,
utils_1.isValidColumnNumber(xl) ? "xl-" + xl : null,
utils_1.isValidColumnNumber(xsOffset) ? "xs-offset-" + xsOffset : null,
utils_1.isValidColumnNumber(smOffset) ? "sm-offset-" + smOffset : null,
utils_1.isValidColumnNumber(mdOffset) ? "md-offset-" + mdOffset : null,
utils_1.isValidColumnNumber(lgOffset) ? "lg-offset-" + lgOffset : null,
utils_1.isValidColumnNumber(xlOffset) ? "xl-offset-" + xlOffset : null,
utils_1.isValidColumnNumber(xsFill) ? "xs-fill-" + xsFill : null,
utils_1.isValidColumnNumber(smFill) ? "sm-fill-" + smFill : null,
utils_1.isValidColumnNumber(mdFill) ? "md-fill-" + mdFill : null,
utils_1.isValidColumnNumber(lgFill) ? "lg-fill-" + lgFill : null,
utils_1.isValidColumnNumber(xlFill) ? "xl-fill-" + xlFill : null,
utils_1.isValidColumnNumber(xsPush) ? "xs-push-" + xsPush : null,
utils_1.isValidColumnNumber(smPush) ? "sm-push-" + smPush : null,
utils_1.isValidColumnNumber(mdPush) ? "md-push-" + mdPush : null,
utils_1.isValidColumnNumber(lgPush) ? "lg-push-" + lgPush : null,
utils_1.isValidColumnNumber(xlPush) ? "xl-push-" + xlPush : null,
utils_1.isValidColumnNumber(xsPull) ? "xs-pull-" + xsPull : null,
utils_1.isValidColumnNumber(smPull) ? "sm-pull-" + smPull : null,
utils_1.isValidColumnNumber(mdPull) ? "md-pull-" + mdPull : null,
utils_1.isValidColumnNumber(lgPull) ? "lg-pull-" + lgPull : null,
utils_1.isValidColumnNumber(xlPull) ? "xl-pull-" + xlPull : null,
className,
];
return (React.createElement(Component, __assign({}, remainingProps, { className: classNames(myClassNames) }), children));
};
exports.default = React.memo(Column);
//# sourceMappingURL=column.js.map