@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
214 lines (212 loc) • 13.1 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _iconsReact = require("@carbon/icons-react");
var _deprecate = _interopRequireDefault(require("carbon-components-react/lib/prop-types/deprecate"));
var _requiredIfGivenPropIsTruthy = _interopRequireDefault(require("carbon-components-react/lib/prop-types/requiredIfGivenPropIsTruthy"));
var _setupGetInstanceId = _interopRequireDefault(require("carbon-components-react/lib/tools/setupGetInstanceId"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _namespace = require("../../globals/namespace");
var defaultLabels = _interopRequireWildcard(require("../../globals/nls"));
var _capabilities = require("../../globals/utils/capabilities");
var _Button = _interopRequireDefault(require("../Button"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Portal = _interopRequireWildcard(require("../Portal"));
var _Transition = _interopRequireDefault(require("../Transition"));
var _PanelV2$propTypes;
var _excluded = ["children", "className", "closeButton", "focusTrap", "focusTrapOptions", "hasScrollingContent", "isOpen", "labels", "onClose", "primaryButton", "renderFooter", "rootNode", "secondaryButton", "stopPropagation", "stopPropagationEvents", "subtitle", "title"];
/**
* @file Panel v2.
* @copyright IBM Security 2019 - 2021
*/
/* eslint-disable no-useless-computed-key, react/require-default-props */
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; }
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) { (0, _defineProperty2.default)(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; }
var namespace = exports.namespace = (0, _namespace.getComponentNamespace)('panel--v2');
var getInstanceId = (0, _setupGetInstanceId.default)();
/**
* Panel v2 container component.
* @param {Record<string, any>} props Panel v2 container props.
* @returns {PanelV2} Panel v2 container instance.
*/
function PanelV2(_ref) {
var children = _ref.children,
className = _ref.className,
closeButton = _ref.closeButton,
focusTrap = _ref.focusTrap,
focusTrapOptions = _ref.focusTrapOptions,
hasScrollingContent = _ref.hasScrollingContent,
isOpen = _ref.isOpen,
labels = _ref.labels,
onClose = _ref.onClose,
primaryButton = _ref.primaryButton,
renderFooter = _ref.renderFooter,
rootNode = _ref.rootNode,
secondaryButton = _ref.secondaryButton,
stopPropagation = _ref.stopPropagation,
stopPropagationEvents = _ref.stopPropagationEvents,
subtitle = _ref.subtitle,
title = _ref.title,
other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
bodyMarginTop = _useState2[0],
setBodyMarginTop = _useState2[1];
var _useState3 = (0, _react.useState)(0),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
bodyMarginBottom = _useState4[0],
setBodyMarginBottom = _useState4[1];
var panelInstanceId = "panel-".concat(getInstanceId());
var panelTitleId = "".concat(namespace, "__title--").concat(panelInstanceId);
var panelSubtitleId = "".concat(namespace, "__subtitle--").concat(panelInstanceId);
var footerRef = (0, _react.useCallback)(function (node) {
// Sets the body margin to match the height of the footer for fixed scrolling.
setBodyMarginBottom(node ? node.clientHeight : 0);
}, []);
var headerRef = (0, _react.useCallback)(function (node) {
// Sets the body margin to match the height of the header for fixed scrolling.
setBodyMarginTop(node ? node.clientHeight : 0);
}, []);
var handleKeyDown = function handleKeyDown(event) {
if (isOpen && event.which === 27) {
onClose();
}
};
var renderPanel = function renderPanel(_ref2) {
var _ref2$labels = _ref2.labels,
PANEL_CONTAINER_PRIMARY_BUTTON = _ref2$labels.PANEL_CONTAINER_PRIMARY_BUTTON,
PANEL_CONTAINER_SECONDARY_BUTTON = _ref2$labels.PANEL_CONTAINER_SECONDARY_BUTTON,
PANEL_CONTAINER_CLOSE_BUTTON = _ref2$labels.PANEL_CONTAINER_CLOSE_BUTTON;
var hasFooter = renderFooter || primaryButton;
var ariaLabel = other['aria-label'] || title || subtitle;
var getAriaLabelledBy = title || subtitle ? {
'aria-labelledby': title ? panelTitleId : panelSubtitleId
} : {};
var hasScrollingContentProps = hasScrollingContent ? {
tabIndex: 0,
role: 'region',
'aria-label': ariaLabel
} : {};
return /*#__PURE__*/_react.default.createElement(_Transition.default, {
className: namespace
}, isOpen && /*#__PURE__*/_react.default.createElement(_Portal.default, {
focusTrap: focusTrap,
focusTrapOptions: focusTrapOptions,
overlayOptions: {
onClick: onClose
},
rootNode: rootNode,
stopPropagation: stopPropagation,
stopPropagationEvents: stopPropagationEvents
}, /*#__PURE__*/_react.default.createElement("section", {
className: (0, _classnames2.default)(namespace, className),
role: "dialog",
"aria-label": ariaLabel,
"aria-modal": "true",
onKeyDown: handleKeyDown,
tabIndex: -1
}, /*#__PURE__*/_react.default.createElement("header", {
ref: headerRef,
className: "".concat(namespace, "__header")
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
id: closeButton.id,
className: "".concat(namespace, "__button--close"),
label: PANEL_CONTAINER_CLOSE_BUTTON,
onClick: closeButton.onClick || onClose,
renderIcon: closeButton.icon || _iconsReact.Close20,
tooltip: false
}), title && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(namespace, "__header__container--title")
}, typeof title === 'string' ? /*#__PURE__*/_react.default.createElement("h2", {
id: panelTitleId,
className: "".concat(namespace, "__header--title")
}, title) : /*#__PURE__*/_react.default.createElement("div", {
id: panelTitleId,
className: "".concat(namespace, "__header--title")
}, title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
id: panelSubtitleId,
className: "".concat(namespace, "__header--subtitle")
}, subtitle))), /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({
className: (0, _classnames2.default)("".concat(namespace, "__body"), (0, _defineProperty2.default)({}, "".concat(namespace, "__body--footer"), renderFooter)),
style: {
marginTop: "".concat(bodyMarginTop, "px"),
marginBottom: "".concat(bodyMarginBottom, "px")
}
}, hasScrollingContentProps, getAriaLabelledBy), children), hasFooter && /*#__PURE__*/_react.default.createElement("footer", {
ref: footerRef,
className: "".concat(namespace, "__footer")
}, renderFooter ? renderFooter() : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, secondaryButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
id: secondaryButton.id,
className: "".concat(namespace, "__footer__button ").concat(namespace, "__footer__button--secondary"),
disabled: secondaryButton.isDisabled,
iconDescription: secondaryButton.iconDescription,
kind: "secondary",
onClick: secondaryButton.onClick,
renderIcon: secondaryButton.icon
}, PANEL_CONTAINER_SECONDARY_BUTTON), /*#__PURE__*/_react.default.createElement(_Button.default, {
id: primaryButton.id,
className: "".concat(namespace, "__footer__button"),
disabled: primaryButton.isDisabled,
iconDescription: primaryButton.iconDescription,
onClick: primaryButton.onClick,
renderIcon: primaryButton.icon
}, PANEL_CONTAINER_PRIMARY_BUTTON))))));
};
var componentLabels = _objectSpread(_objectSpread(_objectSpread({}, defaultLabels.labels), labels), defaultLabels.filterFalsey({
PANEL_CONTAINER_PRIMARY_BUTTON: primaryButton && primaryButton.label || '',
PANEL_CONTAINER_SECONDARY_BUTTON: secondaryButton && secondaryButton.label || '',
PANEL_CONTAINER_CLOSE_BUTTON: closeButton && closeButton.label || ''
}));
return renderPanel({
labels: componentLabels
});
}
var buttonType = _propTypes.default.shape({
id: _propTypes.default.string,
onClick: _propTypes.default.func,
label: _propTypes.default.string,
isDisabled: _propTypes.default.bool,
icon: _propTypes.default.object,
iconDescription: _propTypes.default.string
});
PanelV2.propTypes = (_PanelV2$propTypes = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_PanelV2$propTypes, 'aria-label', (0, _requiredIfGivenPropIsTruthy.default)('hasScrollingContent', _propTypes.default.string)), "children", _propTypes.default.node), "className", _propTypes.default.string), "closeButton", _propTypes.default.shape({
id: _propTypes.default.string,
onClick: _propTypes.default.func,
label: _propTypes.default.string,
isDisabled: _propTypes.default.bool,
icon: _propTypes.default.object,
iconDescription: _propTypes.default.string
})), "focusTrap", _propTypes.default.bool), "focusTrapOptions", _Portal.default.propTypes.focusTrapOptions), "hasScrollingContent", _propTypes.default.bool), "isOpen", _propTypes.default.bool), "labels", defaultLabels.propType), "onClose", _propTypes.default.func), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_PanelV2$propTypes, "primaryButton", (0, _deprecate.default)(buttonType, "\nThe prop `primaryButton` for PanelV2 has been deprecated in favor of `renderFooter`.")), "renderFooter", _propTypes.default.func), "rootNode", (0, _capabilities.isNode)() ? _propTypes.default.instanceOf(Node) : _propTypes.default.any), "secondaryButton", (0, _deprecate.default)(buttonType, "\nThe prop `secondaryButton` for PanelV2 has been deprecated in favor of `renderFooter`.")), "stopPropagation", _propTypes.default.bool), "stopPropagationEvents", _propTypes.default.arrayOf(_propTypes.default.oneOf(_Portal.PORTAL_EVENTS))), "subtitle", _propTypes.default.node), "title", _propTypes.default.node));
PanelV2.defaultProps = {
children: null,
className: null,
closeButton: undefined,
focusTrap: true,
focusTrapOptions: _Portal.default.defaultProps.focusTrapOptions,
isOpen: true,
labels: {},
primaryButton: undefined,
renderFooter: null,
rootNode: undefined,
secondaryButton: undefined,
stopPropagation: false,
stopPropagationEvents: undefined,
subtitle: undefined,
title: undefined,
hasScrollingContent: false,
onClose: function onClose() {}
};
/* eslint-enable */
var _default = exports.default = PanelV2;