@atlaskit/editor-plugin-paste/dist/es2019/ui/Flag.js

Paste plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import AkFlag, { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
import StatusErrorIcon from '@atlaskit/icon/core/status-error';
import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
import { PastePluginActionTypes } from '../editor-actions/actions';
import { FLAG_TYPE } from '../pastePluginType';
import { pluginKey } from '../pm-plugins/plugin-factory';
export const Flag = ({
  api
}) => {
  const {
    activeFlag
  } = useSharedPluginStateWithSelector(api, ['paste'], states => {
    var _states$pasteState;
    return {
      activeFlag: (_states$pasteState = states.pasteState) === null || _states$pasteState === void 0 ? void 0 : _states$pasteState.activeFlag
    };
  });
  const {
    formatMessage
  } = useIntl();
  if (!activeFlag) {
    return;
  }
  const {
    type,
    onDismissed: onDismissedCallback,
    description: flagDescription,
    title: flagTitle,
    urlText: flagUrlText,
    urlHref: flagUrlHref
  } = activeFlag;
  const description = flagDescription ? formatMessage(flagDescription) : undefined;
  const title = flagTitle ? formatMessage(flagTitle) : undefined;
  const urlText = flagUrlText ? formatMessage(flagUrlText) : undefined;
  const onDismissed = () => {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
      tr
    }) => {
      onDismissedCallback === null || onDismissedCallback === void 0 ? void 0 : onDismissedCallback(tr);
      const oldMeta = tr.getMeta(pluginKey);
      tr.setMeta(pluginKey, {
        ...oldMeta,
        type: PastePluginActionTypes.SET_ACTIVE_FLAG,
        activeFlag: false
      });
      return tr;
    });
    api === null || api === void 0 ? void 0 : api.core.actions.focus();
  };
  const getActions = () => {
    const action = urlText && flagUrlHref ? {
      content: urlText,
      href: flagUrlHref
    } : undefined;
    if (action) {
      return [{
        content: action.content,
        href: action.href,
        target: '_blank'
      }];
    }
    return undefined;
  };
  const getFlagComponent = () => {
    if (type === FLAG_TYPE.INFO || type === FLAG_TYPE.SUCCESS) {
      return AutoDismissFlag;
    }
    return AkFlag;
  };
  const FlagComponent = getFlagComponent();
  return /*#__PURE__*/React.createElement(FlagGroup, null, /*#__PURE__*/React.createElement(FlagComponent, {
    onDismissed: onDismissed,
    title: title,
    description: description,
    id: activeFlag.id,
    testId: activeFlag.id,
    icon: typeToIcon(type),
    actions: getActions()
  }));
};
const typeToIcon = type => {
  if (type === 'error') {
    return /*#__PURE__*/React.createElement(StatusErrorIcon, {
      label: "",
      color: "var(--ds-icon-danger, #C9372C)"
    });
  }
  if (type === 'warning') {
    return /*#__PURE__*/React.createElement(StatusWarningIcon, {
      label: "",
      color: "var(--ds-icon-warning, #E06C00)"
    });
  }
  return /*#__PURE__*/React.createElement(StatusSuccessIcon, {
    label: "",
    color: "var(--ds-icon-success, #6A9A23)"
  });
};