reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2024-11-25 19:13:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

added copy to clipboard functionality to Tree, in Actions and State tab

Browse Source
This commit is contained in:
Iliya Brook 2024-03-06 23:14:58 +02:00
parent 27075b1e43
commit 73618765a7
6 changed files with 47 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
extension/chrome/manifest.json
View File

@ -61,7 +61,9 @@
"storage",
"file:///*",
"http://*/*",
"https://*/*"
"https://*/*",
"clipboardWrite",
"clipboardRead"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;",
"update_url": "https://clients2.google.com/service/update2/crx",

4
extension/edge/manifest.json
View File

@ -61,7 +61,9 @@
"storage",
"file:///*",
"http://*/*",
"https://*/*"
"https://*/*",
"clipboardWrite",
"clipboardRead"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; style-src * 'unsafe-inline'; img-src 'self' data:;"
}

4
extension/firefox/manifest.json
View File

@ -57,7 +57,9 @@
"storage",
"file:///*",
"http://*/*",
"https://*/*"
"https://*/*",
"clipboardWrite",
"clipboardRead"
],
"content_security_policy": "script-src 'self'; object-src 'self'; img-src 'self' data:;"
}

29
packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx
View File

@ -10,7 +10,8 @@ import ActionPreviewHeader from './ActionPreviewHeader';
import DiffTab from './tabs/DiffTab';
import StateTab from './tabs/StateTab';
import ActionTab from './tabs/ActionTab';
import cloneDeep from 'lodash.clonedeep';
import { getValueByPath } from './utils/getValueByPath';
import { copyToClipboard } from './utils/copyToClipboard';
export interface TabComponentProps<S, A extends Action<string>> {
labelRenderer: LabelRenderer;
@ -81,16 +82,6 @@ class ActionPreview<S, A extends Action<string>> extends Component<
static defaultProps = {
tabName: DEFAULT_STATE.tabName,
};
copyToClipboard = (path: (string | number)[]) => {
try {
const objectByPath = path.reduce((obj: any, key) => (obj && obj[key] !== undefined) ? obj[key] : null, this.props.nextState);
const jsonString = JSON.stringify(objectByPath, null, 2);
void navigator.clipboard.writeText(jsonString)
} catch (err) {
console.error('Failed to copy: ', err);
}
};
render(): JSX.Element {
const {
@ -195,7 +186,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
labelRenderer: LabelRenderer = ([key, ...rest], nodeType, expanded) => {
const { onInspectPath, inspectedPath } = this.props;
const reversedPath = [key, ...rest].reverse();
return (
<span>
<span>{key}</span>
@ -213,7 +204,7 @@ class ActionPreview<S, A extends Action<string>> extends Component<
onClick={() =>
onInspectPath([
...inspectedPath.slice(0, inspectedPath.length - 1),
...[key, ...rest].reverse(),
...reversedPath,
])
}
>
@ -231,7 +222,17 @@ class ActionPreview<S, A extends Action<string>> extends Component<
})}
onClick={event => {
event.stopPropagation();
this.copyToClipboard([...inspectedPath.slice(0, inspectedPath.length - 1), key]);
let objectForCopying;
if (this.props.tabName === 'Action') {
objectForCopying = getValueByPath(this.props.action, reversedPath);
} else if (this.props.tabName === 'State') {
objectForCopying = getValueByPath(this.props.nextState, reversedPath);
}
if (objectForCopying !== undefined) {
copyToClipboard(objectForCopying);
} else {
console.error('Unable to find the object to copy');
}
}}
>
{'(copy)'}

11
packages/redux-devtools-inspector-monitor/src/utils/copyToClipboard.ts Normal file
View File

@ -0,0 +1,11 @@
import cloneDeep from 'lodash.clonedeep';
export const copyToClipboard = (object: any) => {
try {
const deepCopiedObject = cloneDeep(object);
const jsonString = JSON.stringify(deepCopiedObject, null, 2);
void navigator.clipboard.writeText(jsonString);
} catch (err) {
console.error('Error during copy: ', err);
}
}

12
packages/redux-devtools-inspector-monitor/src/utils/getValueByPath.ts Normal file
View File

@ -0,0 +1,12 @@
export const getValueByPath = (obj: any, path: (string | number)[]) => {
let current: any = obj;
for (let i = 0; i < path.length; i++) {
const key = path[i];
const adjustedKey = typeof key === 'string' && !isNaN(Number(key)) ? parseInt(key, 10) : key;
if (current[adjustedKey] === undefined) {
return undefined;
}
current = current[adjustedKey];
}
return current;
}