All files / src/apps/gbs-music-web/components/dialog ConfirmUnsavedChangesDialog.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
  StyledConfirmModal,
  StyledConfirmTitle,
  StyledConfirmDetail,
  StyledConfirmActions,
} from "gbs-music-web/components/dialog/style";
import React, { useEffect } from "react";
import l10n from "shared/lib/lang/l10n";
import { Button } from "ui/buttons/Button";
import { MenuOverlay } from "ui/menu/Menu";
import FocusLock from "react-focus-lock";
 
interface ConfirmUnsavedChangesDialogProps {
  filename: string;
  onCancel: () => void;
  onSave: () => void;
  onDiscard: () => void;
}
 
export const ConfirmUnsavedChangesDialog = ({
  filename,
  onCancel,
  onSave,
  onDiscard,
}: ConfirmUnsavedChangesDialogProps) => {
  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent) => {
      Iif (e.code === "Escape") {
        onCancel();
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => {
      window.removeEventListener("keydown", onKeyDown);
    };
  }, [onCancel]);
 
  return (
    <FocusLock>
      <MenuOverlay onClick={onCancel} />
      <StyledConfirmModal role="dialog" aria-modal="true">
        <StyledConfirmTitle>
          {l10n("DIALOG_TRACKER_CHANGES_NOT_SAVED", {
            name: filename,
          })}
        </StyledConfirmTitle>
        <StyledConfirmDetail>
          {l10n("DIALOG_TRACKER_CHANGES_NOT_SAVED_DESCRIPTION")}
        </StyledConfirmDetail>
        <StyledConfirmActions>
          <Button variant="primary" onClick={onSave} autoFocus>
            {l10n("DIALOG_SAVE_AND_CONTINUE")}
          </Button>
          <Button onClick={onDiscard}>
            {l10n("DIALOG_CONTINUE_WITHOUT_SAVING")}
          </Button>
          <Button onClick={onCancel}>{l10n("DIALOG_CANCEL")}</Button>
        </StyledConfirmActions>
      </StyledConfirmModal>
    </FocusLock>
  );
};