mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-02 18:39:05 +01:00
6413d49119
This makes the background for the "wave-theme-dark" theme transparent. The light theme is still opaque because otherwise it will look somewhat dark. This also suppresses TypeScript/JavaScript import errors in the default linter, since we don't have support for project directories. This also reworks the useWidth and useHeight hooks to use the useResizeObserver hook, which limits the number of ResizeObserver instances floating around, thereby improving performance
29 lines
1008 B
TypeScript
29 lines
1008 B
TypeScript
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import useResizeObserver from "@react-hook/resize-observer";
|
|
import { useCallback, useState } from "react";
|
|
import { debounce } from "throttle-debounce";
|
|
|
|
/**
|
|
* Get the height of the specified element and update it when the element resizes.
|
|
* @param ref The reference to the element to observe.
|
|
* @param delay The debounce delay to use for updating the height.
|
|
* @returns The current height of the element, or null if the element is not yet mounted.
|
|
*/
|
|
const useHeight = (ref: React.RefObject<HTMLElement>, delay = 0) => {
|
|
const [height, setHeight] = useState<number | null>(null);
|
|
|
|
const updateHeight = useCallback((entry: ResizeObserverEntry) => {
|
|
setHeight(entry.contentRect.height);
|
|
}, []);
|
|
|
|
const fUpdateHeight = useCallback(delay > 0 ? debounce(delay, updateHeight) : updateHeight, [updateHeight, delay]);
|
|
|
|
useResizeObserver(ref, fUpdateHeight);
|
|
|
|
return height;
|
|
};
|
|
|
|
export { useHeight };
|