Files
react/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
Ruslan Lesiutin dbf80c8d7a fix[react-devtools]: update profiling status before receiving response from backend (#31117)
We can't wait for a response from Backend, because it might take some
time to actually finish profiling.

We should keep a flag on the frontend side, so user can quickly see the
feedback in the UI.
2024-10-09 13:23:23 +01:00

51 lines
1.5 KiB
JavaScript

/**
* 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, useMemo} from 'react';
import {SettingsModalContext} from './SettingsModalContext';
import Button from '../Button';
import ButtonIcon from '../ButtonIcon';
import {StoreContext} from '../context';
import {useSubscription} from '../hooks';
export default function SettingsModalContextToggle(): React.Node {
const {setIsModalShowing} = useContext(SettingsModalContext);
const store = useContext(StoreContext);
const {profilerStore} = store;
const showFilterModal = useCallback(
() => setIsModalShowing(true),
[setIsModalShowing],
);
// Updating preferences while profiling is in progress could break things (e.g. filtering)
// Explicitly disallow it for now.
const isProfilingSubscription = useMemo(
() => ({
getCurrentValue: () => profilerStore.isProfilingBasedOnUserInput,
subscribe: (callback: Function) => {
profilerStore.addListener('isProfiling', callback);
return () => profilerStore.removeListener('isProfiling', callback);
},
}),
[profilerStore],
);
const isProfiling = useSubscription<boolean>(isProfilingSubscription);
return (
<Button
disabled={isProfiling}
onClick={showFilterModal}
title="View settings">
<ButtonIcon type="settings" />
</Button>
);
}