baseui
Version:
A React Component library implementing the Base design language
46 lines (43 loc) • 1.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getMinimumPageMargins = exports.getMediaQueryPageMargins = exports.getMediaQuery = exports.getMediaQueries = void 0;
/*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
/**
* Helper function that generates media queries based on breakpoint, e.g.
* getMediaQuery(720) => '@media screen and (min-width: 720px)'
*/
const getMediaQuery = breakpoint => `@media screen and (min-width: ${breakpoint}px)`;
exports.getMediaQuery = getMediaQuery;
const getMediaQueries = breakpoints => Object.keys(breakpoints)
// @ts-ignore
.map(key => breakpoints[key]).sort((a, b) => a - b).map(getMediaQuery);
exports.getMediaQueries = getMediaQueries;
const getMinimumPageMargins = margins => {
const margin = Array.isArray(margins) ? margins[0] : margins;
return {
paddingInlineStart: `${margin}px`,
paddingInlineEnd: `${margin}px`
};
};
exports.getMinimumPageMargins = getMinimumPageMargins;
const getMediaQueryPageMargins = theme => {
const result = {};
const mediaQueries = getMediaQueries(theme.breakpoints);
for (const [index, query] of mediaQueries.entries()) {
// There is no guarantee grid.margins will have enough margins to satisfy
// each breakpoint.
const margin = Array.isArray(theme.grid.margins) ? theme.grid.margins[index] ?? theme.grid.margins.at(-1) : theme.grid.margins;
result[query] = {
paddingInlineStart: `${margin}px`,
paddingInlineEnd: `${margin}px`
};
}
return result;
};
exports.getMediaQueryPageMargins = getMediaQueryPageMargins;