forked from facebook/react
/
InspectHostNodesToggle.js
48 lines (42 loc) · 1.28 KB
/
InspectHostNodesToggle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/**
* Copyright (c) Facebook, Inc. and its 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';
export default function InspectHostNodesToggle() {
const [isInspecting, setIsInspecting] = useState(false);
const bridge = useContext(BridgeContext);
const handleChange = useCallback(
(isChecked: boolean) => {
setIsInspecting(isChecked);
if (isChecked) {
bridge.send('startInspectingNative');
} else {
bridge.send('stopInspectingNative', false);
}
},
[bridge],
);
useEffect(() => {
const onStopInspectingNative = () => setIsInspecting(false);
bridge.addListener('stopInspectingNative', onStopInspectingNative);
return () =>
bridge.removeListener('stopInspectingNative', onStopInspectingNative);
}, [bridge]);
return (
<Toggle
onChange={handleChange}
isChecked={isInspecting}
title="Select an element in the page to inspect it">
<ButtonIcon type="search" />
</Toggle>
);
}