@atlaskit/editor-plugin-panel/dist/esm/ui/panelTypeDropdown.js

Panel plugin for @atlaskit/editor-core.

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { PanelType } from '@atlaskit/adf-schema';
import { panelMessages as messages } from '@atlaskit/editor-common/messages';
import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
import CustomizeIcon from '@atlaskit/icon/core/customize';
import StatusDiscoveryIcon from '@atlaskit/icon/core/status-discovery';
import StatusInformationIcon from '@atlaskit/icon/core/status-information';
import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
import { changePanelType } from '../editor-actions/actions';
var panelTitleAndIcon = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PanelType.INFO, {
  title: messages.info,
  icon: StatusInformationIcon({
    label: 'info-icon',
    color: "var(--ds-icon-information, #357DE8)"
  })
}), PanelType.NOTE, {
  title: messages.note,
  icon: StatusDiscoveryIcon({
    label: 'note-icon',
    color: "var(--ds-icon-discovery, #AF59E1)"
  })
}), PanelType.SUCCESS, {
  title: messages.success,
  icon: StatusSuccessIcon({
    label: 'success-icon',
    color: "var(--ds-icon-success, #6A9A23)"
  })
}), PanelType.WARNING, {
  title: messages.warning,
  icon: StatusWarningIcon({
    label: 'warning-icon',
    color: "var(--ds-icon-warning, #E06C00)"
  })
}), PanelType.ERROR, {
  title: messages.error,
  icon: CrossCircleIcon({
    label: 'error-icon',
    color: "var(--ds-icon-danger, #C9372C)"
  })
}), PanelType.CUSTOM, {
  title: messages.custom,
  icon: CustomizeIcon({
    label: 'custom-icon'
  })
});
export var panelTypeDropdown = function panelTypeDropdown(_ref) {
  var activePanelType = _ref.activePanelType,
    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
    formatMessage = _ref.formatMessage;
  var dropdownOptions = [{
    id: 'editor.panel.info',
    icon: panelTitleAndIcon[PanelType.INFO].icon,
    onClick: changePanelType(editorAnalyticsAPI)(PanelType.INFO),
    selected: activePanelType === PanelType.INFO,
    title: formatMessage(panelTitleAndIcon[PanelType.INFO].title)
  }, {
    id: 'editor.panel.note',
    icon: panelTitleAndIcon[PanelType.NOTE].icon,
    onClick: changePanelType(editorAnalyticsAPI)(PanelType.NOTE),
    selected: activePanelType === PanelType.NOTE,
    title: formatMessage(panelTitleAndIcon[PanelType.NOTE].title)
  }, {
    id: 'editor.panel.success',
    icon: panelTitleAndIcon[PanelType.SUCCESS].icon,
    onClick: changePanelType(editorAnalyticsAPI)(PanelType.SUCCESS),
    selected: activePanelType === PanelType.SUCCESS,
    title: formatMessage(panelTitleAndIcon[PanelType.SUCCESS].title)
  }, {
    id: 'editor.panel.warning',
    icon: panelTitleAndIcon[PanelType.WARNING].icon,
    onClick: changePanelType(editorAnalyticsAPI)(PanelType.WARNING),
    selected: activePanelType === PanelType.WARNING,
    title: formatMessage(panelTitleAndIcon[PanelType.WARNING].title)
  }, {
    id: 'editor.panel.error',
    icon: panelTitleAndIcon[PanelType.ERROR].icon,
    onClick: changePanelType(editorAnalyticsAPI)(PanelType.ERROR),
    selected: activePanelType === PanelType.ERROR,
    title: formatMessage(panelTitleAndIcon[PanelType.ERROR].title)
  }];
  var selectedPanelType = activePanelType || PanelType.INFO;
  var selectedTitleAndIcon = panelTitleAndIcon[selectedPanelType] || panelTitleAndIcon[PanelType.CUSTOM];
  return {
    id: 'panel-type-dropdown',
    testId: 'panel-type-dropdown-trigger',
    type: 'dropdown',
    options: dropdownOptions,
    showSelected: true,
    iconBefore: function iconBefore() {
      return selectedTitleAndIcon.icon;
    },
    title: formatMessage(selectedTitleAndIcon.title)
  };
};