fix: 🐛 add tip on setter title

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 {

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>
+    );
+  }
+}

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,
     );