@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
139 lines • 6.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useRenderDebugger = exports.useResizeObserver = exports.useEventListener = exports.useScrollLock = exports.useCopyToClipboard = exports.useMediaQuery = exports.useInterval = exports.useOnClickOutside = exports.useWindowSize = exports.useDebounceCallback = exports.useDebounceValue = void 0;
exports.usePrevious = usePrevious;
exports.useEffectDebugger = useEffectDebugger;
exports.useRenderCount = useRenderCount;
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const react_1 = require("react");
var usehooks_ts_1 = require("usehooks-ts");
Object.defineProperty(exports, "useDebounceValue", { enumerable: true, get: function () { return usehooks_ts_1.useDebounceValue; } });
Object.defineProperty(exports, "useDebounceCallback", { enumerable: true, get: function () { return usehooks_ts_1.useDebounceCallback; } });
Object.defineProperty(exports, "useWindowSize", { enumerable: true, get: function () { return usehooks_ts_1.useWindowSize; } });
Object.defineProperty(exports, "useOnClickOutside", { enumerable: true, get: function () { return usehooks_ts_1.useOnClickOutside; } });
Object.defineProperty(exports, "useInterval", { enumerable: true, get: function () { return usehooks_ts_1.useInterval; } });
Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return usehooks_ts_1.useMediaQuery; } });
Object.defineProperty(exports, "useCopyToClipboard", { enumerable: true, get: function () { return usehooks_ts_1.useCopyToClipboard; } });
Object.defineProperty(exports, "useScrollLock", { enumerable: true, get: function () { return usehooks_ts_1.useScrollLock; } });
Object.defineProperty(exports, "useEventListener", { enumerable: true, get: function () { return usehooks_ts_1.useEventListener; } });
Object.defineProperty(exports, "useResizeObserver", { enumerable: true, get: function () { return usehooks_ts_1.useResizeObserver; } });
/**
* Below are hooks that cannot be found in `usehooks-ts`
* but are used in some projects.
* 1. usePrevious
* 2. useEffectDebugger
* 3. useRenderCount
*/
/**
* The `usePrevious` hook tracks a variable's previous value in a functional component,
* useful for comparing current and past values to trigger actions or render changes.
*/
function usePrevious(value) {
// The ref object is a generic container whose current property is mutable
// and can hold any value, similar to an instance property on a class
const ref = (0, react_1.useRef)(null);
// Store current value in ref
(0, react_1.useEffect)(() => {
ref.current = value;
}, [value]); // Only re-run if value changes
// Return previous value (happens before update in useEffect above)
return ref.current;
}
/**
* The `useEffectDebugger` hook is a wrapper around the `useEffect` hook
* that logs the dependencies of the effect when they change.
*
* Uses the `usePrevious` hook.
*
* Source: https://stackoverflow.com/a/59843241/3247715
*/
function useEffectDebugger(effectHook, dependencies, dependencyNames = []) {
const previousDeps = usePrevious(dependencies);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const changedDeps = dependencies.reduce((accum, dependency, index) => {
if (previousDeps === undefined) {
return accum;
}
if (previousDeps === null) {
return accum;
}
if (dependency !== previousDeps[index]) {
const keyName = dependencyNames[index] || index;
return Object.assign(Object.assign({}, accum), { [keyName]: {
before: previousDeps[index],
after: dependency,
} });
}
return accum;
}, {});
if (Object.keys(changedDeps).length) {
console.info('[use-effect-debugger] ', changedDeps);
}
(0, react_1.useEffect)(() => {
return effectHook();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, dependencies);
}
/**
* The `useRenderCount` hook returns the number of times a component has rendered.
*/
function useRenderCount() {
const count = (0, react_1.useRef)(0);
count.current++;
return count.current;
}
/**
* The `useRenderDebugger` outputs to console what props or states are causing a render (or re-render) of a component
* if all relevant props and states variables are passed to the hook.
* For debugging purposes only.
*
* Howto use:
* Place the hook at the top of the component you want to debug and call it like this:
* useRenderDebugger('MyComponent', props);
*
* if there are state variables include them as well:
*
* useRenderDebugger('MyComponent', { ...props, stateVar1, stateVar2 });
*
* @param componentName Name of the component to debug
* @param propsAndStates an object containing all props and states variables of the component
*/
const useRenderDebugger = (componentName, propsAndStates) => {
const prev = (0, react_1.useRef)(propsAndStates);
(0, react_1.useEffect)(() => {
const changedPropsOrState = {};
Object.entries(propsAndStates).forEach(([key, newValue]) => {
if (prev.current[key] !== newValue) {
changedPropsOrState[key] = {
old: prev.current[key],
new: newValue,
};
}
}, {});
if (Object.keys(changedPropsOrState).length > 0) {
console.debug(`[${componentName}] Re-rendered due to:`, changedPropsOrState);
}
prev.current = propsAndStates;
});
};
exports.useRenderDebugger = useRenderDebugger;
//# sourceMappingURL=index.js.map