@lanaco/lnc-react-ui
Version:
React component library
2 lines (1 loc) • 1.7 kB
JavaScript
;const d=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)`,o=n=>({...n,mediaQuery:d(n)}),t={XS:o({type:"XS",index:0,min:0,max:480}),S:o({type:"S",index:1,min:481,max:767}),M:o({type:"M",index:2,min:768,max:1024}),L:o({type:"L",index:3,min:1025,max:1280}),XL:o({type:"XL",index:4,min:1281,max:1/0})},c=n=>{const i=t[n];if(!i)throw new Error(`Invalid breakpoint key: "${n}". Valid keys: ${e.join(", ")}`);return`(min-width: ${i.min}px)`},p=n=>{const i=t[n];if(!i)throw new Error(`Invalid breakpoint key: "${n}". Valid keys: ${e.join(", ")}`);return i.max===1/0?l:`(max-width: ${i.max}px)`},E=n=>{const i=t[n];if(!i)throw new Error(`Invalid breakpoint key: "${n}". Valid keys: ${e.join(", ")}`);return d(i)},w=(n,i)=>{const a=t[n],s=t[i];if(!a)throw new Error(`Invalid breakpoint key: "${n}". Valid keys: ${e.join(", ")}`);if(!s)throw new Error(`Invalid breakpoint key: "${i}". Valid keys: ${e.join(", ")}`);if(a.index>s.index)throw new Error(`Start breakpoint "${n}" must be smaller than or equal to end breakpoint "${i}"`);const m=a.min,x=s.max;return x===1/0?`(min-width: ${m}px)`:`(min-width: ${m}px) and (max-width: ${x}px)`},e=["XS","S","M","L","XL"],l="(min-width: 0px)",r={mobile:["XS","S"],tablet:["M"],desktop:["L","XL"]},S=n=>r.mobile.includes(n),I=n=>r.tablet.includes(n),y=n=>r.desktop.includes(n),u=t.S.max,$=t.XS.max;exports.BREAKPOINT_ORDER=e;exports.DEVICE_CATEGORIES=r;exports.MOBILE_SIZE_PX=u;exports.SMALL_MOBILE_SIZE_PX=$;exports.between=w;exports.down=p;exports.getMediaQuery=d;exports.isDesktop=y;exports.isMobile=S;exports.isTablet=I;exports.only=E;exports.screenSizes=t;exports.up=c;