mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-02 19:03:30 +03:00
add copy object to Tree "copy" button next to the "pin" button
This commit is contained in:
parent
4988b01be8
commit
038f30ecc1
|
@ -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",
|
||||
|
|
|
@ -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<S, A extends Action<string>> {
|
||||
labelRenderer: LabelRenderer;
|
||||
|
@ -80,6 +81,15 @@ class ActionPreview<S, A extends Action<string>> 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<S, A extends Action<string>> extends Component<
|
|||
])
|
||||
}
|
||||
>
|
||||
{'(pin)'}
|
||||
</span>
|
||||
{!expanded && ': '}
|
||||
{'(pin)'}
|
||||
</span>
|
||||
<span
|
||||
css={(theme) => ({
|
||||
fontSize: '0.7em',
|
||||
paddingLeft: '5px',
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
color: theme.PIN_COLOR,
|
||||
})}
|
||||
onClick={event => {
|
||||
event.stopPropagation();
|
||||
this.copyToClipboard();
|
||||
}}
|
||||
>
|
||||
{'(copy)'}
|
||||
</span>
|
||||
{!expanded && ': '}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
@ -10273,6 +10279,12 @@ packages:
|
|||
'@types/lodash': 4.14.202
|
||||
dev: true
|
||||
|
||||
/@types/lodash.clonedeep@4.5.9:
|
||||
resolution: {integrity: sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==}
|
||||
dependencies:
|
||||
'@types/lodash': 4.14.202
|
||||
dev: true
|
||||
|
||||
/@types/lodash.curry@4.1.9:
|
||||
resolution: {integrity: sha512-QV967vSflHEza0d0IMTK7fwbl+baPBXZjcESeAHrA5eSE+EHetaggZjPpkzX1NJh4qa8DLOLScwUR+f7FN85Zg==}
|
||||
dependencies:
|
||||
|
@ -16841,6 +16853,10 @@ packages:
|
|||
/lodash-es@4.17.21:
|
||||
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
|
||||
|
||||
/lodash.clonedeep@4.5.0:
|
||||
resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
|
||||
dev: false
|
||||
|
||||
/lodash.curry@4.1.1:
|
||||
resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==}
|
||||
dev: false
|
||||
|
|
Loading…
Reference in New Issue
Block a user