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

Loom plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _toolbarButton = require("@atlaskit/editor-common/analytics/types/toolbar-button");
var _insertBlock = require("@atlaskit/editor-common/messages/insert-block");
var _ToolbarButton = _interopRequireDefault(require("@atlaskit/editor-common/ui-menu/ToolbarButton"));
var _useSharedPluginStateWithSelector = require("@atlaskit/editor-common/useSharedPluginStateWithSelector");
var _video = _interopRequireDefault(require("@atlaskit/icon/core/video"));
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

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

// 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 = (0, _react2.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.default.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 = (0, _useSharedPluginStateWithSelector.useSharedPluginStateWithSelector)(api, ['width'], selector),
    width = _useSharedPluginState.width;
  var label = formatMessage(appearance === 'comment' ? _insertBlock.toolbarInsertBlockMessages.addLoomVideoComment : _insertBlock.toolbarInsertBlockMessages.addLoomVideo);
  var shouldShowRecordText = (width || 0) > LOOM_BUTTON_WIDTH_BREAKPOINT;
  return (0, _react2.jsx)(_ToolbarButton.default, {
    hideTooltip: hideTooltip,
    ref: ref,
    href: href,
    buttonId: _toolbarButton.TOOLBAR_ACTION_SUBJECT_ID.RECORD_VIDEO,
    disabled: disabled,
    title: label,
    iconBefore: (0, _react2.jsx)("span", {
      css: iconMinWidthStyle
    }, (0, _react2.jsx)(_video.default, {
      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(_insertBlock.toolbarInsertBlockMessages.recordLoomShortTitle));
});
var _default_1 = (0, _reactIntl.injectIntl)(LoomToolbarButtonInternal, {
  forwardRef: true
});
var _default = exports.default = _default_1;