-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
cssGrid.js
113 lines (90 loc) · 2.75 KB
/
cssGrid.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import style from './style';
import compose from './compose';
import { createUnaryUnit, getValue } from './spacing';
import { handleBreakpoints } from './breakpoints';
import responsivePropType from './responsivePropType';
// false positive
// eslint-disable-next-line react/function-component-definition
export const gap = (props) => {
if (props.gap !== undefined && props.gap !== null) {
const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
const styleFromPropValue = (propValue) => ({
gap: getValue(transformer, propValue),
});
return handleBreakpoints(props, props.gap, styleFromPropValue);
}
return null;
};
gap.propTypes = process.env.NODE_ENV !== 'production' ? { gap: responsivePropType } : {};
gap.filterProps = ['gap'];
// false positive
// eslint-disable-next-line react/function-component-definition
export const columnGap = (props) => {
if (props.columnGap !== undefined && props.columnGap !== null) {
const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
const styleFromPropValue = (propValue) => ({
columnGap: getValue(transformer, propValue),
});
return handleBreakpoints(props, props.columnGap, styleFromPropValue);
}
return null;
};
columnGap.propTypes =
process.env.NODE_ENV !== 'production' ? { columnGap: responsivePropType } : {};
columnGap.filterProps = ['columnGap'];
// false positive
// eslint-disable-next-line react/function-component-definition
export const rowGap = (props) => {
if (props.rowGap !== undefined && props.rowGap !== null) {
const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');
const styleFromPropValue = (propValue) => ({
rowGap: getValue(transformer, propValue),
});
return handleBreakpoints(props, props.rowGap, styleFromPropValue);
}
return null;
};
rowGap.propTypes = process.env.NODE_ENV !== 'production' ? { rowGap: responsivePropType } : {};
rowGap.filterProps = ['rowGap'];
export const gridColumn = style({
prop: 'gridColumn',
});
export const gridRow = style({
prop: 'gridRow',
});
export const gridAutoFlow = style({
prop: 'gridAutoFlow',
});
export const gridAutoColumns = style({
prop: 'gridAutoColumns',
});
export const gridAutoRows = style({
prop: 'gridAutoRows',
});
export const gridTemplateColumns = style({
prop: 'gridTemplateColumns',
});
export const gridTemplateRows = style({
prop: 'gridTemplateRows',
});
export const gridTemplateAreas = style({
prop: 'gridTemplateAreas',
});
export const gridArea = style({
prop: 'gridArea',
});
const grid = compose(
gap,
columnGap,
rowGap,
gridColumn,
gridRow,
gridAutoFlow,
gridAutoColumns,
gridAutoRows,
gridTemplateColumns,
gridTemplateRows,
gridTemplateAreas,
gridArea,
);
export default grid;