@atlaskit/onboarding/dist/es2019/components/modal.js

An onboarding spotlight introduces new features to users through focused messages or multi-step tours.

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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
export default class BenefitsModal extends Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "headerComponent", props => {
      const {
        header: HeaderElement,
        image: src
      } = props;
      const ImageElement = () => /*#__PURE__*/React.createElement(ModalImage, {
        src: src,
        alt: ""
      });
      return HeaderElement || ImageElement;
    });
    _defineProperty(this, "footerComponent", props => {
      const {
        footer: FooterElement,
        actions: actionList,
        experimental_shouldShowPrimaryButtonOnRight = false
      } = props;
      const ActionsElement = () => actionList ? /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
        value: modalButtonTheme
      }, /*#__PURE__*/React.createElement(ModalActionContainer, {
        shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
      }, actionList.map(({
        text,
        key,
        ...rest
      }, idx) => {
        const variant = idx ? 'subtle-link' : 'primary';
        return /*#__PURE__*/React.createElement(ModalActionItem, {
          key: key || (typeof text === 'string' ? text : `${idx}`)
        }, /*#__PURE__*/React.createElement(Button, _extends({
          appearance: variant,
          autoFocus: !idx
        }, rest), text));
      }))) : null;
      return FooterElement || ActionsElement;
    });
  }
  render() {
    const {
      actions: _actions,
      children,
      heading,
      // All of the following props except `...rest` are unused but were being
      // spread into the Modal, which it does not accept.
      experimental_shouldShowPrimaryButtonOnRight,
      footer,
      header,
      image,
      ...rest
    } = this.props;
    const Header = this.headerComponent(this.props);
    const Footer = this.footerComponent(this.props);
    const CustomHeader = () => {
      const {
        titleId
      } = useModal();
      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))
    );
  }
}