mirror of
https://github.com/facebook/react.git
synced 2026-02-26 07:25:30 +00:00
221f3002ca
Addresses https://github.com/facebook/react/issues/32244. ### Chromium We will use [chrome.permissions](https://developer.chrome.com/docs/extensions/reference/api/permissions) for checking / requesting `clipboardWrite` permission before copying something to the clipboard. ### Firefox We will keep `clipboardWrite` as a required permission, because there is no reliable and working API for requesting optional permissions for extensions that are extending browser DevTools: - `chrome.permissions` is unavailable for devtools pages - https://bugzilla.mozilla.org/show_bug.cgi?id=1796933 - You can't call `chrome.permissions.request` from background, because this instruction has to be executed inside user-event callback, basically only initiated by user. I don't really want to come up with solutions like opening a new tab with a button that user has to click.
91 lines
2.6 KiB
JavaScript
91 lines
2.6 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 {copy} from 'clipboard-js';
|
|
import * as React from 'react';
|
|
import {ElementTypeHostComponent} from 'react-devtools-shared/src/frontend/types';
|
|
import Button from '../Button';
|
|
import ButtonIcon from '../ButtonIcon';
|
|
import KeyValue from './KeyValue';
|
|
import {alphaSortEntries, serializeDataForCopy} from '../utils';
|
|
import Store from '../../store';
|
|
import styles from './InspectedElementSharedStyles.css';
|
|
import {withPermissionsCheck} from 'react-devtools-shared/src/frontend/utils/withPermissionsCheck';
|
|
|
|
import type {InspectedElement} from 'react-devtools-shared/src/frontend/types';
|
|
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
|
|
import type {Element} from 'react-devtools-shared/src/frontend/types';
|
|
|
|
type Props = {
|
|
bridge: FrontendBridge,
|
|
element: Element,
|
|
inspectedElement: InspectedElement,
|
|
store: Store,
|
|
};
|
|
|
|
export default function InspectedElementStateTree({
|
|
bridge,
|
|
element,
|
|
inspectedElement,
|
|
store,
|
|
}: Props): React.Node {
|
|
const {state, type} = inspectedElement;
|
|
if (state == null) {
|
|
return null;
|
|
}
|
|
|
|
// HostSingleton and HostHoistable may have state that we don't want to expose to users
|
|
const isHostComponent = type === ElementTypeHostComponent;
|
|
const entries = Object.entries(state);
|
|
const isEmpty = entries.length === 0;
|
|
if (isEmpty || isHostComponent) {
|
|
return null;
|
|
}
|
|
|
|
entries.sort(alphaSortEntries);
|
|
const handleCopy = withPermissionsCheck(
|
|
{permissions: ['clipboardWrite']},
|
|
() => copy(serializeDataForCopy(state)),
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<div className={styles.HeaderRow}>
|
|
<div className={styles.Header}>state</div>
|
|
{!isEmpty && (
|
|
<Button onClick={handleCopy} title="Copy to clipboard">
|
|
<ButtonIcon type="copy" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{isEmpty && <div className={styles.Empty}>None</div>}
|
|
{!isEmpty &&
|
|
(entries: any).map(([name, value]) => (
|
|
<KeyValue
|
|
key={name}
|
|
alphaSort={true}
|
|
bridge={bridge}
|
|
canDeletePaths={true}
|
|
canEditValues={true}
|
|
canRenamePaths={true}
|
|
depth={1}
|
|
element={element}
|
|
hidden={false}
|
|
inspectedElement={inspectedElement}
|
|
name={name}
|
|
path={[name]}
|
|
pathRoot="state"
|
|
store={store}
|
|
value={value}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|