@atlaskit/editor-plugin-tasks-and-decisions
Version:
Tasks and decisions plugin for @atlaskit/editor-core
175 lines • 8.7 kB
JavaScript
/* RequestToEditPopup.tsx generated by @compiled/babel-plugin v0.39.1 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./RequestToEditPopup.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
// import Popup from '@atlaskit/popup';
import { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, MODE, PLATFORMS } from '@atlaskit/editor-common/analytics';
import { tasksAndDecisionsMessages } from '@atlaskit/editor-common/messages';
import { Popup } from '@atlaskit/editor-common/ui';
import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
import Heading from '@atlaskit/heading';
import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
import { Box, Pressable, Stack } from '@atlaskit/primitives/compiled';
var PopupWithListeners = withOuterListeners(Popup);
var TRYING_REQUEST_TIMEOUT = 3000;
var popupContentWrapper = null;
var wrapperStyles = null;
var wrapperBoxStyles = null;
var dotStyles = null;
var dotStylesUnbounded = null;
var pressableStyles = {
pressable: "_ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t _1wybdlk8 _syaz1oa5 _bfhksm61 _9oik1r31 _1bnx8stv _jf4cnqa1 _9h8h12zz"
};
var anaylyticsEventPayload = function anaylyticsEventPayload(action) {
return {
action: action,
actionSubject: ACTION_SUBJECT.REQUEST_TO_EDIT_POP_UP,
eventType: EVENT_TYPE.UI,
attributes: {
platform: PLATFORMS.WEB,
mode: MODE.EDITOR
}
};
};
var RequestedMessage = function RequestedMessage() {
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
return /*#__PURE__*/React.createElement(React.Fragment, null, formatMessage(tasksAndDecisionsMessages.requestToEdit), /*#__PURE__*/React.createElement(EditorDoneIcon, {
label: "requested-to-edit",
color: "var(--ds-icon-disabled, #080F214A)"
}));
};
var RequestToEditButton = function RequestToEditButton(_ref) {
var onClick = _ref.onClick;
var _useIntl2 = useIntl(),
formatMessage = _useIntl2.formatMessage;
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable, {
onClick: onClick,
xcss: pressableStyles.pressable,
testId: "request-to-edit-popup-request-btn"
}, formatMessage(tasksAndDecisionsMessages.requestToEdit)));
};
export var RequestToEditPopup = function RequestToEditPopup(_ref2) {
var element = _ref2.element,
api = _ref2.api,
editorView = _ref2.editorView,
onClose = _ref2.onClose,
mountTo = _ref2.mountTo,
boundariesElement = _ref2.boundariesElement,
scrollableElement = _ref2.scrollableElement;
var hasRequestedEditPermission = useSharedPluginStateSelector(api, 'taskDecision.hasRequestedEditPermission');
var openRequestToEditPopupAt = useSharedPluginStateSelector(api, 'taskDecision.openRequestToEditPopupAt');
var _useState = useState(!!openRequestToEditPopupAt),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var _useState3 = useState(hasRequestedEditPermission),
_useState4 = _slicedToArray(_useState3, 2),
requested = _useState4[0],
setRequested = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
tryingRequest = _useState6[0],
setTryingRequest = _useState6[1];
var _useIntl3 = useIntl(),
formatMessage = _useIntl3.formatMessage;
useEffect(function () {
setRequested(hasRequestedEditPermission);
}, [hasRequestedEditPermission]);
useEffect(function () {
if (!tryingRequest) {
var timout = setTimeout(function () {
setTryingRequest(false);
}, TRYING_REQUEST_TIMEOUT);
return function () {
return clearTimeout(timout);
};
}
}, [tryingRequest]);
var onHandleEdit = function onHandleEdit(event) {
var _api$editorViewMode, _api$analytics, _api$taskDecision;
event.stopPropagation();
var viewMode = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode;
if (viewMode !== 'view') {
return;
}
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
setTryingRequest(true);
var tr = editorView.state.tr;
tr.setMeta('scrollIntoView', false);
if (!(api !== null && api !== void 0 && (_api$taskDecision = api.taskDecision) !== null && _api$taskDecision !== void 0 && (_api$taskDecision = _api$taskDecision.sharedState.currentState()) !== null && _api$taskDecision !== void 0 && _api$taskDecision.hasEditPermission)) {
var _api$taskDecision2;
var requestToEdit = api === null || api === void 0 || (_api$taskDecision2 = api.taskDecision) === null || _api$taskDecision2 === void 0 || (_api$taskDecision2 = _api$taskDecision2.sharedState.currentState()) === null || _api$taskDecision2 === void 0 ? void 0 : _api$taskDecision2.requestToEditContent;
if (requestToEdit) {
requestToEdit();
}
}
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(anaylyticsEventPayload(ACTION.REQUEST_TO_EDIT))(tr);
editorView.dispatch(tr);
};
var onHandleDismiss = function onHandleDismiss(editorAnalyticsAPI) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.fireAnalyticsEvent(anaylyticsEventPayload(ACTION.DISMISSED));
setIsOpen(false);
onClose();
};
var onHandleCancel = function onHandleCancel(event) {
// Check if the click is on task item checkbox, if so, do not close the popup
var target = event.target;
if (target && (element.contains(target) || element === target)) {
return;
}
setIsOpen(false);
onClose();
};
if (!isOpen) {
return null;
}
return /*#__PURE__*/React.createElement(PopupWithListeners
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
, {
target: element,
fitHeight: 148,
handleClickOutside: onHandleCancel,
handleEscapeKeydown: onHandleCancel,
zIndex: akEditorFloatingDialogZIndex,
mountTo: mountTo,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
ariaLabel: null,
preventOverflow: true,
focusTrap: true,
captureClick: true
}, /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
return /*#__PURE__*/React.createElement("div", {
ref: setOutsideClickTargetRef,
className: ax(["_2rkofajl _ca0qv77o _n3tdv77o _19bvv77o _u5f3v77o _16qs130s _bfhk1bhr"])
}, /*#__PURE__*/React.createElement("div", {
className: ax(["_1e0c1txw _2lx21bp4 _p12f1qwj _ca0qpxbi _u5f31ejb _n3tdpxbi _19bv1ejb"])
}, /*#__PURE__*/React.createElement(Stack, {
space: "space.150"
}, /*#__PURE__*/React.createElement(Heading, {
size: "xsmall"
}, formatMessage(tasksAndDecisionsMessages.editAccessTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(tasksAndDecisionsMessages.requestToEditDescription)), /*#__PURE__*/React.createElement("div", {
className: ax(["_zulp1b66 _1e0c1txw _4cvr1h6o _syaz1gmx"])
}, tryingRequest || requested ? /*#__PURE__*/React.createElement(RequestedMessage, null) : /*#__PURE__*/React.createElement(RequestToEditButton, {
onClick: onHandleEdit
}), /*#__PURE__*/React.createElement("div", {
className: ax(["_19pku2gc _otyru2gc _18u0u2gc _2hwxu2gc _1e0c1o8l _1bsbyh40 _4t3iyh40 _bfhk16e3", "_2rko1rr0"])
}), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Pressable
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
, {
onClick: function onClick() {
var _api$analytics2;
return onHandleDismiss(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
},
xcss: pressableStyles.pressable,
testId: "request-to-edit-popup-cancel-btn"
}, formatMessage(tasksAndDecisionsMessages.dismiss)))))));
}));
};