@atlaskit/renderer
Version:
Renderer component
151 lines • 6.07 kB
JavaScript
import React, { useCallback, useContext } from 'react';
import { AnnotationTypes } from '@atlaskit/adf-schema';
import { updateWindowSelectionAroundDraft } from '../draft/dom';
import { FabricChannel } from '@atlaskit/analytics-listeners/types';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
import { RendererContext as ActionsContext } from '../../RendererActionsContext';
import { useAnnotationRangeDispatch, useAnnotationRangeState } from '../contexts/AnnotationRangeContext';
export var Mounter = /*#__PURE__*/React.memo(function (props) {
var Component = props.component,
range = props.range,
isWithinRange = props.isWithinRange,
isAnnotationAllowed = props.isAnnotationAllowed,
wrapperDOM = props.wrapperDOM,
onCloseProps = props.onClose,
documentPosition = props.documentPosition,
applyAnnotation = props.applyAnnotation,
createAnalyticsEvent = props.createAnalyticsEvent,
generateIndexMatch = props.generateIndexMatch;
var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
promoteHoverToDraft = _useAnnotationRangeDi.promoteHoverToDraft,
clearHoverDraft = _useAnnotationRangeDi.clearHoverDraft;
var _useAnnotationRangeSt = useAnnotationRangeState(),
hoverDraftDocumentPosition = _useAnnotationRangeSt.hoverDraftDocumentPosition;
var actions = useContext(ActionsContext);
var onCreateCallback = useCallback(function (annotationId) {
var positionToAnnotate = hoverDraftDocumentPosition || documentPosition;
if (!isAnnotationAllowed || !positionToAnnotate || !applyAnnotation) {
return false;
}
var annotation = {
annotationId: annotationId,
annotationType: AnnotationTypes.INLINE_COMMENT
};
if (createAnalyticsEvent) {
createAnalyticsEvent({
action: ACTION.INSERTED,
actionSubject: ACTION_SUBJECT.ANNOTATION,
actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
attributes: {},
eventType: EVENT_TYPE.TRACK
}).fire(FabricChannel.editor);
}
return applyAnnotation(positionToAnnotate, annotation);
}, [isAnnotationAllowed, documentPosition, applyAnnotation, createAnalyticsEvent, hoverDraftDocumentPosition]);
var createIndexCallback = useCallback(function () {
if (!documentPosition || !generateIndexMatch) {
return false;
}
var result = generateIndexMatch(documentPosition);
if (!result) {
return false;
}
return result;
}, [documentPosition, generateIndexMatch]);
var applyDraftModeCallback = useCallback(function (options) {
if (!documentPosition || !isAnnotationAllowed) {
if (createAnalyticsEvent) {
createAnalyticsEvent({
action: ACTION.CREATE_NOT_ALLOWED,
actionSubject: ACTION_SUBJECT.ANNOTATION,
actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
attributes: {
documentPosition: documentPosition,
isAnnotationAllowed: isAnnotationAllowed
},
eventType: EVENT_TYPE.TRACK
}).fire(FabricChannel.editor);
}
return false;
}
promoteHoverToDraft(documentPosition);
if (createAnalyticsEvent) {
var uniqueAnnotationsInRange = actions.getAnnotationsByPosition(range);
createAnalyticsEvent({
action: ACTION.OPENED,
actionSubject: ACTION_SUBJECT.ANNOTATION,
actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
eventType: EVENT_TYPE.TRACK,
attributes: {
overlap: uniqueAnnotationsInRange.length
}
}).fire(FabricChannel.editor);
}
window.requestAnimationFrame(function () {
if (options.keepNativeSelection) {
updateWindowSelectionAroundDraft(documentPosition);
} else {
var sel = window.getSelection();
if (sel) {
sel.removeAllRanges();
}
}
});
var positionToAnnotate = hoverDraftDocumentPosition || documentPosition;
if (!positionToAnnotate || !applyAnnotation || !options.annotationId) {
if (createAnalyticsEvent) {
createAnalyticsEvent({
action: ACTION.CREATE_NOT_ALLOWED,
actionSubject: ACTION_SUBJECT.ANNOTATION,
actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
attributes: {
positionToAnnotate: positionToAnnotate,
applyAnnotationMissing: !applyAnnotation,
annotationId: options.annotationId
},
eventType: EVENT_TYPE.TRACK
}).fire(FabricChannel.editor);
}
return false;
}
var annotation = {
annotationId: options.annotationId,
annotationType: AnnotationTypes.INLINE_COMMENT
};
return applyAnnotation(positionToAnnotate, annotation);
}, [documentPosition, isAnnotationAllowed, createAnalyticsEvent, applyAnnotation, actions, range, promoteHoverToDraft, hoverDraftDocumentPosition]);
var removeDraftModeCallback = useCallback(function () {
clearHoverDraft();
var sel = window.getSelection();
if (sel) {
sel.removeAllRanges();
}
}, [clearHoverDraft]);
var onCloseCallback = useCallback(function () {
if (createAnalyticsEvent) {
createAnalyticsEvent({
action: ACTION.CLOSED,
actionSubject: ACTION_SUBJECT.ANNOTATION,
actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
eventType: EVENT_TYPE.TRACK,
attributes: {}
}).fire(FabricChannel.editor);
}
removeDraftModeCallback();
onCloseProps();
}, [onCloseProps, removeDraftModeCallback, createAnalyticsEvent]);
return /*#__PURE__*/React.createElement(Component, {
range: range,
isWithinRange: isWithinRange
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
,
wrapperDOM: wrapperDOM.current,
isAnnotationAllowed: isAnnotationAllowed,
onClose: onCloseCallback,
onCreate: onCreateCallback,
getAnnotationIndexMatch: createIndexCallback,
applyDraftMode: applyDraftModeCallback,
removeDraftMode: removeDraftModeCallback
});
});