From 46784089638433b9bee69c30e8611ef87aba7a9c Mon Sep 17 00:00:00 2001
From: "shuaige.zsg" <shuaige.zsg@alibaba-inc.com>
Date: Wed, 27 May 2020 15:29:12 +0800
Subject: [PATCH] feat: add URL link for setter titles

---
 .../editor-core/src/widgets/title/index.tsx   | 19 +++++++++++++++++--
 .../src/components/field/fields.tsx           | 13 +++++++++++--
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/editor-core/src/widgets/title/index.tsx b/packages/editor-core/src/widgets/title/index.tsx
index 76e341c80..1006935ed 100644
--- a/packages/editor-core/src/widgets/title/index.tsx
+++ b/packages/editor-core/src/widgets/title/index.tsx
@@ -7,8 +7,23 @@ import { Tip } from '../tip';
 import './title.less';
 
 export class Title extends Component<{ title: TitleContent; className?: string; onClick?: () => void }> {
+  constructor(props: any) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick(e: React.MouseEvent) {
+    const { title, onClick } = this.props as any;
+    const url = title && (title.docUrl || title.url);
+    if (url) {
+      window.open(url);
+      // 防止触发行操作（如折叠面板）
+      e.stopPropagation();
+    }
+    // TODO: 操作交互冲突，目前 mixedSetter 仅有 2 个 setter 注册时用到了 onClick
+    onClick && onClick(e);
+  }
   render() {
-    let { title, className, onClick } = this.props;
+    let { title, className } = this.props;
     if (title == null) {
       return null;
     }
@@ -40,7 +55,7 @@ export class Title extends Component<{ title: TitleContent; className?: string;
           'has-tip': !!tip,
           'only-icon': !title.label
         })}
-        onClick={onClick}
+        onClick={this.handleClick}
       >
         {icon ? <b className="lc-title-icon">{icon}</b> : null}
         {title.label ? intl(title.label) : null}
diff --git a/packages/editor-skeleton/src/components/field/fields.tsx b/packages/editor-skeleton/src/components/field/fields.tsx
index 51b7a2232..dcd1c78bb 100644
--- a/packages/editor-skeleton/src/components/field/fields.tsx
+++ b/packages/editor-skeleton/src/components/field/fields.tsx
@@ -28,6 +28,11 @@ export class Field extends Component<FieldProps> {
     display: this.props.defaultDisplay || 'inline',
   };
 
+  constructor(props: any) {
+    super(props);
+    this.handleClear = this.handleClear.bind(this);
+  }
+
   private toggleExpand = () => {
     const { onExpandChange } = this.props;
     const collapsed = !this.state.collapsed;
@@ -68,6 +73,10 @@ export class Field extends Component<FieldProps> {
     });
     this.dispose = () => observer.disconnect();
   }
+  private handleClear(e: React.MouseEvent) {
+    e.stopPropagation();
+    this.props.onClear && this.props.onClear();
+  }
   componentDidMount() {
     const { defaultDisplay } = this.props;
     if (!defaultDisplay || defaultDisplay === 'inline') {
@@ -118,7 +127,7 @@ export class Field extends Component<FieldProps> {
       >
         <div className="lc-field-head" onClick={isAccordion ? this.toggleExpand : undefined}>
           <div className="lc-field-title">
-            {createValueState(valueState, onClear)}
+            {createValueState(valueState, this.handleClear)}
             <Title title={title || ''} />
             <InlineTip position="top">{tipContent}</InlineTip>
           </div>
@@ -143,7 +152,7 @@ export class Field extends Component<FieldProps> {
  *
  * TODO: turn number to enum
  */
-function createValueState(valueState?: number, onClear?: () => void) {
+function createValueState(valueState?: number, onClear?: (e: React.MouseEvent) => void) {
   let tip: any = null;
   let className = 'lc-valuestate';
   let icon: any = null;