-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Expand file tree
/
Copy pathCol.js
More file actions
120 lines (100 loc) · 2.77 KB
/
Col.js
File metadata and controls
120 lines (100 loc) · 2.77 KB
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
114
115
116
117
118
119
120
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, tagPropType, isObject } from './utils';
const colWidths = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
const stringOrNumberProp = PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]);
const columnProps = PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.string,
PropTypes.shape({
size: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.number,
PropTypes.string,
]),
order: stringOrNumberProp,
offset: stringOrNumberProp,
}),
]);
const propTypes = {
tag: tagPropType,
xs: columnProps,
sm: columnProps,
md: columnProps,
lg: columnProps,
xl: columnProps,
xxl: columnProps,
className: PropTypes.string,
cssModule: PropTypes.object,
widths: PropTypes.array,
};
const getColumnSizeClass = (isXs, colWidth, colSize) => {
if (colSize === true || colSize === '') {
return isXs ? 'col' : `col-${colWidth}`;
}
if (colSize === 'auto') {
return isXs ? 'col-auto' : `col-${colWidth}-auto`;
}
return isXs ? `col-${colSize}` : `col-${colWidth}-${colSize}`;
};
export const getColumnClasses = (attributes, cssModule, widths = colWidths) => {
const modifiedAttributes = attributes;
const colClasses = [];
widths.forEach((colWidth, i) => {
let columnProp = modifiedAttributes[colWidth];
delete modifiedAttributes[colWidth];
if (!columnProp && columnProp !== '') {
return;
}
const isXs = !i;
if (isObject(columnProp)) {
const colSizeInterfix = isXs ? '-' : `-${colWidth}-`;
const colClass = getColumnSizeClass(isXs, colWidth, columnProp.size);
colClasses.push(
mapToCssModules(
classNames({
[colClass]: columnProp.size || columnProp.size === '',
[`order${colSizeInterfix}${columnProp.order}`]:
columnProp.order || columnProp.order === 0,
[`offset${colSizeInterfix}${columnProp.offset}`]:
columnProp.offset || columnProp.offset === 0,
}),
cssModule,
),
);
} else {
const colClass = getColumnSizeClass(isXs, colWidth, columnProp);
colClasses.push(colClass);
}
});
return {
colClasses,
modifiedAttributes,
};
};
function Col(props) {
const {
className,
cssModule,
widths = colWidths,
tag: Tag = 'div',
...attributes
} = props;
let { modifiedAttributes, colClasses } = getColumnClasses(
attributes,
cssModule,
widths,
);
if (!colClasses.length) {
colClasses.push('col');
}
const classes = mapToCssModules(classNames(className, colClasses), cssModule);
return <Tag {...modifiedAttributes} className={classes} />;
}
Col.propTypes = propTypes;
export default Col;