@atlaskit/renderer
Version:
Renderer component
211 lines (210 loc) • 10.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useHasFocusEvent = exports.useAnnotationStateByTypeEvent = exports.useAnnotationClickEvent = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _types = require("@atlaskit/editor-common/types");
var _adfSchema = require("@atlaskit/adf-schema");
var _analytics = require("@atlaskit/editor-common/analytics");
var _types2 = require("@atlaskit/analytics-listeners/types");
var _AnnotationManagerContext = require("../contexts/AnnotationManagerContext");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var useAnnotationStateByTypeEvent = exports.useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEvent(_ref) {
var type = _ref.type,
updateSubscriber = _ref.updateSubscriber;
var _useState = (0, _react.useState)({}),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
states = _useState2[0],
setStates = _useState2[1];
var _useAnnotationManager = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
annotationManager = _useAnnotationManager.annotationManager,
dispatch = _useAnnotationManager.dispatch;
var _useAnnotationManager2 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
annotations = _useAnnotationManager2.annotations;
var isAnnotationManagerEnabled = !!annotationManager;
(0, _react.useLayoutEffect)(function () {
if (!updateSubscriber) {
return;
}
var cb = function cb(payload) {
if (!payload) {
return;
}
var nextStates = Object.values(payload).reduce(function (acc, curr) {
if (curr.id && curr.annotationType === type) {
// Check for empty state to prevent additional renders
var isEmpty = curr.state === null || curr.state === undefined;
return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, curr.id, !isEmpty ? curr.state : states[curr.id]));
}
return acc;
}, {});
setStates(_objectSpread(_objectSpread({}, states), nextStates));
};
if (!isAnnotationManagerEnabled) {
updateSubscriber.on(_types.AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
return function () {
updateSubscriber.off(_types.AnnotationUpdateEvent.SET_ANNOTATION_STATE, cb);
};
}
}, [states, type, updateSubscriber, dispatch, isAnnotationManagerEnabled]);
var annotationMarkStates = (0, _react.useMemo)(function () {
return Object.values(annotations).reduce(function (acc, curr) {
return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, curr.id, curr.markState));
}, {});
}, [annotations]);
if (isAnnotationManagerEnabled) {
return annotationMarkStates;
} else {
return states;
}
};
var useHasFocusEvent = exports.useHasFocusEvent = function useHasFocusEvent(_ref2) {
var id = _ref2.id,
updateSubscriber = _ref2.updateSubscriber;
var _useState3 = (0, _react.useState)(false),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
hasFocus = _useState4[0],
setHasFocus = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
isHovered = _useState6[0],
setIsHovered = _useState6[1];
var _useAnnotationManager3 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
currentSelectedAnnotationId = _useAnnotationManager3.currentSelectedAnnotationId,
currentHoveredAnnotationId = _useAnnotationManager3.currentHoveredAnnotationId;
var _useAnnotationManager4 = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
annotationManager = _useAnnotationManager4.annotationManager;
var isAnnotationManagerEnabled = !!annotationManager;
(0, _react.useLayoutEffect)(function () {
if (!updateSubscriber) {
return;
}
var cb = function cb(payload) {
setHasFocus(payload && payload.annotationId === id);
};
var callbackForHoveredAnnotation = function callbackForHoveredAnnotation(payload) {
setIsHovered(payload && payload.annotationId === id);
};
var removeFocus = function removeFocus() {
setHasFocus(false);
};
var removeHoverEffect = function removeHoverEffect() {
setIsHovered(false);
};
if (!isAnnotationManagerEnabled) {
updateSubscriber.on(_types.AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
updateSubscriber.on(_types.AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, callbackForHoveredAnnotation);
updateSubscriber.on(_types.AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
updateSubscriber.on(_types.AnnotationUpdateEvent.REMOVE_ANNOTATION_HOVERED, removeHoverEffect);
return function () {
updateSubscriber.off(_types.AnnotationUpdateEvent.SET_ANNOTATION_FOCUS, cb);
updateSubscriber.off(_types.AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, callbackForHoveredAnnotation);
updateSubscriber.off(_types.AnnotationUpdateEvent.REMOVE_ANNOTATION_FOCUS, removeFocus);
updateSubscriber.off(_types.AnnotationUpdateEvent.SET_ANNOTATION_HOVERED, removeHoverEffect);
};
}
}, [id, updateSubscriber, isAnnotationManagerEnabled]);
if (isAnnotationManagerEnabled) {
return {
hasFocus: currentSelectedAnnotationId === id,
isHovered: currentHoveredAnnotationId === id
};
} else {
return {
hasFocus: hasFocus,
isHovered: isHovered
};
}
};
var NO_ANNOTATION_SELECTED = {
annotations: [],
clickElementTarget: undefined
};
var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnnotationClickEvent(props) {
var _useState7 = (0, _react.useState)(null),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
annotationClickEvent = _useState8[0],
setAnnotationClickEvent = _useState8[1];
var updateSubscriber = props.updateSubscriber,
createAnalyticsEvent = props.createAnalyticsEvent,
isNestedRender = props.isNestedRender;
var _useAnnotationManager5 = (0, _AnnotationManagerContext.useAnnotationManagerDispatch)(),
annotationManager = _useAnnotationManager5.annotationManager;
var isAnnotationManagerEnabled = !!annotationManager;
var _useAnnotationManager6 = (0, _AnnotationManagerContext.useAnnotationManagerState)(),
currentSelectedAnnotationId = _useAnnotationManager6.currentSelectedAnnotationId,
currentSelectedMarkRef = _useAnnotationManager6.currentSelectedMarkRef;
var selectedAnnotation = (0, _react.useMemo)(function () {
return currentSelectedAnnotationId && currentSelectedMarkRef && currentSelectedMarkRef.id === currentSelectedAnnotationId ? {
annotations: [{
id: currentSelectedAnnotationId,
type: _adfSchema.AnnotationTypes.INLINE_COMMENT
}],
clickElementTarget: currentSelectedMarkRef
} :
// This is a constant to represent the case when no annotation is selected.
// When creating a new annotation, currentSelectedAnnotationId and currentSelectedMarkRef will be set one after another,
// if this isn't a const, it will cause useMemo to return two different "empty" objects and causes infinite re-renders.
NO_ANNOTATION_SELECTED;
}, [currentSelectedAnnotationId, currentSelectedMarkRef]);
(0, _react.useLayoutEffect)(function () {
if (!updateSubscriber || isNestedRender) {
return;
}
var clickCb = function clickCb(_ref3) {
var annotationIds = _ref3.annotationIds,
eventTarget = _ref3.eventTarget,
eventTargetType = _ref3.eventTargetType,
viewMethod = _ref3.viewMethod;
var annotationsByType = annotationIds.filter(function (id) {
return !!id;
}).map(function (id) {
return {
id: id,
type: _adfSchema.AnnotationTypes.INLINE_COMMENT
};
});
if (createAnalyticsEvent) {
createAnalyticsEvent({
action: _analytics.ACTION.VIEWED,
actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
eventType: _analytics.EVENT_TYPE.TRACK,
attributes: {
overlap: annotationsByType.length || 0,
targetNodeType: eventTargetType,
method: viewMethod
}
}).fire(_types2.FabricChannel.editor);
}
setAnnotationClickEvent({
annotations: annotationsByType,
clickElementTarget: eventTarget
});
};
var deselectCb = function deselectCb() {
setAnnotationClickEvent({
annotations: [],
clickElementTarget: undefined
});
};
if (!isAnnotationManagerEnabled) {
updateSubscriber.on(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
updateSubscriber.on(_types.AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
return function () {
updateSubscriber.off(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
updateSubscriber.off(_types.AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
};
}
}, [updateSubscriber, createAnalyticsEvent, isNestedRender, isAnnotationManagerEnabled]);
if (isAnnotationManagerEnabled) {
return isNestedRender ? null : selectedAnnotation;
} else {
return annotationClickEvent;
}
};