UnsupportedBridgeProtocolDialog.js — react Source File

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {Fragment, useContext, useEffect} from 'react';
import {ModalDialogContext} from './ModalDialog';
import {StoreContext} from './context';
import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
import Button from './Button';
import ButtonIcon from './ButtonIcon';
import {copy} from 'clipboard-js';
import styles from './UnsupportedBridgeProtocolDialog.css';
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';

import type {BridgeProtocol} from 'react-devtools-shared/src/bridge';

const DEVTOOLS_VERSION = process.env.DEVTOOLS_VERSION;
const INSTRUCTIONS_FB_URL =
  'https://fb.me/devtools-unsupported-bridge-protocol';
const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog';

export default function UnsupportedBridgeProtocolDialog(_: {}): null {
  const {dialogs, dispatch} = useContext(ModalDialogContext);
  const store = useContext(StoreContext);

  const isVisible = !!dialogs.find(dialog => dialog.id === MODAL_DIALOG_ID);

  useEffect(() => {
    const updateDialog = () => {
      if (!isVisible) {
        if (store.unsupportedBridgeProtocolDetected) {
          dispatch({
            canBeDismissed: false,
            id: MODAL_DIALOG_ID,
            type: 'SHOW',
            content: (
              <DialogContent unsupportedBridgeProtocol={store.bridgeProtocol} />
            ),
          });
        }
      } else {
        if (!store.unsupportedBridgeProtocolDetected) {
          dispatch({
            type: 'HIDE',
            id: MODAL_DIALOG_ID,
          });
        }
      }
    };

    updateDialog();

    store.addListener('unsupportedBridgeProtocolDetected', updateDialog);
    return () => {
// ... (86 more lines)