mirror of https://github.com/portainer/portainer
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
|
/* eslint-disable no-console */
|
||
|
|
import { intersection } from 'lodash';
|
||
|
|
import { useEffect, useRef } from 'react';
|
||
|
|
|
||
|
|
function logPropDifferences(
|
||
|
|
newProps: Record<string, unknown>,
|
||
|
|
lastProps: Record<string, unknown>,
|
||
|
|
verbose: boolean
|
||
|
|
) {
|
||
|
|
const allKeys = intersection(Object.keys(newProps), Object.keys(lastProps));
|
||
|
|
|
||
|
|
const changedKeys: string[] = [];
|
||
|
|
|
||
|
|
allKeys.forEach((key) => {
|
||
|
|
const newValue = newProps[key];
|
||
|
|
const lastValue = lastProps[key];
|
||
|
|
if (newValue !== lastValue) {
|
||
|
|
changedKeys.push(key);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (changedKeys.length) {
|
||
|
|
if (verbose) {
|
||
|
|
changedKeys.forEach((key) => {
|
||
|
|
const newValue = newProps[key];
|
||
|
|
const lastValue = lastProps[key];
|
||
|
|
console.log('Key [', key, '] changed');
|
||
|
|
console.log('From: ', lastValue);
|
||
|
|
console.log('To: ', newValue);
|
||
|
|
console.log('------');
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
console.log('Changed keys: ', changedKeys.join());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export function useDebugPropChanges(
|
||
|
|
newProps: Record<string, unknown>,
|
||
|
|
verbose: boolean = true
|
||
|
|
) {
|
||
|
|
const lastProps = useRef<Record<string, unknown>>();
|
||
|
|
// Should only run when the component re-mounts
|
||
|
|
useEffect(() => {
|
||
|
|
console.log('Mounted');
|
||
|
|
}, []);
|
||
|
|
if (lastProps.current) {
|
||
|
|
logPropDifferences(newProps, lastProps.current, verbose);
|
||
|
|
}
|
||
|
|
lastProps.current = newProps;
|
||
|
|
}
|
||
|
|
/* eslint-enable no-console */
|