mirror of
https://github.com/SomboChea/ui
synced 2024-12-25 21:54: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 = {
|
||||
small: 576,
|
||||
@ -8,26 +8,31 @@ export const breakpoints = {
|
||||
xlarge: 1275,
|
||||
};
|
||||
|
||||
type Sizes = keyof typeof breakpoints;
|
||||
type Breakpoints = typeof breakpoints;
|
||||
type Sizes = keyof Breakpoints;
|
||||
|
||||
type MediaQuery = {
|
||||
[key in Sizes]: (cls: any) => string;
|
||||
type MediaQuery<T> = {
|
||||
[P in keyof T]: (args: Interpolation, key?: P) => string;
|
||||
};
|
||||
|
||||
const mq: MediaQuery = Object.keys(breakpoints).reduce(
|
||||
(accumulator, label) => {
|
||||
const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
|
||||
const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
|
||||
accumulator[label] = cls =>
|
||||
css`
|
||||
@media (${prefix + breakpoints[label] + suffix}) {
|
||||
${cls};
|
||||
}
|
||||
`;
|
||||
return accumulator;
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
|
||||
{} as MediaQuery
|
||||
);
|
||||
function constructMQ(breakpoint: Sizes, args: Interpolation): string {
|
||||
const label = breakpoints[breakpoint];
|
||||
const prefix = typeof label === 'string' ? '' : 'min-width:';
|
||||
const suffix = typeof label === 'string' ? '' : 'px';
|
||||
|
||||
return css`
|
||||
@media (${prefix + breakpoints[breakpoint] + suffix}) {
|
||||
${args};
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
const mq: MediaQuery<Breakpoints> = {
|
||||
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;
|
||||
|
Loading…
Reference in New Issue
Block a user