evo/EvoCalculator.Client2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

packages/ui: remove theme prop from Components

Browse Source
This commit is contained in:
vchikalkin 2023-12-01 15:02:54 +03:00
parent b77f54e815
commit 6f31814513
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/grid.ts
View File

@ -8,19 +8,19 @@ type WithArrayType<T> = {
type AllowedProps = Omit<HTMLDivElement['style'], 'color' | 'translate'>;
export type GridProps = Partial<WithArrayType<AllowedProps>> & { theme: Theme };
export type GridProps = Partial<WithArrayType<AllowedProps>>;
export const Grid = styled.div<GridProps>`
display: grid;
${({ theme, ...props }: GridProps) => getStyles(props, theme)}
${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
`;
export type FlexProps = GridProps;
export const Flex = styled.div<GridProps>`
display: flex;
${({ theme, ...props }: GridProps) => getStyles(props, theme)}
${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
`;
export type BoxProps = GridProps;
export const Box = styled.div<GridProps>`
${({ theme, ...props }: GridProps) => getStyles(props, theme)}
${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
`;

2
packages/ui/utils.ts
View File

@ -1,12 +1,14 @@
import { dash, omit } from 'radash';
export type Theme = { breakpoints: string[] };
function min(breakpoint: string, style: string) {
return `@media (min-width: ${breakpoint})
{
${style}
}`;
}
export function getStyles<T>(props: Record<string, T | T[]>, theme: Theme) {
const cleanProps = omit(props, ['children', 'id', 'key', 'className']);