Carlos Florêncio
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { useCallback, useSyncExternalStore } from 'react';
|
|
|
|
export type ViewMode = 'split' | 'unified';
|
|
|
|
const DIFF_VIEW_MODE_KEY = 'diff-view-mode';
|
|
const DEFAULT_VIEW_MODE: ViewMode = 'unified';
|
|
const VIEW_MODE_CHANGE_EVENT = 'diff-view-mode-change';
|
|
|
|
function getStoredViewMode(): ViewMode {
|
|
if (typeof window === 'undefined') return DEFAULT_VIEW_MODE;
|
|
const stored = localStorage.getItem(DIFF_VIEW_MODE_KEY);
|
|
return stored === 'split' || stored === 'unified' ? stored : DEFAULT_VIEW_MODE;
|
|
}
|
|
|
|
function setStoredViewMode(mode: ViewMode): void {
|
|
localStorage.setItem(DIFF_VIEW_MODE_KEY, mode);
|
|
window.dispatchEvent(new CustomEvent(VIEW_MODE_CHANGE_EVENT, { detail: mode }));
|
|
}
|
|
|
|
export function useGlobalViewMode(): [ViewMode, (mode: ViewMode) => void] {
|
|
const subscribe = useCallback((callback: () => void) => {
|
|
window.addEventListener(VIEW_MODE_CHANGE_EVENT, callback);
|
|
window.addEventListener('storage', callback);
|
|
return () => {
|
|
window.removeEventListener(VIEW_MODE_CHANGE_EVENT, callback);
|
|
window.removeEventListener('storage', callback);
|
|
};
|
|
}, []);
|
|
|
|
const getSnapshot = useCallback(() => getStoredViewMode(), []);
|
|
const getServerSnapshot = useCallback(() => DEFAULT_VIEW_MODE, []);
|
|
const viewMode = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
|
|
return [viewMode, setStoredViewMode];
|
|
}
|