mirror of
https://github.com/SomboChea/ui
synced 2024-11-05 14:14:26 +07:00
fix: better type inference for MediaQuery (#180)
This commit is contained in:
parent
d1b3e6e3b5
commit
e0e7c07bce
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user