@faceless-ui/css-grid
Version:
A React library for building layouts using CSS Grid
87 lines • 7.31 kB
JavaScript
;
'use client';
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 });
exports.useSettings = void 0;
var react_1 = __importStar(require("react"));
var getColGap_1 = __importDefault(require("./getColGap"));
var Context = (0, react_1.createContext)({});
var useSettings = function () { return (0, react_1.useContext)(Context); };
exports.useSettings = useSettings;
var SettingsProvider = function (props) {
var children = props.children, _a = props.cols, cols = _a === void 0 ? {
s: 12,
m: 12,
l: 12,
xl: 12,
} : _a, _b = props.colGap, colGap = _b === void 0 ? {
s: '10px',
m: '10px',
l: '10px',
xl: '10px',
} : _b, _c = props.rowGap, rowGap = _c === void 0 ? {
s: '10px',
m: '10px',
l: '10px',
xl: '10px',
} : _c, _d = props.classPrefix, classPrefix = _d === void 0 ? 'react-css-grid' : _d, breakpoints = props.breakpoints, _e = props.breakpoints, _f = _e === void 0 ? {
s: 768,
m: 1024,
l: 1440,
} : _e, breakpointS = _f.s, breakpointM = _f.m, breakpointL = _f.l;
var colGapXL = (0, getColGap_1.default)(colGap, cols, 'xl');
var colGapL = (0, getColGap_1.default)(colGap, cols, 'l');
var colGapM = (0, getColGap_1.default)(colGap, cols, 'm');
var colGapS = (0, getColGap_1.default)(colGap, cols, 's');
var xlGridStyles = cols.xl ? Array.from(Array(cols.xl).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__grid--xl-cols-").concat(col + 1, " { grid-template-columns: repeat(").concat(col + 1, ", 1fr); }"); }, ".".concat(classPrefix, "__grid { display: grid; column-gap: ").concat(colGapXL, "; row-gap: ").concat(rowGap.xl, "; }")) : '';
var lGridStyles = cols.l ? Array.from(Array(cols.l).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__grid--l-cols-").concat(col + 1, " { grid-template-columns: repeat(").concat(col + 1, ", 1fr); }"); }, ".".concat(classPrefix, "__grid { display: grid; column-gap: ").concat(colGapL, "; row-gap: ").concat(rowGap.l, "; } ")) : '';
var mGridStyles = cols.m ? Array.from(Array(cols.m).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__grid--m-cols-").concat(col + 1, " { grid-template-columns: repeat(").concat(col + 1, ", 1fr); }"); }, ".".concat(classPrefix, "__grid { display: grid; column-gap: ").concat(colGapM, "; row-gap: ").concat(rowGap.m, "; } ")) : '';
var sGridStyles = cols.s ? Array.from(Array(cols.s).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__grid--s-cols-").concat(col + 1, " { grid-template-columns: repeat(").concat(col + 1, ", 1fr); }"); }, ".".concat(classPrefix, "__grid { display: grid; column-gap: ").concat(colGapS, "; row-gap: ").concat(rowGap.s, "; } ")) : '';
var xlCellStartStyles = cols.xl ? Array.from(Array(cols.xl).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__cell--xl-col-start-").concat(col + 1, " { grid-column-start: ").concat(col + 1, "; }"); }, '') : '';
var lCellStartStyles = cols.l ? Array.from(Array(cols.l).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__cell--l-col-start-").concat(col + 1, " { grid-column-start: ").concat(col + 1, "; }"); }, '') : '';
var mCellStartStyles = cols.m ? Array.from(Array(cols.m).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__cell--m-col-start-").concat(col + 1, " { grid-column-start: ").concat(col + 1, "; }"); }, '') : '';
var sCellStartStyles = cols.s ? Array.from(Array(cols.s).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__cell--s-col-start-").concat(col + 1, " { grid-column-start: ").concat(col + 1, "; }"); }, '') : '';
var xlCellEndStyles = cols.xl ? Array.from(Array(cols.xl).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__cell--xl-col-end-").concat(col + 1, " { grid-column-end: span ").concat(col + 1, "; }"); }, '') : '';
var lCellEndStyles = cols.l ? Array.from(Array(cols.l).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__cell--l-col-end-").concat(col + 1, " { grid-column-end: span ").concat(col + 1, "; }"); }, '') : '';
var mCellEndStyles = cols.m ? Array.from(Array(cols.m).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__cell--m-col-end-").concat(col + 1, " { grid-column-end: span ").concat(col + 1, "; }"); }, '') : '';
var sCellEndStyles = cols.s ? Array.from(Array(cols.s).keys()).reduce(function (style, col) { return "".concat(style, ".").concat(classPrefix, "__cell--s-col-end-").concat(col + 1, " { grid-column-end: span ").concat(col + 1, "; }"); }, '') : '';
var context = {
classPrefix: classPrefix,
cols: cols,
colGap: colGap,
rowGap: rowGap,
breakpoints: breakpoints,
};
return (react_1.default.createElement(Context.Provider, { value: context },
react_1.default.createElement("style", { type: "text/css", dangerouslySetInnerHTML: {
__html: "".concat(xlGridStyles).concat(xlCellStartStyles).concat(xlCellEndStyles, "\n\n @media (max-width: ").concat(breakpointL, "px) {\n ").concat(lGridStyles, "\n ").concat(lCellStartStyles, "\n ").concat(lCellEndStyles, "\n }\n\n @media (max-width: ").concat(breakpointM, "px) {\n ").concat(mGridStyles, "\n ").concat(mCellStartStyles, "\n ").concat(mCellEndStyles, "\n }\n\n @media (max-width: ").concat(breakpointS, "px) {\n ").concat(sGridStyles, "\n ").concat(sCellStartStyles, "\n ").concat(sCellEndStyles, "\n }\n\n .").concat(classPrefix, "__cell {\n min-width: 0;\n }\n "),
} }),
children));
};
exports.default = SettingsProvider;
//# sourceMappingURL=index.js.map