"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var macro_1 = __importStar(require("styled-components/macro"));
var isNumOrStr_1 = __importDefault(require("../validators/isNumOrStr"));
var isNum_1 = __importDefault(require("../number/isNum"));
/**
*
* Return components for rendering flexbox when specified margin.
* Flexbox wrap when reach specified breakpoint(s)
* All Columns have same margin between other Columns got by the same createRowColumnLayout(margin)
* <RowsContainer/>: wrap Rows. To ensure Rows are wrapped by block
* <Row/>: wrap Column. Auto wrap Columns if they exceed the width.
* <Column/>: flexbox
*
* @author Sandy Lau https://github.com/sandylau333
*
* @param paddingHoriz
* @param paddingVerti
* @category styledComponents
* @module createRowColumnLayout
*/
function createRowColumnLayout(paddingHoriz, paddingVerti) {
if (paddingHoriz === void 0) { paddingHoriz = 30; }
if (paddingVerti === void 0) { paddingVerti = 20; }
var halfPaddingHoriz = paddingHoriz / 2;
var halfPaddingVerti = paddingVerti / 2;
// Create Rows Container
var RowsContainer = macro_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), rowsContainerCss);
RowsContainer.displayName = 'RowsContainer';
// Create Row
var rowCss = getRowCss(halfPaddingVerti, halfPaddingHoriz);
var Row = macro_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), rowCss);
Row.displayName = 'Row';
// Create Column
var columnCss = getColumnCss(halfPaddingVerti, halfPaddingHoriz);
var Column = macro_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), columnCss);
Column.displayName = 'Column';
return {
rowsContainerCss: rowsContainerCss,
RowsContainer: RowsContainer,
rowCss: rowCss,
Row: Row,
columnCss: columnCss,
Column: Column,
};
}
exports.default = createRowColumnLayout;
// Css of RowsContainer
var rowsContainerCss = (0, macro_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 100%;\n ", "\n"], ["\n width: 100%;\n ", "\n"
// Css of Row
])), function (_a) {
var extraCss = _a.extraCss;
return extraCss;
});
// Css of Row
var getRowCss = function (halfPaddingVerti, halfPaddingHoriz) { return (0, macro_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin-left: -", "px;\n margin-right: -", "px;\n\n /* Cancel out extra vertical padding */\n &:first-child {\n margin-top: -", "px;\n }\n\n /* Fix weird issue for SectionCardBodyDiv display block */\n\n /* &:last-child {\n margin-bottom: -", "px;\n } */\n\n ", "\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin-left: -", "px;\n margin-right: -", "px;\n\n /* Cancel out extra vertical padding */\n &:first-child {\n margin-top: -", "px;\n }\n\n /* Fix weird issue for SectionCardBodyDiv display block */\n\n /* &:last-child {\n margin-bottom: -", "px;\n } */\n\n ", "\n"
// Css of Column
])), halfPaddingHoriz, halfPaddingHoriz, halfPaddingVerti, halfPaddingVerti, function (_a) {
var extraCss = _a.extraCss;
return extraCss;
}); };
// Css of Column
var getColumnCss = function (halfPaddingVerti, halfPaddingHoriz) { return (0, macro_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n flex: ", ";\n max-width: ", ";\n padding: ", "px ", "px;\n box-sizing: border-box;\n ", "\n\n ", "\n\n ", "\n"], ["\n display: flex;\n flex-direction: ", ";\n flex: ", ";\n max-width: ", ";\n padding: ", "px ", "px;\n box-sizing: border-box;\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
var _b = _a.flexDirection, flexDirection = _b === void 0 ? 'column' : _b;
return flexDirection;
}, function (_a) {
var _b = _a.flex, flex = _b === void 0 ? '1' : _b;
return flex;
}, function (_a) {
var _b = _a.maxWidth, maxWidth = _b === void 0 ? '100%' : _b;
return (0, isNum_1.default)(maxWidth) ? "".concat(maxWidth, "px") : maxWidth;
}, halfPaddingVerti, halfPaddingHoriz, function (_a) {
var breakpoint = _a.breakpoint;
return breakpoint ? (0, macro_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n @media (max-width: ", "px) { \n flex-basis: 100%;\n max-width: 100%\n }\n "], ["\n @media (max-width: ", "px) { \n flex-basis: 100%;\n max-width: 100%\n }\n "])), breakpoint) : '';
}, function (_a) {
var _b = _a.breakpoints, breakpoints = _b === void 0 ? {} : _b;
return Object.keys(breakpoints)
.map(function (bp) { return parseFloat(bp); })
.sort(function (bp1, bp2) { return bp2 - bp1; })
.map(function (bpNumber, index, array) {
var bp = breakpoints[bpNumber.toString()];
if (!bp)
return '';
/* eslint-disable @typescript-eslint/indent */
return (0, macro_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n @media (max-width: ", "px) and (min-width: ", "px) {\n flex: ", ";\n max-width: ", "\n }\n "], ["\n @media (max-width: ", "px) and (min-width: ", "px) {\n flex: ", ";\n max-width: ", "\n }\n "
/* eslint-enable @typescript-eslint/indent */
])), bpNumber, array[index + 1] || 0, (0, isNumOrStr_1.default)(bp)
? bp
: bp.flex, !(0, isNumOrStr_1.default)(bp)
&& bp.maxWidth !== undefined
? bp.maxWidth
: '100%');
/* eslint-enable @typescript-eslint/indent */
});
}, function (_a) {
var extraCss = _a.extraCss;
return extraCss;
}); };
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
Source