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

Media plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PickerFacadeProvider;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _reactDom = require("react-dom");
var _hooks = require("@atlaskit/editor-common/hooks");
var _utils = require("@atlaskit/editor-common/utils");
var _pickerFacade = _interopRequireDefault(require("../../pm-plugins/picker-facade"));
var dummyMediaPickerObject = {
  on: function on() {},
  removeAllListeners: function removeAllListeners() {},
  emit: function emit() {},
  destroy: function destroy() {},
  setUploadParams: function setUploadParams() {}
};
var selector = function selector(states) {
  var _states$mediaState, _states$mediaState2, _states$mediaState3, _states$mediaState4;
  return {
    mediaProvider: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.mediaProvider,
    mediaOptions: (_states$mediaState2 = states.mediaState) === null || _states$mediaState2 === void 0 ? void 0 : _states$mediaState2.mediaOptions,
    insertFile: (_states$mediaState3 = states.mediaState) === null || _states$mediaState3 === void 0 ? void 0 : _states$mediaState3.insertFile,
    options: (_states$mediaState4 = states.mediaState) === null || _states$mediaState4 === void 0 ? void 0 : _states$mediaState4.options
  };
};
function PickerFacadeProvider(_ref) {
  var api = _ref.api,
    analyticsName = _ref.analyticsName,
    children = _ref.children;
  var _useState = (0, _react.useState)({
      pickerFacadeInstance: undefined,
      config: undefined,
      mediaClientConfig: undefined
    }),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    state = _useState2[0],
    setState = _useState2[1];
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['media'], selector),
    mediaProvider = _useSharedPluginState.mediaProvider,
    mediaOptions = _useSharedPluginState.mediaOptions,
    insertFile = _useSharedPluginState.insertFile,
    options = _useSharedPluginState.options;
  var handleMediaProvider = (0, _react.useCallback)( /*#__PURE__*/function () {
    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, provider) {
      var mediaProvider, resolvedMediaClientConfig, pickerFacadeConfig, pickerFacadeInstance, config;
      return _regenerator.default.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return provider;
          case 2:
            mediaProvider = _context.sent;
            if (!(!mediaProvider || !mediaProvider.uploadParams || !insertFile)) {
              _context.next = 5;
              break;
            }
            return _context.abrupt("return");
          case 5:
            _context.next = 7;
            return mediaProvider.uploadMediaClientConfig;
          case 7:
            _context.t0 = _context.sent;
            if (_context.t0) {
              _context.next = 12;
              break;
            }
            _context.next = 11;
            return mediaProvider.viewMediaClientConfig;
          case 11:
            _context.t0 = _context.sent;
          case 12:
            resolvedMediaClientConfig = _context.t0;
            if (resolvedMediaClientConfig) {
              _context.next = 15;
              break;
            }
            return _context.abrupt("return");
          case 15:
            pickerFacadeConfig = {
              mediaClientConfig: resolvedMediaClientConfig,
              errorReporter: (options === null || options === void 0 ? void 0 : options.errorReporter) || new _utils.ErrorReporter(),
              featureFlags: mediaOptions && mediaOptions.featureFlags
            };
            _context.next = 18;
            return new _pickerFacade.default('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
          case 18:
            pickerFacadeInstance = _context.sent;
            pickerFacadeInstance.onNewMedia(insertFile);
            pickerFacadeInstance.setUploadParams(mediaProvider.uploadParams);
            config = {
              uploadParams: mediaProvider.uploadParams
            };
            (0, _reactDom.flushSync)(function () {
              setState({
                pickerFacadeInstance: pickerFacadeInstance,
                config: config,
                mediaClientConfig: resolvedMediaClientConfig
              });
            });
          case 23:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function (_x, _x2) {
      return _ref2.apply(this, arguments);
    };
  }(), [analyticsName, insertFile, mediaOptions, options === null || options === void 0 ? void 0 : options.errorReporter]);
  (0, _react.useEffect)(function () {
    if (mediaProvider) {
      // eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
      handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));
    }
  }, [mediaProvider, handleMediaProvider]);
  var mediaClientConfig = state.mediaClientConfig,
    config = state.config,
    pickerFacadeInstance = state.pickerFacadeInstance;
  if (!mediaClientConfig || !config || !pickerFacadeInstance) {
    return null;
  }
  return children({
    mediaClientConfig: mediaClientConfig,
    config: config,
    pickerFacadeInstance: pickerFacadeInstance
  });
}