@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
291 lines (289 loc) • 16.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
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 _iconsReact = require("@carbon/icons-react");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _Button = _interopRequireDefault(require("../Button"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Loading = require("../Loading");
var _Portal = _interopRequireWildcard(require("../Portal"));
var _ScrollGradient = _interopRequireDefault(require("../ScrollGradient"));
var _Transition = _interopRequireDefault(require("../Transition"));
var defaultLabels = _interopRequireWildcard(require("../../globals/nls"));
var _theme = _interopRequireDefault(require("../../globals/theme"));
var _namespace = require("../../globals/namespace");
var _excluded = ["className", "focusTrap", "selectorPrimaryFocus", "renderSidebar", "renderMain", "primaryButton", "secondaryButton", "tertiaryButton", "closeButton", "sidebarTitle", "sidebarSubtitle", "mainTitle", "rootNode", "stopPropagation", "stopPropagationEvents", "deleteButton", "labels", "loading", "loadingMessage", "isOpen"];
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 Tearsheet.
* @copyright IBM Security 2019 - 2021
*/
var namespace = (0, _namespace.getComponentNamespace)('tearsheet');
/**
* Tearsheet component.
*/
var Tearsheet = /*#__PURE__*/function (_Component) {
function Tearsheet() {
var _this;
(0, _classCallCheck2.default)(this, Tearsheet);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Tearsheet, [].concat(args));
(0, _defineProperty2.default)(_this, "state", {
isOpen: _this.props.isOpen,
loading: _this.props.loading,
loadingMessage: _this.props.loadingMessage
});
(0, _defineProperty2.default)(_this, "containerSection", /*#__PURE__*/_react.default.createRef());
return _this;
}
(0, _inherits2.default)(Tearsheet, _Component);
return (0, _createClass2.default)(Tearsheet, [{
key: "render",
value: function render() {
var _this$props = this.props,
className = _this$props.className,
focusTrap = _this$props.focusTrap,
selectorPrimaryFocus = _this$props.selectorPrimaryFocus,
renderSidebar = _this$props.renderSidebar,
renderMain = _this$props.renderMain,
primaryButton = _this$props.primaryButton,
secondaryButton = _this$props.secondaryButton,
tertiaryButton = _this$props.tertiaryButton,
closeButton = _this$props.closeButton,
sidebarTitle = _this$props.sidebarTitle,
sidebarSubtitle = _this$props.sidebarSubtitle,
mainTitle = _this$props.mainTitle,
rootNode = _this$props.rootNode,
stopPropagation = _this$props.stopPropagation,
stopPropagationEvents = _this$props.stopPropagationEvents,
_this$props$deleteBut = _this$props.deleteButton,
_this$props$deleteBut2 = _this$props$deleteBut.icon,
icon = _this$props$deleteBut2 === void 0 ? _iconsReact.TrashCan20 : _this$props$deleteBut2,
_this$props$deleteBut3 = _this$props$deleteBut.label,
label = _this$props$deleteBut3 === void 0 ? '' : _this$props$deleteBut3,
_this$props$deleteBut4 = _this$props$deleteBut.hide,
hideDeleteButton = _this$props$deleteBut4 === void 0 ? false : _this$props$deleteBut4,
_this$props$deleteBut5 = _this$props$deleteBut.isDisabled,
isDisabled = _this$props$deleteBut5 === void 0 ? false : _this$props$deleteBut5,
onDeleteButtonClick = _this$props$deleteBut.onClick,
labels = _this$props.labels,
loading = _this$props.loading,
_ = _this$props.loadingMessage,
__ = _this$props.isOpen,
other = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
var componentLabels = _objectSpread(_objectSpread(_objectSpread({}, defaultLabels.labels), labels), defaultLabels.filterFalsey({
TEARSHEET_PRIMARY_BUTTON: primaryButton && primaryButton.label || '',
TEARSHEET_SECONDARY_BUTTON: secondaryButton && secondaryButton.label || '',
TEARSHEET_DELETE_BUTTON: label,
TEARSHEET_TERTIARY_BUTTON: label,
TEARSHEET_CLOSE_BUTTON: closeButton && closeButton.label || ''
}));
return /*#__PURE__*/_react.default.createElement(_Transition.default, {
className: namespace,
component: "span",
timeout: 300
}, this.state.isOpen && /*#__PURE__*/_react.default.createElement(_Portal.default, {
focusTrap: focusTrap,
initialFocus: selectorPrimaryFocus,
stopPropagation: stopPropagation,
stopPropagationEvents: stopPropagationEvents,
rootNode: rootNode
}, /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({
ref: this.containerSection,
className: (0, _classnames.default)(namespace, className),
"aria-hidden": false
}, other), this.state.loading && /*#__PURE__*/_react.default.createElement(_Loading.LoadingMessage, {
className: "".concat(namespace, "__loading")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(namespace, "__loading__message")
}, this.state.loadingMessage)), renderSidebar && /*#__PURE__*/_react.default.createElement("section", {
"aria-hidden": this.state.loading,
className: "".concat(namespace, "__sidebar")
}, sidebarTitle && /*#__PURE__*/_react.default.createElement("h1", {
className: "".concat(namespace, "__sidebar__title")
}, sidebarTitle), sidebarSubtitle && /*#__PURE__*/_react.default.createElement("p", {
className: "".concat(namespace, "__sidebar__subtitle")
}, sidebarSubtitle), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(namespace, "__sidebar__content")
}, renderSidebar()), /*#__PURE__*/_react.default.createElement("footer", {
className: "".concat(namespace, "__sidebar__footer")
}, !hideDeleteButton && /*#__PURE__*/_react.default.createElement(_Button.default, {
disabled: isDisabled || this.state.loading,
iconDescription: componentLabels.TEARSHEET_DELETE_BUTTON,
kind: "ghost-danger",
onClick: onDeleteButtonClick,
renderIcon: icon
}, componentLabels.TEARSHEET_DELETE_BUTTON))), /*#__PURE__*/_react.default.createElement("section", {
"aria-hidden": this.state.loading,
className: "".concat(namespace, "__main")
}, !closeButton.isDisabled && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
className: "".concat(namespace, "__button--close"),
label: componentLabels.TEARSHEET_CLOSE_BUTTON,
onClick: closeButton.onClick,
renderIcon: _iconsReact.Close20,
size: "lg",
tooltip: false,
disabled: this.state.loading
}), mainTitle && /*#__PURE__*/_react.default.createElement("h1", {
className: "".concat(namespace, "__main__title")
}, mainTitle), /*#__PURE__*/_react.default.createElement("section", {
className: "".concat(namespace, "__main__content")
}, /*#__PURE__*/_react.default.createElement(_ScrollGradient.default, {
className: "".concat(namespace, "__main__scroll-gradient"),
color: _theme.default.ui01
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(namespace, "__main__scroll-gradient__content")
}, renderMain({
isLoading: loading
})))), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(namespace, "__container")
}, !tertiaryButton.isDisabled && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(namespace, "__container__start")
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
className: "".concat(namespace, "__button--tertiary"),
disabled: isDisabled || this.state.loading,
kind: "ghost",
onClick: tertiaryButton.onClick,
size: "xl"
}, componentLabels.TEARSHEET_TERTIARY_BUTTON, tertiaryButton.secondaryText.length > 0 && /*#__PURE__*/_react.default.createElement("span", {
className: "".concat(namespace, "__button--tertiary__text")
}, componentLabels.TEARSHEET_TERTIARY_SECONDARY_TEXT))), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(namespace, "__container__end")
}, !secondaryButton.isDisabled && /*#__PURE__*/_react.default.createElement(_Button.default, {
className: "".concat(namespace, "__button ").concat(namespace, "__button--secondary"),
disabled: secondaryButton.isDisabled || this.state.loading,
kind: "secondary",
onClick: secondaryButton.onClick,
size: "xl"
}, componentLabels.TEARSHEET_SECONDARY_BUTTON), /*#__PURE__*/_react.default.createElement(_Button.default, {
className: "".concat(namespace, "__button"),
disabled: primaryButton.isDisabled || this.state.loading,
onClick: primaryButton.onClick,
size: "xl"
}, componentLabels.TEARSHEET_PRIMARY_BUTTON)))))));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(nextProps, prevState) {
if (prevState.isOpen !== nextProps.isOpen) {
return {
isOpen: nextProps.isOpen
};
}
if (prevState.loading !== nextProps.loading || prevState.loadingMessage !== nextProps.loadingMessage) {
return {
loading: nextProps.loading,
loadingMessage: nextProps.loadingMessage
};
}
return null;
}
}]);
}(_react.Component);
var buttonPropTypeMap = {
onClick: _Button.default.propTypes.onClick,
/** @type {string} The button label. */
label: _propTypes.default.string,
isDisabled: _Button.default.propTypes.disabled
};
Tearsheet.propTypes = {
/** Optional class name for the tearsheet wrapper node. */
className: _propTypes.default.string,
/** @type {object} An object list of close button props. */
closeButton: _propTypes.default.shape(buttonPropTypeMap).isRequired,
/** @type {object} An object list of delete button props. */
deleteButton: _propTypes.default.shape({
hide: _propTypes.default.bool,
icon: _Button.default.propTypes.renderIcon,
isDisabled: buttonPropTypeMap.isDisabled,
label: buttonPropTypeMap.label,
onClick: buttonPropTypeMap.onClick
}),
/** @type {boolean} Focus trap. */
focusTrap: _propTypes.default.bool,
/** @type {boolean} The open state. */
isOpen: _propTypes.default.bool,
/** @type {object} Labels for the Tearsheet buttons */
labels: defaultLabels.propType,
/** @type {bool} The toggle to determine whether or not to show the loading overlay. */
loading: _propTypes.default.bool,
/** @type {string} The message to be displayed during loading. */
loadingMessage: _propTypes.default.string,
/** @type {string} The main view title. */
mainTitle: _propTypes.default.string,
/** @type {Record<object, object>} An object list of primary button props. */
primaryButton: _propTypes.default.shape(buttonPropTypeMap).isRequired,
/** @type {func} The function to render the main content. */
renderMain: _propTypes.default.func,
/** @type {func} The function to render the sidebar content. */
renderSidebar: _propTypes.default.func,
/** @type {Node} The root node for rendering the modal */
rootNode: typeof Node !== 'undefined' ? _propTypes.default.instanceOf(Node) : _propTypes.default.any,
/** @type {Record<object, object>} An object list of secondary button props. */
secondaryButton: _propTypes.default.shape(buttonPropTypeMap).isRequired,
/** @type {string|func} The html element to have the inital focus in the tearsheet. */
selectorPrimaryFocus: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
/** @type {string} The sidebar subtitle. */
sidebarSubtitle: _propTypes.default.string,
/** @type {string} The sidebar title. */
sidebarTitle: _propTypes.default.string,
/** @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.PORTAL_EVENTS)),
/** @type {Record<object, object>} An object list of tertiary ghost button props. */
tertiaryButton: _propTypes.default.shape({
isDisabled: buttonPropTypeMap.isDisabled,
onClick: buttonPropTypeMap.onClick,
secondaryText: _propTypes.default.string
})
};
Tearsheet.defaultProps = {
className: '',
focusTrap: true,
selectorPrimaryFocus: '[tearsheet-primary-focus]',
renderMain: function renderMain() {
return null;
},
renderSidebar: null,
rootNode: undefined,
sidebarTitle: '',
sidebarSubtitle: '',
mainTitle: '',
tertiaryButton: {
onClick: function onClick() {},
isDisabled: true,
secondaryText: ''
},
deleteButton: {
onClick: function onClick() {},
hide: true
},
loading: false,
loadingMessage: '',
isOpen: true,
labels: {},
stopPropagation: false,
stopPropagationEvents: undefined
};
var _default = exports.default = Tearsheet;