From c93c1d0b1e9fe07c019d931c957783f7eca3ac59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E7=86=A0?= <lianjie.lj@alibaba-inc.com>
Date: Tue, 12 May 2020 20:58:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20add=20tip=20on=20setter?=
 =?UTF-8?q?=20title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/field/fields.tsx           | 46 ++++++++++++++++---
 .../src/components/field/inlinetip.tsx        | 25 ++++++++++
 .../src/components/settings/settings-pane.tsx |  3 +-
 3 files changed, 66 insertions(+), 8 deletions(-)
 create mode 100644 packages/editor-skeleton/src/components/field/inlinetip.tsx

diff --git a/packages/editor-skeleton/src/components/field/fields.tsx b/packages/editor-skeleton/src/components/field/fields.tsx
index 30b28d7cf..6f949dc7c 100644
--- a/packages/editor-skeleton/src/components/field/fields.tsx
+++ b/packages/editor-skeleton/src/components/field/fields.tsx
@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import { isObject } from 'lodash';
 import classNames from 'classnames';
 import { Icon } from '@alifd/next';
 import { Title, Tip } from '@ali/lowcode-editor-core';
@@ -7,6 +8,7 @@ import { PopupPipe, PopupContext } from '../popup';
 import { intl, intlNode } from '../../locale';
 import './index.less';
 import { IconClear } from 'editor-skeleton/src/icons/clear';
+import InlineTip from './inlinetip';
 
 export interface FieldProps {
   className?: string;
@@ -14,6 +16,8 @@ export interface FieldProps {
   defaultDisplay?: 'accordion' | 'inline' | 'block';
   collapsed?: boolean;
   valueState?: number;
+  name?: string;
+  tip?: any;
   onExpandChange?: (expandState: boolean) => void;
   onClear?: () => void;
 }
@@ -76,11 +80,36 @@ export class Field extends Component<FieldProps> {
     }
   }
 
+  getTipContent(propName: string, tip?: any): any {
+    let tipContent = (
+      <div>
+        <div>属性：{propName}</div>
+      </div>
+    );
+
+    if (isObject(tip)) {
+      tipContent = (
+        <div>
+          <div>属性：{propName}</div>
+          <div>说明：{tip.content}</div>
+        </div>
+      );
+    } else if (tip) {
+      tipContent = (
+        <div>
+          <div>属性：{propName}</div>
+          <div>说明：{tip}</div>
+        </div>
+      );
+    }
+    return tipContent;
+  }
+
   render() {
-    const { className, children, title, valueState, onClear } = this.props;
+    const { className, children, title, valueState, onClear, name: propName, tip } = this.props;
     const { display, collapsed } = this.state;
     const isAccordion = display === 'accordion';
-
+    const tipContent = this.getTipContent(propName, tip);
     return (
       <div
         className={classNames(`lc-field lc-${display}-field`, className, {
@@ -91,6 +120,7 @@ export class Field extends Component<FieldProps> {
           <div className="lc-field-title">
             {createValueState(valueState, onClear)}
             <Title title={title || ''} />
+            <InlineTip position="top">{tipContent}</InlineTip>
           </div>
           {isAccordion && <Icon className="lc-field-icon" type="arrow-up" size="xs" />}
         </div>
@@ -115,7 +145,7 @@ export class Field extends Component<FieldProps> {
  */
 function createValueState(valueState?: number, onClear?: () => void) {
   let tip: any = null;
-  let className: string = 'lc-valuestate';
+  let className = 'lc-valuestate';
   let icon: any = null;
   if (valueState) {
     if (valueState < 0) {
@@ -139,10 +169,12 @@ function createValueState(valueState?: number, onClear?: () => void) {
     // unset 占位空间
   }
 
-  return <i className={className} onClick={onClear}>
-    {icon}
-    {tip && <Tip>{tip}</Tip>}
-  </i>;
+  return (
+    <i className={className} onClick={onClear}>
+      {icon}
+      {tip && <Tip>{tip}</Tip>}
+    </i>
+  );
 }
 
 export interface PopupFieldProps extends FieldProps {
diff --git a/packages/editor-skeleton/src/components/field/inlinetip.tsx b/packages/editor-skeleton/src/components/field/inlinetip.tsx
new file mode 100644
index 000000000..39dd55543
--- /dev/null
+++ b/packages/editor-skeleton/src/components/field/inlinetip.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export interface InlineTipProps {
+  position: string;
+  theme?: 'green' | 'black';
+  children: React.ReactNode;
+}
+
+export default class InlineTip extends React.Component<InlineTipProps> {
+  static displayName = 'InlineTip';
+
+  static defaultProps = {
+    position: 'auto',
+    theme: 'black',
+  };
+
+  render(): React.ReactNode {
+    const { position, theme, children } = this.props;
+    return (
+      <div style={{ display: 'none' }} data-role="tip" data-position={position} data-theme={theme}>
+        {children}
+      </div>
+    );
+  }
+}
diff --git a/packages/editor-skeleton/src/components/settings/settings-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-pane.tsx
index bffa799fa..cb6ed7ec9 100644
--- a/packages/editor-skeleton/src/components/settings/settings-pane.tsx
+++ b/packages/editor-skeleton/src/components/settings/settings-pane.tsx
@@ -66,6 +66,7 @@ class SettingFieldView extends Component<{ field: SettingField }> {
         valueState: field.isRequired ? 10 : field.valueState,
         onExpandChange: (expandState) => field.setExpanded(expandState),
         onClear: () => field.clearValue(),
+        ...extraProps,
       },
       createSetterContent(setterType, {
         ...shallowIntl(setterProps),
@@ -91,7 +92,7 @@ class SettingFieldView extends Component<{ field: SettingField }> {
             value,
           });
           field.setValue(value);
-        }
+        },
       }),
       extraProps.forceInline ? 'plain' : extraProps.display,
     );