@atlaskit/onboarding

Version:
An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
131 lines (130 loc) • 7.85 kB
JavaScript
"use strict";

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 _react = _interopRequireWildcard(require("react"));
var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button/custom-theme-button"));
var _theme = _interopRequireDefault(require("@atlaskit/button/theme"));
var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
var _modalBody = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-body"));
var _hooks = require("@atlaskit/modal-dialog/hooks");
var _modal = require("../styled/modal");
var _theme2 = require("./theme");
var _excluded = ["text", "key"],
  _excluded2 = ["actions", "children", "heading", "experimental_shouldShowPrimaryButtonOnRight", "footer", "header", "image"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; })(); }
// 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 = exports.default = /*#__PURE__*/function (_Component) {
  function BenefitsModal() {
    var _this;
    (0, _classCallCheck2.default)(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));
    (0, _defineProperty2.default)(_this, "headerComponent", function (props) {
      var HeaderElement = props.header,
        src = props.image;
      var ImageElement = function ImageElement() {
        return /*#__PURE__*/_react.default.createElement(_modal.ModalImage, {
          src: src,
          alt: ""
        });
      };
      return HeaderElement || ImageElement;
    });
    (0, _defineProperty2.default)(_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.default.createElement(_theme.default.Provider, {
          value: _theme2.modalButtonTheme
        }, /*#__PURE__*/_react.default.createElement(_modal.ModalActionContainer, {
          shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
        }, actionList.map(function (_ref, idx) {
          var text = _ref.text,
            key = _ref.key,
            rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
          var variant = idx ? 'subtle-link' : 'primary';
          return /*#__PURE__*/_react.default.createElement(_modal.ModalActionItem, {
            key: key || (typeof text === 'string' ? text : "".concat(idx))
          }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
            appearance: variant,
            autoFocus: !idx
          }, rest), text));
        }))) : null;
      };
      return FooterElement || ActionsElement;
    });
    return _this;
  }
  (0, _inherits2.default)(BenefitsModal, _Component);
  return (0, _createClass2.default)(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 = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
      var Header = this.headerComponent(this.props);
      var Footer = this.footerComponent(this.props);
      var CustomHeader = function CustomHeader() {
        var _useModal = (0, _hooks.useModal)(),
          titleId = _useModal.titleId;
        return /*#__PURE__*/_react.default.createElement(_modal.ModalHeading, {
          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.default.createElement(_modalDialog.default, (0, _extends2.default)({
          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.default.createElement(Header, null), /*#__PURE__*/_react.default.createElement(_modalBody.default, null, /*#__PURE__*/_react.default.createElement(_modal.ModalBody, null, heading && /*#__PURE__*/_react.default.createElement(CustomHeader, null), children)), /*#__PURE__*/_react.default.createElement(Footer, null))
      );
    }
  }]);
}(_react.Component);