From b2eb71a8a1228f8910936e3793d93cde7feb8a00 Mon Sep 17 00:00:00 2001
From: shikelong <578622705@qq.com>
Date: Sat, 13 Nov 2021 20:18:16 +0800
Subject: [PATCH] feat(setting): Avatar Clip Modal support closed by esc
 keydown

---
 web/src/components/AvatarPicker.tsx         | 3 +++
 web/src/components/modals/AvatarCropper.tsx | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/src/components/AvatarPicker.tsx b/web/src/components/AvatarPicker.tsx
index 1492fa25..f67ccbc0 100644
--- a/web/src/components/AvatarPicker.tsx
+++ b/web/src/components/AvatarPicker.tsx
@@ -40,6 +40,9 @@ export const AvatarPicker: React.FC<AvatarPickerProps> = React.memo((props) => {
             const key = openModal(
               <ModalAvatarCropper
                 imageUrl={reader.result.toString()}
+                onCancel={() => {
+                  closeModal(key);
+                }}
                 onConfirm={(croppedImageBlobUrl) => {
                   closeModal(key);
                   updateAvatar(croppedImageBlobUrl);
diff --git a/web/src/components/modals/AvatarCropper.tsx b/web/src/components/modals/AvatarCropper.tsx
index 3943479a..1699015e 100644
--- a/web/src/components/modals/AvatarCropper.tsx
+++ b/web/src/components/modals/AvatarCropper.tsx
@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 import { Button } from 'antd';
 import { ModalWrapper } from '../Modal';
 import { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown';
-import { isEnterHotkey } from '@/utils/hot-key';
+import { isEnterHotkey, isEscHotkey } from '@/utils/hot-key';
 
 const createImage = (url: string): Promise<HTMLImageElement> =>
   new Promise((resolve, reject) => {
@@ -102,6 +102,7 @@ function getCroppedImg(
 export const ModalAvatarCropper: React.FC<{
   imageUrl: string;
   onConfirm: (croppedImageBlobUrl: string) => void;
+  onCancel: () => void;
 }> = React.memo((props) => {
   const [crop, setCrop] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
@@ -110,6 +111,9 @@ export const ModalAvatarCropper: React.FC<{
   useGlobalKeyDown((e) => {
     if (isEnterHotkey(e)) {
       handleConfirm();
+    } else if (isEscHotkey(e)) {
+      e.stopPropagation();
+      props.onCancel();
     }
   });