@atlaskit/renderer
Version:
Renderer component
187 lines (185 loc) • 6.91 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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';
const RenderMediaInline = ({
rendererAppearance: _rendererAppearance,
clipboardAttrs,
collection: collectionName,
eventHandlers,
identifier,
fallbackMediaNameFetcher
}) => {
const [contextIdentifier, setContextIdentifier] = useState();
const [fileState, setFileState] = useState();
const mediaClient = useContext(MediaClientContext);
const contextIdentifierProvider = useProvider('contextIdentifierProvider');
useEffect(() => {
if (contextIdentifierProvider) {
contextIdentifierProvider.then(resolvedContextID => {
if (contextIdentifier !== resolvedContextID) {
setContextIdentifier(resolvedContextID);
}
});
}
}, [contextIdentifier, contextIdentifierProvider]);
const updateFileState = useCallback(async id => {
const options = {
collectionName
};
try {
if (mediaClient) {
const fileState = await mediaClient.file.getCurrentState(id, options);
setFileState(fileState);
}
} catch (error) {
// eslint-disable-line no-unused-vars
// do not set state on error
}
}, [collectionName, mediaClient]);
useEffect(() => {
const {
id
} = identifier;
const nodeIsInCache = id && mediaIdentifierMap.has(id);
if (!nodeIsInCache) {
mediaIdentifierMap.set(identifier.id, {
...identifier,
collectionName
});
}
return () => {
mediaIdentifierMap.delete(id);
};
}, [identifier, collectionName]);
useEffect(() => {
const {
id
} = clipboardAttrs;
// 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
});
}
const 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 ? void 0 : (_eventHandlers$media2 = eventHandlers.media) === null || _eventHandlers$media2 === void 0 ? void 0 : _eventHandlers$media2.onClick(result);
}
};
const shouldOpenMediaViewer = true;
const shouldDisplayToolTip = true;
const {
id,
collection
} = clipboardAttrs;
return (
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/design-system/prefer-primitives
React.createElement("span", _extends({}, getClipboardAttrs({
id,
collection,
contextIdentifierProvider: contextIdentifier,
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
}))
);
};
const MediaInline = props => {
const {
collection,
id,
intl,
rendererAppearance,
featureFlags,
type: fileType,
alt,
width,
height,
marks,
ssr,
fallbackMediaNameFetcher
} = props;
const clipboardAttrs = {
id,
collection
};
const identifier = {
id,
mediaItemType: 'file',
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
collectionName: collection
};
const mediaClient = useContext(MediaClientContext);
const {
createAnalyticsEvent
} = useAnalyticsEvents();
if (fileType === 'image') {
var _borderMark$attrs$col, _borderMark$attrs$siz;
const hasLinkMark = marks === null || marks === void 0 ? void 0 : marks.find(mark => mark.type.name === 'link');
const borderMark = marks === null || marks === void 0 ? void 0 : marks.find(mark => (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border');
const borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
const 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,
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
const _default_1 = injectIntl(MediaInline);
export default _default_1;