Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-22 16:48:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix RotateIcon so it actually binds a ref for SyncSpin to use (#635)

Browse Source 
RotateIcon wasn't actually binding the ref that it was passing to SyncSpin, meaning it wasn't actually syncing properly. This fixes that, along with making SyncSpin compatible with more than just div types
This commit is contained in:
Evan Simkowitz 2024-05-01 20:28:44 -07:00 committed by GitHub
parent 53ec767bc7
commit 7e350fce97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/common/icons/icons.tsx
View File

@ -49,7 +49,7 @@ export const ActionsIcon: React.FC<ActionsIconProps> = (props) => {
}; };
export const SyncSpin: React.FC<{ export const SyncSpin: React.FC<{
classRef?: React.RefObject<HTMLDivElement>; classRef?: React.RefObject<Element>;
children?: React.ReactNode; children?: React.ReactNode;
shouldSync?: boolean; shouldSync?: boolean;
}> = (props) => { }> = (props) => {
@ -120,11 +120,11 @@ export const StatusIndicator: React.FC<StatusIndicatorProps> = (props) => {
const { level, className, runningCommands } = props; const { level, className, runningCommands } = props;
const iconRef = React.useRef<HTMLDivElement>(); const iconRef = React.useRef<HTMLDivElement>();
const [spinnerVisible, setSpinnerVisible] = React.useState(false); const [spinnerVisible, setSpinnerVisible] = React.useState(false);
const [timeout, setTimeoutState] = React.useState<NodeJS.Timeout>(undefined); const [timeoutState, setTimeoutState] = React.useState<NodeJS.Timeout>(undefined);
const clearSpinnerTimeout = () => { const clearSpinnerTimeout = () => {
if (timeout) { if (timeoutState) {
clearTimeout(timeout); clearTimeout(timeoutState);
setTimeoutState(undefined); setTimeoutState(undefined);
} }
setSpinnerVisible(false); setSpinnerVisible(false);
@ -134,7 +134,7 @@ export const StatusIndicator: React.FC<StatusIndicatorProps> = (props) => {
* This will apply a delay after there is a running command before showing the spinner. This prevents flickering for commands that return quickly. * This will apply a delay after there is a running command before showing the spinner. This prevents flickering for commands that return quickly.
*/ */
React.useEffect(() => { React.useEffect(() => {
if (runningCommands && !timeout) { if (runningCommands && !timeoutState) {
console.log("show spinner"); console.log("show spinner");
setTimeoutState( setTimeoutState(
setTimeout(() => { setTimeout(() => {
@ -182,13 +182,13 @@ export const StatusIndicator: React.FC<StatusIndicatorProps> = (props) => {
); );
}; };
export const RotateIcon: React.FC<{ className?: string; onClick?: React.MouseEventHandler<HTMLDivElement> }> = ( export const RotateIcon: React.FC<{ className?: string; onClick?: React.MouseEventHandler<SVGSVGElement> }> = (
props props
) => { ) => {
const iconRef = React.useRef<HTMLDivElement>(); const iconRef = React.useRef<SVGSVGElement>();
return ( return (
<SyncSpin classRef={iconRef}> <SyncSpin classRef={iconRef}>
<RotateIconSvg className={props.className ?? ""} /> <RotateIconSvg ref={iconRef} className={props.className ?? ""} onClick={props.onClick} />
</SyncSpin> </SyncSpin>
); );
}; };