@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
168 lines (164 loc) • 8.42 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.namespace = exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _iconsReact = require("@carbon/icons-react");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _namespace = require("../../globals/namespace");
var _Button = _interopRequireDefault(require("../Button"));
var _OverflowMenu = _interopRequireDefault(require("../OverflowMenu"));
var _OverflowMenuItem = _interopRequireDefault(require("../OverflowMenuItem"));
var _IconButton = require("../IconButton/IconButton");
var _Button2 = require("../Button/Button");
var _excluded = ["children", "className", "disabled", "href", "iconDescription", "id", "onClick", "renderIcon"];
/**
* @file Combo button.
* @copyright IBM Security 2019 - 2021
*/
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var namespace = exports.namespace = (0, _namespace.getComponentNamespace)('combo-button');
var ComboButton = function ComboButton(_ref) {
var children = _ref.children,
className = _ref.className,
direction = _ref.direction,
menuOffset = _ref.menuOffset,
menuOffsetFlip = _ref.menuOffsetFlip,
selectorPrimaryFocus = _ref.selectorPrimaryFocus;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var childrenArray = _react.default.Children.toArray(children).filter(Boolean);
// Save first child (e.g., primary action) to use as a `Button`:
var buttonProps = childrenArray[0].props;
// Need to explicitly define props, versus using `...rest`,
// because otherwise unused `OverflowMenuItem`-related props from
// may trigger invalid DOM warnings.
var primaryActionWithProps = /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, buttonProps, {
className: (0, _classnames.default)(buttonProps.className, "".concat(namespace, "--primary")),
disabled: buttonProps.disabled,
href: buttonProps.href,
iconDescription: buttonProps.iconDescription,
kind: "primary",
id: buttonProps.id,
onClick: buttonProps.onClick,
renderIcon: buttonProps.renderIcon,
type: "button"
}), /*#__PURE__*/_react.default.createElement("span", {
className: "".concat(_namespace.carbonPrefix, "--text-truncate--end"),
title: buttonProps.children
}, buttonProps.children));
// Save remaining children to be displayed in the `OverflowMenu`:
var overflowItems;
var overflowMenuItemWithProps;
if (childrenArray.length > 1) {
overflowItems = childrenArray.slice(1);
// Create `OverflowMenuItem` components:
overflowMenuItemWithProps = overflowItems.map(function (item, index) {
// Need to explicitly define props, versus using `...rest`,
// because otherwise unused `Button`-related props from
// may trigger invalid DOM warnings.
var _item$props = item.props,
children = _item$props.children,
className = _item$props.className,
disabled = _item$props.disabled,
href = _item$props.href,
iconDescription = _item$props.iconDescription,
id = _item$props.id,
onClick = _item$props.onClick,
Icon = _item$props.renderIcon,
other = (0, _objectWithoutProperties2.default)(_item$props, _excluded);
return /*#__PURE__*/_react.default.createElement(_OverflowMenuItem.default, (0, _extends2.default)({
className: (0, _classnames.default)(className, "".concat(namespace, "-item__wrapper")),
disabled: disabled,
href: href,
itemText: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
className: "".concat(_namespace.carbonPrefix, "--text-truncate--end"),
title: children
}, children), Icon && /*#__PURE__*/_react.default.createElement(Icon, {
"aria-label": iconDescription
})),
id: id,
key: id || index,
onClick: onClick
}, other));
});
}
var renderOverflowMenuIcon = function renderOverflowMenuIcon() {
return /*#__PURE__*/(0, _react.createElement)(isOpen ? _iconsReact.ChevronUp16 : _iconsReact.ChevronDown16, {
className: "".concat(namespace, "__icon")
});
};
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(namespace, className),
"data-floating-menu-container": true
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(namespace, "__group")
}, primaryActionWithProps, overflowMenuItemWithProps !== undefined && /*#__PURE__*/_react.default.createElement(_OverflowMenu.default, {
className: (0, _classnames.default)(
// Button-specific classes for styling:
_Button2.namespace, "".concat(_namespace.carbonPrefix, "--btn"), "".concat(_namespace.carbonPrefix, "--btn--primary"), // Button as a child of combo button:
"".concat(namespace, "__button"), // Overflow menu as a child of combo button:
"".concat(namespace, "__overflow-menu")),
direction: direction,
menuOffset: menuOffset,
menuOffsetFlip: menuOffsetFlip,
menuOptionsClass: "".concat(_namespace.carbonPrefix, "--list-box__menu"),
onClick: function onClick() {
return setIsOpen(!isOpen);
},
onClose: function onClose() {
return setIsOpen(false);
},
renderIcon: renderOverflowMenuIcon,
selectorPrimaryFocus: selectorPrimaryFocus
}, overflowMenuItemWithProps)));
};
ComboButton.propTypes = {
/** @type {node} The child nodes. */
children: _propTypes.default.node.isRequired,
/** @type {string} Extra classes to add. */
className: _propTypes.default.string,
/** @type {string} Overflow menu direction. */
direction: _propTypes.default.oneOf([_IconButton.TooltipDirection.TOP, _IconButton.TooltipDirection.BOTTOM]),
/**
* The adjustment in position applied to the floating menu.
*/
menuOffset: _propTypes.default.oneOfType([_propTypes.default.shape({
top: _propTypes.default.oneOf([_propTypes.default.number, _propTypes.default.string]),
left: _propTypes.default.oneOf([_propTypes.default.number, _propTypes.default.string])
}), _propTypes.default.func]),
/**
* The adjustment in position applied to the floating menu.
*/
menuOffsetFlip: _propTypes.default.oneOfType([_propTypes.default.shape({
top: _propTypes.default.oneOf([_propTypes.default.number, _propTypes.default.string]),
left: _propTypes.default.oneOf([_propTypes.default.number, _propTypes.default.string])
}), _propTypes.default.func]),
/**
* Specify a CSS selector that matches the DOM element that should
* be focused when the OverflowMenu opens
*/
selectorPrimaryFocus: _propTypes.default.string
};
ComboButton.defaultProps = {
className: '',
direction: _IconButton.TooltipDirection.TOP,
menuOffset: function menuOffset() {
return {
left: 'auto'
};
},
menuOffsetFlip: undefined,
selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
};
var _default = exports.default = ComboButton;