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

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MediaPickerComponents = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _hooks = require("@atlaskit/editor-common/hooks");
var _BrowserWrapper = require("./BrowserWrapper");
var _ClipboardWrapper = require("./ClipboardWrapper");
var _DropzoneWrapper = require("./DropzoneWrapper");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
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 = (0, _hooks.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.default.createElement(_ClipboardWrapper.ClipboardWrapper, {
    api: api,
    featureFlags: featureFlags,
    container: container
  }) : null;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, clipboard, /*#__PURE__*/_react.default.createElement(_DropzoneWrapper.DropzoneWrapper, {
    api: api,
    isActive: !isPopupOpened &&
    // If we're offline don't show the dropzone
    connectivityMode !== 'offline',
    featureFlags: featureFlags,
    editorDomElement: editorDomElement,
    appearance: appearance
  }), /*#__PURE__*/_react.default.createElement(_BrowserWrapper.BrowserWrapper, {
    api: api,
    onBrowseFn: onBrowseFn,
    featureFlags: featureFlags
  }));
};

// eslint-disable-next-line @repo/internal/react/no-class-components
var MediaPickerComponents = exports.MediaPickerComponents = /*#__PURE__*/function (_React$Component) {
  function MediaPickerComponents() {
    var _this;
    (0, _classCallCheck2.default)(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));
    (0, _defineProperty2.default)(_this, "state", {
      isPopupOpened: false
    });
    (0, _defineProperty2.default)(_this, "onBrowseFn", function (nativeBrowseFn) {
      var setBrowseFn = _this.props.setBrowseFn;
      setBrowseFn(nativeBrowseFn);
    });
    return _this;
  }
  (0, _inherits2.default)(MediaPickerComponents, _React$Component);
  return (0, _createClass2.default)(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.default.createElement(MediaPicker, {
        editorDomElement: editorDomElement,
        appearance: appearance,
        isPopupOpened: isPopupOpened,
        onBrowseFn: this.onBrowseFn,
        api: api
      });
    }
  }]);
}(_react.default.Component);
(0, _defineProperty2.default)(MediaPickerComponents, "displayName", 'MediaPickerComponents');