mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-13 14:14:04 +00:00
6277c8cb5f
* bring it back * move into folder * fix shortcuts colliding * tags * fix key capture problems * add 2 more actions + locations to cmd * fix search navigation issue W @nikec * fix saerch input * improve scrollbar look and text on lightheme + fix edge view search showing * useShortcut * add cmdp to keybinds page * killer i18n extension for vscode * some missing keys and localized cmdk * in lists that can change - it's better to use the id rather than index to avoid extra re-renders * Update CMDKLocations.tsx --------- Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com>
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
const QUERY = '(prefers-reduced-motion: no-preference)';
|
|
|
|
const isRenderingOnServer = typeof window === 'undefined';
|
|
|
|
const getInitialState = () => {
|
|
// For our initial server render, we won't know if the user
|
|
// prefers reduced motion, but it doesn't matter. This value
|
|
// will be overwritten on the client, before any animations
|
|
// occur.
|
|
return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
|
|
};
|
|
|
|
export function usePrefersReducedMotion() {
|
|
const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialState);
|
|
|
|
useEffect(() => {
|
|
const mediaQueryList = window.matchMedia(QUERY);
|
|
const listener = (event: { matches: any }) => {
|
|
setPrefersReducedMotion(!event.matches);
|
|
};
|
|
if (mediaQueryList.addEventListener) {
|
|
mediaQueryList.addEventListener('change', listener);
|
|
} else {
|
|
mediaQueryList.addListener(listener);
|
|
}
|
|
return () => {
|
|
if (mediaQueryList.removeEventListener) {
|
|
mediaQueryList.removeEventListener('change', listener);
|
|
} else {
|
|
mediaQueryList.removeListener(listener);
|
|
}
|
|
};
|
|
}, []);
|
|
return prefersReducedMotion;
|
|
}
|