@atlaskit/renderer
Version:
Renderer component
213 lines (211 loc) • 9.38 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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) { _defineProperty(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; }
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
import { useProvider } from '@atlaskit/editor-common/provider-factory';
import { MediaInlineCard } from '@atlaskit/media-card';
import { MediaClientContext, getMediaClient } from '@atlaskit/media-client-react';
import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
import React, { useCallback, useEffect, useState, useContext } from 'react';
import { injectIntl } from 'react-intl';
import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
import { ErrorBoundary } from '../../ui/Renderer/ErrorBoundary';
import { ACTION_SUBJECT } from '../../analytics/enums';
import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
var RenderMediaInline = function RenderMediaInline(_ref) {
var _rendererAppearance = _ref.rendererAppearance,
clipboardAttrs = _ref.clipboardAttrs,
collectionName = _ref.collection,
eventHandlers = _ref.eventHandlers,
identifier = _ref.identifier,
fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher;
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
contextIdentifier = _useState2[0],
setContextIdentifier = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
fileState = _useState4[0],
setFileState = _useState4[1];
var mediaClient = useContext(MediaClientContext);
var contextIdentifierProvider = useProvider('contextIdentifierProvider');
useEffect(function () {
if (contextIdentifierProvider) {
contextIdentifierProvider.then(function (resolvedContextID) {
if (contextIdentifier !== resolvedContextID) {
setContextIdentifier(resolvedContextID);
}
});
}
}, [contextIdentifier, contextIdentifierProvider]);
var updateFileState = useCallback( /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
var options, _fileState, _t;
return _regeneratorRuntime.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
options = {
collectionName: collectionName
};
_context.prev = 1;
if (!mediaClient) {
_context.next = 3;
break;
}
_context.next = 2;
return mediaClient.file.getCurrentState(id, options);
case 2:
_fileState = _context.sent;
setFileState(_fileState);
case 3:
_context.next = 5;
break;
case 4:
_context.prev = 4;
_t = _context["catch"](1);
case 5:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 4]]);
}));
return function (_x) {
return _ref2.apply(this, arguments);
};
}(), [collectionName, mediaClient]);
useEffect(function () {
var id = identifier.id;
var nodeIsInCache = id && mediaIdentifierMap.has(id);
if (!nodeIsInCache) {
mediaIdentifierMap.set(identifier.id, _objectSpread(_objectSpread({}, identifier), {}, {
collectionName: collectionName
}));
}
return function () {
mediaIdentifierMap.delete(id);
};
}, [identifier, collectionName]);
useEffect(function () {
var id = clipboardAttrs.id;
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
id && updateFileState(id);
}, [contextIdentifier, clipboardAttrs, updateFileState]);
/*
* Only show the loading view if the media client is not ready
* prevents calling the media API before the provider is ready
*/
if (!mediaClient) {
return /*#__PURE__*/React.createElement(MediaInlineCardLoadingView, {
message: "",
isSelected: false
});
}
var handleMediaInlineClick = function handleMediaInlineClick(result) {
var _eventHandlers$media;
if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
var _eventHandlers$media2;
eventHandlers === null || eventHandlers === void 0 || (_eventHandlers$media2 = eventHandlers.media) === null || _eventHandlers$media2 === void 0 || _eventHandlers$media2.onClick(result);
}
};
var shouldOpenMediaViewer = true;
var shouldDisplayToolTip = true;
var id = clipboardAttrs.id,
collection = clipboardAttrs.collection;
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
React.createElement("span", _extends({}, getClipboardAttrs({
id: id,
collection: collection,
contextIdentifierProvider: contextIdentifier,
fileState: fileState
}), {
"data-node-type": "mediaInline"
}), /*#__PURE__*/React.createElement(MediaInlineCard, {
identifier: identifier,
onClick: handleMediaInlineClick,
shouldOpenMediaViewer: shouldOpenMediaViewer,
shouldDisplayToolTip: shouldDisplayToolTip,
mediaClientConfig: mediaClient.mediaClientConfig,
mediaViewerItems: Array.from(mediaIdentifierMap.values()),
fallbackMediaNameFetcher: fallbackMediaNameFetcher
}))
);
};
var MediaInline = function MediaInline(props) {
var collection = props.collection,
id = props.id,
intl = props.intl,
rendererAppearance = props.rendererAppearance,
featureFlags = props.featureFlags,
fileType = props.type,
alt = props.alt,
width = props.width,
height = props.height,
marks = props.marks,
ssr = props.ssr,
fallbackMediaNameFetcher = props.fallbackMediaNameFetcher;
var clipboardAttrs = {
id: id,
collection: collection
};
var identifier = {
id: id,
mediaItemType: 'file',
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
collectionName: collection
};
var mediaClient = useContext(MediaClientContext);
var _useAnalyticsEvents = useAnalyticsEvents(),
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
if (fileType === 'image') {
var _borderMark$attrs$col, _borderMark$attrs$siz;
var hasLinkMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
return mark.type.name === 'link';
});
var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
});
var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
return /*#__PURE__*/React.createElement(ErrorBoundary, {
component: ACTION_SUBJECT.RENDERER,
componentId: ACTION_SUBJECT_ID.MEDIA_INLINE_IMAGE,
createAnalyticsEvent: createAnalyticsEvent
}, /*#__PURE__*/React.createElement(MediaInlineImageCard, {
mediaClient: ssr !== null && ssr !== void 0 && ssr.config ? getMediaClient(ssr.config) : mediaClient,
identifier: identifier,
alt: alt,
width: width,
height: height,
ssr: ssr
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
border: {
borderSize: borderSize,
borderColor: borderColor
},
serializeDataAttrs: true,
shouldOpenMediaViewer: !hasLinkMark
}));
}
return /*#__PURE__*/React.createElement(RenderMediaInline, {
identifier: identifier,
clipboardAttrs: clipboardAttrs,
eventHandlers: props.eventHandlers,
rendererAppearance: rendererAppearance,
intl: intl,
collection: collection,
featureFlags: featureFlags,
fallbackMediaNameFetcher: fallbackMediaNameFetcher
});
};
// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = injectIntl(MediaInline);
export default _default_1;