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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getBadgeSize = exports.CommentBadge = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _media = require("../media");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var commentBadgeWrapper = (0, _react2.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: _editorSharedStyles.akEditorUnitZIndex * 10
});
var commentBadgeEditorOverrides = function commentBadgeEditorOverrides(badgeOffsetRight) {
  return (0, _react2.css)({
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    right: badgeOffsetRight,
    zIndex: 100
  });
};
var getBadgeSize = exports.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';
};
var CommentBadge = exports.CommentBadge = /*#__PURE__*/(0, _react.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 = (0, _react.useState)(getBadgeSize(width, height)),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    badgeSize = _useState2[0],
    setBadgeSize = _useState2[1];
  var title = intl.formatMessage(_media.commentMessages.viewCommentsOnMedia);
  (0, _react.useEffect)(function () {
    var observer = new ResizeObserver((0, _debounce.default)(function (entries) {
      var _entries = (0, _slicedToArray2.default)(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 = (0, _react.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 = (0, _react.useMemo)(function () {
    return {
      height: badgeDimensions,
      width: badgeDimensions,
      background: colourToken,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    };
  }, [badgeDimensions, colourToken]);
  var badgeStyle = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedBadgeStyle : {
    height: badgeDimensions,
    width: badgeDimensions,
    background: colourToken,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  };
  return (0, _react2.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"
  }, (0, _react2.jsx)(_tooltip.default, {
    position: "top",
    content: title
  }, (0, _react2.jsx)(_customThemeButton.default
  // 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: (0, _react2.jsx)(_comment.default, {
      label: title,
      spacing: "spacious",
      color: "currentColor"
    })
  })));
});