@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
192 lines (191 loc) • 11.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.PORTAL_EVENTS = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _focusTrapReact = _interopRequireDefault(require("focus-trap-react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = require("react-dom");
var _namespace = require("../../globals/namespace");
var _propTypes2 = _interopRequireDefault(require("../../globals/prop-types"));
var _capabilities = require("../../globals/utils/capabilities");
var _events = _interopRequireDefault(require("../../globals/utils/events"));
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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
* @file Portal.
* @copyright IBM Security 2019 - 2021
*/
var namespace = (0, _namespace.getComponentNamespace)('portal');
var PORTAL_EVENTS = exports.PORTAL_EVENTS = ['onAbort', 'onAnimationEnd', 'onAnimationIteration', 'onAnimationStart', /* 'onBlur', // Does not Bubble */
/* 'onCanPlay', // Does not Bubble */
/* 'onCanPlayThrough', // Does not Bubble */
'onChange', 'onClick', 'onContextMenu', 'onCopy', 'onCut', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', /* 'onDurationChange', // Does not Bubble */
'onEmptied', 'onEncrypted', /* 'onEnded', // Does not Bubble */
/* 'onError', // Does not Bubble */
/* 'onFocus', // Does not Bubble */
/* 'onGotPointerCapture', // Does not Bubble */
'onInput', /* 'onInvalid', // Does not Bubble */
'onKeyDown', 'onKeyPress', 'onKeyUp', /* 'onLoad', // Does not Bubble */
/* 'onLoadedData', // Does not Bubble */
/* 'onLoadedMetadata', // Does not Bubble */
/* 'onLoadStart', // Does not Bubble */
/* 'onLostPointerCapture', // Does not Bubble */
'onMouseDown', /* 'onMouseEnter', // Does not Bubble */
/* 'onMouseLeave', // Does not Bubble */
'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPaste', /* 'onPause', // Does not Bubble */
/* 'onPlay', // Does not Bubble */
/* 'onPlaying', // Does not Bubble */
'onPointerCancel', 'onPointerDown', /* 'onPointerEnter', // Does not Bubble */
/* 'onPointerLeave', // Does not Bubble */
'onPointerMove', 'onPointerOut', 'onPointerOver', 'onPointerUp', /* 'onProgress', // Does not Bubble */
'onRateChange', 'onScroll', 'onSeeked', 'onSeeking', 'onSelect', 'onStalled', 'onSubmit', 'onSuspend', 'onTimeUpdate', 'onToggle', 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'onTransitionEnd', 'onVolumeChange', 'onWaiting', 'onWheel'];
var Portal = /*#__PURE__*/function (_Component) {
function Portal() {
var _this;
(0, _classCallCheck2.default)(this, Portal);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Portal, [].concat(args));
(0, _defineProperty2.default)(_this, "handleOverlayClick", function () {
_this.onOverlayClick();
});
(0, _defineProperty2.default)(_this, "createPropagationTrap", function () {
var _this$props = _this.props,
children = _this$props.children,
stopPropagationEvents = _this$props.stopPropagationEvents;
var childProps = {};
var child = _react.default.Children.only(children);
var events = stopPropagationEvents || PORTAL_EVENTS;
events.forEach(function (event) {
if (child.props[event]) {
childProps[event] = (0, _events.default)([_this.handleBubble, child.props[event]]);
} else {
childProps[event] = _this.handleBubble;
}
});
return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread({}, childProps));
});
(0, _defineProperty2.default)(_this, "handleBubble", function (event) {
event.stopPropagation();
});
(0, _defineProperty2.default)(_this, "containerClass", "".concat(namespace, "__container"));
(0, _defineProperty2.default)(_this, "panelContainerClass", "".concat((0, _namespace.getComponentNamespace)('panel'), "__container"));
return _this;
}
(0, _inherits2.default)(Portal, _Component);
return (0, _createClass2.default)(Portal, [{
key: "componentDidMount",
value: function componentDidMount() {
if ((0, _capabilities.isClient)()) {
var _this$props2 = this.props,
rootNode = _this$props2.rootNode,
hasOverlay = _this$props2.hasOverlay,
onOverlayClick = _this$props2.onOverlayClick,
_this$props2$overlayO = _this$props2.overlayOptions,
className = _this$props2$overlayO.className,
onClick = _this$props2$overlayO.onClick;
this.onOverlayClick = onClick || onOverlayClick;
rootNode.classList.toggle(this.containerClass);
if (hasOverlay && document.getElementsByClassName(namespace).length === 0) {
var _this$overlay$classLi;
this.overlay = document.createElement('div');
this.overlay.setAttribute('tabIndex', '-1');
(_this$overlay$classLi = this.overlay.classList).add.apply(_this$overlay$classLi, (0, _toConsumableArray2.default)(["".concat(namespace, "__overlay"), className].filter(Boolean)));
rootNode.appendChild(this.overlay);
if (this.onOverlayClick) {
this.overlay.addEventListener('mousedown', this.handleOverlayClick);
}
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if ((0, _capabilities.isClient)()) {
var _this$props3 = this.props,
rootNode = _this$props3.rootNode,
hasOverlay = _this$props3.hasOverlay;
rootNode.classList.toggle(this.containerClass);
if (hasOverlay && this.overlay) {
rootNode.removeChild(this.overlay);
}
if (this.onOverlayClick) {
this.overlay.removeEventListener('mousedown', this.handleOverlayClick);
}
}
}
}, {
key: "render",
value: function render() {
var _this$props4 = this.props,
children = _this$props4.children,
focusTrap = _this$props4.focusTrap,
focusTrapOptions = _this$props4.focusTrapOptions,
initialFocus = _this$props4.initialFocus,
rootNode = _this$props4.rootNode,
stopPropagation = _this$props4.stopPropagation,
stopPropagationEvents = _this$props4.stopPropagationEvents;
return (0, _capabilities.isClient)() && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_focusTrapReact.default, {
active: focusTrap,
focusTrapOptions: _objectSpread({
fallbackFocus: focusTrapOptions.fallbackFocus || ((0, _capabilities.isClient)() ? rootNode : _react.Children.toArray(children)[0].type),
initialFocus: initialFocus
}, focusTrapOptions)
}, stopPropagation || stopPropagationEvents ? this.createPropagationTrap() : children), rootNode);
}
}]);
}(_react.Component); // TODO: `2.x` - Remove deprecated prop `onOverlayClick`.
Portal.propTypes = {
/** @type {element} The children of the panel. */
children: _propTypes.default.element,
/** @type {boolean} Focus trap. */
focusTrap: _propTypes.default.bool,
/** Pass any of the options available in https://github.com/focus-trap/focus-trap#createfocustrapelement-createoptions */
focusTrapOptions: _focusTrapReact.default.propTypes.focusTrapOptions,
/** @type {boolean} Include an overlay. */
hasOverlay: _propTypes.default.bool,
/** @type {node} Initially focused element. */
initialFocus: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
/** Deprecated in favor of `overlayOptions.onClick` */
onOverlayClick: (0, _propTypes2.default)('overlayOptions.onClick', _propTypes.default.func),
/** Specify the options for the overlay */
overlayOptions: _propTypes.default.shape({
/** Provide an optional class to be applied to the overlay */
className: _propTypes.default.string,
/** Specify the click event handler for the overlay */
onClick: _propTypes.default.func
}),
/** @type {ReactNode|any} The root node for rendering the panel */
rootNode: (0, _capabilities.isNode)() ? _propTypes.default.instanceOf(Node) : _propTypes.default.any,
/** @type {boolean} Stop event propagation for events that can bubble. */
stopPropagation: _propTypes.default.bool,
/** @type {Array} Array of event types to stop propagation. */
stopPropagationEvents: _propTypes.default.arrayOf(_propTypes.default.oneOf(PORTAL_EVENTS))
};
Portal.defaultProps = {
children: null,
focusTrap: true,
focusTrapOptions: _focusTrapReact.default.defaultProps.focusTrapOptions,
hasOverlay: true,
onOverlayClick: undefined,
overlayOptions: {},
rootNode: (0, _capabilities.isClient)() && document.body,
stopPropagation: false,
stopPropagationEvents: undefined
};
var _default = exports.default = Portal;