@atlaskit/editor-common/dist/esm/media-single/CommentBadge.js

A package that contains common classes and components for editor and renderer

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { forwardRef, useEffect, useMemo, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import debounce from 'lodash/debounce';
import CustomThemeButton from '@atlaskit/button/custom-theme-button';
import { akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
import CommentIcon from '@atlaskit/icon/core/comment';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import Tooltip from '@atlaskit/tooltip';
import { commentMessages as messages } from '../media';
var commentBadgeWrapper = css({
  position: 'absolute',
  // closest parent element with position relative is .resizer-hover-zone, which includes 10px padding
  right: '2px',
  top: '2px',
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
  borderRadius: "var(--ds-radius-small, 3px)",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  zIndex: akEditorUnitZIndex * 10
});
var commentBadgeEditorOverrides = function commentBadgeEditorOverrides(badgeOffsetRight) {
  return css({
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    right: badgeOffsetRight,
    zIndex: 100
  });
};
export var getBadgeSize = function getBadgeSize(width, height) {
  // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
  return width && width < 70 || height && height < 70 ? 'small' : 'medium';
};
export var CommentBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var intl = _ref.intl,
    width = _ref.width,
    height = _ref.height,
    _ref$status = _ref.status,
    status = _ref$status === void 0 ? 'default' : _ref$status,
    mediaSingleElement = _ref.mediaSingleElement,
    onClick = _ref.onClick,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave,
    badgeOffsetRight = _ref.badgeOffsetRight;
  var _useState = useState(getBadgeSize(width, height)),
    _useState2 = _slicedToArray(_useState, 2),
    badgeSize = _useState2[0],
    setBadgeSize = _useState2[1];
  var title = intl.formatMessage(messages.viewCommentsOnMedia);
  useEffect(function () {
    var observer = new ResizeObserver(debounce(function (entries) {
      var _entries = _slicedToArray(entries, 1),
        entry = _entries[0];
      var _entry$contentRect = entry.contentRect,
        width = _entry$contentRect.width,
        height = _entry$contentRect.height;
      setBadgeSize(getBadgeSize(width, height));
    }));
    if (mediaSingleElement instanceof HTMLElement) {
      observer.observe(mediaSingleElement);
    }
    return function () {
      observer.disconnect();
    };
  }, [mediaSingleElement]);
  var badgeDimensions = badgeSize === 'medium' ? '24px' : '16px';
  var colourToken = useMemo(function () {
    switch (status) {
      case 'active':
        return "var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E)";
      case 'entered':
        return "var(--ds-background-accent-yellow-subtlest-hovered, #F5E989)";
      default:
        return "var(--ds-background-accent-yellow-subtlest, #FEF7C8)";
    }
  }, [status]);
  var memoizedBadgeStyle = useMemo(function () {
    return {
      height: badgeDimensions,
      width: badgeDimensions,
      background: colourToken,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    };
  }, [badgeDimensions, colourToken]);
  var badgeStyle = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedBadgeStyle : {
    height: badgeDimensions,
    width: badgeDimensions,
    background: colourToken,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  };
  return jsx("div", {
    ref: ref,
    css: badgeOffsetRight ? [commentBadgeWrapper,
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    commentBadgeEditorOverrides(badgeOffsetRight)] : commentBadgeWrapper
    // This is needed so that mediaWrapperStyle in editor/editor-common/src/ui/MediaSingle/styled.tsx
    // can target the correct div
    ,
    "data-comment-badge": "true"
  }, jsx(Tooltip, {
    position: "top",
    content: title
  }, jsx(CustomThemeButton
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
  , {
    style: badgeStyle,
    onClick: onClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    iconAfter: jsx(CommentIcon, {
      label: title,
      spacing: "spacious",
      color: "currentColor"
    })
  })));
});