@atlaskit/editor-plugin-media/dist/esm/ui/CommentBadge/index.js

Media plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useMemo, useState } from 'react';
import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { CommentBadgeNext } from '@atlaskit/editor-common/media-single';
var selector = function selector(states) {
  var _states$annotationSta, _states$annotationSta2, _states$annotationSta3;
  return {
    selectedAnnotations: (_states$annotationSta = states.annotationState) === null || _states$annotationSta === void 0 ? void 0 : _states$annotationSta.selectedAnnotations,
    isInlineCommentViewClosed: (_states$annotationSta2 = states.annotationState) === null || _states$annotationSta2 === void 0 ? void 0 : _states$annotationSta2.isInlineCommentViewClosed,
    annotations: (_states$annotationSta3 = states.annotationState) === null || _states$annotationSta3 === void 0 ? void 0 : _states$annotationSta3.annotations
  };
};
export var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
  var api = _ref.api,
    mediaNode = _ref.mediaNode,
    view = _ref.view,
    getPos = _ref.getPos,
    isDrafting = _ref.isDrafting;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    entered = _useState2[0],
    setEntered = _useState2[1];
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['annotation'], selector),
    selectedAnnotations = _useSharedPluginState.selectedAnnotations,
    isInlineCommentViewClosed = _useSharedPluginState.isInlineCommentViewClosed,
    annotations = _useSharedPluginState.annotations;
  var _view$state$schema = view.state.schema,
    media = _view$state$schema.nodes.media,
    annotation = _view$state$schema.marks.annotation,
    state = view.state,
    dispatch = view.dispatch;
  var status = useMemo(function () {
    if (!selectedAnnotations || !mediaNode) {
      return 'default';
    }
    return selectedAnnotations.some(function (annotation) {
      return !!mediaNode.marks.find(function (mark) {
        return mark.attrs.id === annotation.id;
      });
    }) && !isInlineCommentViewClosed ? 'active' : 'default';
  }, [selectedAnnotations, isInlineCommentViewClosed, mediaNode]);
  var onClick = useCallback(function () {
    if (api !== null && api !== void 0 && api.annotation && mediaNode) {
      var showCommentForBlockNode = api.annotation.actions.showCommentForBlockNode;
      showCommentForBlockNode(mediaNode, VIEW_METHOD.BADGE)(state, dispatch);
    }
  }, [api === null || api === void 0 ? void 0 : api.annotation, dispatch, mediaNode, state]);
  var pos = getPos();
  var hasNoComments = !Number.isFinite(pos) || !annotations || !mediaNode || mediaNode.type !== media || mediaNode.marks.every(function (maybeAnnotation) {
    return maybeAnnotation.type !== annotation || !(maybeAnnotation.attrs.id in annotations) || annotations[maybeAnnotation.attrs.id];
  });
  if (!isDrafting && hasNoComments || !mediaNode) {
    return null;
  }
  var maybeMediaSingleElement = view.domAtPos(pos + 1).node;
  var mediaSingleElement = maybeMediaSingleElement instanceof HTMLElement ? maybeMediaSingleElement : null;
  return /*#__PURE__*/React.createElement(CommentBadgeNext, {
    onClick: onClick,
    mediaSingleElement: mediaSingleElement,
    status: entered ? 'entered' : status
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onMouseEnter: function onMouseEnter() {
      return setEntered(true);
    }
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onMouseLeave: function onMouseLeave() {
      return setEntered(false);
    }
  });
};