@atlaskit/editor-plugin-loom/dist/es2019/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
const LOOM_BUTTON_WIDTH_BREAKPOINT = 1076;
const iconMinWidthStyle = css({
  minWidth: 24
});
const selector = states => {
  var _states$widthState;
  return {
    width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width
  };
};
const LoomToolbarButtonInternal = /*#__PURE__*/React.forwardRef(({
  disabled,
  api,
  appearance,
  intl: {
    formatMessage
  },
  selected,
  onBlur,
  onFocus,
  onKeyDown,
  onMouseEnter,
  onMouseLeave,
  'aria-controls': ariaControls,
  'aria-expanded': ariaExpanded,
  'aria-haspopup': ariaHasPopup,
  'data-ds--level': dataDsLevel,
  onClick,
  href,
  target,
  hideTooltip,
  rel
}, ref) => {
  const {
    width
  } = useSharedPluginStateWithSelector(api, ['width'], selector);
  const label = formatMessage(appearance === 'comment' ? toolbarInsertBlockMessages.addLoomVideoComment : toolbarInsertBlockMessages.addLoomVideo);
  const 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));
});
const _default_1 = injectIntl(LoomToolbarButtonInternal, {
  forwardRef: true
});
export default _default_1;