Add drag layer

source/Component/LoadFile/LoadFile.scss

@@ -3,6 +3,12 @@
 div.load-file-layer-root {
 	position: fixed;
 	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 20px;
+
+	div.load-file-layer {
 		width: 100%;
 		height: 100%;
 		display: flex;
@@ -10,8 +16,10 @@ div.load-file-layer-root {
 		justify-content: center;
 		align-items: center;
 		flex-wrap: wrap;
+		border-radius: 3px;
 
 		div {
+			pointer-events: none;
 			user-select: none;
 			text-align: center;
 			width: 100%;
@@ -28,11 +36,20 @@ div.load-file-layer-root {
 			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;
+	}
 }

source/Component/LoadFile/LoadFile.tsx

@@ -4,13 +4,24 @@ 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="load-file-layer">
 				<div className="drag-icon">
 					<Icon iconName="KnowledgeArticle"/>
 				</div>
@@ -20,11 +31,38 @@ class LoadFile extends Component {
 				<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;
 	}
 }