@atlaskit/editor-plugin-selection-toolbar/dist/es2019/ui/PrimaryToolbarComponent.js

@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core

/* PrimaryToolbarComponent.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./PrimaryToolbarComponent.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useIntl } from 'react-intl';
import { selectionToolbarMessages } from '@atlaskit/editor-common/messages';
import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import PinIcon from '@atlaskit/icon/core/pin';
import PinFilledIcon from '@atlaskit/icon/core/pin-filled';
import { fg } from '@atlaskit/platform-feature-flags';
const buttonStyles = null;
/**
 * A component used to renderer a pin/unpin
 * button to the toolbar to the or make it in-line.
 */
export const PrimaryToolbarComponent = ({
  api,
  disabled
}) => {
  var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar;
  const intl = useIntl();
  const mode = useSharedPluginStateSelector(api, 'connectivity.mode');
  const isOffline = isOfflineMode(mode);
  const isDockedToTop = fg('platform_editor_use_preferences_plugin') ? (api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition) === 'top' : (api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar.sharedState.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking) === 'top';
  if (isDockedToTop) {
    return /*#__PURE__*/React.createElement(ToolbarButton, {
      "aria-label": intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop)
      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
      ,

      disabled: disabled || isOffline,
      iconBefore: /*#__PURE__*/React.createElement(PinFilledIcon, {
        label: "",
        spacing: "spacious"
      })
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      ,
      onClick: () => {
        var _api$core$actions$exe, _api$userPreferences2;
        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userPreferences2 = api.userPreferences) === null || _api$userPreferences2 === void 0 ? void 0 : _api$userPreferences2.actions.updateUserPreference('toolbarDockingPosition', 'none'))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
      },
      title: intl.formatMessage(selectionToolbarMessages.toolbarPositionPinedAtTop),
      className: ax(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
    });
  }
  return /*#__PURE__*/React.createElement(ToolbarButton, {
    "aria-label": intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpined)
    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
    ,

    disabled: disabled || isOffline,
    iconBefore: /*#__PURE__*/React.createElement(PinIcon, {
      label: "",
      spacing: "spacious"
    })
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onClick: () => {
      var _api$core$actions$exe2, _api$userPreferences3;
      return (_api$core$actions$exe2 = api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userPreferences3 = api.userPreferences) === null || _api$userPreferences3 === void 0 ? void 0 : _api$userPreferences3.actions.updateUserPreference('toolbarDockingPosition', 'top'))) !== null && _api$core$actions$exe2 !== void 0 ? _api$core$actions$exe2 : false;
    },
    title: intl.formatMessage(selectionToolbarMessages.toolbarPositionUnpined),
    className: ax(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
  });
};