|
- import _extends from "@babel/runtime/helpers/esm/extends";
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
- import isobject from 'lodash.isobject';
- import React from 'react';
- import PropTypes from 'prop-types';
- import classNames from 'classnames';
- import { mapToCssModules, deprecated, tagPropType } from './utils';
- var colWidths = ['xs', 'sm', 'md', 'lg', 'xl'];
- var stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
- var columnProps = PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string, PropTypes.shape({
- size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
- push: deprecated(stringOrNumberProp, 'Please use the prop "order"'),
- pull: deprecated(stringOrNumberProp, 'Please use the prop "order"'),
- order: stringOrNumberProp,
- offset: stringOrNumberProp
- })]);
- var propTypes = {
- tag: tagPropType,
- xs: columnProps,
- sm: columnProps,
- md: columnProps,
- lg: columnProps,
- xl: columnProps,
- className: PropTypes.string,
- cssModule: PropTypes.object,
- widths: PropTypes.array
- };
- var defaultProps = {
- tag: 'div',
- widths: colWidths
- };
-
- var getColumnSizeClass = function getColumnSizeClass(isXs, colWidth, colSize) {
- if (colSize === true || colSize === '') {
- return isXs ? 'col' : "col-" + colWidth;
- } else if (colSize === 'auto') {
- return isXs ? 'col-auto' : "col-" + colWidth + "-auto";
- }
-
- return isXs ? "col-" + colSize : "col-" + colWidth + "-" + colSize;
- };
-
- var Col = function Col(props) {
- var className = props.className,
- cssModule = props.cssModule,
- widths = props.widths,
- Tag = props.tag,
- attributes = _objectWithoutPropertiesLoose(props, ["className", "cssModule", "widths", "tag"]);
-
- var colClasses = [];
- widths.forEach(function (colWidth, i) {
- var columnProp = props[colWidth];
- delete attributes[colWidth];
-
- if (!columnProp && columnProp !== '') {
- return;
- }
-
- var isXs = !i;
-
- if (isobject(columnProp)) {
- var _classNames;
-
- var colSizeInterfix = isXs ? '-' : "-" + colWidth + "-";
- var colClass = getColumnSizeClass(isXs, colWidth, columnProp.size);
- colClasses.push(mapToCssModules(classNames((_classNames = {}, _classNames[colClass] = columnProp.size || columnProp.size === '', _classNames["order" + colSizeInterfix + columnProp.order] = columnProp.order || columnProp.order === 0, _classNames["offset" + colSizeInterfix + columnProp.offset] = columnProp.offset || columnProp.offset === 0, _classNames)), cssModule));
- } else {
- var _colClass = getColumnSizeClass(isXs, colWidth, columnProp);
-
- colClasses.push(_colClass);
- }
- });
-
- if (!colClasses.length) {
- colClasses.push('col');
- }
-
- var classes = mapToCssModules(classNames(className, colClasses), cssModule);
- return React.createElement(Tag, _extends({}, attributes, {
- className: classes
- }));
- };
-
- Col.propTypes = propTypes;
- Col.defaultProps = defaultProps;
- export default Col;
|