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

Media plugin for @atlaskit/editor-core

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { useCallback, useEffect, useState } from 'react';
import { flushSync } from 'react-dom';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { ErrorReporter } from '@atlaskit/editor-common/utils';
import PickerFacade from '../../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
  };
};
export default function PickerFacadeProvider(_ref) {
  var api = _ref.api,
    analyticsName = _ref.analyticsName,
    children = _ref.children;
  var _useState = useState({
      pickerFacadeInstance: undefined,
      config: undefined,
      mediaClientConfig: undefined
    }),
    _useState2 = _slicedToArray(_useState, 2),
    state = _useState2[0],
    setState = _useState2[1];
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['media'], selector),
    mediaProvider = _useSharedPluginState.mediaProvider,
    mediaOptions = _useSharedPluginState.mediaOptions,
    insertFile = _useSharedPluginState.insertFile,
    options = _useSharedPluginState.options;
  var handleMediaProvider = useCallback( /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, provider) {
      var mediaProvider, resolvedMediaClientConfig, pickerFacadeConfig, pickerFacadeInstance, config;
      return _regeneratorRuntime.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 ErrorReporter(),
              featureFlags: mediaOptions && mediaOptions.featureFlags
            };
            _context.next = 18;
            return new PickerFacade('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
          case 18:
            pickerFacadeInstance = _context.sent;
            pickerFacadeInstance.onNewMedia(insertFile);
            pickerFacadeInstance.setUploadParams(mediaProvider.uploadParams);
            config = {
              uploadParams: mediaProvider.uploadParams
            };
            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]);
  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
  });
}