phx-react
Version:
PHX REACT
72 lines • 2.49 kB
JavaScript
;
exports.__esModule = true;
exports.PHXTwoColumnLayout = exports.classNames = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
function classNames() {
var classes = [];
for (var _i = 0; _i < arguments.length; _i++) {
classes[_i] = arguments[_i];
}
return classes.filter(Boolean).join(' ');
}
exports.classNames = classNames;
var gapClasses = {
2: 'gap-2',
3: 'gap-3',
4: 'gap-4',
6: 'gap-6',
8: 'gap-8',
12: 'gap-12'
};
var gapXClasses = {
2: 'gap-x-2',
3: 'gap-x-3',
4: 'gap-x-4',
6: 'gap-x-6',
8: 'gap-x-8',
12: 'gap-x-12'
};
var gapYClasses = {
2: 'gap-y-2',
3: 'gap-y-3',
4: 'gap-y-4',
6: 'gap-y-6',
8: 'gap-y-8',
12: 'gap-y-12'
};
var PHXTwoColumnLayout = function (_a) {
var _b = _a.className, className = _b === void 0 ? '' : _b, left = _a.left, _c = _a.responsive, responsive = _c === void 0 ? {
gapX: 4,
gapY: 2,
md: {
cols: 3,
leftSpan: 2,
rightSpan: 1
}
} : _c, right = _a.right;
var _d = responsive.gap, gap = _d === void 0 ? 4 : _d, gapX = responsive.gapX, gapY = responsive.gapY, bpConfigs = tslib_1.__rest(responsive, ["gap", "gapX", "gapY"]);
var bpClasses = [];
var leftClasses = [];
var rightClasses = [];
for (var _i = 0, _e = Object.keys(bpConfigs); _i < _e.length; _i++) {
var bp = _e[_i];
var conf = bpConfigs[bp];
if (!conf)
continue;
if (conf.cols)
bpClasses.push("".concat(bp, ":grid-cols-").concat(conf.cols));
if (conf.leftSpan)
leftClasses.push("".concat(bp, ":col-span-").concat(conf.leftSpan));
if (conf.rightSpan)
rightClasses.push("".concat(bp, ":col-span-").concat(conf.rightSpan));
}
return (react_1["default"].createElement("div", { className: classNames.apply(void 0, tslib_1.__spreadArray(tslib_1.__spreadArray(['grid grid-cols-1',
gapClasses[gap],
gapX && gapXClasses[gapX],
gapY && gapYClasses[gapY]], bpClasses, false), [className], false)) },
react_1["default"].createElement("div", { className: classNames.apply(void 0, leftClasses) }, left),
react_1["default"].createElement("div", { className: classNames.apply(void 0, rightClasses) }, right)));
};
exports.PHXTwoColumnLayout = PHXTwoColumnLayout;
//# sourceMappingURL=TwoColumnLayout.js.map