Skip to content

Commit a5ed041

Browse files
minheqminheq
committed
feat(grid): make grid work like bootstrap grid
1 parent 914ca3f commit a5ed041

5 files changed

Lines changed: 133 additions & 161 deletions

File tree

‎src/components/Grid/Container.styles.ts‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,28 @@ import { Theme } from '../../theme/ThemeInterface';
55
export interface ContainerStylesProps {
66
maxWidth?: number;
77
containerWidth: number;
8+
gutterWidth: number;
89
}
910
export type GetContainerStyles = (
1011
progressStylesProps: ContainerStylesProps,
1112
theme: Theme,
1213
) => ContainerStyles;
1314

1415
export interface ContainerStyles {
15-
outerWrapperStyle: ViewStyle;
16-
innerWrapperStyle: ViewStyle;
16+
containerStyle: ViewStyle;
1717
}
1818

1919
export const getContainerStyles: GetContainerStyles = (
20-
{ maxWidth, containerWidth },
20+
{ maxWidth, containerWidth, gutterWidth },
2121
theme,
2222
) => {
2323
return {
24-
innerWrapperStyle: {
24+
containerStyle: {
25+
marginLeft: 'auto',
26+
marginRight: 'auto',
2527
maxWidth: maxWidth || containerWidth,
26-
width: '100%',
27-
},
28-
outerWrapperStyle: {
29-
flexDirection: 'row',
30-
justifyContent: 'center',
28+
paddingLeft: `${gutterWidth / 2}px`,
29+
paddingRight: `${gutterWidth / 2}px`,
3130
width: '100%',
3231
},
3332
};

‎src/components/Grid/Container.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,13 @@ export interface ContainerProps {
2525
*/
2626
export const Container = (props: ContainerProps) => {
2727
const { children, getStyles, maxWidth } = props;
28-
const { maxWidth: containerWidth } = useLayout();
28+
const { maxWidth: containerWidth, gutterWidth } = useLayout();
2929
const theme = useTheme();
3030

31-
const { outerWrapperStyle, innerWrapperStyle } = mergeStyles(
32-
getContainerStyles,
33-
getStyles,
34-
)({ maxWidth, containerWidth }, theme);
35-
36-
return (
37-
<View style={outerWrapperStyle}>
38-
<View style={innerWrapperStyle}>{children}</View>
39-
</View>
31+
const { containerStyle } = mergeStyles(getContainerStyles, getStyles)(
32+
{ maxWidth, containerWidth, gutterWidth },
33+
theme,
4034
);
35+
36+
return <View style={containerStyle}>{children}</View>;
4137
};

‎src/components/Grid/Grid.mdx‎

Lines changed: 114 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ menu: Components
55

66
import { Counter as CounterContainer } from 'react-powerplug';
77
import { Playground, Props } from 'docz';
8-
import { Column, Row, LayoutProvider } from '.';
8+
import { Container, Column, Row, LayoutProvider } from '.';
99
import { Box } from '../Box';
1010
import { Text } from '../Typography';
1111

@@ -16,77 +16,85 @@ import { Text } from '../Typography';
1616
<Playground>
1717
<LayoutProvider>
1818
<Box paddingVertical={16}>
19-
<Row>
20-
<Column medium={1}>
21-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
22-
</Column>
23-
<Column medium={1}>
24-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
25-
</Column>
26-
<Column medium={1}>
27-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
28-
</Column>
29-
<Column medium={1}>
30-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
31-
</Column>
32-
<Column medium={1}>
33-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
34-
</Column>
35-
<Column medium={1}>
36-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
37-
</Column>
38-
<Column medium={1}>
39-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
40-
</Column>
41-
<Column medium={1}>
42-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
43-
</Column>
44-
<Column medium={1}>
45-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
46-
</Column>
47-
<Column medium={1}>
48-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
49-
</Column>
50-
<Column medium={1}>
51-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
52-
</Column>
53-
<Column medium={1}>
54-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
55-
</Column>
56-
</Row>
19+
<Container>
20+
<Row>
21+
<Column medium={1}>
22+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
23+
</Column>
24+
<Column medium={1}>
25+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
26+
</Column>
27+
<Column medium={1}>
28+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
29+
</Column>
30+
<Column medium={1}>
31+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
32+
</Column>
33+
<Column medium={1}>
34+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
35+
</Column>
36+
<Column medium={1}>
37+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
38+
</Column>
39+
<Column medium={1}>
40+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
41+
</Column>
42+
<Column medium={1}>
43+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
44+
</Column>
45+
<Column medium={1}>
46+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
47+
</Column>
48+
<Column medium={1}>
49+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
50+
</Column>
51+
<Column medium={1}>
52+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
53+
</Column>
54+
<Column medium={1}>
55+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
56+
</Column>
57+
</Row>
58+
</Container>
5759
</Box>
5860
<Box paddingVertical={16}>
59-
<Row>
60-
<Column medium={8}>
61-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
62-
</Column>
63-
<Column medium={4}>
64-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
65-
</Column>
66-
</Row>
61+
<Container>
62+
<Row>
63+
<Column medium={8}>
64+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
65+
</Column>
66+
<Column medium={4}>
67+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
68+
</Column>
69+
</Row>
70+
</Container>
6771
</Box>
6872
<Box paddingVertical={16}>
69-
<Row>
70-
<Column medium={4}>
71-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
72-
</Column>
73-
<Column medium={4}>
74-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
75-
</Column>
76-
<Column medium={4}>
77-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
78-
</Column>
79-
</Row>
73+
<Container>
74+
<Row>
75+
<Column medium={4}>
76+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
77+
</Column>
78+
<Column medium={4}>
79+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
80+
</Column>
81+
<Column medium={4}>
82+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
83+
</Column>
84+
</Row>
85+
</Container>
8086
</Box>
8187
<Box paddingVertical={16}>
82-
<Row>
83-
<Column medium={6}>
84-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
85-
</Column>
86-
<Column medium={6}>
87-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
88-
</Column>
89-
</Row>
88+
<Container>
89+
<Row>
90+
<Column medium={6}>
91+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
92+
</Column>
93+
<Column medium={6}>
94+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
95+
</Column>
96+
</Row>
97+
</Container>
9098
</Box>
9199
</LayoutProvider>
92100
</Playground>
@@ -96,17 +104,19 @@ import { Text } from '../Typography';
96104
<Playground>
97105
<LayoutProvider>
98106
<Box paddingVertical={16}>
99-
<Row>
100-
<Column xsmall={9}>
101-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
102-
</Column>
103-
<Column xsmall={4}>
104-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
105-
</Column>
106-
<Column xsmall={6}>
107-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
108-
</Column>
109-
</Row>
107+
<Container>
108+
<Row>
109+
<Column xsmall={9}>
110+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
111+
</Column>
112+
<Column xsmall={4}>
113+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
114+
</Column>
115+
<Column xsmall={6}>
116+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
117+
</Column>
118+
</Row>
119+
</Container>
110120
</Box>
111121
</LayoutProvider>
112122
</Playground>
@@ -116,21 +126,23 @@ import { Text } from '../Typography';
116126
<Playground>
117127
<LayoutProvider>
118128
<Box paddingVertical={16}>
119-
<Row>
120-
<Column offsetXsmall={2} xsmall={6}>
121-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
122-
</Column>
123-
</Row>
124-
<Row>
125-
<Column offsetXsmall={4} xsmall={6}>
126-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
127-
</Column>
128-
</Row>
129-
<Row>
130-
<Column offsetXsmall={6} xsmall={6}>
131-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
132-
</Column>
133-
</Row>
129+
<Container>
130+
<Row>
131+
<Column offsetXsmall={2} xsmall={6}>
132+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
133+
</Column>
134+
</Row>
135+
<Row>
136+
<Column offsetXsmall={4} xsmall={6}>
137+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
138+
</Column>
139+
</Row>
140+
<Row>
141+
<Column offsetXsmall={6} xsmall={6}>
142+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
143+
</Column>
144+
</Row>
145+
</Container>
134146
</Box>
135147
</LayoutProvider>
136148
</Playground>
@@ -140,31 +152,16 @@ import { Text } from '../Typography';
140152
<Playground>
141153
<LayoutProvider>
142154
<Box paddingVertical={16}>
143-
<Row hasGutter={false}>
144-
<Column xsmall={6}>
145-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
146-
</Column>
147-
<Column xsmall={6}>
148-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
149-
</Column>
150-
</Row>
151-
</Box>
152-
</LayoutProvider>
153-
</Playground>
154-
155-
### Without margin
156-
157-
<Playground>
158-
<LayoutProvider>
159-
<Box paddingVertical={16}>
160-
<Row hasMargin={false}>
161-
<Column xsmall={6}>
162-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
163-
</Column>
164-
<Column xsmall={6}>
165-
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
166-
</Column>
167-
</Row>
155+
<Container>
156+
<Row hasGutter={false}>
157+
<Column xsmall={6}>
158+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
159+
</Column>
160+
<Column xsmall={6}>
161+
<Box backgroundColor="#67c6bb" height={48} borderWidth={1} />
162+
</Column>
163+
</Row>
164+
</Container>
168165
</Box>
169166
</LayoutProvider>
170167
</Playground>

‎src/components/Grid/Row.styles.tsx‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Theme } from '../../theme/ThemeInterface';
44

55
export interface RowStyleProps {
66
gutterWidth: number;
7-
hasMargin: boolean;
87
hasGutter: boolean;
98
}
109

@@ -14,31 +13,13 @@ export interface RowStyles {
1413
rowStyle: ViewStyle;
1514
}
1615

17-
export const getRowStyles: GetRowStyles = ({
18-
hasMargin,
19-
hasGutter,
20-
gutterWidth,
21-
}) => {
22-
// Columns have horizontal paddings that already create the margin
23-
// So we manipulate row's margin to get desired result
24-
let margin = 0;
25-
26-
if (hasMargin && !hasGutter) {
27-
margin = gutterWidth / 2;
28-
} else if (!hasMargin && hasGutter) {
29-
margin = -gutterWidth / 2;
30-
} else if (hasMargin && hasGutter) {
31-
margin = 0;
32-
} else if (!hasMargin && !hasGutter) {
33-
margin = 0;
34-
}
35-
16+
export const getRowStyles: GetRowStyles = ({ hasGutter, gutterWidth }) => {
3617
return {
3718
rowStyle: {
3819
flexDirection: 'row',
3920
flexWrap: 'wrap',
40-
marginLeft: margin,
41-
marginRight: margin,
21+
marginLeft: hasGutter ? -gutterWidth / 2 : 0,
22+
marginRight: hasGutter ? -gutterWidth / 2 : 0,
4223
},
4324
};
4425
};

‎src/components/Grid/Row.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { GetRowStyles, getRowStyles, RowStyles } from './Row.styles';
1010
export interface RowProps {
1111
children: React.ReactNode;
1212
hasGutter?: boolean;
13-
hasMargin?: boolean;
1413
getStyles?: ReplaceReturnType<GetRowStyles, DeepPartial<RowStyles>>;
1514
}
1615

@@ -19,12 +18,12 @@ export const GutterWidthContext = React.createContext(
1918
);
2019

2120
export const Row = (props: RowProps) => {
22-
const { children, hasMargin = true, hasGutter = true, getStyles } = props;
21+
const { children, hasGutter = true, getStyles } = props;
2322
const { gutterWidth } = useLayout();
2423
const theme = useTheme();
2524

2625
const { rowStyle } = mergeStyles(getRowStyles, getStyles)(
27-
{ gutterWidth, hasMargin, hasGutter },
26+
{ gutterWidth, hasGutter },
2827
theme,
2928
);
3029

0 commit comments

Comments
 (0)