@retriever-ui/system
Version:
45 lines (44 loc) • 2.06 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("@emotion/react");
var lodash_1 = __importDefault(require("lodash"));
var convertToTheme_1 = __importDefault(require("./convertToTheme"));
var responsive = function (theme, cssProperty, props) {
if (lodash_1.default.isUndefined(props))
return;
var breakpoints = Object.keys(theme.breakpoints);
if (Array.isArray(props)) {
var isMoreThanBreakpoints = props.length > breakpoints.length;
if (isMoreThanBreakpoints) {
throw new Error('You provided more than breakpoints you created. Please remove the unnecessary or create more breakpoints.');
}
var style_1 = (0, react_1.css)((0, convertToTheme_1.default)(theme, cssProperty, props[0]));
props.forEach(function (prop, index) {
var _a;
var mediaQuery = theme.breakpoint(breakpoints[index]);
var styleBreakpoint = (_a = {},
_a[mediaQuery] = (0, convertToTheme_1.default)(theme, cssProperty, prop),
_a);
style_1 = (0, react_1.css)(style_1, styleBreakpoint);
});
return style_1;
}
if (typeof props === 'object') {
var propsKeys = Object.keys(props);
var style_2 = (0, react_1.css)((0, convertToTheme_1.default)(theme, cssProperty, props[propsKeys[0]]));
propsKeys.forEach(function (prop, index) {
var _a;
var mediaQuery = theme.breakpoint(breakpoints[index]);
var styleBreakpoint = (_a = {},
_a[mediaQuery] = (0, convertToTheme_1.default)(theme, cssProperty, props[prop]),
_a);
style_2 = (0, react_1.css)(style_2, styleBreakpoint);
});
return style_2;
}
return (0, react_1.css)((0, convertToTheme_1.default)(theme, cssProperty, props));
};
exports.default = responsive;