@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
99 lines (98 loc) • 4.87 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "overflowMenuAriaLabel", "children", "open", "selectorPrimaryFocus"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* @file Filter panel checkbox with overflow menu component.
* @copyright IBM Security 2020, 2021
*/
import classnames from 'classnames';
import PropTypes from 'prop-types';
import React, { useEffect, useRef, useState } from 'react';
import { getComponentNamespace } from '../../../globals/namespace';
import FilterPanelCheckbox from '../FilterPanelCheckbox';
import OverflowMenu from '../../OverflowMenu';
export var namespace = getComponentNamespace('filter-panel-checkbox-with-overflow-menu');
var FilterPanelCheckboxWithOverflowMenu = function FilterPanelCheckboxWithOverflowMenu(_ref) {
var className = _ref.className,
overflowMenuAriaLabel = _ref.overflowMenuAriaLabel,
children = _ref.children,
open = _ref.open,
selectorPrimaryFocus = _ref.selectorPrimaryFocus,
other = _objectWithoutProperties(_ref, _excluded);
var containerRef = useRef(null);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
showOverflowButton = _useState2[0],
setShowOverflowButton = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
overflowIsOpen = _useState4[0],
setOverflowIsOpen = _useState4[1];
var hideOverflowButton = function hideOverflowButton(activeElement) {
return !overflowIsOpen && !containerRef.current.contains(activeElement) && setShowOverflowButton(false);
};
useEffect(function () {
return setShowOverflowButton(overflowIsOpen);
}, [overflowIsOpen]);
return /*#__PURE__*/React.createElement("div", {
className: classnames(className, namespace, _defineProperty({}, "".concat(namespace, "--open"), overflowIsOpen)),
onBlur: function onBlur(_ref2) {
var relatedTarget = _ref2.relatedTarget;
return hideOverflowButton(relatedTarget);
},
onFocus: function onFocus() {
return setShowOverflowButton(true);
},
onMouseOver: function onMouseOver() {
return setShowOverflowButton(true);
},
onMouseLeave: function onMouseLeave() {
return hideOverflowButton(document.activeElement);
},
ref: containerRef,
"data-floating-menu-container": true
}, /*#__PURE__*/React.createElement(FilterPanelCheckbox, _extends({
wrapperClassName: "".concat(namespace, "__wrapper")
}, other)), showOverflowButton && /*#__PURE__*/React.createElement(OverflowMenu, {
open: open,
className: "".concat(namespace, "__overflow-button"),
menuOptionsClass: "".concat(namespace, "__overflow-options"),
ariaLabel: overflowMenuAriaLabel,
iconDescription: overflowMenuAriaLabel,
onOpen: function onOpen() {
return setOverflowIsOpen(true);
},
onClose: function onClose() {
return setOverflowIsOpen(false);
},
flipped: true,
selectorPrimaryFocus: selectorPrimaryFocus
}, children));
};
FilterPanelCheckboxWithOverflowMenu.propTypes = _objectSpread(_objectSpread({}, FilterPanelCheckbox.propTypes), {}, {
/** Children containing overflow menu items. */
children: PropTypes.node,
/** Optional class name. */
className: PropTypes.string,
/** Whether or not the overflow menu should render as open. */
open: PropTypes.bool,
/** Overflow aria-label to describe the purpose of the overflow button. */
overflowMenuAriaLabel: PropTypes.string,
/**
* Specify a CSS selector that matches the DOM element that should
* be focused when the OverflowMenu opens
*/
selectorPrimaryFocus: PropTypes.string
});
FilterPanelCheckboxWithOverflowMenu.defaultProps = _objectSpread(_objectSpread({}, FilterPanelCheckbox.defaultProps), {}, {
className: undefined,
overflowMenuAriaLabel: undefined,
children: undefined,
open: false,
selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
});
export default FilterPanelCheckboxWithOverflowMenu;