feat(common-ui): add HelpTip

Author: liujuping

docs/docs/api/commonUI.md

@@ -19,6 +19,16 @@ CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开
 | direction | tip 的方向   | 'top' \| 'bottom' \| 'left' \| 'right' |        |
 
 
+### HelpTip
+
+带 help icon 的提示组件
+
+| 参数      | 说明   | 类型                              | 默认值 |
+|-----------|--------|-----------------------------------|--------|
+| help      | 描述   | IPublicTypeHelpTipConfig          |        |
+| direction | 方向   | IPublicTypeTipConfig['direction'] | 'top'  |
+| size      | 方向   | IconProps['size']                 | 'small'|
+
 ### Title
 
 标题组件

packages/editor-core/src/widgets/tip/help-tips.tsx

@@ -0,0 +1,40 @@
+import { IPublicTypeHelpTipConfig, IPublicTypeTipConfig } from '@alilc/lowcode-types';
+import { Tip } from './tip';
+import { Icon } from '@alifd/next';
+import { IconProps } from '@alifd/next/types/icon';
+
+export function HelpTip({
+  help,
+  direction = 'top',
+  size = 'small',
+}: {
+  help: IPublicTypeHelpTipConfig;
+  direction?: IPublicTypeTipConfig['direction'];
+  size?: IconProps['size'];
+}) {
+  if (typeof help === 'string') {
+    return (
+      <div>
+        <Icon type="help" size={size} className="lc-help-tip" />
+        <Tip direction={direction}>{help}</Tip>
+      </div>
+    );
+  }
+
+  if (typeof help === 'object' && help.url) {
+    return (
+      <div>
+        <a href={help.url} target="_blank" rel="noopener noreferrer">
+          <Icon type="help" size={size} className="lc-help-tip" />
+        </a>
+        <Tip direction={direction}>{help.content}</Tip>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <Icon type="help" size="small" className="lc-help-tip" />
+      <Tip direction={direction}>{help.content}</Tip>
+    </div>
+  );
+}

packages/editor-core/src/widgets/tip/index.ts

@@ -2,3 +2,4 @@ import './style.less';
 
 export * from './tip';
 export * from './tip-container';
+export * from './help-tips';

packages/editor-skeleton/src/components/widget-views/index.tsx

@@ -1,7 +1,6 @@
 import { Component, ReactElement } from 'react';
-import { Icon } from '@alifd/next';
 import classNames from 'classnames';
-import { Title, observer, Tip } from '@alilc/lowcode-editor-core';
+import { Title, observer, HelpTip } from '@alilc/lowcode-editor-core';
 import { DockProps } from '../../types';
 import { PanelDock } from '../../widget/panel-dock';
 import { composeTitle } from '../../widget/utils';
@@ -26,25 +25,6 @@ export function DockView({ title, icon, description, size, className, onClick }:
   );
 }
 
-function HelpTip({ tip }: any) {
-  if (tip && tip.url) {
-    return (
-      <div>
-        <a href={tip.url} target="_blank" rel="noopener noreferrer">
-          <Icon type="help" size="small" className="lc-help-tip" />
-        </a>
-        <Tip>{tip.content}</Tip>
-      </div>
-    );
-  }
-  return (
-    <div>
-      <Icon type="help" size="small" className="lc-help-tip" />
-      <Tip>{tip.content}</Tip>
-    </div>
-  );
-}
-
 @observer
 export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
   private lastActived = false;
@@ -328,7 +308,7 @@ class PanelTitle extends Component<{ panel: Panel; className?: string }> {
         data-name={panel.name}
       >
         <Title title={panel.title || panel.name} />
-        {panel.help ? <HelpTip tip={panel.help} /> : null}
+        {panel.help ? <HelpTip help={panel.help} /> : null}
       </div>
     );
   }

packages/shell/src/api/commonUI.tsx

@@ -1,5 +1,6 @@
 import { IPublicApiCommonUI, IPublicModelPluginContext, IPublicTypeContextMenuAction } from '@alilc/lowcode-types';
 import {
+  HelpTip,
   IEditor,
   Tip as InnerTip,
   Title as InnerTitle,
@@ -46,6 +47,11 @@ export class CommonUI implements IPublicApiCommonUI {
   get Tip() {
     return InnerTip;
   }
+
+  get HelpTip() {
+    return HelpTip;
+  }
+
   get Title() {
     return InnerTitle;
   }

packages/types/src/shell/api/commonUI.ts

@@ -1,6 +1,7 @@
-import { ReactElement } from 'react';
-import { IPublicTypeContextMenuAction, IPublicTypeTitleContent } from '../type';
+import React, { ReactElement } from 'react';
+import { IPublicTypeContextMenuAction, IPublicTypeHelpTipConfig, IPublicTypeTipConfig, IPublicTypeTitleContent } from '../type';
 import { Balloon, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Dropdown, Form, Icon, Input, Loading, Message, Overlay, Pagination, Radio, Search, Select, SplitButton, Step, Switch, Tab, Table, Tree, TreeSelect, Upload, Divider } from '@alifd/next';
+import { IconProps } from '@alifd/next/types/icon';
 
 export interface IPublicApiCommonUI {
   Balloon: typeof Balloon;
@@ -33,22 +34,41 @@ export interface IPublicApiCommonUI {
 
   /**
    * Title 组件
-   * @experimental unstable API, pay extra caution when trying to use this
    */
-  get Tip(): React.ComponentClass<{}>;
+  get Tip(): React.ComponentClass<IPublicTypeTipConfig>;
+
+  /**
+   * HelpTip 组件
+   */
+  get HelpTip(): React.VFC<{
+    help: IPublicTypeHelpTipConfig;
+
+    /**
+     * 方向
+     * @default 'top'
+     */
+    direction: IPublicTypeTipConfig['direction'];
+
+    /**
+     * 大小
+     * @default 'small'
+     */
+    size: IconProps['size'];
+  }>;
 
   /**
    * Tip 组件
-   * @experimental unstable API, pay extra caution when trying to use this
    */
   get Title(): React.ComponentClass<{
     title: IPublicTypeTitleContent | undefined;
     match?: boolean;
     keywords?: string | null;
   }>;
 
-  get ContextMenu(): (props: {
+  get ContextMenu(): ((props: {
     menus: IPublicTypeContextMenuAction[];
     children: React.ReactElement[] | React.ReactElement;
-  }) => ReactElement;
-}
+  }) => ReactElement) & {
+    create(menus: IPublicTypeContextMenuAction[], event: MouseEvent | React.MouseEvent): void;
+  };
+}