kafka-manager 2.0

kafka-manager-console/src/container/full-screen/index.less

@@ -0,0 +1,18 @@
+.full-screen-mark {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1050;
+  .full-screen-content {
+    width: 80%;
+    box-shadow: 0 4px 12px 0;
+    border-radius: 4px;
+    margin: 10% auto;
+    background-color: #fff;
+    padding: 20px;
+    overflow: hidden;
+  }
+}

kafka-manager-console/src/container/full-screen/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import './index.less';
+import { fullScreen } from 'store/full-screen';
+import { observer } from 'mobx-react';
+
+@observer
+export class FullScreen extends React.Component {
+
+  public handleClose = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if ((event.target as any).nodeName === 'SECTION') fullScreen.close();
+  }
+
+  public render() {
+    if (!fullScreen.content) return null;
+    return (
+      <section className="full-screen-mark" onClick={this.handleClose}>
+        <div className="full-screen-content">
+          {fullScreen.content}
+        </div>
+      </section>
+    );
+  }
+}