@chakra-ui/breakpoint-utils
Version:
A Quick description of the component
60 lines (58 loc) • 1.39 kB
JavaScript
// src/responsive.ts
import { isObject } from "@chakra-ui/shared-utils";
var breakpoints = Object.freeze([
"base",
"sm",
"md",
"lg",
"xl",
"2xl"
]);
function mapResponsive(prop, mapper) {
if (Array.isArray(prop)) {
return prop.map((item) => item === null ? null : mapper(item));
}
if (isObject(prop)) {
return Object.keys(prop).reduce((result, key) => {
result[key] = mapper(prop[key]);
return result;
}, {});
}
if (prop != null) {
return mapper(prop);
}
return null;
}
function objectToArrayNotation(obj, bps = breakpoints) {
const result = bps.map((br) => {
var _a;
return (_a = obj[br]) != null ? _a : null;
});
const lastItem = result[result.length - 1];
while (lastItem === null)
result.pop();
return result;
}
function arrayToObjectNotation(values, bps = breakpoints) {
const result = {};
values.forEach((value, index) => {
const key = bps[index];
if (value == null)
return;
result[key] = value;
});
return result;
}
function isResponsiveObjectLike(obj, bps = breakpoints) {
const keys = Object.keys(obj);
return keys.length > 0 && keys.every((key) => bps.includes(key));
}
var isCustomBreakpoint = (v) => Number.isNaN(Number(v));
export {
breakpoints,
mapResponsive,
objectToArrayNotation,
arrayToObjectNotation,
isResponsiveObjectLike,
isCustomBreakpoint
};