OpenFlare/frontend/app/(main)/waf/rules/editor/components/unsaved-changes.tsx

'use client';

import { useEffect } from 'react';
import { getHistoryTransition } from './editor-behavior';

const historyIndexKey = '__wafEditorIndex';

export function UnsavedChanges({ dirty }: { dirty: boolean }) {
  useEffect(() => {
    if (!dirty) return;
    const initialState =
      history.state && typeof history.state === 'object' ? history.state : {};
    let currentIndex = Number.isInteger(initialState[historyIndexKey])
      ? (initialState[historyIndexKey] as number)
      : 0;
    const currentUrl =
      window.location.pathname + window.location.search + window.location.hash;
    history.replaceState(
      { ...initialState, [historyIndexKey]: currentIndex },
      '',
    );
    const originalPushState = history.pushState.bind(history);
    const originalReplaceState = history.replaceState.bind(history);
    history.pushState = (data, unused, url) => {
      currentIndex++;
      originalPushState(
        { ...data, [historyIndexKey]: currentIndex },
        unused,
        url,
      );
    };
    history.replaceState = (data, unused, url) =>
      originalReplaceState(
        { ...data, [historyIndexKey]: currentIndex },
        unused,
        url,
      );
    let restoring = false;
    const handler = (event: BeforeUnloadEvent) => {
      if (dirty) event.preventDefault();
    };
    const clickHandler = (event: MouseEvent) => {
      if (
        !dirty ||
        event.defaultPrevented ||
        event.button !== 0 ||
        event.metaKey ||
        event.ctrlKey ||
        event.shiftKey ||
        event.altKey
      )
        return;
      const link = (event.target as Element | null)?.closest(
        'a[href]',
      ) as HTMLAnchorElement | null;
      if (
        !link ||
        link.target === '_blank' ||
        new URL(link.href, window.location.href).origin !==
          window.location.origin
      )
        return;
      if (!window.confirm('存在未保存的更改，确定离开吗？'))
        event.preventDefault();
    };
    const popstateHandler = (event: PopStateEvent) => {
      const hasTargetIndex = Number.isInteger(event.state?.[historyIndexKey]);
      const targetIndex = hasTargetIndex
        ? (event.state[historyIndexKey] as number)
        : currentIndex;
      if (restoring) {
        restoring = false;
        currentIndex = targetIndex;
        return;
      }
      if (window.confirm('存在未保存的更改，确定离开吗？')) {
        currentIndex = targetIndex;
        return;
      }
      if (!hasTargetIndex) {
        originalPushState(
          { ...initialState, [historyIndexKey]: currentIndex },
          '',
          currentUrl,
        );
        return;
      }
      restoring = true;
      history.go(getHistoryTransition(currentIndex, targetIndex).restoreDelta);
    };
    window.addEventListener('beforeunload', handler);
    document.addEventListener('click', clickHandler, true);
    window.addEventListener('popstate', popstateHandler);
    return () => {
      history.pushState = originalPushState;
      history.replaceState = originalReplaceState;
      window.removeEventListener('beforeunload', handler);
      document.removeEventListener('click', clickHandler, true);
      window.removeEventListener('popstate', popstateHandler);
    };
  }, [dirty]);
  return null;
}