@atlaskit/editor-plugin-avatar-group/dist/cjs/ui/avatars.js

Avatar Group plugin for @atlaskit/editor-core.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Avatars = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
var _analytics2 = require("@atlaskit/editor-common/analytics");
var _state = require("@atlaskit/editor-prosemirror/state");
var _styles = require("./styles");
var _toAvatar = _interopRequireDefault(require("./to-avatar"));
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

var scrollToCollabCursor = function scrollToCollabCursor(editorAPI, participants, sessionId, index, editorAnalyticsAPI) {
  var selectedUser = participants[index];
  var cursorPos = selectedUser.cursorPos;
  if (selectedUser && cursorPos !== undefined && selectedUser.sessionId !== sessionId) {
    var _editorAPI$core, _editorAPI$core2;
    var analyticsPayload = {
      action: _analytics2.ACTION.MATCHED,
      actionSubject: _analytics2.ACTION_SUBJECT.SELECTION,
      eventType: _analytics2.EVENT_TYPE.TRACK
    };
    editorAPI === null || editorAPI === void 0 || (_editorAPI$core = editorAPI.core) === null || _editorAPI$core === void 0 || (_editorAPI$core = _editorAPI$core.actions) === null || _editorAPI$core === void 0 || _editorAPI$core.execute(function (_ref) {
      var tr = _ref.tr;
      tr.setSelection(_state.Selection.near(tr.doc.resolve(cursorPos)));
      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(analyticsPayload)(tr);
      tr.scrollIntoView();
      return tr;
    });
    editorAPI === null || editorAPI === void 0 || (_editorAPI$core2 = editorAPI.core) === null || _editorAPI$core2 === void 0 || (_editorAPI$core2 = _editorAPI$core2.actions) === null || _editorAPI$core2 === void 0 || _editorAPI$core2.focus();
  }
};
var Avatars = exports.Avatars = /*#__PURE__*/_react.default.memo(function (props) {
  var _props$participants;
  var sessionId = props.sessionId,
    featureFlags = props.featureFlags,
    editorAPI = props.editorAPI;
  var intl = (0, _reactIntl.useIntl)();
  // .slice() turns ReadonlyArray<CollabParticipant> into a mutable CollabParticipant[]
  var participants = (_props$participants = props.participants) === null || _props$participants === void 0 || (_props$participants = _props$participants.toArray()) === null || _props$participants === void 0 ? void 0 : _props$participants.slice();
  if (!participants) {
    return null;
  }

  // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
  var avatars = participants.sort(function (p) {
    return p.sessionId === sessionId ? -1 : 1;
  }).map(function (participant) {
    return (0, _toAvatar.default)(participant, editorAPI, intl.formatMessage);
  });
  if (!avatars.length) {
    return null;
  }
  return (
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    (0, _react2.jsx)("div", {
      css: _styles.avatarContainerStyles
    }, (0, _react2.jsx)(_avatarGroup.default, {
      appearance: "stack",
      size: "medium",
      data: avatars,
      maxCount: 3
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      onAvatarClick: function onAvatarClick(_event, _analytics, index) {
        var allowCollabAvatarScroll = featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.collabAvatarScroll;

        // user does not need to scroll to their own position (index 0)
        if (allowCollabAvatarScroll && index > 0) {
          scrollToCollabCursor(editorAPI, participants, props.sessionId, index, props.editorAnalyticsAPI);
        }
      }
    }), props.children)
  );
});