@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
77 lines (76 loc) • 2.75 kB
JavaScript
import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
import { Dropzone } from '@atlaskit/media-picker';
import PickerFacadeProvider from './PickerFacadeProvider';
const selector = states => {
var _states$mediaState, _states$mediaState2;
return {
options: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.options,
handleDrag: (_states$mediaState2 = states.mediaState) === null || _states$mediaState2 === void 0 ? void 0 : _states$mediaState2.handleDrag
};
};
const DropzoneWrapperInternal = ({
api,
isActive,
featureFlags,
editorDomElement,
appearance,
mediaClientConfig,
config,
pickerFacadeInstance
}) => {
const {
options,
handleDrag
} = useSharedPluginStateWithSelector(api, ['media'], selector);
const {
customDropzoneContainer
} = options || {};
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
const editorHtmlElement = editorDomElement;
const scrollParent = appearance === 'full-page' && findOverflowScrollParent(editorHtmlElement);
const container = customDropzoneContainer || (scrollParent ? scrollParent : editorHtmlElement);
const dropzoneConfig = {
...config,
container
};
return isActive ? /*#__PURE__*/React.createElement(Dropzone, {
mediaClientConfig: mediaClientConfig,
config: dropzoneConfig,
onError: pickerFacadeInstance.handleUploadError,
onPreviewUpdate: pickerFacadeInstance.handleUploadPreviewUpdate,
onEnd: pickerFacadeInstance.handleReady
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onDragEnter: () => handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('enter')
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onDragLeave: () => handleDrag === null || handleDrag === void 0 ? void 0 : handleDrag('leave'),
featureFlags: featureFlags
}) : null;
};
export const DropzoneWrapper = ({
api,
isActive,
featureFlags,
editorDomElement,
appearance
}) => /*#__PURE__*/React.createElement(PickerFacadeProvider, {
api: api,
analyticsName: "dropzone"
}, ({
mediaClientConfig,
config,
pickerFacadeInstance
}) => /*#__PURE__*/React.createElement(DropzoneWrapperInternal, {
api: api,
isActive: isActive,
featureFlags: featureFlags,
editorDomElement: editorDomElement,
appearance: appearance,
mediaClientConfig: mediaClientConfig,
config: config,
pickerFacadeInstance: pickerFacadeInstance
}));