Add popup header

source/Component/Popup/Popup.scss

@@ -1,5 +1,7 @@
 @import "../Theme/Theme.scss";
 
+$header-height: 32px;
+
 @keyframes show-scale{
     from {
         transform: scale3d(1.15, 1.15, 1);
@@ -43,8 +45,39 @@ div.popup-layer {
     overflow: hidden;
 
     div.popup-layer-header {
-        min-height: 32px;
-        max-height: 32px;
+        min-height: $header-height;
+        max-height: $header-height;
+        height: $header-height;
+        display: flex;
+        width: 100%;
+
+        div.header-text {
+            width: calc( 100% - 32px );
+            flex-shrink: 1;
+            display: flex;
+            align-items: center;
+            user-select: none;
+            
+            span {
+                padding-left: 8px;
+                display: inline-block;
+                vertical-align: middle;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+
+        div.header-close-icon {
+            width: $header-height;
+            height: $header-height;
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            user-select: none;
+            cursor: pointer;
+        }
     }
 }
 
@@ -52,6 +85,11 @@ div.popup-layer.dark {
 
     div.popup-layer-header {
         background-color: $lt-bg-color-lvl3-dark;
+
+        div.header-close-icon:hover {
+            background-color: $lt-bg-color-lvl2-dark;
+            color: $lt-red;
+        }
     }
 }
 
@@ -59,6 +97,11 @@ div.popup-layer.light {
 
     div.popup-layer-header {
         background-color: $lt-bg-color-lvl3-light;
+
+        div.header-close-icon:hover {
+            background-color: $lt-bg-color-lvl2-light;
+            color: $lt-red;
+        }
     }
 }
 

source/Component/Popup/Popup.tsx

@@ -2,6 +2,7 @@ import { Component, ReactNode } from "react";
 import { IMixinStatusProps, useStatusWithEvent } from "@Context/Status";
 import { BackgroundLevel, Theme } from "@Component/Theme/Theme";
 import { Popup as PopupModel } from "@Context/Popups";
+import { Icon } from "@fluentui/react";
 import "./Popup.scss";
 
 interface IPopupProps {}
@@ -59,6 +60,22 @@ class Popup extends Component<IPopupProps & IMixinStatusProps> {
         }
     }
 
+    public renderHeader(popup: PopupModel): ReactNode {
+        return <div className="popup-layer-header">
+            <div className="header-text">
+                {popup.onRenderHeader()}
+            </div>
+            <div
+                className="header-close-icon"
+                onClick={() => {
+                    popup.onClose();
+                }}
+            >
+                <Icon iconName="CalculatorMultiply"/>
+            </div>
+        </div>
+    }
+
     public renderLayer(popup: PopupModel) {
         const pageWidth = document.documentElement.clientWidth;
         const pageHeight = document.documentElement.clientHeight;
@@ -77,9 +94,7 @@ class Popup extends Component<IPopupProps & IMixinStatusProps> {
             backgroundLevel={BackgroundLevel.Level4}
             className="popup-layer show-scale"
         >
-            <div className="popup-layer-header">
-                
-            </div>
+            {this.renderHeader(popup)}
         </Theme>
     }