@atlaskit/editor-plugin-tasks-and-decisions
Version:
Tasks and decisions plugin for @atlaskit/editor-core
184 lines (183 loc) • 10.1 kB
JavaScript
/* RequestToEditPopup.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.RequestToEditPopup = void 0;
require("./RequestToEditPopup.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _reactIntl = require("react-intl");
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _uiReact = require("@atlaskit/editor-common/ui-react");
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
var _compiled = require("@atlaskit/primitives/compiled");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// import Popup from '@atlaskit/popup';
var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.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: _analytics.ACTION_SUBJECT.REQUEST_TO_EDIT_POP_UP,
eventType: _analytics.EVENT_TYPE.UI,
attributes: {
platform: _analytics.PLATFORMS.WEB,
mode: _analytics.MODE.EDITOR
}
};
};
var RequestedMessage = function RequestedMessage() {
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
return /*#__PURE__*/React.createElement(React.Fragment, null, formatMessage(_messages.tasksAndDecisionsMessages.requestToEdit), /*#__PURE__*/React.createElement(_checkMark.default, {
label: "requested-to-edit",
color: "var(--ds-icon-disabled, #080F214A)"
}));
};
var RequestToEditButton = function RequestToEditButton(_ref) {
var onClick = _ref.onClick;
var _useIntl2 = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl2.formatMessage;
return /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_compiled.Pressable, {
onClick: onClick,
xcss: pressableStyles.pressable,
testId: "request-to-edit-popup-request-btn"
}, formatMessage(_messages.tasksAndDecisionsMessages.requestToEdit)));
};
var RequestToEditPopup = exports.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 = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'taskDecision.hasRequestedEditPermission');
var openRequestToEditPopupAt = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'taskDecision.openRequestToEditPopupAt');
var _useState = (0, _react.useState)(!!openRequestToEditPopupAt),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var _useState3 = (0, _react.useState)(hasRequestedEditPermission),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
requested = _useState4[0],
setRequested = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
tryingRequest = _useState6[0],
setTryingRequest = _useState6[1];
var _useIntl3 = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl3.formatMessage;
(0, _react.useEffect)(function () {
setRequested(hasRequestedEditPermission);
}, [hasRequestedEditPermission]);
(0, _react.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(_analytics.ACTION.REQUEST_TO_EDIT))(tr);
editorView.dispatch(tr);
};
var onHandleDismiss = function onHandleDismiss(editorAnalyticsAPI) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.fireAnalyticsEvent(anaylyticsEventPayload(_analytics.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: _editorSharedStyles.akEditorFloatingDialogZIndex,
mountTo: mountTo,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
ariaLabel: null,
preventOverflow: true,
focusTrap: true,
captureClick: true
}, /*#__PURE__*/React.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
return /*#__PURE__*/React.createElement("div", {
ref: setOutsideClickTargetRef,
className: (0, _runtime.ax)(["_2rkofajl _ca0qv77o _n3tdv77o _19bvv77o _u5f3v77o _16qs130s _bfhk1bhr"])
}, /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _p12f1qwj _ca0qpxbi _u5f31ejb _n3tdpxbi _19bv1ejb"])
}, /*#__PURE__*/React.createElement(_compiled.Stack, {
space: "space.150"
}, /*#__PURE__*/React.createElement(_heading.default, {
size: "xsmall"
}, formatMessage(_messages.tasksAndDecisionsMessages.editAccessTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(_messages.tasksAndDecisionsMessages.requestToEditDescription)), /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_zulp1b66 _1e0c1txw _4cvr1h6o _syaz1gmx"])
}, tryingRequest || requested ? /*#__PURE__*/React.createElement(RequestedMessage, null) : /*#__PURE__*/React.createElement(RequestToEditButton, {
onClick: onHandleEdit
}), /*#__PURE__*/React.createElement("div", {
className: (0, _runtime.ax)(["_19pku2gc _otyru2gc _18u0u2gc _2hwxu2gc _1e0c1o8l _1bsbyh40 _4t3iyh40 _bfhk16e3", "_2rko1rr0"])
}), /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_compiled.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(_messages.tasksAndDecisionsMessages.dismiss)))))));
}));
};