chore: tooltip hover 模式下鼠标移上去时不会关闭，新增 popover 独立文档页面 (#3573)

* chore: popover hover 模式下鼠标移上去时不会关闭，新增 popover 独立文档 * 恢复误改的文档示例
2024-11-29 18:48:45 +08:00 · 2022-02-14 15:31:35 +08:00 · 2022-02-14 15:31:35 +08:00 · 8f7b31cb40
commit 8f7b31cb40
parent 009e865e48
9 changed files with 282 additions and 131 deletions
--- a/docs/zh-CN/components/action.md
+++ b/docs/zh-CN/components/action.md
@ -319,12 +319,12 @@ icon 也可以是 url 地址，比如

 **属性表**

-| 属性名   | 类型                                                                                     | 默认值 | 说明                                                                                                                                      |
-| -------- | ---------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| api      | [Api](../../docs/types/api)                                                              | -      | 请求地址，参考 [api](../../docs/types/api) 格式说明。                                                                                     |
-| redirect | [模板字符串](../../docs/concepts/template#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2) | -      | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。                                                                                        |
+| 属性名   | 类型                                                                                     | 默认值 | 说明                                                                                                                                   |
+| -------- | ---------------------------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| api      | [Api](../../docs/types/api)                                                              | -      | 请求地址，参考 [api](../../docs/types/api) 格式说明。                                                                                  |
+| redirect | [模板字符串](../../docs/concepts/template#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2) | -      | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。                                                                                     |
 | feedback | `DialogObject`                                                                           | -      | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考[Dialog](./Dialog) |
-| messages | `object`                                                                                 | -      | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。                                        |
+| messages | `object`                                                                                 | -      | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。                                     |

 ## 下载请求

@ -862,6 +862,46 @@ action 还可以使用 `body` 来渲染其他组件，让那些不支持行为

 在这种模式下不支持按钮的各种配置项，比如 `label`、`size`、`icon` 等，因为它只作为容器组件，没有展现。

+## 按钮提示
+
+通过 `tooltip` 来设置提示
+
+```schema: scope="body"
+{
+  "label": "弹框",
+  "type": "button",
+  "actionType": "link",
+  "link": "../index",
+  "tooltip": "点击链接跳转"
+}
+```
+
+如果按钮是 disabled，需要使用 `disabledTip`
+
+```schema: scope="body"
+{
+  "label": "弹框",
+  "type": "button",
+  "actionType": "link",
+  "disabled": true,
+  "link": "../index",
+  "disabledTip": "禁用了"
+}
+```
+
+还可以通过 `tooltipPlacement` 设置弹出位置
+
+```schema: scope="body"
+{
+  "label": "弹框",
+  "type": "button",
+  "actionType": "link",
+  "link": "../index",
+  "tooltipPlacement": "right",
+  "tooltip": "点击链接跳转"
+}
+```
+
 ## 通用属性表

 所有`actionType`都支持的通用配置项
--- a/docs/zh-CN/components/card.md
+++ b/docs/zh-CN/components/card.md
@ -495,9 +495,9 @@ order: 31
          "size": "none",
          "style": {
            "display": "flex",
-            "align-items": "center",
-            "justify-content": "space-between",
-            "margin-bottom": "4px"
+            "alignItems": "center",
+            "justifyContent": "space-between",
+            "marginBottom": "4px"
          },
          "body": [
            {
@ -506,8 +506,8 @@ order: 31
              "style": {
                "flex": "1",
                "overflow": "hidden",
-                "white-space": "nowrap",
-                "text-overflow": "ellipsis"
+                "whiteSpace": "nowrap",
+                "textOverflow": "ellipsis"
              },
              "body": "单元格"
            },
@ -526,7 +526,7 @@ order: 31
          "size": "none",
          "style": {
            "color": "#999",
-            "font-size": "12px"
+            "fontSize": "12px"
          },
          "body": "描述信息"
        }
--- a/docs/zh-CN/components/popover.md
+++ b/docs/zh-CN/components/popover.md
@ -0,0 +1,195 @@
+---
+title: PopOver 弹出提示
+description:
+type: 0
+group: ⚙ 功能
+menuName: popover
+icon:
+order: 60
+---
+
+popover 不是一个独立组件，它是嵌入到其它组件中使用的，目前可以在以下组件中配置
+
+- table 的 column
+- list 的 column
+- static
+- cards 里的字段
+
+## 基本配置
+
+比如在 CRUD 的 tpl 中，可以默认截断显示，然后加上 popOver 来显示全部内容
+
+```schema: scope="body"
+{
+    "type": "crud",
+    "api": "/api/mock2/sample?waitSeconds=1",
+    "columns": [
+        {
+            "type": "tpl",
+            "name": "engine",
+            "label": "Rendering engine",
+            "tpl": "${engine|truncate:6}",
+            "popOver": "${engine}"
+        }
+    ]
+}
+```
+
+> 上面的 popOver 精简写法只支持 1.6.5 及以上版本，之前版本需要使用 "popOver": {"body": "$engine"}
+
+## 在其它组件里的示例
+
+```schema: scope="body"
+[
+  {
+    "type": "form",
+    "body": [
+      {
+        "name": "static",
+        "type": "static",
+        "label": "静态展示",
+        "value": "static",
+        "popOver": "弹出内容"
+      }
+    ]
+  },
+  {
+    "type": "service",
+    "api": "/api/mock2/sample?perPage=5",
+    "body": [
+      {
+        "type": "list",
+        "source": "$rows",
+        "listItem": {
+          "body": [
+            {
+              "type": "hbox",
+              "columns": [
+                {
+                  "label": "Engine",
+                  "name": "engine",
+                  "popOver": "弹出内容"
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ]
+  },
+  {
+    "type": "service",
+    "api": "/api/mock2/sample?perPage=5",
+    "body": {
+      "type": "cards",
+      "source": "$rows",
+      "card": {
+        "body": [
+          {
+            "label": "Engine",
+            "name": "engine",
+            "popOver": "弹出内容"
+          }
+        ]
+      }
+    }
+  }
+]
+```
+
+## 更多配置
+
+可以配置触发条件，是否显示 icon，title 等，具体请参考后面的配置列表
+
+```schema: scope="body"
+{
+    "type": "crud",
+    "api": "/api/mock2/sample?waitSeconds=1",
+    "columns": [
+        {
+            "type": "tpl",
+            "name": "engine",
+            "label": "Rendering engine",
+            "tpl": "${engine|truncate:6}",
+            "popOver": {
+                "trigger": "hover",
+                "position": "left-top",
+                "showIcon": false,
+                "title": "标题",
+                "body": {
+                    "type": "tpl",
+                    "tpl": "${engine}"
+                }
+            }
+        }
+    ]
+}
+```
+
+## popOverEnableOn
+
+可以给列上配置`popOverEnableOn`属性，该属性为[表达式](../../docs/concepts/expression)，通过[表达式](../../docs/concepts/expression)配置当前行是否启动`popOver`功能
+
+```schema: scope="body"
+{
+    "type": "crud",
+    "api": "/api/mock2/sample?waitSeconds=1",
+    "columns": [
+        {
+            "name": "id",
+            "label": "ID",
+            "popOver": {
+                "body": {
+                    "type": "tpl",
+                    "tpl": "${id}"
+                }
+            },
+            "popOverEnableOn": "this.id == 1"
+        },
+        {
+            "name": "engine",
+            "label": "Rendering engine",
+            "popOver": {
+                "body": {
+                    "type": "tpl",
+                    "tpl": "${engine}"
+                }
+            }
+        }
+    ]
+}
+```
+
+## 属性列表
+
+- `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。
+- `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。
+- `position` 配置弹出位置，只有 `popOver` 模式有用，默认是自适应。
+  可选参数：
+
+  - `center`
+  - `left-top`
+  - `right-top`
+  - `left-bottom`
+  - `right-bottom`
+
+  atX-atY-myX-myY
+  即：对齐目标的位置-对齐自己的位置
+
+  - `left-top-right-bottom` 在目标位置的左上角显示。
+  - `left-center-right-center` 在目标的左侧显示，垂直对齐。
+  - ...
+
+  固定位置
+
+  - `fixed-center`
+  - `fixed-left-top`
+  - `fixed-right-top`
+  - `fixed-left-bottom`
+  - `fixed-right-bottom`。
+
+- `offset` 默认 `{top: 0, left: 0}`，如果要来一定的偏移请设置这个。
+- `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。
+- `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。
+- `title` 弹出框的标题。
+- `body` 弹出框的内容。
--- a/docs/zh-CN/components/table.md
+++ b/docs/zh-CN/components/table.md
@ -623,7 +623,7 @@ order: 67

 ### 弹出框（popOver）

-可以给列上配置`popOver`属性，会在该列的内容区里，渲染一个图标，点击会显示弹出框，用于展示内容
+可以给列上配置 `popOver` 属性，会在该列的内容区里，渲染一个图标，点击会显示弹出框，用于展示内容

 ```schema: scope="body"
 {
@ -648,104 +648,7 @@ order: 67
 }
 ```

-可以结合 truncate 用来优化表格中的长内容展示，比如默认只展示 20 个字符，剩下的点击查看更多出现。
-
-```schema: scope="body"
-{
-    "type": "crud",
-    "api": "/api/mock2/sample?waitSeconds=1",
-    "columns": [
-        {
-            "name": "id",
-            "label": "ID"
-        },
-        {
-            "type": "tpl",
-            "name": "engine",
-            "label": "Rendering engine",
-            "tpl": "${engine|truncate:2}",
-            "popOver": {
-                "trigger": "hover",
-                "position": "left-top",
-                "showIcon": false,
-                "body": {
-                    "type": "tpl",
-                    "tpl": "${engine}"
-                }
-            }
-        }
-    ]
-}
-```
-
-> 示例内容没那么长，直接配置成 2 个字符了。
-
-可以给列上配置`popOverEnableOn`属性，该属性为[表达式](../../docs/concepts/expression)，通过[表达式](../../docs/concepts/expression)配置当前行是否启动`popOver`功能
-
-```schema: scope="body"
-{
-    "type": "crud",
-    "api": "/api/mock2/sample?waitSeconds=1",
-    "columns": [
-        {
-            "name": "id",
-            "label": "ID",
-            "popOver": {
-                "body": {
-                    "type": "tpl",
-                    "tpl": "${id}"
-                }
-            },
-            "popOverEnableOn": "this.id == 1"
-        },
-        {
-            "name": "engine",
-            "label": "Rendering engine",
-            "popOver": {
-                "body": {
-                    "type": "tpl",
-                    "tpl": "${engine}"
-                }
-            }
-        }
-    ]
-}
-```
-
-`popOver` 配置详情：
-
- `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。
- `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。
- `position` 配置弹出位置，只有 `popOver` 模式有用。
-  可选参数：
-
-  - `center`
-
-  - `left-top`
-  - `right-top`
-  - `left-bottom`
-  - `right-bottom`
-
-  atX-atY-myX-myY
-  即：对齐目标的位置-对齐自己的位置
-
-  - `left-top-right-bottom` 在目标位置的左上角显示。
-  - `left-center-right-center` 在目标的左侧显示，垂直对齐。
-  - ...
-
-  固定位置
-
-  - `fixed-center`
-  - `fixed-left-top`
-  - `fixed-right-top`
-  - `fixed-left-bottom`
-  - `fixed-right-bottom`。
-
- `offset` 默认 `{top: 0, left: 0}`，如果要来一定的偏移请设置这个。
- `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。
- `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。
- `title` 弹出框的标题。
- `body` 弹出框的内容。
+popOver 的其它配置请参考 [popover](./popover)

 ### 表头样式

--- a/examples/components/Components.tsx
+++ b/examples/components/Components.tsx
@ -188,6 +188,14 @@ export const components = [
        component: React.lazy(() =>
          import('../../docs/zh-CN/components/anchor-nav.md').then(wrapDoc)
        )
+      },
+
+      {
+        label: 'PopOver 弹出提示',
+        path: '/zh-CN/components/popover',
+        component: React.lazy(() =>
+          import('../../docs/zh-CN/components/popover.md').then(wrapDoc)
+        )
      }
    ]
  },
--- a/examples/components/Index.jsx
+++ b/examples/components/Index.jsx
@ -1,16 +1,16 @@
 export default {
  type: 'page',
-  body: {
-    type: 'form',
-    mode: 'horizontal',
-    api: '/api/mock2/form/saveForm',
-    debug: true,
-    body: [
-      {
-        type: 'input-date',
-        name: 'date',
-        label: '日期'
-      }
-    ]
-  }
+  title: '标题',
+  remark: {
+    title: '标题',
+    body: '这是一段描述问题，注意到了没，还可以设置标题。而且只有点击了才弹出来。',
+    icon: 'question-mark',
+    placement: 'right',
+    trigger: 'click',
+    rootClose: true
+  },
+  body: '内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}',
+  aside: '边栏部分',
+  toolbar: '工具栏',
+  initApi: '/api/mock2/page/initData'
 };
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@ -41,6 +41,8 @@ export class Tooltip extends React.Component<TooltipProps> {
      positionTop,
      classnames: cx,
      activePlacement,
+      onMouseEnter,
+      onMouseLeave,
      ...rest
    } = this.props;

@ -53,6 +55,8 @@ export class Tooltip extends React.Component<TooltipProps> {
          className
        )}
        style={style}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
        role="tooltip"
      >
        <div className={cx(`Tooltip-arrow`)} {...arrowProps} />
--- a/src/components/TooltipWrapper.tsx
+++ b/src/components/TooltipWrapper.tsx
@ -52,7 +52,7 @@ export class TooltipWrapper extends React.Component<
    placement: 'top',
    trigger: ['hover', 'focus'],
    rootClose: false,
-    delay: 200
+    delay: 300
  };

  target: HTMLElement;
@ -106,13 +106,7 @@ export class TooltipWrapper extends React.Component<
  }

  handleShow() {
-    // clearTimeout(this.timer);
-    // const {
-    //     delay
-    // } = this.props;
-
-    // this.timer = setTimeout(this.show, delay);
-    // 顺速让即将消失的层消失。
+    this.timer && clearTimeout(this.timer);
    waitToHide && waitToHide();
    this.show();
  }
@ -217,6 +211,8 @@ export class TooltipWrapper extends React.Component<
        <Tooltip
          title={typeof tooltip !== 'string' ? tooltip.title : undefined}
          className={tooltipClassName}
+          onMouseEnter={~triggers.indexOf('hover') && this.handleMouseOver}
+          onMouseLeave={~triggers.indexOf('hover') && this.handleMouseOut}
        >
          {tooltip && (tooltip as TooltipObject).render ? (
            this.state.show ? (
--- a/src/renderers/PopOver.tsx
+++ b/src/renderers/PopOver.tsx
@ -224,6 +224,11 @@ export const HocPopOver =
            ],
            ...popOver
          };
+        } else if (typeof popOver === 'string') {
+          schema = {
+            type: 'panel',
+            body: popOver
+          };
        } else if (popOver) {
          schema = {
            type: 'panel',