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

packages/ui: add Box

Browse Source
This commit is contained in:
vchikalkin 2023-12-01 14:41:56 +03:00
parent a1cce58a38
commit ef04e8f341
2 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/Components/Calculation/Form/Payments/index.jsx
View File

@ -2,23 +2,17 @@ import elementsRender from '../../config/elements-render';
import { id, title } from './config';
import PaymentsParams from './PaymentsParams';
import PaymentsTable from './PaymentsTable';
import { Box, Flex } from 'ui/grid';
import { Flex, Grid } from 'ui/grid';
function Payments() {
const radioGraphType = elementsRender.radioGraphType.render();
return (
<Flex flexDirection="column">
<Box
sx={{
display: 'grid',
gap: '10px',
gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'],
}}
>
<Grid gap="10px" gridTemplateColumns={['1fr', '1fr', '1fr 1fr']}>
{radioGraphType}
<PaymentsParams />
</Box>
</Grid>
<PaymentsTable />
</Flex>
);

11
packages/ui/grid.ts
View File

@ -1,18 +1,14 @@
import type { Theme } from './utils';
import { getStyles } from './utils';
import type { PropsWithChildren } from 'react';
import styled from 'styled-components';
export type { BoxProps } from 'rebass/styled-components';
export { Box } from 'rebass/styled-components';
type WithArrayType<T> = {
[K in keyof T]: Array<T[K]> | T[K];
};
type AllowedProps = Omit<HTMLDivElement['style'], 'color' | 'translate'>;
export type GridProps = Partial<WithArrayType<AllowedProps>> & PropsWithChildren;
export type GridProps = Partial<WithArrayType<AllowedProps>>;
export const Grid = styled.div<GridProps>`
display: grid;
${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
@ -23,3 +19,8 @@ export const Flex = styled.div<GridProps>`
display: flex;
${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
`;
export type BoxProps = GridProps;
export const Box = styled.div<GridProps>`
${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
`;