@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
282 lines (281 loc) • 14 kB
JavaScript
/* DeleteConfirmationModal.tsx generated by @compiled/babel-plugin v0.39.1 */
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./DeleteConfirmationModal.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useCallback, useEffect, useState } from 'react';
import { useIntl } from 'react-intl-next';
import Button from '@atlaskit/button/new';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
import { fg } from '@atlaskit/platform-feature-flags';
import { Text, Box } from '@atlaskit/primitives/compiled';
import Spinner from '@atlaskit/spinner';
import { syncedBlockPluginKey } from '../pm-plugins/main';
var modalContentMapOld = {
'source-block-deleted': {
titleMultiple: messages.deleteConfirmationModalTitleMultiple,
titleSingle: messages.deletionConfirmationModalTitleSingle,
descriptionSingle: messages.deletionConfirmationModalDescriptionNoRef,
descriptionMultiple: messages.deletionConfirmationModalDescription,
confirmButtonLabel: messages.deleteConfirmationModalDeleteButton
},
'source-block-unpublished': {
titleMultiple: messages.deleteConfirmationModalTitleMultiple,
titleSingle: messages.deletionConfirmationModalTitleSingle,
descriptionSingle: messages.deletionConfirmationModalDescriptionNoRef,
descriptionMultiple: messages.deletionConfirmationModalDescription,
confirmButtonLabel: messages.deleteConfirmationModalDeleteButton
},
'source-block-unsynced': {
titleMultiple: messages.unsyncConfirmationModalTitle,
titleSingle: messages.unsyncConfirmationModalTitle,
descriptionSingle: messages.unsyncConfirmModalDescriptionSingle,
descriptionMultiple: messages.unsyncConfirmModalDescriptionMultiple,
confirmButtonLabel: messages.deleteConfirmationModalUnsyncButton
}
};
var modalContentMap = {
'source-block-deleted': {
titleMultiple: messages.deleteConfirmationModalTitleMultiple,
titleSingle: messages.deletionConfirmationModalTitleSingle,
descriptionSingle: messages.deletionConfirmationModalDescriptionNoRef,
descriptionMultiple: messages.deletionConfirmationModalDescriptionNew,
confirmButtonLabel: messages.deleteConfirmationModalDeleteButton
},
'source-block-unpublished': {
titleMultiple: messages.deleteConfirmationModalTitleMultiple,
titleSingle: messages.deletionConfirmationModalTitleSingle,
descriptionSingle: messages.deletionConfirmationModalDescriptionNoRef,
descriptionMultiple: messages.deletionConfirmationModalDescriptionNew,
confirmButtonLabel: messages.deleteConfirmationModalDeleteButton
},
'source-block-unsynced': {
titleMultiple: messages.unsyncConfirmationModalTitle,
titleSingle: messages.unsyncConfirmationModalTitle,
descriptionSingle: messages.unsyncConfirmModalDescriptionSingle,
descriptionMultiple: messages.unsyncConfirmModalDescriptionMultipleNew,
confirmButtonLabel: messages.deleteConfirmationModalUnsyncButton
}
};
var styles = {
spinner: "_1mou1wug _195g1wug"
};
export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
var _api$core2, _api$core4, _api$core6;
var syncBlockStoreManager = _ref.syncBlockStoreManager,
api = _ref.api;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var _useState3 = useState(undefined),
_useState4 = _slicedToArray(_useState3, 2),
syncBlockIds = _useState4[0],
setSyncBlockIds = _useState4[1];
var _useState5 = useState(undefined),
_useState6 = _slicedToArray(_useState5, 2),
referenceCount = _useState6[0],
setReferenceCount = _useState6[1];
var _useState7 = useState('source-block-deleted'),
_useState8 = _slicedToArray(_useState7, 2),
deleteReason = _useState8[0],
setDeleteReason = _useState8[1];
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity', 'syncedBlock'], function (states) {
var _states$connectivityS, _states$syncedBlockSt, _states$syncedBlockSt2;
return {
mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
bodiedSyncBlockDeletionStatus: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.bodiedSyncBlockDeletionStatus,
activeFlag: (_states$syncedBlockSt2 = states.syncedBlockState) === null || _states$syncedBlockSt2 === void 0 ? void 0 : _states$syncedBlockSt2.activeFlag
};
}),
mode = _useSharedPluginState.mode,
bodiedSyncBlockDeletionStatus = _useSharedPluginState.bodiedSyncBlockDeletionStatus,
activeFlag = _useSharedPluginState.activeFlag;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var resolverRef = React.useRef(undefined);
var handleClick = useCallback(function (confirm) {
return function () {
var _api$core;
if (resolverRef.current) {
resolverRef.current(confirm);
resolverRef.current = undefined;
}
if (!confirm) {
setIsOpen(false);
setReferenceCount(undefined);
}
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
var tr = _ref2.tr;
return tr.setMeta(syncedBlockPluginKey, {
bodiedSyncBlockDeletionStatus: confirm ? 'processing' : 'none',
activeFlag: false
});
});
};
}, [api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions]);
var confirmationCallback = useCallback(function (syncBlockIds, deleteReason) {
setIsOpen(true);
setSyncBlockIds(syncBlockIds);
if (deleteReason) {
setDeleteReason(deleteReason);
}
var confirmedPromise = new Promise(function (resolve) {
resolverRef.current = resolve;
});
if (activeFlag) {
var _api$core3;
api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
var tr = _ref3.tr;
return tr.setMeta(syncedBlockPluginKey, {
// Clear flag to avoid potential retry deletion of different blocks
activeFlag: false
});
});
}
return confirmedPromise;
}, [activeFlag, api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions]);
useEffect(function () {
var unregister = syncBlockStoreManager.sourceManager.registerConfirmationCallback(confirmationCallback);
return function () {
unregister();
};
}, [syncBlockStoreManager, confirmationCallback]);
useEffect(function () {
if (bodiedSyncBlockDeletionStatus === 'completed' && isOpen) {
var _api$core5;
// auto close modal once deletion is successful
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setIsOpen(false);
api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
var tr = _ref4.tr;
return tr.setMeta(syncedBlockPluginKey, {
// Reset deletion status to have a clean state for next deletion
bodiedSyncBlockDeletionStatus: 'none'
});
});
}
}, [api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, bodiedSyncBlockDeletionStatus, isOpen]);
useEffect(function () {
if (isOpen && syncBlockIds !== undefined) {
var fetchReferences = /*#__PURE__*/function () {
var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var references, totalCount;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.prev = 0;
_context2.next = 3;
return Promise.all(syncBlockIds.map( /*#__PURE__*/function () {
var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(syncBlockId) {
var _references$reference, _references$reference2;
var references;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return syncBlockStoreManager.sourceManager.fetchReferences(syncBlockId.resourceId);
case 2:
references = _context.sent;
if (!(references !== null && references !== void 0 && references.error)) {
_context.next = 5;
break;
}
throw new Error();
case 5:
return _context.abrupt("return", (_references$reference = (_references$reference2 = references.references) === null || _references$reference2 === void 0 ? void 0 : _references$reference2.length) !== null && _references$reference !== void 0 ? _references$reference : 0);
case 6:
case "end":
return _context.stop();
}
}, _callee);
}));
return function (_x) {
return _ref6.apply(this, arguments);
};
}()));
case 3:
references = _context2.sent;
totalCount = references.reduce(function (sum, count) {
return sum + count;
}, 0);
setReferenceCount(totalCount);
_context2.next = 11;
break;
case 8:
_context2.prev = 8;
_context2.t0 = _context2["catch"](0);
setReferenceCount(0);
case 11:
case "end":
return _context2.stop();
}
}, _callee2, null, [[0, 8]]);
}));
return function fetchReferences() {
return _ref5.apply(this, arguments);
};
}();
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
fetchReferences();
}
}, [isOpen, syncBlockIds, syncBlockStoreManager.sourceManager]);
return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
onClose: handleClick(false),
testId: "sync-block-delete-confirmation",
height: 184
}, /*#__PURE__*/React.createElement(React.Fragment, null, referenceCount === undefined ? /*#__PURE__*/React.createElement(Box, {
xcss: styles.spinner
}, /*#__PURE__*/React.createElement(Spinner, {
size: "large"
})) : /*#__PURE__*/React.createElement(ModalContent, {
content: fg('platform_synced_block_patch_8') ? modalContentMap[deleteReason] : modalContentMapOld[deleteReason],
referenceCount: referenceCount,
handleClick: handleClick,
formatMessage: formatMessage,
isDeleting: bodiedSyncBlockDeletionStatus === 'processing',
isDisabled: isOfflineMode(mode),
deleteReason: deleteReason,
sourceCount: (syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) || 0
}))));
};
var ModalContent = function ModalContent(_ref7) {
var content = _ref7.content,
referenceCount = _ref7.referenceCount,
handleClick = _ref7.handleClick,
formatMessage = _ref7.formatMessage,
isDeleting = _ref7.isDeleting,
isDisabled = _ref7.isDisabled,
deleteReason = _ref7.deleteReason,
sourceCount = _ref7.sourceCount;
var titleMultiple = content.titleMultiple,
titleSingle = content.titleSingle,
descriptionSingle = content.descriptionSingle,
descriptionMultiple = content.descriptionMultiple,
confirmButtonLabel = content.confirmButtonLabel;
var hasNoReferenceOrFailToFetch = referenceCount === 0;
var syncBlockCount = deleteReason === 'source-block-deleted' ? referenceCount + sourceCount : referenceCount;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalHeader, {
hasCloseButton: true
}, /*#__PURE__*/React.createElement(ModalTitle, {
appearance: "warning"
}, hasNoReferenceOrFailToFetch ? formatMessage(titleSingle) : formatMessage(titleMultiple, {
count: syncBlockCount
}))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, hasNoReferenceOrFailToFetch ? formatMessage(descriptionSingle) : formatMessage(descriptionMultiple, {
syncBlockCount: syncBlockCount
}))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
appearance: "subtle",
onClick: handleClick(false)
}, formatMessage(messages.deleteConfirmationModalCancelButton)), /*#__PURE__*/React.createElement(Button, {
appearance: "warning",
onClick: handleClick(true),
autoFocus: true,
isDisabled: isDisabled,
isLoading: isDeleting,
testId: "synced-block-delete-confirmation-modal-".concat(deleteReason, "-button")
}, formatMessage(confirmButtonLabel))));
};