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

Media plugin for @atlaskit/editor-core

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { BrowserWrapper } from './BrowserWrapper';
import { ClipboardWrapper } from './ClipboardWrapper';
import { DropzoneWrapper } from './DropzoneWrapper';
var selector = function 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
  };
};
var MediaPicker = function MediaPicker(_ref) {
  var _editorDom$parentElem;
  var api = _ref.api,
    isPopupOpened = _ref.isPopupOpened,
    appearance = _ref.appearance,
    onBrowseFn = _ref.onBrowseFn,
    editorDomElement = _ref.editorDomElement;
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['focus', 'connectivity', 'media'], selector),
    hasFocus = _useSharedPluginState.hasFocus,
    connectivityMode = _useSharedPluginState.connectivityMode,
    mediaOptions = _useSharedPluginState.mediaOptions;
  var featureFlags = mediaOptions && mediaOptions.featureFlags;

  // Ignored via go/ees005
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
  var editorDom = editorDomElement;
  var 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
   */
  var container = editorParent;
  var 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 var MediaPickerComponents = /*#__PURE__*/function (_React$Component) {
  function MediaPickerComponents() {
    var _this;
    _classCallCheck(this, MediaPickerComponents);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, MediaPickerComponents, [].concat(args));
    _defineProperty(_this, "state", {
      isPopupOpened: false
    });
    _defineProperty(_this, "onBrowseFn", function (nativeBrowseFn) {
      var setBrowseFn = _this.props.setBrowseFn;
      setBrowseFn(nativeBrowseFn);
    });
    return _this;
  }
  _inherits(MediaPickerComponents, _React$Component);
  return _createClass(MediaPickerComponents, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;
      var onPopupToggle = this.props.onPopupToggle;
      onPopupToggle(function (isPopupOpened) {
        _this2.setState({
          isPopupOpened: isPopupOpened
        });
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
        api = _this$props.api,
        editorDomElement = _this$props.editorDomElement,
        appearance = _this$props.appearance;
      var isPopupOpened = this.state.isPopupOpened;
      return /*#__PURE__*/React.createElement(MediaPicker, {
        editorDomElement: editorDomElement,
        appearance: appearance,
        isPopupOpened: isPopupOpened,
        onBrowseFn: this.onBrowseFn,
        api: api
      });
    }
  }]);
}(React.Component);
_defineProperty(MediaPickerComponents, "displayName", 'MediaPickerComponents');