@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
54 lines • 1.96 kB
JavaScript
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
import { messages } from '@atlaskit/media-ui';
import { MediaViewer } from '@atlaskit/media-viewer';
import { getSelectedMediaContainerNodeAttrs } from './utils';
export const FilePreviewItem = ({
mediaPluginState,
intl
}) => {
const [isMediaViewerVisible, setMediaViewerVisible] = useState(false);
const openMediaViewer = () => {
setMediaViewerVisible(true);
};
const onMediaViewerClose = () => {
setMediaViewerVisible(false);
};
const renderMediaViewer = () => {
if (isMediaViewerVisible) {
const selectedNodeAttrs = getSelectedMediaContainerNodeAttrs(mediaPluginState);
if (selectedNodeAttrs && mediaPluginState.mediaClientConfig) {
const {
id,
collection = ''
} = selectedNodeAttrs;
const identifier = {
id,
mediaItemType: 'file',
collectionName: collection
};
return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {
collectionName: collection,
items: [],
mediaClientConfig: mediaPluginState.mediaClientConfig,
selectedItem: identifier,
onClose: onMediaViewerClose
}), document.body);
}
}
return null;
};
const mediaViewer = renderMediaViewer();
const tooltipContent = intl.formatMessage(messages.preview);
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ToolbarButton, {
testId: "file-preview-toolbar-button",
key: "editor.media.card.preview",
onClick: openMediaViewer,
icon: /*#__PURE__*/React.createElement(FilePreviewIcon, {
label: "file preview"
}),
tooltipContent: tooltipContent
}), mediaViewer);
};