semantic-ui-react
Version:
The official Semantic-UI-React integration.
120 lines (95 loc) • 4.44 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _map from "lodash-es/map";
import _isNil from "lodash-es/isNil";
import cx from 'clsx';
import PropTypes from 'prop-types';
import React from 'react';
import { childrenUtils, customPropTypes, getElementType, getUnhandledProps, SUI, useKeyOnly, useKeyOrValueAndKey, useValueAndKey, useWidthProp } from '../../lib';
import Button from './Button';
/**
* Buttons can be grouped.
*/
function ButtonGroup(props) {
var attached = props.attached,
basic = props.basic,
buttons = props.buttons,
children = props.children,
className = props.className,
color = props.color,
compact = props.compact,
content = props.content,
floated = props.floated,
fluid = props.fluid,
icon = props.icon,
inverted = props.inverted,
labeled = props.labeled,
negative = props.negative,
positive = props.positive,
primary = props.primary,
secondary = props.secondary,
size = props.size,
toggle = props.toggle,
vertical = props.vertical,
widths = props.widths;
var classes = cx('ui', color, size, useKeyOnly(basic, 'basic'), useKeyOnly(compact, 'compact'), useKeyOnly(fluid, 'fluid'), useKeyOnly(icon, 'icon'), useKeyOnly(inverted, 'inverted'), useKeyOnly(labeled, 'labeled'), useKeyOnly(negative, 'negative'), useKeyOnly(positive, 'positive'), useKeyOnly(primary, 'primary'), useKeyOnly(secondary, 'secondary'), useKeyOnly(toggle, 'toggle'), useKeyOnly(vertical, 'vertical'), useKeyOrValueAndKey(attached, 'attached'), useValueAndKey(floated, 'floated'), useWidthProp(widths), 'buttons', className);
var rest = getUnhandledProps(ButtonGroup, props);
var ElementType = getElementType(ButtonGroup, props);
if (_isNil(buttons)) {
return /*#__PURE__*/React.createElement(ElementType, _extends({}, rest, {
className: classes
}), childrenUtils.isNil(children) ? content : children);
}
return /*#__PURE__*/React.createElement(ElementType, _extends({}, rest, {
className: classes
}), _map(buttons, function (button) {
return Button.create(button);
}));
}
ButtonGroup.handledProps = ["as", "attached", "basic", "buttons", "children", "className", "color", "compact", "content", "floated", "fluid", "icon", "inverted", "labeled", "negative", "positive", "primary", "secondary", "size", "toggle", "vertical", "widths"];
ButtonGroup.propTypes = process.env.NODE_ENV !== "production" ? {
/** An element type to render as (string or function). */
as: PropTypes.elementType,
/** Groups can be attached to other content. */
attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['left', 'right', 'top', 'bottom'])]),
/** Groups can be less pronounced. */
basic: PropTypes.bool,
/** Array of shorthand Button values. */
buttons: customPropTypes.collectionShorthand,
/** Primary content. */
children: PropTypes.node,
/** Additional classes. */
className: PropTypes.string,
/** Groups can have a shared color. */
color: PropTypes.oneOf(SUI.COLORS),
/** Groups can reduce their padding to fit into tighter spaces. */
compact: PropTypes.bool,
/** Shorthand for primary content. */
content: customPropTypes.contentShorthand,
/** Groups can be aligned to the left or right of its container. */
floated: PropTypes.oneOf(SUI.FLOATS),
/** Groups can take the width of their container. */
fluid: PropTypes.bool,
/** Groups can be formatted as icons. */
icon: PropTypes.bool,
/** Groups can be formatted to appear on dark backgrounds. */
inverted: PropTypes.bool,
/** Groups can be formatted as labeled icon buttons. */
labeled: PropTypes.bool,
/** Groups can hint towards a negative consequence. */
negative: PropTypes.bool,
/** Groups can hint towards a positive consequence. */
positive: PropTypes.bool,
/** Groups can be formatted to show different levels of emphasis. */
primary: PropTypes.bool,
/** Groups can be formatted to show different levels of emphasis. */
secondary: PropTypes.bool,
/** Groups can have different sizes. */
size: PropTypes.oneOf(SUI.SIZES),
/** Groups can be formatted to toggle on and off. */
toggle: PropTypes.bool,
/** Groups can be formatted to appear vertically. */
vertical: PropTypes.bool,
/** Groups can have their widths divided evenly. */
widths: PropTypes.oneOf(SUI.WIDTHS)
} : {};
export default ButtonGroup;