From afc775856ce5e3403e984403a73d75b077471d53 Mon Sep 17 00:00:00 2001
From: "wuyue.xht" <wuyue.xht@alibaba-inc.com>
Date: Thu, 11 Jun 2020 10:53:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20panel=E5=A2=9E=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=9F=8B=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/widget-views.tsx           | 36 ++++++++++---------
 .../src/layouts/left-fixed-pane.tsx           | 30 +++++++---------
 packages/editor-skeleton/src/widget/panel.ts  |  3 +-
 3 files changed, 33 insertions(+), 36 deletions(-)

diff --git a/packages/editor-skeleton/src/components/widget-views.tsx b/packages/editor-skeleton/src/components/widget-views.tsx
index 13dad59f8..de85ddce8 100644
--- a/packages/editor-skeleton/src/components/widget-views.tsx
+++ b/packages/editor-skeleton/src/components/widget-views.tsx
@@ -27,7 +27,7 @@ function HelpTip({ tip }: any) {
     return (
       <div>
         <a href={tip.url} target="_blank" rel="noopener noreferrer">
-          <Icon type="help" size="small" className="lc-help-tip"/>
+          <Icon type="help" size="small" className="lc-help-tip" />
         </a>
         <Tip>{tip.content}</Tip>
       </div>
@@ -35,10 +35,10 @@ function HelpTip({ tip }: any) {
   }
   return (
     <div>
-      <Icon type="help" size="small" className="lc-help-tip"/>
+      <Icon type="help" size="small" className="lc-help-tip" />
       <Tip>{tip.content}</Tip>
     </div>
-  )
+  );
 }
 
 @observer
@@ -49,7 +49,7 @@ export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
   componentDidUpdate() {
     this.checkActived();
   }
-  private lastActived: boolean = false;
+  private lastActived = false;
   checkActived() {
     const { dock } = this.props;
     if (dock.actived !== this.lastActived) {
@@ -77,12 +77,10 @@ export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
   }
 }
 
-export class DialogDockView extends Component {
-
-}
+export class DialogDockView extends Component {}
 
 @observer
-export class TitledPanelView extends Component<{ panel: Panel }> {
+export class TitledPanelView extends Component<{ panel: Panel; area?: string }> {
   shouldComponentUpdate() {
     return false;
   }
@@ -92,7 +90,7 @@ export class TitledPanelView extends Component<{ panel: Panel }> {
   componentDidUpdate() {
     this.checkVisible();
   }
-  private lastVisible: boolean = false;
+  private lastVisible = false;
   checkVisible() {
     const { panel } = this.props;
     const currentVisible = panel.inited && panel.visible;
@@ -106,14 +104,17 @@ export class TitledPanelView extends Component<{ panel: Panel }> {
     }
   }
   render() {
-    const { panel } = this.props;
+    const { panel, area } = this.props;
     if (!panel.inited) {
       return null;
     }
     return (
-      <div className={classNames('lc-titled-panel', {
-        hidden: !panel.visible,
-      })}>
+      <div
+        className={classNames('lc-titled-panel', {
+          hidden: !panel.visible,
+        })}
+        id={`${area || ''}-${panel.name}`}
+      >
         <PanelTitle panel={panel} />
         <div className="lc-panel-body">{panel.body}</div>
       </div>
@@ -122,7 +123,7 @@ export class TitledPanelView extends Component<{ panel: Panel }> {
 }
 
 @observer
-export class PanelView extends Component<{ panel: Panel }> {
+export class PanelView extends Component<{ panel: Panel; area?: string }> {
   shouldComponentUpdate() {
     return false;
   }
@@ -132,7 +133,7 @@ export class PanelView extends Component<{ panel: Panel }> {
   componentDidUpdate() {
     this.checkVisible();
   }
-  private lastVisible: boolean = false;
+  private lastVisible = false;
   checkVisible() {
     const { panel } = this.props;
     const currentVisible = panel.inited && panel.visible;
@@ -150,7 +151,7 @@ export class PanelView extends Component<{ panel: Panel }> {
     }
   }
   render() {
-    const { panel } = this.props;
+    const { panel, area } = this.props;
     if (!panel.inited) {
       return null;
     }
@@ -159,6 +160,7 @@ export class PanelView extends Component<{ panel: Panel }> {
         className={classNames('lc-panel', {
           hidden: !panel.visible,
         })}
+        id={`${area || ''}-${panel.name}`}
       >
         {panel.body}
       </div>
@@ -233,7 +235,7 @@ export class WidgetView extends Component<{ widget: IWidget }> {
   componentDidUpdate() {
     this.checkVisible();
   }
-  private lastVisible: boolean = false;
+  private lastVisible = false;
   checkVisible() {
     const { widget } = this.props;
     const currentVisible = widget.visible;
diff --git a/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx b/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx
index 2ad17c903..1a7359d38 100644
--- a/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx
+++ b/packages/editor-skeleton/src/layouts/left-fixed-pane.tsx
@@ -25,19 +25,17 @@ export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, P
           'lc-area-visible': area.visible,
         })}
       >
-        {
-          !hideTitleBar && (
-            <Button
-              text
-              className="lc-pane-close"
-              onClick={() => {
-                area.setVisible(false);
-              }}
-            >
-              <Icon type="close" />
-            </Button>
-          )
-        }
+        {!hideTitleBar && (
+          <Button
+            text
+            className="lc-pane-close"
+            onClick={() => {
+              area.setVisible(false);
+            }}
+          >
+            <Icon type="close" />
+          </Button>
+        )}
         <Contents area={area} />
       </div>
     );
@@ -51,10 +49,6 @@ class Contents extends Component<{ area: Area<PanelConfig, Panel> }> {
   }
   render() {
     const { area } = this.props;
-    return (
-      <Fragment>
-        {area.container.items.map((panel) => panel.content)}
-      </Fragment>
-    );
+    return <Fragment>{area.container.items.map((panel) => panel.content)}</Fragment>;
   }
 }
diff --git a/packages/editor-skeleton/src/widget/panel.ts b/packages/editor-skeleton/src/widget/panel.ts
index 3f2699fe9..469db73d5 100644
--- a/packages/editor-skeleton/src/widget/panel.ts
+++ b/packages/editor-skeleton/src/widget/panel.ts
@@ -57,9 +57,10 @@ export default class Panel implements IWidget {
       return createElement(PanelView, {
         panel: this,
         key: this.id,
+        area: this.parent?.name,
       });
     }
-    return createElement(TitledPanelView, { panel: this, key: this.id });
+    return createElement(TitledPanelView, { panel: this, key: this.id, area: this.parent?.name });
   }
 
   readonly title: TitleContent;