@carbon/react
Version:
React components for the Carbon Design System
375 lines (357 loc) • 12.7 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var FeatureFlags = require('@carbon/feature-flags');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var usePrefix = require('../../internal/usePrefix.js');
var GridContext = require('./GridContext.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
const Column = /*#__PURE__*/React__default["default"].forwardRef(({
as,
children,
className: customClassName,
sm,
md,
lg,
xlg,
max,
...rest
}, ref) => {
const {
mode
} = GridContext.useGridSettings();
const prefix = usePrefix.usePrefix();
const BaseComponent = as || 'div';
if (mode === 'css-grid') {
return /*#__PURE__*/React__default["default"].createElement(CSSGridColumn, _rollupPluginBabelHelpers["extends"]({
as: BaseComponent,
className: customClassName,
sm: sm,
md: md,
ref: ref,
lg: lg,
xlg: xlg,
max: max
}, rest), children);
}
const columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
const className = cx__default["default"](customClassName, columnClassName, {
[`${prefix}--col`]: columnClassName.length === 0
});
return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
className: className,
ref: ref
}, rest), children);
});
const percentSpanType = PropTypes__default["default"].oneOf(['25%', '50%', '75%', '100%']);
const spanPropType = FeatureFlags__namespace.enabled('enable-css-grid') ? PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].shape({
span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType]),
offset: PropTypes__default["default"].number,
start: PropTypes__default["default"].number,
end: PropTypes__default["default"].number
}), percentSpanType]) : PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].shape({
span: PropTypes__default["default"].number,
offset: PropTypes__default["default"].number
})]);
Column.propTypes = {
/**
* Provide a custom element to render instead of the default <div>
*/
as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
/**
* Pass in content that will be rendered within the `Column`
*/
children: PropTypes__default["default"].node,
/**
* Specify a custom className to be applied to the `Column`
*/
className: PropTypes__default["default"].string,
/**
* Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
* This breakpoint supports 16 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
lg: spanPropType,
/**
* Specify column span for the `max` breakpoint. This breakpoint supports 16
* columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
max: spanPropType,
/**
* Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
* This breakpoint supports 8 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
md: spanPropType,
/**
* Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
* This breakpoint supports 4 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
sm: spanPropType,
/**
* Specify constant column span, start, or end values that will not change
* based on breakpoint
*/
span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType]),
/**
* Specify column span for the `xlg` breakpoint (Default breakpoint up to
* 1584px) This breakpoint supports 16 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
xlg: spanPropType
};
const CSSGridColumn = /*#__PURE__*/React__default["default"].forwardRef(({
as: BaseComponent = 'div',
children,
className: containerClassName,
sm,
md,
lg,
xlg,
max,
span,
...rest
}, ref) => {
// Add ref parameter
const prefix = usePrefix.usePrefix();
const breakpointClassName = getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix);
const spanClassName = getClassNameForSpan(span, prefix);
const className = cx__default["default"](containerClassName, breakpointClassName, spanClassName, {
[`${prefix}--css-grid-column`]: true
});
return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
className: className,
ref: ref
}, rest), children);
});
CSSGridColumn.propTypes = {
/**
* Provide a custom element to render instead of the default <div>
*/
as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
/**
* Pass in content that will be rendered within the `Column`
*/
children: PropTypes__default["default"].node,
/**
* Specify a custom className to be applied to the `Column`
*/
className: PropTypes__default["default"].string,
/**
* Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
* This breakpoint supports 16 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
lg: spanPropType,
/**
* Specify column span for the `max` breakpoint. This breakpoint supports 16
* columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
max: spanPropType,
/**
* Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
* This breakpoint supports 8 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
md: spanPropType,
/**
* Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
* This breakpoint supports 4 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
sm: spanPropType,
/**
* Specify constant column span, start, or end values that will not change
* based on breakpoint
*/
span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType, PropTypes__default["default"].shape({
span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType]),
start: PropTypes__default["default"].number,
end: PropTypes__default["default"].number
})]),
/**
* Specify column span for the `xlg` breakpoint (Default breakpoint up to
* 1584px) This breakpoint supports 16 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
xlg: spanPropType
};
const breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
/**
* @typedef {object} Breakpoint
* @property {boolean|number} [span]
* @property {number} [offset]
*/
/**
* Build the appropriate className for the given set of breakpoints.
* @param {Array<boolean|number|Breakpoint>} breakpoints
* @returns {string}
*/
function getClassNameForBreakpoints(breakpoints, prefix) {
const classNames = [];
for (let i = 0; i < breakpoints.length; i++) {
const breakpoint = breakpoints[i];
if (breakpoint === undefined || breakpoint === null) {
continue;
}
const name = breakpointNames[i];
// If our breakpoint is a boolean, the user has specified that the column
// should be "auto" at this size
if (breakpoint === true) {
classNames.push(`${prefix}--${name}:col-span-auto`);
continue;
}
// If our breakpoint is a string, the user might have specified a percent
// they'd like this column to span.
if (typeof breakpoint === 'string') {
classNames.push(`${prefix}--${name}:col-span-${breakpoint.replace('%', '')}`);
continue;
}
// If our breakpoint is a number, the user has specified the number of
// columns they'd like this column to span
if (typeof breakpoint === 'number') {
classNames.push(`${prefix}--${name}:col-span-${breakpoint}`);
continue;
}
if (typeof breakpoint === 'object') {
const {
span,
offset,
start,
end
} = breakpoint;
if (typeof offset === 'number') {
classNames.push(`${prefix}--${name}:col-start-${offset > 0 ? offset + 1 : 'auto'}`);
}
if (typeof start === 'number') {
classNames.push(`${prefix}--${name}:col-start-${start ? start : 'auto'}`);
}
if (typeof end === 'number') {
classNames.push(`${prefix}--${name}:col-end-${end}`);
}
if (typeof span === 'number') {
classNames.push(`${prefix}--${name}:col-span-${span}`);
} else if (typeof span === 'string') {
classNames.push(`${prefix}--${name}:col-span-${span.slice(0, -1)}`);
continue;
}
}
}
return classNames.join(' ');
}
/**
* Build the appropriate className for the given set of breakpoints.
* @param {Array<boolean|number|Breakpoint>} breakpoints
* @returns {string}
*/
function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
const classNames = [];
for (let i = 0; i < breakpoints.length; i++) {
const breakpoint = breakpoints[i];
if (breakpoint === undefined || breakpoint === null) {
continue;
}
const name = breakpointNames[i];
// If our breakpoint is a boolean, the user has specified that the column
// should be "auto" at this size
if (breakpoint === true) {
classNames.push(`${prefix}--col-${name}`);
continue;
}
// If our breakpoint is a number, the user has specified the number of
// columns they'd like this column to span
if (typeof breakpoint === 'number') {
classNames.push(`${prefix}--col-${name}-${breakpoint}`);
continue;
}
if (typeof breakpoint === 'object') {
const {
span,
offset
} = breakpoint;
if (typeof span === 'number') {
classNames.push(`${prefix}--col-${name}-${span}`);
}
if (span === true) {
classNames.push(`${prefix}--col-${name}`);
}
if (typeof offset === 'number') {
classNames.push(`${prefix}--offset-${name}-${offset}`);
}
}
}
return classNames.join(' ');
}
/**
* Build the appropriate className for a span value
*/
function getClassNameForSpan(value, prefix) {
const classNames = [];
if (typeof value === 'number') {
classNames.push(`${prefix}--col-span-${value}`);
}
// If value is a string, the user has specified a percent
// they'd like this column to span.
else if (typeof value === 'string') {
classNames.push(`${prefix}--col-span-${value.slice(0, -1)}`);
} else if (typeof value === 'object') {
const {
span,
start,
end
} = value;
if (span !== undefined && span !== null) {
classNames.push(`${prefix}--col-span-${span}`);
}
if (start !== undefined && start !== null) {
classNames.push(`${prefix}--col-start-${start}`);
}
if (end !== undefined && end !== null) {
classNames.push(`${prefix}--col-end-${end}`);
}
}
return classNames.join('');
}
exports["default"] = Column;