/
Row.js
69 lines (56 loc) · 1.49 KB
/
Row.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
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { mapToCssModules, tagPropType, deprecated } from './utils';
const rowColWidths = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
const rowColsPropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
const propTypes = {
tag: tagPropType,
noGutters: deprecated(PropTypes.bool, "Please use Bootstrap 5 gutter utility classes. https://getbootstrap.com/docs/5.0/layout/gutters/"),
className: PropTypes.string,
cssModule: PropTypes.object,
form: PropTypes.bool,
xs: rowColsPropType,
sm: rowColsPropType,
md: rowColsPropType,
lg: rowColsPropType,
xl: rowColsPropType,
xxl: rowColsPropType
};
const defaultProps = {
tag: 'div',
widths: rowColWidths
};
const Row = (props) => {
const {
className,
cssModule,
noGutters,
tag: Tag,
form,
widths,
...attributes
} = props;
const colClasses = [];
widths.forEach((colWidth, i) => {
let colSize = props[colWidth];
delete attributes[colWidth];
if (!colSize) {
return;
}
const isXs = !i;
colClasses.push(isXs ? `row-cols-${colSize}` : `row-cols-${colWidth}-${colSize}`);
});
const classes = mapToCssModules(classNames(
className,
noGutters ? 'gx-0' : null,
form ? 'form-row' : 'row',
colClasses
), cssModule);
return (
<Tag {...attributes} className={classes} />
);
};
Row.propTypes = propTypes;
Row.defaultProps = defaultProps;
export default Row;