Skip to content

Commit f197251

Browse files
minheqminheq
committed
feat(container): add fluid and change implementation
1 parent 6df3b30 commit f197251

7 files changed

Lines changed: 90 additions & 33 deletions

File tree

‎src/components/Grid/Container.mdx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,25 @@ import { Box, Container, LayoutProvider, Text } from '..';
99

1010
# Container
1111

12-
On small screens, the container is the width of the screen. On large screens, it centers the content with a max-width of defined by Layout (default 1440) and adds padding
12+
On small screens, the container is the width of the screen. On large screens, it centers the content with a max-width of defined by Layout (default 1140) and adds padding
1313

1414
### Usage
1515

1616
<Playground>
1717
<LayoutProvider>
1818
<Box backgroundColor="#67c6bb" padding={3}>
19-
<Container maxWidth={300}>
19+
<Container
20+
fluid={false} // Should not contain width
21+
size={undefined} // Override default container size
22+
>
2023
<Box backgroundColor="white" padding={3}>
2124
<Text>Centered content</Text>
2225
</Box>
2326
</Container>
2427
</Box>
2528
</LayoutProvider>
2629
</Playground>
30+
31+
### Props
32+
33+
<Props of={Container} />

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

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import { ViewStyle } from 'react-native';
22

33
import { Theme } from '../../theme/Theme';
4+
import {
5+
ContainerSize,
6+
ContainerSizes,
7+
DESC_ORDER_SCREEN_SIZES,
8+
ScreenSize,
9+
} from './LayoutContext';
410

511
export interface ContainerStylesProps {
6-
maxWidth?: number;
7-
containerWidth: number;
12+
currentScreenSize: ScreenSize;
13+
size?: ContainerSize;
14+
containerSizes: ContainerSizes;
815
gutterWidth: number;
16+
fluid: boolean;
917
}
1018
export type GetContainerStyles = (
1119
progressStylesProps: ContainerStylesProps,
@@ -16,15 +24,39 @@ export interface ContainerStyles {
1624
containerStyle: ViewStyle;
1725
}
1826

27+
const getMaxWidth = (
28+
containerSizes: ContainerSizes,
29+
currentScreenSize: ScreenSize,
30+
) => {
31+
const currentScreenSizeIndex = DESC_ORDER_SCREEN_SIZES.indexOf(
32+
currentScreenSize,
33+
);
34+
35+
const nearestSize = DESC_ORDER_SCREEN_SIZES.find((screenSize, index) => {
36+
if (screenSize === 'xsmall') return false;
37+
if (currentScreenSizeIndex > index) return false;
38+
39+
return !!containerSizes[screenSize];
40+
});
41+
42+
if (nearestSize === 'xsmall') return undefined;
43+
44+
return nearestSize ? containerSizes[nearestSize] : undefined;
45+
};
46+
1947
export const getContainerStyles: GetContainerStyles = (
20-
{ maxWidth, containerWidth, gutterWidth },
48+
{ size, currentScreenSize, containerSizes, gutterWidth, fluid },
2149
theme,
2250
) => {
2351
return {
2452
containerStyle: {
2553
marginLeft: 'auto',
2654
marginRight: 'auto',
27-
maxWidth: maxWidth || containerWidth,
55+
maxWidth: fluid
56+
? size
57+
? containerSizes[size]
58+
: getMaxWidth(containerSizes, currentScreenSize)
59+
: undefined,
2860
paddingLeft: gutterWidth / 2,
2961
paddingRight: gutterWidth / 2,
3062
width: '100%',

‎src/components/Grid/Container.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ import {
99
GetContainerStyles,
1010
getContainerStyles,
1111
} from './Container.styles';
12-
import { useLayout } from './LayoutContext';
12+
import { ContainerSize, useLayout } from './LayoutContext';
1313

1414
export interface ContainerProps {
1515
children: React.ReactNode;
16-
maxWidth?: number;
16+
fluid?: boolean;
17+
size?: ContainerSize;
1718
getStyles?: ReplaceReturnType<
1819
GetContainerStyles,
1920
DeepPartial<ContainerStyles>
@@ -24,15 +25,15 @@ export interface ContainerProps {
2425
* On screens with size lg and above, caps maximum width of the content
2526
*/
2627
export const Container = (props: ContainerProps) => {
27-
const { children, getStyles, maxWidth } = props;
28-
const { maxWidth: containerWidth, gutterWidth } = useLayout();
28+
const { children, getStyles, size, fluid = false } = props;
29+
const { gutterWidth, containerSizes, currentScreenSize } = useLayout();
2930
const theme = useTheme();
3031

3132
const { containerStyle } = mergeStyles(
3233
getContainerStyles,
3334
getStyles,
3435
theme.components.getContainerStyles,
35-
)({ maxWidth, containerWidth, gutterWidth }, theme);
36+
)({ size, gutterWidth, currentScreenSize, containerSizes, fluid }, theme);
3637

3738
return <View style={containerStyle}>{children}</View>;
3839
};

‎src/components/Grid/LayoutContext.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,15 @@ export type ColumnCount =
3838
| 23
3939
| 24;
4040

41+
export interface ContainerSizes {
42+
small: number;
43+
medium: number;
44+
large: number;
45+
xlarge: number;
46+
}
47+
4148
export type Breakpoint = keyof Breakpoints;
49+
export type ContainerSize = keyof ContainerSizes;
4250
export type ScreenSize = keyof ScreenSizes;
4351

4452
export interface GetResponsiveValueParam<
@@ -83,18 +91,27 @@ export interface LayoutInterface {
8391
getResponsiveValue: GetResponsiveValue;
8492
gridColumnCount: ColumnCount;
8593
gutterWidth: number;
86-
maxWidth: number;
94+
containerSizes: ContainerSizes;
8795
}
8896

8997
export const defaultLayout: LayoutInterface = {
9098
breakpoints: {
9199
small: 480,
92100

101+
medium: 768,
102+
103+
large: 992,
104+
105+
xlarge: 1200,
106+
},
107+
containerSizes: {
108+
small: 540,
109+
93110
medium: 720,
94111

95112
large: 960,
96113

97-
xlarge: 1280,
114+
xlarge: 1140,
98115
},
99116
currentScreenSize: 'small',
100117
getResponsiveValue: values =>
@@ -106,7 +123,6 @@ export const defaultLayout: LayoutInterface = {
106123
undefined,
107124
gridColumnCount: 12,
108125
gutterWidth: 30,
109-
maxWidth: 1440,
110126
};
111127

112128
export const ASC_ORDER_SCREEN_SIZES: Array<keyof ScreenSizes> = [

‎src/components/Grid/RowAndColumn.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,3 +163,11 @@ import { Box, Container, Column, Row, LayoutProvider, Text } from '..';
163163
</Box>
164164
</LayoutProvider>
165165
</Playground>
166+
167+
### Row Props
168+
169+
<Props of={Row} />
170+
171+
### Column Props
172+
173+
<Props of={Column} />

‎src/components/KitchenSink/KitchenSink.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -660,7 +660,10 @@ export const KitchenSink = () => {
660660
<Playground>
661661
<LayoutProvider>
662662
<Box backgroundColor="#67c6bb" padding={3}>
663-
<Container maxWidth={300}>
663+
<Container
664+
fluid={false} // Should not contain width
665+
size={undefined} // Override default container size
666+
>
664667
<Box backgroundColor="white" padding={3}>
665668
<Text>Centered content</Text>
666669
</Box>
@@ -671,7 +674,7 @@ export const KitchenSink = () => {
671674

672675
<Box paddingTop={96}>
673676
<Heading size="xxxlarge" weight="bold">
674-
Grid
677+
Row and Column
675678
</Heading>
676679
</Box>
677680

‎tests/__snapshots__/snapshot.test.js.snap‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4661,7 +4661,6 @@ exports[`Container_1 1`] = `
46614661
Object {
46624662
"marginLeft": "auto",
46634663
"marginRight": "auto",
4664-
"maxWidth": "300px",
46654664
"paddingLeft": "15px",
46664665
"paddingRight": "15px",
46674666
"width": "100%",
@@ -4700,6 +4699,8 @@ exports[`Container_1 1`] = `
47004699
</div>
47014700
`;
47024701

4702+
exports[`Container_2 1`] = `<div />`;
4703+
47034704
exports[`Counter_0 1`] = `
47044705
<h1>
47054706
Counter
@@ -11594,7 +11595,6 @@ exports[`KitchenSink_1 1`] = `
1159411595
Object {
1159511596
"marginLeft": "auto",
1159611597
"marginRight": "auto",
11597-
"maxWidth": "300px",
1159811598
"paddingLeft": "15px",
1159911599
"paddingRight": "15px",
1160011600
"width": "100%",
@@ -11655,7 +11655,7 @@ exports[`KitchenSink_1 1`] = `
1165511655
}
1165611656
}
1165711657
>
11658-
Grid
11658+
Row and Column
1165911659
</h1>
1166011660
</div>
1166111661
<div
@@ -11682,7 +11682,6 @@ exports[`KitchenSink_1 1`] = `
1168211682
Object {
1168311683
"marginLeft": "auto",
1168411684
"marginRight": "auto",
11685-
"maxWidth": "1440px",
1168611685
"paddingLeft": "15px",
1168711686
"paddingRight": "15px",
1168811687
"width": "100%",
@@ -12145,7 +12144,6 @@ exports[`KitchenSink_1 1`] = `
1214512144
Object {
1214612145
"marginLeft": "auto",
1214712146
"marginRight": "auto",
12148-
"maxWidth": "1440px",
1214912147
"paddingLeft": "15px",
1215012148
"paddingRight": "15px",
1215112149
"width": "100%",
@@ -12258,7 +12256,6 @@ exports[`KitchenSink_1 1`] = `
1225812256
Object {
1225912257
"marginLeft": "auto",
1226012258
"marginRight": "auto",
12261-
"maxWidth": "1440px",
1226212259
"paddingLeft": "15px",
1226312260
"paddingRight": "15px",
1226412261
"width": "100%",
@@ -12406,7 +12403,6 @@ exports[`KitchenSink_1 1`] = `
1240612403
Object {
1240712404
"marginLeft": "auto",
1240812405
"marginRight": "auto",
12409-
"maxWidth": "1440px",
1241012406
"paddingLeft": "15px",
1241112407
"paddingRight": "15px",
1241212408
"width": "100%",
@@ -12529,7 +12525,6 @@ exports[`KitchenSink_1 1`] = `
1252912525
Object {
1253012526
"marginLeft": "auto",
1253112527
"marginRight": "auto",
12532-
"maxWidth": "1440px",
1253312528
"paddingLeft": "15px",
1253412529
"paddingRight": "15px",
1253512530
"width": "100%",
@@ -12687,7 +12682,6 @@ exports[`KitchenSink_1 1`] = `
1268712682
Object {
1268812683
"marginLeft": "auto",
1268912684
"marginRight": "auto",
12690-
"maxWidth": "1440px",
1269112685
"paddingLeft": "15px",
1269212686
"paddingRight": "15px",
1269312687
"width": "100%",
@@ -12883,7 +12877,6 @@ exports[`KitchenSink_1 1`] = `
1288312877
Object {
1288412878
"marginLeft": "auto",
1288512879
"marginRight": "auto",
12886-
"maxWidth": "1440px",
1288712880
"paddingLeft": "15px",
1288812881
"paddingRight": "15px",
1288912882
"width": "100%",
@@ -23806,7 +23799,6 @@ exports[`RowAndColumn_1 1`] = `
2380623799
Object {
2380723800
"marginLeft": "auto",
2380823801
"marginRight": "auto",
23809-
"maxWidth": "1440px",
2381023802
"paddingLeft": "15px",
2381123803
"paddingRight": "15px",
2381223804
"width": "100%",
@@ -24269,7 +24261,6 @@ exports[`RowAndColumn_1 1`] = `
2426924261
Object {
2427024262
"marginLeft": "auto",
2427124263
"marginRight": "auto",
24272-
"maxWidth": "1440px",
2427324264
"paddingLeft": "15px",
2427424265
"paddingRight": "15px",
2427524266
"width": "100%",
@@ -24382,7 +24373,6 @@ exports[`RowAndColumn_1 1`] = `
2438224373
Object {
2438324374
"marginLeft": "auto",
2438424375
"marginRight": "auto",
24385-
"maxWidth": "1440px",
2438624376
"paddingLeft": "15px",
2438724377
"paddingRight": "15px",
2438824378
"width": "100%",
@@ -24530,7 +24520,6 @@ exports[`RowAndColumn_1 1`] = `
2453024520
Object {
2453124521
"marginLeft": "auto",
2453224522
"marginRight": "auto",
24533-
"maxWidth": "1440px",
2453424523
"paddingLeft": "15px",
2453524524
"paddingRight": "15px",
2453624525
"width": "100%",
@@ -24648,7 +24637,6 @@ exports[`RowAndColumn_2 1`] = `
2464824637
Object {
2464924638
"marginLeft": "auto",
2465024639
"marginRight": "auto",
24651-
"maxWidth": "1440px",
2465224640
"paddingLeft": "15px",
2465324641
"paddingRight": "15px",
2465424642
"width": "100%",
@@ -24801,7 +24789,6 @@ exports[`RowAndColumn_3 1`] = `
2480124789
Object {
2480224790
"marginLeft": "auto",
2480324791
"marginRight": "auto",
24804-
"maxWidth": "1440px",
2480524792
"paddingLeft": "15px",
2480624793
"paddingRight": "15px",
2480724794
"width": "100%",
@@ -24992,7 +24979,6 @@ exports[`RowAndColumn_4 1`] = `
2499224979
Object {
2499324980
"marginLeft": "auto",
2499424981
"marginRight": "auto",
24995-
"maxWidth": "1440px",
2499624982
"paddingLeft": "15px",
2499724983
"paddingRight": "15px",
2499824984
"width": "100%",
@@ -25093,6 +25079,10 @@ exports[`RowAndColumn_4 1`] = `
2509325079
</div>
2509425080
`;
2509525081

25082+
exports[`RowAndColumn_5 1`] = `<div />`;
25083+
25084+
exports[`RowAndColumn_6 1`] = `<div />`;
25085+
2509625086
exports[`SelectList_0 1`] = `
2509725087
<h1>
2509825088
SelectList

0 commit comments

Comments
 (0)