zent
Version:
一套前端设计语言和基于React的实现
42 lines (41 loc) • 2.16 kB
JavaScript
import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import ConfigContext from './ConfigContext';
import LayoutBreakpointContext from './BreakPointContext';
import { getValueForBreakpoint } from './screen-breakpoints';
var LayoutRow = (function (_super) {
__extends(LayoutRow, _super);
function LayoutRow() {
return _super !== null && _super.apply(this, arguments) || this;
}
LayoutRow.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, style = _a.style, justify = _a.justify, align = _a.align, others = __rest(_a, ["className", "style", "justify", "align"]);
var classes = cx({
'zent-row': true,
}, "zent-row-justify-" + justify, "zent-row-align-" + align, className);
return (_jsx(LayoutBreakpointContext.Consumer, { children: function (breakpoints) { return (_jsx(ConfigContext.Consumer, { children: function (config) {
var colGutter = getValueForBreakpoint(breakpoints, config.colGutter);
var rowGutter = getValueForBreakpoint(breakpoints, config.rowGutter);
var rowStyles = style;
if (colGutter > 0) {
var width = -(colGutter / 2);
rowStyles = __assign(__assign({}, rowStyles), { marginLeft: width, marginRight: width });
}
if (rowGutter && rowGutter > 0) {
var height = rowGutter / 2;
rowStyles = __assign(__assign({}, rowStyles), { paddingTop: height, paddingBottom: height });
}
return (_jsx("div", __assign({}, others, { className: classes, style: rowStyles, "data-zv": '10.0.17' }, { children: _this.props.children }), void 0));
} }, void 0)); } }, void 0));
};
LayoutRow.defaultProps = {
justify: 'start',
align: 'start',
};
return LayoutRow;
}(Component));
export { LayoutRow };
export default LayoutRow;