@atlaskit/editor-plugin-media/dist/es2019/ui/MediaPicker/index.js

Media plugin for @atlaskit/editor-core

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { BrowserWrapper } from './BrowserWrapper';
import { ClipboardWrapper } from './ClipboardWrapper';
import { DropzoneWrapper } from './DropzoneWrapper';
const selector = states => {
  var _states$focusState, _states$connectivityS, _states$mediaState;
  return {
    hasFocus: (_states$focusState = states.focusState) === null || _states$focusState === void 0 ? void 0 : _states$focusState.hasFocus,
    connectivityMode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
    mediaOptions: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.mediaOptions
  };
};
const MediaPicker = ({
  api,
  isPopupOpened,
  appearance,
  onBrowseFn,
  editorDomElement
}) => {
  var _editorDom$parentElem;
  const {
    hasFocus,
    connectivityMode,
    mediaOptions
  } = useSharedPluginStateWithSelector(api, ['focus', 'connectivity', 'media'], selector);
  const featureFlags = mediaOptions && mediaOptions.featureFlags;

  // Ignored via go/ees005
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
  const editorDom = editorDomElement;
  const editorParent = (_editorDom$parentElem = editorDom.parentElement) !== null && _editorDom$parentElem !== void 0 ? _editorDom$parentElem : undefined;

  /**
   * https://product-fabric.atlassian.net/browse/ED-21993
   * Avoid attach paste event to same dom element,
   * so editor-paste-plugin can use stopPropagation,
   * as stopImmediatePropagation could cause race condition issues
   */
  const container = editorParent;
  const clipboard = hasFocus ? /*#__PURE__*/React.createElement(ClipboardWrapper, {
    api: api,
    featureFlags: featureFlags,
    container: container
  }) : null;
  return /*#__PURE__*/React.createElement(React.Fragment, null, clipboard, /*#__PURE__*/React.createElement(DropzoneWrapper, {
    api: api,
    isActive: !isPopupOpened &&
    // If we're offline don't show the dropzone
    connectivityMode !== 'offline',
    featureFlags: featureFlags,
    editorDomElement: editorDomElement,
    appearance: appearance
  }), /*#__PURE__*/React.createElement(BrowserWrapper, {
    api: api,
    onBrowseFn: onBrowseFn,
    featureFlags: featureFlags
  }));
};

// eslint-disable-next-line @repo/internal/react/no-class-components
export class MediaPickerComponents extends React.Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "state", {
      isPopupOpened: false
    });
    _defineProperty(this, "onBrowseFn", nativeBrowseFn => {
      const {
        setBrowseFn
      } = this.props;
      setBrowseFn(nativeBrowseFn);
    });
  }
  componentDidMount() {
    const {
      onPopupToggle
    } = this.props;
    onPopupToggle(isPopupOpened => {
      this.setState({
        isPopupOpened
      });
    });
  }
  render() {
    const {
      api,
      editorDomElement,
      appearance
    } = this.props;
    const {
      isPopupOpened
    } = this.state;
    return /*#__PURE__*/React.createElement(MediaPicker, {
      editorDomElement: editorDomElement,
      appearance: appearance,
      isPopupOpened: isPopupOpened,
      onBrowseFn: this.onBrowseFn,
      api: api
    });
  }
}
_defineProperty(MediaPickerComponents, "displayName", 'MediaPickerComponents');