From 4137362501e8dfc9edf5447fd46b560a8cfd25c1 Mon Sep 17 00:00:00 2001
From: MrKBear <mrkbear@qq.com>
Date: Sun, 24 Apr 2022 20:16:03 +0800
Subject: [PATCH] Add drag layer

---
 source/Component/LoadFile/LoadFile.scss | 55 +++++++++++++++--------
 source/Component/LoadFile/LoadFile.tsx  | 58 ++++++++++++++++++++-----
 2 files changed, 84 insertions(+), 29 deletions(-)

diff --git a/source/Component/LoadFile/LoadFile.scss b/source/Component/LoadFile/LoadFile.scss
index 5d29e0e..a1c769a 100644
--- a/source/Component/LoadFile/LoadFile.scss
+++ b/source/Component/LoadFile/LoadFile.scss
@@ -5,34 +5,51 @@ div.load-file-layer-root {
 	z-index: 1000;
 	width: 100%;
 	height: 100%;
-	display: flex;
-	align-content: center;
-	justify-content: center;
-	align-items: center;
-	flex-wrap: wrap;
+	box-sizing: border-box;
+	padding: 20px;
 
-	div {
-		user-select: none;
-		text-align: center;
+	div.load-file-layer {
 		width: 100%;
-	}
+		height: 100%;
+		display: flex;
+		align-content: center;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		border-radius: 3px;
 
-	div.drag-icon {
-		font-weight: 200;
-		font-size: 2.8em;
-	}
+		div {
+			pointer-events: none;
+			user-select: none;
+			text-align: center;
+			width: 100%;
+		}
 
-	div.drag-title {
-		margin-top: 5px;
-		margin-bottom: 5px;
-		font-size: 1.5em;
+		div.drag-icon {
+			font-weight: 200;
+			font-size: 2.8em;
+		}
+
+		div.drag-title {
+			margin-top: 5px;
+			margin-bottom: 5px;
+			font-size: 1.5em;
+		}
 	}
 }
 
 div.load-file-layer-root.light {
-	background-color: rgba($color: #FFFFFF, $alpha: .75);
+	background-color: rgba($color: #FFFFFF, $alpha: .6);
+
+	div.load-file-layer {
+		border: 2px dashed $lt-font-color-normal-light;
+	}
 }
 
 div.load-file-layer-root.dark {
-	background-color: rgba($color: #000000, $alpha: .75);
+	background-color: rgba($color: #000000, $alpha: .6);
+
+	div.load-file-layer {
+		border: 2px dashed $lt-font-color-normal-dark;
+	}
 }
\ No newline at end of file
diff --git a/source/Component/LoadFile/LoadFile.tsx b/source/Component/LoadFile/LoadFile.tsx
index 432b6bc..981e304 100644
--- a/source/Component/LoadFile/LoadFile.tsx
+++ b/source/Component/LoadFile/LoadFile.tsx
@@ -4,27 +4,65 @@ import { Icon } from "@fluentui/react";
 import { Component, ReactNode } from "react";
 import "./LoadFile.scss";
 
-class LoadFile extends Component {
+interface ILoadFileState {
+	show: boolean;
+}
+
+class LoadFile extends Component<{}, ILoadFileState> {
+
+	public state: Readonly<ILoadFileState> = {
+		show: false
+	};
 
 	private renderMask() {
 		return <Theme
 			className="load-file-layer-root"
 			fontLevel={FontLevel.normal}
+			onDragEnter={this.handleWindowsDragOnFiles}
+			onDragLeave={this.handleWindowsDragOffFiles}
 		>
-			<div className="drag-icon">
-				<Icon iconName="KnowledgeArticle"/>
-			</div>
-			<div className="drag-title">
-				<Localization i18nKey="Info.Hint.Load.File.Title"/>
-			</div>
-			<div className="drag-intro">
-				<Localization i18nKey="Info.Hint.Load.File.Intro"/>
+			<div className="load-file-layer">
+				<div className="drag-icon">
+					<Icon iconName="KnowledgeArticle"/>
+				</div>
+				<div className="drag-title">
+					<Localization i18nKey="Info.Hint.Load.File.Title"/>
+				</div>
+				<div className="drag-intro">
+					<Localization i18nKey="Info.Hint.Load.File.Intro"/>
+				</div>
 			</div>
 		</Theme>;
 	}
 
+	private offDragTimer: NodeJS.Timeout | undefined;
+
+	private handleWindowsDragOnFiles = () => {
+		clearTimeout(this.offDragTimer as number | undefined);
+		this.setState({
+			show: true
+		});
+	}
+
+	private handleWindowsDragOffFiles = () => {
+		clearTimeout(this.offDragTimer as number | undefined);
+		this.offDragTimer = setTimeout(() => {
+			this.setState({
+				show: false
+			});
+		});
+	}
+
+	public componentDidMount() {
+		window.addEventListener("dragenter", this.handleWindowsDragOnFiles);
+	}
+
+	public componentWillUnmount() {
+		window.removeEventListener("dragenter", this.handleWindowsDragOnFiles);
+	}
+
 	public render(): ReactNode {
-		return <></>;
+		return this.state.show ? this.renderMask() : null;
 	}
 }