zent
Version:
一套前端设计语言和基于React的实现
45 lines (44 loc) • 2.23 kB
JavaScript
import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import cx from 'classnames';
import ConfigContext from './ConfigContext';
import BreakPointHub from './BreakPointHub';
import LayoutBreakpointContext from './BreakPointContext';
import { BREAKPOINTS, getValueForBreakpoint } from './screen-breakpoints';
var LayoutGrid = (function (_super) {
__extends(LayoutGrid, _super);
function LayoutGrid() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
breakpoints: {},
};
_this.onBreakpointChange = function (name, matched) {
_this.setState(function (prevState) {
var _a;
var breakpoints = prevState.breakpoints;
return {
breakpoints: __assign(__assign({}, breakpoints), (_a = {}, _a[name] = matched, _a)),
};
});
};
return _this;
}
LayoutGrid.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, style = _a.style, others = __rest(_a, ["className", "style"]);
var breakpoints = this.state.breakpoints;
return (_jsx(ConfigContext.Consumer, { children: function (config) {
var rowGutter = getValueForBreakpoint(breakpoints, config.rowGutter);
var layoutStyles = style;
if (rowGutter > 0) {
var height = -(rowGutter / 2);
layoutStyles = __assign(__assign({}, layoutStyles), { marginTop: height, marginBottom: height });
}
return (_jsxs("div", __assign({}, others, { className: cx('zent-layout-grid', className), style: layoutStyles, "data-zv": '10.0.17' }, { children: [_jsx(LayoutBreakpointContext.Provider, __assign({ value: breakpoints }, { children: _this.props.children }), void 0), _jsx(BreakPointHub, { breakpoints: BREAKPOINTS, onChange: _this.onBreakpointChange }, void 0)] }), void 0));
} }, void 0));
};
return LayoutGrid;
}(Component));
export { LayoutGrid };
export default LayoutGrid;