From 4ceae08fc533a6e29f45199cda6886d61d89449a Mon Sep 17 00:00:00 2001 From: Iliya Brook Date: Wed, 6 Mar 2024 15:10:20 +0200 Subject: [PATCH] Add lodash.clonedeep and content copying feature The package 'lodash.clonedeep' has been added to dependencies list. Also, a new copy to clipboard feature has been introduced in the ActionPreview.tsx file. This feature deep clones the nextState object and copies the resulting JSON string to the system clipboard. --- .../package.json | 2 ++ .../src/ActionPreview.tsx | 33 +++++++++++++++++-- pnpm-lock.yaml | 6 ++++ 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/packages/redux-devtools-inspector-monitor/package.json b/packages/redux-devtools-inspector-monitor/package.json index 2808dcff..1db31dcf 100644 --- a/packages/redux-devtools-inspector-monitor/package.json +++ b/packages/redux-devtools-inspector-monitor/package.json @@ -47,6 +47,7 @@ "immutable": "^4.3.5", "javascript-stringify": "^2.1.0", "jsondiffpatch": "^0.6.0", + "lodash.clonedeep": "^4.5.0", "lodash.debounce": "^4.0.8", "react-base16-styling": "^0.9.1", "react-json-tree": "^0.18.0", @@ -66,6 +67,7 @@ "@types/dateformat": "^5.0.2", "@types/hex-rgba": "^1.0.3", "@types/history": "^4.7.11", + "@types/lodash.clonedeep": "^4.5.9", "@types/lodash.debounce": "^4.0.9", "@types/react": "^18.2.58", "@typescript-eslint/eslint-plugin": "^6.21.0", diff --git a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx index 3427fb2d..17181b68 100644 --- a/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx +++ b/packages/redux-devtools-inspector-monitor/src/ActionPreview.tsx @@ -10,6 +10,7 @@ import ActionPreviewHeader from './ActionPreviewHeader'; import DiffTab from './tabs/DiffTab'; import StateTab from './tabs/StateTab'; import ActionTab from './tabs/ActionTab'; +import cloneDeep from 'lodash.clonedeep'; export interface TabComponentProps> { labelRenderer: LabelRenderer; @@ -80,6 +81,15 @@ class ActionPreview> extends Component< static defaultProps = { tabName: DEFAULT_STATE.tabName, }; + copyToClipboard = () => { + try { + const deepCopiedObject = cloneDeep(this.props.nextState); + const jsonString = JSON.stringify(deepCopiedObject, null, 2); + void navigator.clipboard.writeText(jsonString); + } catch (err) { + console.error('Failed to copy: ', err); + } + }; render(): JSX.Element { const { @@ -206,10 +216,27 @@ class ActionPreview> extends Component< ]) } > - {'(pin)'} - - {!expanded && ': '} + {'(pin)'} + ({ + fontSize: '0.7em', + paddingLeft: '5px', + cursor: 'pointer', + '&:hover': { + textDecoration: 'underline', + }, + color: theme.PIN_COLOR, + })} + onClick={event => { + event.stopPropagation(); + this.copyToClipboard(); + }} + > + {'(copy)'} + + {!expanded && ': '} + ); }; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e1b769dd..a459a268 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1614,6 +1614,9 @@ importers: jsondiffpatch: specifier: ^0.6.0 version: 0.6.0 + lodash.clonedeep: + specifier: ^4.5.0 + version: 4.5.0 lodash.debounce: specifier: ^4.0.8 version: 4.0.8 @@ -1669,6 +1672,9 @@ importers: '@types/history': specifier: ^4.7.11 version: 4.7.11 + '@types/lodash.clonedeep': + specifier: ^4.5.9 + version: 4.5.9 '@types/lodash.debounce': specifier: ^4.0.9 version: 4.0.9