mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +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
992 B
TypeScript
29 lines
992 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 width 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 width.
|
|
* @returns The current width of the element, or null if the element is not yet mounted.
|
|
*/
|
|
const useWidth = (ref: React.RefObject<HTMLElement>, delay = 0) => {
|
|
const [width, setWidth] = useState<number | null>(null);
|
|
|
|
const updateWidth = useCallback((entry: ResizeObserverEntry) => {
|
|
setWidth(entry.contentRect.width);
|
|
}, []);
|
|
|
|
const fUpdateWidth = useCallback(delay > 0 ? debounce(delay, updateWidth) : updateWidth, [updateWidth, delay]);
|
|
|
|
useResizeObserver(ref, fUpdateWidth);
|
|
|
|
return width;
|
|
};
|
|
|
|
export { useWidth };
|