sombochea/verdaccio-ui
1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-11-28 08:54:27 +07:00
Code Issues Releases Wiki Activity

fix: better type inference for MediaQuery (#180)

Browse Source
This commit is contained in:
Thomas Klein 2019-10-13 10:49:55 +02:00 committed by Juan Picado @jotadeveloper
parent d1b3e6e3b5
commit e0e7c07bce
1 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/utils/styles/media.ts
View File

@ -1,4 +1,4 @@
import { css } from 'emotion'; import { css, Interpolation } from 'emotion';
export const breakpoints = { export const breakpoints = {
small: 576, small: 576,
@ -8,26 +8,31 @@ export const breakpoints = {
xlarge: 1275, xlarge: 1275,
}; };
type Sizes = keyof typeof breakpoints; type Breakpoints = typeof breakpoints;
type Sizes = keyof Breakpoints;
type MediaQuery = { type MediaQuery<T> = {
[key in Sizes]: (cls: any) => string; [P in keyof T]: (args: Interpolation, key?: P) => string;
}; };
const mq: MediaQuery = Object.keys(breakpoints).reduce( function constructMQ(breakpoint: Sizes, args: Interpolation): string {
(accumulator, label) => { const label = breakpoints[breakpoint];
const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:'; const prefix = typeof label === 'string' ? '' : 'min-width:';
const suffix = typeof breakpoints[label] === 'string' ? '' : 'px'; const suffix = typeof label === 'string' ? '' : 'px';
accumulator[label] = cls =>
css` return css`
@media (${prefix + breakpoints[label] + suffix}) { @media (${prefix + breakpoints[breakpoint] + suffix}) {
${cls}; ${args};
} }
`; `;
return accumulator; }
},
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion const mq: MediaQuery<Breakpoints> = {
{} as MediaQuery small: (args, b = 'small') => constructMQ(b, args),
); large: (args, b = 'large') => constructMQ(b, args),
container: (args, b = 'container') => constructMQ(b, args),
medium: (args, b = 'medium') => constructMQ(b, args),
xlarge: (args, b = 'xlarge') => constructMQ(b, args),
};
export default mq; export default mq;