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

Media plugin for @atlaskit/editor-core

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';
const dummyMediaPickerObject = {
  on: () => {},
  removeAllListeners: () => {},
  emit: () => {},
  destroy: () => {},
  setUploadParams: () => {}
};
const 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({
  api,
  analyticsName,
  children
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
}) {
  const [state, setState] = useState({
    pickerFacadeInstance: undefined,
    config: undefined,
    mediaClientConfig: undefined
  });
  const {
    mediaProvider,
    mediaOptions,
    insertFile,
    options
  } = useSharedPluginStateWithSelector(api, ['media'], selector);
  const handleMediaProvider = useCallback(async (_name, provider) => {
    const mediaProvider = await provider;
    if (!mediaProvider || !mediaProvider.uploadParams || !insertFile) {
      return;
    }
    const resolvedMediaClientConfig = (await mediaProvider.uploadMediaClientConfig) || (await mediaProvider.viewMediaClientConfig);
    if (!resolvedMediaClientConfig) {
      return;
    }
    const pickerFacadeConfig = {
      mediaClientConfig: resolvedMediaClientConfig,
      errorReporter: (options === null || options === void 0 ? void 0 : options.errorReporter) || new ErrorReporter(),
      featureFlags: mediaOptions && mediaOptions.featureFlags
    };
    const pickerFacadeInstance = await new PickerFacade('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
    pickerFacadeInstance.onNewMedia(insertFile);
    pickerFacadeInstance.setUploadParams(mediaProvider.uploadParams);
    const config = {
      uploadParams: mediaProvider.uploadParams
    };
    flushSync(() => {
      setState({
        pickerFacadeInstance,
        config,
        mediaClientConfig: resolvedMediaClientConfig
      });
    });
  }, [analyticsName, insertFile, mediaOptions, options === null || options === void 0 ? void 0 : options.errorReporter]);
  useEffect(() => {
    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]);
  const {
    mediaClientConfig,
    config,
    pickerFacadeInstance
  } = state;
  if (!mediaClientConfig || !config || !pickerFacadeInstance) {
    return null;
  }
  return children({
    mediaClientConfig,
    config,
    pickerFacadeInstance
  });
}