/
ashipov
/
react
Обзор
Документация
Войти
/
ashipov
/
react
Код
Запросы
0
Задачи 2.0
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
main
packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
54 строки
1 KB
Sebastian Markbåge
[DevTools] Add inspection button to Suspense tab (#34867)
16 окт 2025, 17:49
Не верифицирован
16 окт 2025, 17:49
7385d1f
Код
Авторство
О чём код?
/** * 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 {useCallback, useContext, useEffect, useState} from 'react'; import {BridgeContext} from '../context'; import Toggle from '../Toggle'; import ButtonIcon from '../ButtonIcon'; import {logEvent} from 'react-devtools-shared/src/Logger'; export default function InspectHostNodesToggle({ onlySuspenseNodes, }: { onlySuspenseNodes?: boolean, }): React.Node { const [isInspecting, setIsInspecting] = useState(false); const bridge = useContext(BridgeContext); const handleChange = useCallback( (isChecked: boolean) => { setIsInspecting(isChecked); if (isChecked) { logEvent({event_name: 'inspect-element-button-clicked'}); bridge.send('startInspectingHost', !!onlySuspenseNodes); } else { bridge.send('stopInspectingHost'); } }, [bridge], ); useEffect(() => { const onStopInspectingHost = () => setIsInspecting(false); bridge.addListener('stopInspectingHost', onStopInspectingHost); return () => bridge.removeListener('stopInspectingHost', onStopInspectingHost); }, [bridge]); return ( <Toggle onChange={handleChange} isChecked={isInspecting} title="Select an element in the page to inspect it"> <ButtonIcon type="search" /> </Toggle> ); }