@atlaskit/editor-plugin-loom/dist/esm/ui/ToolbarButtonComponent.js

Loom plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx, css } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import VideoIcon from '@atlaskit/icon/core/video';
// This const is derived from the breakpoint where the toolbar hides its icons. It is used to hide the text in the AI button.
// Derived from values from platform/packages/editor/editor-core/src/ui/Appearance/FullPage/MainToolbar.tsx
var LOOM_BUTTON_WIDTH_BREAKPOINT = 1076;
var iconMinWidthStyle = css({
  minWidth: 24
});
var selector = function selector(states) {
  var _states$widthState;
  return {
    width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width
  };
};
var LoomToolbarButtonInternal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var disabled = _ref.disabled,
    api = _ref.api,
    appearance = _ref.appearance,
    formatMessage = _ref.intl.formatMessage,
    selected = _ref.selected,
    onBlur = _ref.onBlur,
    onFocus = _ref.onFocus,
    onKeyDown = _ref.onKeyDown,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave,
    ariaControls = _ref['aria-controls'],
    ariaExpanded = _ref['aria-expanded'],
    ariaHasPopup = _ref['aria-haspopup'],
    dataDsLevel = _ref['data-ds--level'],
    onClick = _ref.onClick,
    href = _ref.href,
    target = _ref.target,
    hideTooltip = _ref.hideTooltip,
    rel = _ref.rel;
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['width'], selector),
    width = _useSharedPluginState.width;
  var label = formatMessage(appearance === 'comment' ? toolbarInsertBlockMessages.addLoomVideoComment : toolbarInsertBlockMessages.addLoomVideo);
  var shouldShowRecordText = (width || 0) > LOOM_BUTTON_WIDTH_BREAKPOINT;
  return jsx(ToolbarButton, {
    hideTooltip: hideTooltip,
    ref: ref,
    href: href,
    buttonId: TOOLBAR_BUTTON.RECORD_VIDEO,
    disabled: disabled,
    title: label,
    iconBefore: jsx("span", {
      css: iconMinWidthStyle
    }, jsx(VideoIcon, {
      label: label,
      color: disabled ? "var(--ds-icon-disabled, #080F214A)" : "var(--ds-icon-subtle, #505258)",
      spacing: "spacious"
    })),
    selected: selected,
    onBlur: onBlur,
    onFocus: onFocus,
    onKeyDown: onKeyDown,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-haspopup": ariaHasPopup,
    "data-ds--level": dataDsLevel,
    onClick: onClick,
    target: target,
    rel: rel
  }, shouldShowRecordText && formatMessage(toolbarInsertBlockMessages.recordLoomShortTitle));
});
var _default_1 = injectIntl(LoomToolbarButtonInternal, {
  forwardRef: true
});
export default _default_1;