@lanaco/lnc-react-ui
Version:
React component library
92 lines (91 loc) • 2.02 kB
JavaScript
const x = (n) => n.min === 0 ? `(max-width: ${n.max}px)` : n.max === 1 / 0 ? `(min-width: ${n.min}px)` : `(min-width: ${n.min}px) and (max-width: ${n.max}px)`, e = (n) => ({
...n,
mediaQuery: x(n)
}), t = {
XS: e({
type: "XS",
index: 0,
min: 0,
max: 480
}),
S: e({
type: "S",
index: 1,
min: 481,
max: 767
}),
M: e({
type: "M",
index: 2,
min: 768,
max: 1024
}),
L: e({
type: "L",
index: 3,
min: 1025,
max: 1280
}),
XL: e({
type: "XL",
index: 4,
min: 1281,
max: 1 / 0
})
}, p = (n) => {
const i = t[n];
if (!i)
throw new Error(
`Invalid breakpoint key: "${n}". Valid keys: ${a.join(", ")}`
);
return `(min-width: ${i.min}px)`;
}, w = (n) => {
const i = t[n];
if (!i)
throw new Error(
`Invalid breakpoint key: "${n}". Valid keys: ${a.join(", ")}`
);
return i.max === 1 / 0 ? c : `(max-width: ${i.max}px)`;
}, l = (n) => {
const i = t[n];
if (!i)
throw new Error(
`Invalid breakpoint key: "${n}". Valid keys: ${a.join(", ")}`
);
return x(i);
}, S = (n, i) => {
const o = t[n], r = t[i];
if (!o)
throw new Error(
`Invalid breakpoint key: "${n}". Valid keys: ${a.join(", ")}`
);
if (!r)
throw new Error(
`Invalid breakpoint key: "${i}". Valid keys: ${a.join(", ")}`
);
if (o.index > r.index)
throw new Error(
`Start breakpoint "${n}" must be smaller than or equal to end breakpoint "${i}"`
);
const m = o.min, d = r.max;
return d === 1 / 0 ? `(min-width: ${m}px)` : `(min-width: ${m}px) and (max-width: ${d}px)`;
}, a = ["XS", "S", "M", "L", "XL"], c = "(min-width: 0px)", s = {
mobile: ["XS", "S"],
tablet: ["M"],
desktop: ["L", "XL"]
}, $ = (n) => s.mobile.includes(n), y = (n) => s.tablet.includes(n), u = (n) => s.desktop.includes(n), h = t.S.max, E = t.XS.max;
export {
a as B,
s as D,
h as M,
E as S,
$ as a,
S as b,
y as c,
w as d,
x as g,
u as i,
l as o,
t as s,
p as u
};