emotion-flex
Version:
Fully customizable responsive flexbox grid system, made with emotion
233 lines (203 loc) • 13.6 kB
JavaScript
import _styled from '@emotion/styled/base';
/* eslint-disable no-param-reassign */
var index = function (breakpoints) {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
literal = _ref.literal,
overlap = _ref.overlap;
var mq = literal ? breakpoints : ['&'].concat(breakpoints);
function flatten(obj) {
if (typeof obj !== 'object' || obj == null) {
return [];
}
if (Array.isArray(obj)) {
return obj.map(flatten);
}
var slots = {};
var objects = {};
var props = {};
Object.keys(obj).forEach(function (key) {
// Check if value is an array, but skip if it looks like a selector.
// key.indexOf('&') === 0
var item = obj[key];
if (!Array.isArray(item) && literal) item = [item];
if ((literal || Array.isArray(item)) && key.charCodeAt(0) !== 38) {
var prior = void 0;
item.forEach(function (v, index) {
// Optimize by removing duplicated media query entries
// when they are explicitly known to overlap.
if (overlap && prior === v) {
return;
}
if (v == null) {
// Do not create entries for undefined values as this will
// generate empty media media quries
return;
}
prior = v;
if (index === 0 && !literal) {
props[key] = v;
} else if (slots[mq[index]] === undefined) {
var _slots$mq$index;
slots[mq[index]] = (_slots$mq$index = {}, _slots$mq$index[key] = v, _slots$mq$index);
} else {
slots[mq[index]][key] = v;
}
});
} else if (typeof item === 'object') {
objects[key] = flatten(item);
} else {
props[key] = item;
}
});
// Ensure that all slots and then child objects are pushed to the end
mq.forEach(function (el) {
if (slots[el]) {
props[el] = slots[el];
}
});
Object.assign(props, objects);
return props;
}
return function () {
for (var _len = arguments.length, values = Array(_len), _key = 0; _key < _len; _key++) {
values[_key] = arguments[_key];
}
return values.map(flatten);
};
};
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
var defaultTheme = {
breakpoints: {
sm: 576,
md: 768,
lg: 992,
xl: 1200
},
maxWidths: {
sm: 540,
md: 720,
lg: 960,
xl: 1140
},
gutters: 15
};
var isInteger = function isInteger(value) {
return typeof value === 'number' && isFinite(value) && Math.floor(value) === value;
};
var getBreakpoints = function getBreakpoints(theme) {
return Object.values(theme.breakpoints).map(function (bp) {
return "@media (min-width: " + bp + "px)";
});
};
var getTheme = function getTheme(theme) {
var themeConfig = theme || {};
return _objectSpread({}, defaultTheme, {
// @ts-ignore
breakpoints: _objectSpread({}, defaultTheme.breakpoints, themeConfig.breakpoints),
// @ts-ignore
maxWidths: _objectSpread({}, defaultTheme.maxWidths, themeConfig.maxWidths)
}, themeConfig);
};
var Container =
/*#__PURE__*/
_styled("div", process.env.NODE_ENV === "production" ? {
target: "e1u6ayct0"
} : {
target: "e1u6ayct0",
label: "Container"
})("padding-right:", function (_ref) {
var theme = _ref.theme;
return getTheme(theme).gutters;
}, "px;padding-left:", function (_ref2) {
var theme = _ref2.theme;
return getTheme(theme).gutters;
}, "px;margin-right:auto;margin-left:auto;", function (_ref3) {
var fluid = _ref3.fluid,
theme = _ref3.theme;
return fluid ? {
maxWidth: '100%'
} : index(getBreakpoints(getTheme(theme)))({
maxWidth: ['100%', getTheme(theme).maxWidths.sm, getTheme(theme).maxWidths.md, getTheme(theme).maxWidths.lg, getTheme(theme).maxWidths.xl]
});
}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5lci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXbUQiLCJmaWxlIjoiQ29udGFpbmVyLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IGZhY2VwYWludCBmcm9tICdmYWNlcGFpbnQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZ2V0VGhlbWUsIGdldEJyZWFrcG9pbnRzIH0gZnJvbSAnLi91dGlscyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ29udGFpbmVyUHJvcHMge1xuICAvKipcbiAgICogQWxsb3cgdGhlIENvbnRhaW5lciB0byBmaWxsIGFsbCBvZiBpdCdzIGF2YWlsYmxlIGhvcml6b250YWwgc3BhY2UuXG4gICAqL1xuICBmbHVpZD86IGJvb2xlYW47XG59XG5cbmV4cG9ydCBjb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2PENvbnRhaW5lclByb3BzPmBcbiAgcGFkZGluZy1yaWdodDogJHsoeyB0aGVtZSB9KSA9PiBnZXRUaGVtZSh0aGVtZSkuZ3V0dGVyc31weDtcbiAgcGFkZGluZy1sZWZ0OiAkeyh7IHRoZW1lIH0pID0+IGdldFRoZW1lKHRoZW1lKS5ndXR0ZXJzfXB4O1xuICBtYXJnaW4tcmlnaHQ6IGF1dG87XG4gIG1hcmdpbi1sZWZ0OiBhdXRvO1xuXG4gICR7KHsgZmx1aWQsIHRoZW1lIH0pID0+XG4gICAgZmx1aWRcbiAgICAgID8geyBtYXhXaWR0aDogJzEwMCUnIH1cbiAgICAgIDogZmFjZXBhaW50KGdldEJyZWFrcG9pbnRzKGdldFRoZW1lKHRoZW1lKSkpKHtcbiAgICAgICAgICBtYXhXaWR0aDogW1xuICAgICAgICAgICAgJzEwMCUnLFxuICAgICAgICAgICAgZ2V0VGhlbWUodGhlbWUpLm1heFdpZHRocy5zbSxcbiAgICAgICAgICAgIGdldFRoZW1lKHRoZW1lKS5tYXhXaWR0aHMubWQsXG4gICAgICAgICAgICBnZXRUaGVtZSh0aGVtZSkubWF4V2lkdGhzLmxnLFxuICAgICAgICAgICAgZ2V0VGhlbWUodGhlbWUpLm1heFdpZHRocy54bCxcbiAgICAgICAgICBdLFxuICAgICAgICB9KX1cbmA7XG5cbkNvbnRhaW5lci5kaXNwbGF5TmFtZSA9ICdDb250YWluZXInO1xuIl19 */"));
Container.displayName = 'Container';
var Row =
/*#__PURE__*/
_styled("div", process.env.NODE_ENV === "production" ? {
target: "e10njtzw0"
} : {
target: "e10njtzw0",
label: "Row"
})("display:flex;flex-wrap:wrap;margin-left:", function (_ref) {
var noGutters = _ref.noGutters,
theme = _ref.theme;
return noGutters ? 0 : "-" + getTheme(theme).gutters + "px";
}, ";margin-right:", function (_ref2) {
var noGutters = _ref2.noGutters,
theme = _ref2.theme;
return noGutters ? 0 : "-" + getTheme(theme).gutters + "px";
}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJvdy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVdUMiLCJmaWxlIjoiUm93LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZ2V0VGhlbWUgfSBmcm9tICcuL3V0aWxzJztcblxuZXhwb3J0IGludGVyZmFjZSBSb3dQcm9wcyB7XG4gIC8qKlxuICAgKiBSZW1vdmVzIFJvdydzIG5lZ2F0aXZlIG1hcmdpbnMuXG4gICAqL1xuICBub0d1dHRlcnM/OiBib29sZWFuO1xufVxuXG5leHBvcnQgY29uc3QgUm93ID0gc3R5bGVkLmRpdjxSb3dQcm9wcz5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtd3JhcDogd3JhcDtcbiAgbWFyZ2luLWxlZnQ6ICR7KHsgbm9HdXR0ZXJzLCB0aGVtZSB9KSA9PlxuICAgIG5vR3V0dGVycyA/IDAgOiBgLSR7Z2V0VGhlbWUodGhlbWUpLmd1dHRlcnN9cHhgfTtcbiAgbWFyZ2luLXJpZ2h0OiAkeyh7IG5vR3V0dGVycywgdGhlbWUgfSkgPT5cbiAgICBub0d1dHRlcnMgPyAwIDogYC0ke2dldFRoZW1lKHRoZW1lKS5ndXR0ZXJzfXB4YH07XG5gO1xuXG5Sb3cuZGlzcGxheU5hbWUgPSAnUm93JztcbiJdfQ== */"));
Row.displayName = 'Row';
var toOrder = function toOrder(order) {
if (!order || typeof order === 'number') {
return order;
}
return order === 'first' ? -1 : 13;
};
var toPercent = function toPercent(n) {
var percentage = n / 12 * 100;
return isInteger(percentage) ? percentage + "%" : percentage.toFixed(6) + "%";
};
var Col =
/*#__PURE__*/
_styled("div", process.env.NODE_ENV === "production" ? {
target: "e1w0rvo50"
} : {
target: "e1w0rvo50",
label: "Col"
})("position:relative;width:100%;padding-right:", function (_ref) {
var noGutters = _ref.noGutters,
theme = _ref.theme;
return noGutters ? 0 : getTheme(theme).gutters;
}, "px;padding-left:", function (_ref2) {
var noGutters = _ref2.noGutters,
theme = _ref2.theme;
return noGutters ? 0 : getTheme(theme).gutters;
}, "px;", function (p) {
return index(getBreakpoints(getTheme(p.theme)))({
marginLeft: [p.xsOffset && toPercent(p.xsOffset), p.smOffset && toPercent(p.smOffset), p.mdOffset && toPercent(p.mdOffset), p.lgOffset && toPercent(p.lgOffset), p.xlOffset && toPercent(p.xlOffset)],
flex: [p.xs ? "1 0 " + toPercent(p.xs) : '1 0 0', p.sm && "1 0 " + toPercent(p.sm), p.md && "1 0 " + toPercent(p.md), p.lg && "1 0 " + toPercent(p.lg), p.xl && "1 0 " + toPercent(p.xl)],
maxWidth: [p.xs ? toPercent(p.xs) : '100%', p.sm && toPercent(p.sm), p.md && toPercent(p.md), p.lg && toPercent(p.lg), p.xl && toPercent(p.xl)],
order: [toOrder(p.xsOrder), toOrder(p.smOrder), toOrder(p.mdOrder), toOrder(p.lgOrder), toOrder(p.xlOrder)]
});
}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0RXVDIiwiZmlsZSI6IkNvbC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBmYWNlcGFpbnQgZnJvbSAnZmFjZXBhaW50JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGlzSW50ZWdlciwgZ2V0VGhlbWUsIGdldEJyZWFrcG9pbnRzIH0gZnJvbSAnLi91dGlscyc7XG5cbnR5cGUgVHdvVG9FbGV2ZW4gPSAyIHwgMyB8IDQgfCA1IHwgNiB8IDcgfCA4IHwgOSB8IDEwIHwgMTE7XG50eXBlIE9uZVRvVHdlbHZlID0gMSB8IFR3b1RvRWxldmVuIHwgMTI7XG50eXBlIFplcm9Ub1R3ZWx2ZSA9IDAgfCBPbmVUb1R3ZWx2ZTtcblxudHlwZSBPZmZzZXQgPSAwIHwgMSB8IFR3b1RvRWxldmVuO1xudHlwZSBPcmRlciA9IFplcm9Ub1R3ZWx2ZSB8ICdmaXJzdCcgfCAnbGFzdCc7XG50eXBlIENvbHVtbiA9IE9uZVRvVHdlbHZlO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvbFByb3BzIHtcbiAgLyoqXG4gICAqIFJlbW92ZXMgdGhlIHBhZGRpbmcgYXJvdW5kIENvbHVtblxuICAgKi9cbiAgbm9HdXR0ZXJzPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIFRoZSBudW1iZXIgb2YgY29sdW1ucyB0byBvZmZzZXQgb24gZXh0cmEgc21hbGwgZGV2aWNlc1xuICAgKi9cbiAgeHNPZmZzZXQ/OiBPZmZzZXQ7XG4gIHhzT3JkZXI/OiBPcmRlcjtcbiAgLyoqXG4gICAqIFRoZSBudW1iZXIgb2YgY29sdW1ucyB0byBzcGFuIG9uIGV4dHJhIHNtYWxsIGRldmljZXNcbiAgICovXG4gIHhzPzogQ29sdW1uO1xuICAvKipcbiAgICogVGhlIG51bWJlciBvZiBjb2x1bW5zIHRvIG9mZnNldCBvbiBzbWFsbCBkZXZpY2VzXG4gICAqL1xuICBzbU9mZnNldD86IE9mZnNldDtcbiAgc21PcmRlcj86IE9yZGVyO1xuICAvKipcbiAgICogVGhlIG51bWJlciBvZiBjb2x1bW5zIHRvIHNwYW4gb24gc21hbGwgZGV2aWNlc1xuICAgKi9cbiAgc20/OiBDb2x1bW47XG4gIC8qKlxuICAgKiBUaGUgbnVtYmVyIG9mIGNvbHVtbnMgdG8gb2Zmc2V0IG9uIG1lZGl1bSBkZXZpY2VzXG4gICAqL1xuICBtZE9mZnNldD86IE9mZnNldDtcbiAgbWRPcmRlcj86IE9yZGVyO1xuICAvKipcbiAgICogVGhlIG51bWJlciBvZiBjb2x1bW5zIHRvIHNwYW4gb24gbWVkaXVtIGRldmljZXNcbiAgICovXG4gIG1kPzogQ29sdW1uO1xuICAvKipcbiAgICogVGhlIG51bWJlciBvZiBjb2x1bW5zIHRvIG9mZnNldCBvbiBsYXJnZSBkZXZpY2VzXG4gICAqL1xuICBsZ09mZnNldD86IE9mZnNldDtcbiAgbGdPcmRlcj86IE9yZGVyO1xuICAvKipcbiAgICogVGhlIG51bWJlciBvZiBjb2x1bW5zIHRvIHNwYW4gb24gbGFyZ2UgZGV2aWNlc1xuICAgKi9cbiAgbGc/OiBDb2x1bW47XG4gIC8qKlxuICAgKiBUaGUgbnVtYmVyIG9mIGNvbHVtbnMgdG8gb2Zmc2V0IG9uIGV4dHJhIGxhcmdlIGRldmljZXNcbiAgICovXG4gIHhsT2Zmc2V0PzogT2Zmc2V0O1xuICB4bE9yZGVyPzogT3JkZXI7XG4gIC8qKlxuICAgKiBUaGUgbnVtYmVyIG9mIGNvbHVtbnMgdG8gc3BhbiBvbiBleHRyYSBsYXJnZSBkZXZpY2VzXG4gICAqL1xuICB4bD86IENvbHVtbjtcbn1cblxuY29uc3QgdG9PcmRlciA9IChvcmRlcj86IE9yZGVyKSA9PiB7XG4gIGlmICghb3JkZXIgfHwgdHlwZW9mIG9yZGVyID09PSAnbnVtYmVyJykge1xuICAgIHJldHVybiBvcmRlcjtcbiAgfVxuICByZXR1cm4gb3JkZXIgPT09ICdmaXJzdCcgPyAtMSA6IDEzO1xufTtcblxuY29uc3QgdG9QZXJjZW50ID0gKG46IG51bWJlcikgPT4ge1xuICBjb25zdCBwZXJjZW50YWdlID0gKG4gLyAxMikgKiAxMDA7XG4gIHJldHVybiBpc0ludGVnZXIocGVyY2VudGFnZSkgPyBgJHtwZXJjZW50YWdlfSVgIDogYCR7cGVyY2VudGFnZS50b0ZpeGVkKDYpfSVgO1xufTtcblxuZXhwb3J0IGNvbnN0IENvbCA9IHN0eWxlZC5kaXY8Q29sUHJvcHM+YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiAxMDAlO1xuICBwYWRkaW5nLXJpZ2h0OiAkeyh7IG5vR3V0dGVycywgdGhlbWUgfSkgPT5cbiAgICBub0d1dHRlcnMgPyAwIDogZ2V0VGhlbWUodGhlbWUpLmd1dHRlcnN9cHg7XG4gIHBhZGRpbmctbGVmdDogJHsoeyBub0d1dHRlcnMsIHRoZW1lIH0pID0+XG4gICAgbm9HdXR0ZXJzID8gMCA6IGdldFRoZW1lKHRoZW1lKS5ndXR0ZXJzfXB4O1xuXG4gICR7cCA9PlxuICAgIGZhY2VwYWludChnZXRCcmVha3BvaW50cyhnZXRUaGVtZShwLnRoZW1lKSkpKHtcbiAgICAgIG1hcmdpbkxlZnQ6IFtcbiAgICAgICAgcC54c09mZnNldCAmJiB0b1BlcmNlbnQocC54c09mZnNldCksXG4gICAgICAgIHAuc21PZmZzZXQgJiYgdG9QZXJjZW50KHAuc21PZmZzZXQpLFxuICAgICAgICBwLm1kT2Zmc2V0ICYmIHRvUGVyY2VudChwLm1kT2Zmc2V0KSxcbiAgICAgICAgcC5sZ09mZnNldCAmJiB0b1BlcmNlbnQocC5sZ09mZnNldCksXG4gICAgICAgIHAueGxPZmZzZXQgJiYgdG9QZXJjZW50KHAueGxPZmZzZXQpLFxuICAgICAgXSxcbiAgICAgIGZsZXg6IFtcbiAgICAgICAgcC54cyA/IGAxIDAgJHt0b1BlcmNlbnQocC54cyl9YCA6ICcxIDAgMCcsXG4gICAgICAgIHAuc20gJiYgYDEgMCAke3RvUGVyY2VudChwLnNtKX1gLFxuICAgICAgICBwLm1kICYmIGAxIDAgJHt0b1BlcmNlbnQocC5tZCl9YCxcbiAgICAgICAgcC5sZyAmJiBgMSAwICR7dG9QZXJjZW50KHAubGcpfWAsXG4gICAgICAgIHAueGwgJiYgYDEgMCAke3RvUGVyY2VudChwLnhsKX1gLFxuICAgICAgXSxcbiAgICAgIG1heFdpZHRoOiBbXG4gICAgICAgIHAueHMgPyB0b1BlcmNlbnQocC54cykgOiAnMTAwJScsXG4gICAgICAgIHAuc20gJiYgdG9QZXJjZW50KHAuc20pLFxuICAgICAgICBwLm1kICYmIHRvUGVyY2VudChwLm1kKSxcbiAgICAgICAgcC5sZyAmJiB0b1BlcmNlbnQocC5sZyksXG4gICAgICAgIHAueGwgJiYgdG9QZXJjZW50KHAueGwpLFxuICAgICAgXSxcbiAgICAgIG9yZGVyOiBbXG4gICAgICAgIHRvT3JkZXIocC54c09yZGVyKSxcbiAgICAgICAgdG9PcmRlcihwLnNtT3JkZXIpLFxuICAgICAgICB0b09yZGVyKHAubWRPcmRlciksXG4gICAgICAgIHRvT3JkZXIocC5sZ09yZGVyKSxcbiAgICAgICAgdG9PcmRlcihwLnhsT3JkZXIpLFxuICAgICAgXSxcbiAgICB9KX1cbmA7XG5cbkNvbC5kaXNwbGF5TmFtZSA9ICdDb2wnO1xuIl19 */"));
Col.displayName = 'Col';
export { Col, Container, Row };
//# sourceMappingURL=index.esm.js.map