@atlaskit/onboarding
Version:
An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
124 lines (123 loc) • 6.32 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["text", "key"],
_excluded2 = ["actions", "children", "heading", "experimental_shouldShowPrimaryButtonOnRight", "footer", "header", "image"];
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
import React, { Component } from 'react';
import Button from '@atlaskit/button/custom-theme-button/custom-theme-button';
import ButtonTheme from '@atlaskit/button/theme';
import Modal from '@atlaskit/modal-dialog/modal-dialog';
import ModalBody from '@atlaskit/modal-dialog/modal-body';
import { useModal } from '@atlaskit/modal-dialog/hooks';
import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';
import { modalButtonTheme } from './theme';
// TODO: DSP-1250 - use a composable API consistent with normal modal dialog
/**
* __Benefits modal__
*
* A benefits modal explains the benefits of a significant new feature or experience change.
*
* - [Examples](https://atlassian.design/components/onboarding/benefits-modal/examples)
* - [Code](https://atlassian.design/components/onboarding/benefits-modal/code)
* - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
*
* @deprecated Use `@atlaskit/modal-dialog` instead.
*/
// eslint-disable-next-line @repo/internal/react/no-class-components
var BenefitsModal = /*#__PURE__*/function (_Component) {
function BenefitsModal() {
var _this;
_classCallCheck(this, BenefitsModal);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, BenefitsModal, [].concat(args));
_defineProperty(_this, "headerComponent", function (props) {
var HeaderElement = props.header,
src = props.image;
var ImageElement = function ImageElement() {
return /*#__PURE__*/React.createElement(ModalImage, {
src: src,
alt: ""
});
};
return HeaderElement || ImageElement;
});
_defineProperty(_this, "footerComponent", function (props) {
var FooterElement = props.footer,
actionList = props.actions,
_props$experimental_s = props.experimental_shouldShowPrimaryButtonOnRight,
experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
var ActionsElement = function ActionsElement() {
return actionList ? /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
value: modalButtonTheme
}, /*#__PURE__*/React.createElement(ModalActionContainer, {
shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
}, actionList.map(function (_ref, idx) {
var text = _ref.text,
key = _ref.key,
rest = _objectWithoutProperties(_ref, _excluded);
var variant = idx ? 'subtle-link' : 'primary';
return /*#__PURE__*/React.createElement(ModalActionItem, {
key: key || (typeof text === 'string' ? text : "".concat(idx))
}, /*#__PURE__*/React.createElement(Button, _extends({
appearance: variant,
autoFocus: !idx
}, rest), text));
}))) : null;
};
return FooterElement || ActionsElement;
});
return _this;
}
_inherits(BenefitsModal, _Component);
return _createClass(BenefitsModal, [{
key: "render",
value: function render() {
var _this$props = this.props,
_actions = _this$props.actions,
children = _this$props.children,
heading = _this$props.heading,
experimental_shouldShowPrimaryButtonOnRight = _this$props.experimental_shouldShowPrimaryButtonOnRight,
footer = _this$props.footer,
header = _this$props.header,
image = _this$props.image,
rest = _objectWithoutProperties(_this$props, _excluded2);
var Header = this.headerComponent(this.props);
var Footer = this.footerComponent(this.props);
var CustomHeader = function CustomHeader() {
var _useModal = useModal(),
titleId = _useModal.titleId;
return /*#__PURE__*/React.createElement(Heading, {
id: titleId
}, heading);
};
return (
/*#__PURE__*/
// TODO: This is a problem that needs solving: https://product-fabric.atlassian.net/browse/DSP-22238
// eslint-disable-next-line @atlaskit/design-system/use-modal-dialog-close-button
React.createElement(Modal, _extends({
shouldCloseOnEscapePress: false,
shouldCloseOnOverlayClick: false,
shouldScrollInViewport: true
// @ts-ignore All of the following props were in the rest props, so I'm
// making them explicit here even though the Modal doesn't accept them.
,
experimental_shouldShowPrimaryButtonOnRight: experimental_shouldShowPrimaryButtonOnRight,
footer: footer,
header: header,
heading: heading,
image: image
}, rest), /*#__PURE__*/React.createElement(Header, null), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(CustomHeader, null), children)), /*#__PURE__*/React.createElement(Footer, null))
);
}
}]);
}(Component);
export { BenefitsModal as default };