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

Panel plugin for @atlaskit/editor-core.

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';
const panelTitleAndIcon = {
  [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 const panelTypeDropdown = ({
  activePanelType,
  editorAnalyticsAPI,
  formatMessage
}) => {
  const 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)
  }];
  const selectedPanelType = activePanelType || PanelType.INFO;
  const selectedTitleAndIcon = panelTitleAndIcon[selectedPanelType] || panelTitleAndIcon[PanelType.CUSTOM];
  return {
    id: 'panel-type-dropdown',
    testId: 'panel-type-dropdown-trigger',
    type: 'dropdown',
    options: dropdownOptions,
    showSelected: true,
    iconBefore: () => selectedTitleAndIcon.icon,
    title: formatMessage(selectedTitleAndIcon.title)
  };
};