@atlaskit/editor-plugin-tasks-and-decisions
Version:
Tasks and decisions plugin for @atlaskit/editor-core
168 lines • 8 kB
JavaScript
/* RequestToEditPopup.tsx generated by @compiled/babel-plugin v0.39.1 */
// import Popup from '@atlaskit/popup';
import "./RequestToEditPopup.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
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';
const PopupWithListeners = withOuterListeners(Popup);
const TRYING_REQUEST_TIMEOUT = 3000;
const popupContentWrapper = null;
const wrapperStyles = null;
const wrapperBoxStyles = null;
const dotStyles = null;
const dotStylesUnbounded = null;
const pressableStyles = {
pressable: "_ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t _1wybdlk8 _syaz1oa5 _bfhksm61 _9oik1r31 _1bnx8stv _jf4cnqa1 _9h8h12zz"
};
const anaylyticsEventPayload = action => {
return {
action,
actionSubject: ACTION_SUBJECT.REQUEST_TO_EDIT_POP_UP,
eventType: EVENT_TYPE.UI,
attributes: {
platform: PLATFORMS.WEB,
mode: MODE.EDITOR
}
};
};
const RequestedMessage = () => {
const {
formatMessage
} = useIntl();
return /*#__PURE__*/React.createElement(React.Fragment, null, formatMessage(tasksAndDecisionsMessages.requestToEdit), /*#__PURE__*/React.createElement(EditorDoneIcon, {
label: "requested-to-edit",
color: "var(--ds-icon-disabled, #080F214A)"
}));
};
const RequestToEditButton = ({
onClick
}) => {
const {
formatMessage
} = useIntl();
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 const RequestToEditPopup = ({
element,
api,
editorView,
onClose,
mountTo,
boundariesElement,
scrollableElement
}) => {
const hasRequestedEditPermission = useSharedPluginStateSelector(api, 'taskDecision.hasRequestedEditPermission');
const openRequestToEditPopupAt = useSharedPluginStateSelector(api, 'taskDecision.openRequestToEditPopupAt');
const [isOpen, setIsOpen] = useState(!!openRequestToEditPopupAt);
const [requested, setRequested] = useState(hasRequestedEditPermission);
const [tryingRequest, setTryingRequest] = useState(false);
const {
formatMessage
} = useIntl();
useEffect(() => {
setRequested(hasRequestedEditPermission);
}, [hasRequestedEditPermission]);
useEffect(() => {
if (!tryingRequest) {
const timout = setTimeout(() => {
setTryingRequest(false);
}, TRYING_REQUEST_TIMEOUT);
return () => clearTimeout(timout);
}
}, [tryingRequest]);
const onHandleEdit = event => {
var _api$editorViewMode, _api$editorViewMode$s, _api$analytics, _api$taskDecision, _api$taskDecision$sha;
event.stopPropagation();
const viewMode = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode;
if (viewMode !== 'view') {
return;
}
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
setTryingRequest(true);
const {
tr
} = editorView.state;
tr.setMeta('scrollIntoView', false);
if (!(api !== null && api !== void 0 && (_api$taskDecision = api.taskDecision) !== null && _api$taskDecision !== void 0 && (_api$taskDecision$sha = _api$taskDecision.sharedState.currentState()) !== null && _api$taskDecision$sha !== void 0 && _api$taskDecision$sha.hasEditPermission)) {
var _api$taskDecision2, _api$taskDecision2$sh;
const requestToEdit = api === null || api === void 0 ? void 0 : (_api$taskDecision2 = api.taskDecision) === null || _api$taskDecision2 === void 0 ? void 0 : (_api$taskDecision2$sh = _api$taskDecision2.sharedState.currentState()) === null || _api$taskDecision2$sh === void 0 ? void 0 : _api$taskDecision2$sh.requestToEditContent;
if (requestToEdit) {
requestToEdit();
}
}
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(anaylyticsEventPayload(ACTION.REQUEST_TO_EDIT))(tr);
editorView.dispatch(tr);
};
const onHandleDismiss = editorAnalyticsAPI => {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent(anaylyticsEventPayload(ACTION.DISMISSED));
setIsOpen(false);
onClose();
};
const onHandleCancel = event => {
// Check if the click is on task item checkbox, if so, do not close the popup
const 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, setOutsideClickTargetRef => /*#__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: () => {
var _api$analytics2;
return onHandleDismiss(api === null || api === void 0 ? 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)))))))));
};