@atlaskit/mention/dist/es2019/components/Mention/index.js

A React component used to display user profiles in a list for 'Mention' functionality

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import FocusRing from '@atlaskit/focus-ring';
import { fg } from '@atlaskit/platform-feature-flags';
import MessagesIntlProvider from '../MessagesIntlProvider';
import PrimitiveMention from './PrimitiveMention';
import AsyncNoAccessTooltip from '../NoAccessTooltip';
import { isRestricted, MentionType } from '../../types';
import { fireAnalyticsMentionEvent } from '../../util/analytics';
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
import { UFOExperienceState } from '@atlaskit/ufo';
import { UnknownUserError } from '../../util/i18n';
import { UfoErrorBoundary, mentionRenderedUfoExperience } from './ufoExperiences';
export const ANALYTICS_HOVER_DELAY = 1000;
export const UNKNOWN_USER_ID = '_|unknown|_';
export class MentionInternal extends React.PureComponent {
  constructor(props) {
    super(props);
    _defineProperty(this, "handleOnClick", e => {
      const {
        id,
        text,
        onClick
      } = this.props;
      if (onClick) {
        onClick(id, text, e);
      }
    });
    _defineProperty(this, "handleOnMouseEnter", e => {
      const {
        id,
        text,
        onMouseEnter,
        onHover
      } = this.props;
      if (onMouseEnter) {
        onMouseEnter(id, text, e);
      }
      this.hoverTimeout = window.setTimeout(() => {
        if (onHover) {
          onHover();
        }
        this.hoverTimeout = undefined;
      }, ANALYTICS_HOVER_DELAY);
    });
    _defineProperty(this, "handleOnMouseLeave", e => {
      const {
        id,
        text,
        onMouseLeave
      } = this.props;
      if (onMouseLeave) {
        onMouseLeave(id, text, e);
      }
      if (this.hoverTimeout) {
        clearTimeout(this.hoverTimeout);
      }
    });
    _defineProperty(this, "getMentionType", () => {
      const {
        accessLevel,
        isHighlighted
      } = this.props;
      if (isHighlighted) {
        return MentionType.SELF;
      }
      if (isRestricted(accessLevel)) {
        return MentionType.RESTRICTED;
      }
      return MentionType.DEFAULT;
    });
    mentionRenderedUfoExperience.getInstance(props.id).start();
  }
  componentDidMount() {
    mentionRenderedUfoExperience.getInstance(this.props.id).success();
  }
  componentWillUnmount() {
    if (this.hoverTimeout) {
      clearTimeout(this.hoverTimeout);
    }
    const ufoInstance = mentionRenderedUfoExperience.getInstance(this.props.id);
    if ([UFOExperienceState['STARTED'], UFOExperienceState['IN_PROGRESS']].includes(ufoInstance.state)) {
      ufoInstance.abort();
    }
  }
  renderUnknownUserError(id) {
    return /*#__PURE__*/React.createElement(UnknownUserError, {
      values: {
        userId: id.slice(-5)
      }
    }, message => /*#__PURE__*/React.createElement(React.Fragment, null, `@${message}`));
  }
  render() {
    const {
      handleOnClick,
      handleOnMouseEnter,
      handleOnMouseLeave,
      props
    } = this;
    const {
      text,
      id,
      accessLevel,
      localId
    } = props;
    const mentionType = this.getMentionType();
    const failedMention = text === `@${UNKNOWN_USER_ID}`;
    const showTooltip = mentionType === MentionType.RESTRICTED;
    const mentionComponent = /*#__PURE__*/React.createElement(FocusRing, null, /*#__PURE__*/React.createElement(PrimitiveMention, {
      mentionType: mentionType,
      onClick: handleOnClick,
      onMouseEnter: handleOnMouseEnter,
      onMouseLeave: handleOnMouseLeave,
      spellCheck: false,
      "data-testid": `mention-${id}`,
      "data-mention-type": mentionType,
      "data-mention-tooltip": showTooltip
    }, failedMention ? this.renderUnknownUserError(id) : text || '@...'));
    const ssrPlaceholderProp = fg('cc_mention_ssr_placeholder') ? {
      'data-ssr-placeholder': props.ssrPlaceholderId
    } : {};
    return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
      id: id
    }, /*#__PURE__*/React.createElement("span", _extends({
      id: localId,
      "data-mention-id": id,
      "data-local-id": localId,
      "data-access-level": accessLevel,
      spellCheck: false
    }, ssrPlaceholderProp), /*#__PURE__*/React.createElement(MessagesIntlProvider, null, showTooltip ? /*#__PURE__*/React.createElement(React.Suspense, {
      fallback: mentionComponent
    }, /*#__PURE__*/React.createElement(AsyncNoAccessTooltip, {
      name: text
    }, mentionComponent)) : mentionComponent)));
  }
}
const MentionWithAnalytics = withAnalyticsEvents({
  onClick: (createEvent, props) => {
    const {
      id,
      text,
      accessLevel
    } = props;
    const event = fireAnalyticsMentionEvent(createEvent)('mention', 'selected', text, id, accessLevel);
    return event;
  },
  onHover: (createEvent, props) => {
    const {
      id,
      text,
      accessLevel
    } = props;
    const event = fireAnalyticsMentionEvent(createEvent)('mention', 'hovered', text, id, accessLevel);
    return event;
  }
})(MentionInternal);
const Mention = MentionWithAnalytics;
export default Mention;