@atlaskit/onboarding/dist/es2019/components/spotlight-inner.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 from 'react';
import { canUseDOM } from 'exenv';
import ScrollLock from 'react-scrolllock';
import scrollIntoView from 'scroll-into-view-if-needed';
import { Layering } from '@atlaskit/layering/layering';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import FadeIn from '@atlaskit/motion/fade-in';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import Portal from '@atlaskit/portal/portal';
import { ElementBox } from '../utils/use-element-box';
import Clone from './clone';
import NodeResolverSpotlightInner from './node-resolver-spotlight-inner';
import SpotlightDialog from './spotlight-dialog';
import { SpotlightTransitionConsumer } from './spotlight-transition';
/**
 * __Spotlight inner__
 *
 * Renders the spotlight target clone and dialog.
 *
 * @internal
 */
// eslint-disable-next-line @repo/internal/react/no-class-components
class SpotlightInner extends React.Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "state", {
      // This is only used when targetReplacement is specified.
      // In this case, we have to render the targetReplacement component,
      // get a dom reference from that component, then render again passing
      // that reference into SpotlightDialog (Popper).
      replacementElement: null
    });
    _defineProperty(this, "getTargetNodeStyle", box => {
      if (!canUseDOM) {
        return {};
      }
      const {
        height,
        left,
        top,
        width,
        ...rest
      } = box;
      return {
        // Handling this just in case there are invalid elements being sent in to
        // the `box` arg
        ...rest,
        height,
        left,
        top,
        width,
        position: 'fixed',
        // when width is 0, set visibility hidden to avoid the target flashing issue
        ...(width === 0 && fg('scroll-lock-replacement') && {
          visibility: 'hidden'
        })
      };
    });
  }
  componentDidUpdate(prevProps) {
    if (prevProps.targetNode !== this.props.targetNode) {
      scrollIntoView(this.props.targetNode, {
        scrollMode: 'if-needed',
        block: this.props.scrollPositionBlock
      });
    }
  }
  componentDidMount() {
    scrollIntoView(this.props.targetNode, {
      scrollMode: 'if-needed',
      block: this.props.scrollPositionBlock
    });
    this.props.onOpened();
  }
  componentWillUnmount() {
    this.props.onClosed();
  }
  render() {
    const {
      pulse,
      shouldWatchTarget,
      target,
      targetNode,
      targetBgColor,
      targetOnClick,
      targetRadius,
      testId,
      targetReplacement: TargetReplacement
    } = this.props;
    const {
      replacementElement
    } = this.state;
    return /*#__PURE__*/React.createElement(SpotlightTransitionConsumer, null, ({
      isOpen,
      onExited
    }) => /*#__PURE__*/React.createElement(Portal, {
      zIndex: 701
    }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResolverSpotlightInner, {
      hasNodeResolver: !fg('platform_design_system_team_onboarding_noderesolve'),
      innerRef: elem => this.setState({
        replacementElement: elem
      })
    }, /*#__PURE__*/React.createElement(ElementBox, {
      element: targetNode,
      resizeUpdateMethod: shouldWatchTarget ? 'polling' : undefined
    }, box => /*#__PURE__*/React.createElement(TargetReplacement, _extends({
      "data-testid": `${testId}--target`
    }, this.getTargetNodeStyle(box))))) : /*#__PURE__*/React.createElement(ElementBox, {
      element: targetNode,
      resizeUpdateMethod: shouldWatchTarget ? 'polling' : undefined
    }, box => /*#__PURE__*/React.createElement(Clone, {
      shouldWatch: shouldWatchTarget,
      testId: `${testId}--target`,
      pulse: pulse,
      target: target
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      ,
      style: this.getTargetNodeStyle(box),
      targetBgColor: targetBgColor,
      targetNode: targetNode,
      targetOnClick: targetOnClick,
      targetRadius: targetRadius
    })), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Layering, {
      isDisabled: false
    }, /*#__PURE__*/React.createElement(ExitingPersistence, {
      appear: true
    }, isOpen && /*#__PURE__*/React.createElement(FadeIn, {
      onFinish: state => {
        state === 'exiting' && onExited();
      },
      duration: "medium"
    }, ({
      ref,
      className,
      style
    }) => /*#__PURE__*/React.createElement("div", {
      ref: ref
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
      ,
      className: className,
      style: style
    }, /*#__PURE__*/React.createElement(SpotlightDialog, {
      testId: `${testId}--dialog`,
      actions: this.props.actions,
      actionsBeforeElement: this.props.actionsBeforeElement,
      children: this.props.children,
      dialogPlacement: this.props.dialogPlacement,
      dialogWidth: this.props.dialogWidth,
      footer: this.props.footer,
      header: this.props.header,
      heading: this.props.heading,
      titleId: this.props.titleId,
      label: this.props.label,
      headingAfterElement: this.props.headingAfterElement,
      image: this.props.image,
      targetNode: replacementElement || targetNode
    }))))), /*#__PURE__*/React.createElement(ScrollLock, null)));
  }
}

// eslint-disable-next-line @repo/internal/react/require-jsdoc
_defineProperty(SpotlightInner, "defaultProps", {
  dialogWidth: 400,
  pulse: true
});
export default SpotlightInner;