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

SyncedBlock plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl-next';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import AkFlag, { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
import { syncedBlockPluginKey } from '../pm-plugins/main';
import { FLAG_ID } from '../types';
const flagMap = {
  [FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE]: {
    title: messages.failToDeleteTitle,
    description: messages.failToDeleteWhenOfflineDescription,
    type: 'error'
  },
  [FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE]: {
    title: messages.failToEditTitle,
    description: messages.failToEditWhenOfflineDescription,
    type: 'error'
  },
  [FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE]: {
    title: messages.failToCreateTitle,
    description: messages.failToCreateWhenOfflineDescription,
    type: 'error'
  },
  [FLAG_ID.FAIL_TO_DELETE]: {
    title: messages.cannotDeleteTitle,
    description: messages.cannotDeleteDescription,
    type: 'error'
  },
  [FLAG_ID.SYNC_BLOCK_COPIED]: {
    title: messages.syncBlockCopiedTitle,
    type: 'info'
  },
  [FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED]: {
    title: messages.unpublishedSyncBlockPastedTitle,
    description: messages.unpublishedSyncBlockPastedDescription,
    type: 'info'
  },
  [FLAG_ID.CANNOT_CREATE_SYNC_BLOCK]: {
    title: messages.cannotCreateSyncBlockTitle,
    description: messages.CannotCreateSyncBlockDescription,
    type: 'error'
  },
  [FLAG_ID.EXTENSION_IN_SYNC_BLOCK]: {
    title: messages.extensionInSyncBlockTitle,
    description: messages.extensionInSyncBlockDescription,
    type: 'error'
  },
  [FLAG_ID.INLINE_EXTENSION_IN_SYNC_BLOCK]: {
    title: messages.inlineExtensionInSyncBlockTitle,
    description: messages.inlineExtensionInSyncBlockDescription,
    type: 'error'
  },
  [FLAG_ID.DUPLICATE_SOURCE_SYNC_BLOCK]: {
    title: messages.duplicateSourceSyncBlockTitle,
    description: messages.duplicateSourceSyncBlockDescription,
    type: 'error'
  }
};
export const Flag = ({
  api
}) => {
  const {
    activeFlag,
    mode
  } = useSharedPluginStateWithSelector(api, ['syncedBlock', 'connectivity'], states => {
    var _states$syncedBlockSt, _states$connectivityS;
    return {
      activeFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.activeFlag,
      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
    };
  });
  const {
    formatMessage
  } = useIntl();
  if (!activeFlag) {
    return;
  }
  const {
    title,
    description,
    action,
    type
  } = flagMap[activeFlag.id];
  const {
    onRetry,
    onDismissed: onDismissedCallback
  } = activeFlag;

  // Retry button often involves network request, hence we dismiss the flag in offline mode to avoid retry
  if (isOfflineMode(mode) && !!onRetry) {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
      tr
    }) => {
      tr.setMeta(syncedBlockPluginKey, {
        activeFlag: false
      });
      return tr;
    });
    return;
  }
  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(syncedBlockPluginKey);
      tr.setMeta(syncedBlockPluginKey, {
        ...oldMeta,
        activeFlag: false
      });
      return tr;
    });
    api === null || api === void 0 ? void 0 : api.core.actions.focus();
  };
  const typeToActions = () => {
    if (type === 'error') {
      if (onRetry) {
        return [{
          content: formatMessage(messages.deleteRetryButton),
          onClick: onRetry
        }];
      }
    } else if (type === 'info' && action) {
      return [{
        content: formatMessage(action),
        href: SYNCED_BLOCKS_DOCUMENTATION_URL,
        target: '_blank',
        rel: 'noopener noreferrer'
      }];
    }
    return undefined;
  };
  const FlagComponent = type === 'info' ? AutoDismissFlag : AkFlag;
  return /*#__PURE__*/React.createElement(FlagGroup, null, /*#__PURE__*/React.createElement(FlagComponent, {
    onDismissed: onDismissed,
    title: formatMessage(title),
    description: description ? formatMessage(description) : undefined,
    id: activeFlag.id,
    testId: activeFlag.id,
    icon: typeToIcon(type),
    actions: typeToActions()
  }));
};
const typeToIcon = type => {
  if (type === 'error') {
    return /*#__PURE__*/React.createElement(StatusWarningIcon, {
      label: "",
      color: "var(--ds-icon-warning, #E06C00)"
    });
  }
  return /*#__PURE__*/React.createElement(StatusSuccessIcon, {
    label: "",
    color: "var(--ds-icon-success, #6A9A23)"
  });
};